jquery globalcss IE opacidade

Question

Eu estou usando um jQuery globalcss plugin para mudar de estilo globais. Ele não lida com opacidade e IE.

Eu tenho tentado fazê-lo funcionar sem sorte. Aqui está a minha tentativa de forçar o plugin para tentar entender opacidade estilo IE.

function changeCss (property, value, target) {
    if (property === "opacity") {
        $(target).globalcss("filter","alpha(opacity="+value*100+")");   
        /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
        $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); 

    }
    $(target).globalcss(property,value);
}

Blah. Se alguém puder dar uma ajuda, seria óptimo. Obrigado.

Eu estou colando o plugin aqui porque ele não está mais no seu local original é:

/*
 * Global Stylesheet jQuery Plugin
 * Version: 0.1
 * 
 * Enables CSS modification that uses a 'global' stylesheet, rather than inline CSS.
 *
 * Copyright (c) 2009 Jeremy Shipman (http://www.burnbright.co.nz)
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 * 
 * INSTRUCTIONS:
 * use in the same way as the jQuery css function. Eg:
 *  $("some selector").globalcss("style","value");
 *
 * use the globalsetylesheet.print() function to return a string of the global stylesheet
 */
(function($) {

    //global singleton class for 
    globalstylesheet = new function globalStylesheet(){
        if(!document.styleSheets){
            alert("document.Stylesheets not found");
            return false;
        }

        var sheet = null;
        var setrules = Array(); // rule cache

        //set up a dummy noded
        var cssNode = document.createElement('style');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.media = 'screen';
        cssNode.title = 'globalStyleSheet';
        document.getElementsByTagName("head")[0].appendChild(cssNode);

        //find the newly created stylesheet and store reference
        for(var i = 0; i < document.styleSheets.length; i++){
            if(document.styleSheets[i].title == "globalStyleSheet"){
                sheet = document.styleSheets[i];
            }
        }

        //set a CSS rule
        this.setRule = function setRule(selector,ruleText){
            if(setrules[selector] != undefined){
                return setrules[selector];
            }else{
                if(sheet.addRule){ // IE
                    sheet.addRule(selector,ruleText,0);
                }else{
                    sheet.insertRule(selector+'{'+ruleText+'}',0);
                }
                setrules[selector] = this.getRule(selector);
            }
            return setrules[selector];
        }

        //get a saved CSS rule
        this.getRule = function getRule(selector){
            if(setrules[selector] != undefined){
                return setrules[selector];
            }else{
                var rules = allRules();
                for(var i = 0; i < rules.length; i++){
                    if(rules[i].selectorText == selector){
                        return rules[i];
                    }
                }
            }
            return false;
        }

        //helper function to get all rules
        function allRules(){
            if(sheet.cssRules){ //IE
                return sheet.cssRules;
            }else{
                return sheet.rules;
            }
        }

        //print out the stylesheet
        this.print = function print(){
            var styleinfo = "";
            var rules = allRules();
            for(var i = 0; i < rules.length; i++){
                styleinfo+= rules[i].cssText+"\n"
            }
            return styleinfo;
        }

        //use jQuery's css selector function to set the style object
        this.css = function css(jquery,key,value){
            rule = this.setRule(jquery.selector,key+":"+value+";");
            jQuery(rule).css(key,value); 
        }
    }

    //hook new function into jQuery
    jQuery.fn.extend({
        globalcss : function globalcss(key,value){
            globalstylesheet.css(this,key,value);
        }
    });

})(jQuery);

Edit: Eu criei uma demonstração ao vivo jsbin. Por favor, compare em diferentes navegadores. http://jsbin.com/iqadu/edit

Answer 1

UPDATE:

A minha primeira ideia a seguir não era o problema. Acontece que o problema é muito mais prosaica: certifique-se de adicionar um zero antes de números de ponto flutuante menor que 1. Talvez isso seja devido à forma como alças javascript conversão de valores de string para números? Independentemente disso, a adição de um zero antes" .5" corrigiu o problema.

    // works
    var property = "opacity";
    var value = "0.5";
    var target = ".transparency";

    // doesn't work
    var property = "opacity";
    var value = ".5";
    var target = ".transparency";

Dê uma olhada em código de trabalho aqui: http://jsbin.com/ikore3 . BTW, a sua página de demonstração original tinha uma questão javascript com as cintas no lugar errado. Eu reparei isso também.

abaixo é ideia original para o que estava causando isto-- acabou por não ser o problema

Você pode estar executando em um capricho do IE que não tem nada a ver com jQuery: a fim de opacidade para o trabalho, os elementos devem ter " disposição ", que é um estado booleano IE-specific que é desencadeada por CSS tais como altura, largura, zoom, etc. Se um elemento não tem "layout", em seguida, opacidade não vai funcionar.

A solução é adicionar especial CSS para o elemento, a fim de dar-lhe "layout". Não sei se isso é o que está acontecendo no seu caso, mas é fácil o suficiente para verificar adicionando um dos atributos CSS de cedência de layout e ver se o problema desaparece.

A partir http: / /joseph.randomnetworks.com/archives/2006/08/16/css-opacity-in-internet-explorer-ie/ :

Mas simplesmente definindo o filtro / opacidade valor no IE não é suficiente. despeja IE que requer um elemento para ser posicionados em ordem para filtro / opacidade trabalhar. Se o seu elemento não tem uma posição que você pode contornar isso adicionando ‘zoom: 1’ para o seu CSS. Lá são outros hacks para lidar com isso, zoom era o que eu escolhi e parece Para funcionar bem o suficiente.

Em JavaScript você pode descobrir se um elemento em IE tem um componente posição pela verificação element.currentStyle.hasLayout. E se hasLayout é falsa, então o elemento não tem posicionamento CSS.

Se você quiser saber mais sobre este assunto aqui é uma lista de leitura para obter o seu início:

? Explorando OpacityStep-by-Step [ligação quebrada]

Sobre ter disposição

Opacidade @ QuirksMode

Usando o código, aqui está uma maneira possível para garantir Como testar se este é o seu problema ou não:

function changeCss (property, value, target) {
    if (property === "opacity") {
        $(target).globalcss("filter","alpha(opacity="+value*100+")");   
        /* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
        $(target).globalcss("-MS-filter","\"progid:DXImageTransform.Microsoft.Alpha(Opacity="+value*100+")\""); 

        $(target).globalcss("zoom","1");   // ensure the target has layout
    }
    $(target).globalcss(property,value);
}

Versões mais sofisticadas deste iria verificar para ver se o zoom já estava presente, e apenas adicioná-lo se estiver faltando. Você também pode verificar o hasLayout propriedade e só definir o zoom se era falsa, contanto que você se defender contra o caso não-IE onde hasLayout não vai estar lá em tudo.

Se isto não corrigir o problema, você pode postar uma amostra HTML ou URL, para que possamos repro o problema que irá tornar mais fácil para sugerir uma correção? Obrigado!