Question

I have 2 small problems: 1) I set up text shadows in IE7/8/9 using a script based on Kilian Valkof’s plugin. As they are animated, when you mouseover and then mouseout in IE, a black box is produced behind them, which then goes away once the animation for each letter is done. If I comment out the IE plugin, then of course the shadows aren’t rendered in IE, but the black box problem is gone, so there’s something happening between the two plugins that needs a little help. How can I get that black flickering to stop?

Here’s a JSfiddle (Removed)

2) I’m trying to assign a larger width w/in the text shadow plugin to any span.sl-w2 (see code comment ‘UPDATE WIDTH’). The span’s width is set to auto, so how do I get it assigned, ie orig width + some number? Here’s the textShadow plugin (modified):

/* jQuery textShadow plugin for IE
* Version 1.1 (26/02/2010)
* @requires jQuery v1.2+
*
* Copyright (c) 2008 - 2010 Kilian Valkhof (kilianvalkhof.com)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
* MODIFICATIONS made **
*/
(function($) {
  $.fn.textShadowls = function(useroptions) {
   return this.each(function() {
    var obj = $(this);
    // obj.removeTextShadowls(); // Don't know why this is necessary? 
    var col = '#000000'; // %id=?somecolor?%       
    var blurrad = 3; // %id=shblur1%
    var gstr = 8; // %id=shx1%
    var text = "<span class='jQshadls'>" + obj.html() + "</span>";
    var pleft = 3 + 'px';
    var initwd2 = obj.width();  // Should pull width from .sl-w2? I think that's $(this)
    console.log('This Init Width:' + initwd2);        
    var wd = initwd2 + gstr + 'px !important';
    var defaults = {
      color: col,
      blur: blurrad,
      glowstr: gstr,
      opacity: 60
    };
    var options = $.extend(defaults, useroptions);
    options.color = (options.color.length == 4) ? options.color.replace(/#([0-9A-f])([0-9A-f])([0-9A-f])/i, '#$1$1$2$2$3$3') : options.color;
    var filtertext = "glow(strength="+options.glowstr+" color="+options.color+")blur(strength="+options.blur+" direction=45)blur(strength="+options.blur+" direction=90)blur(strength="+options.blur+" direction=135)blur(strength="+options.blur+" direction=180)blur(strength="+options.blur+" direction=225)blur(strength="+options.blur+" direction=270)blur(strength="+options.blur+" direction=315)blur(strength="+options.blur+" direction=360)progid:DXImageTransform.Microsoft.Alpha(opacity="+options.opacity+")";
    if($.browser.msie && options != "") {
      if (obj.is('.sl-w2')) {
        // obj.css({"zoom":"1"}).append(text);
        obj.append(text);  
        obj.children("span.jQshadls").css({
          "position":"absolute",
          "width":wd,  
          "padding-left":pleft,
          "z-index":"-1",
          "zoom":"1",
          "filter":filtertext,
          "-ms-filter":filtertext 
        });
        $('span.sl-w2').css({'width':wd, 'padding-left':pleft});// UPDATE WIDTH 
      } else {
        // obj.css({"zoom":"1"}).append(text);
        obj.append(text);  
        obj.children("span.jQshadls").css({
          "position":"absolute",
          "z-index":"-1",
          "zoom":"1",
          "filter":filtertext,
          "-ms-filter":filtertext 
        });
        //obj.parent().
      }   
    }
  });
};
$.fn.removeTextShadowls = function() {
  return this.each(function() {
    $(this).children("span.jQshadls").remove();
  });
};
})(jQuery);

Thanks, Bill

BUMP: Can someone help me with these – I really am trying, but need some coding help 🙂 Bill

Answer 1

Figured it out, finally 😉 Just had to use Blur w/ PixelRadius and ShadowOpacity.

Later, Bill