By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,607 Members | 1,815 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,607 IT Pros & Developers. It's quick & easy.

Problem with shadow in FireFox

P: 7
Hi,

I am trying to apply the shadow using JQuery for a division, it
is working fine, but border of the division is not displaying and if
Im trying to hide the division then it is taking a lot of time (around
10 seconds) to hide.
I am facing these problems in FireFox only, it is working fine in IE.
If you could suggest me anything that would rectify this problem, it
would be very helpful. Thank you in advance.


Regards,
Jagadeesh
Nov 12 '07 #1
Share this Question
Share on Google+
2 Replies


acoder
Expert Mod 15k+
P: 16,027
Jagadeesh, welcome to TSDN!

Post your code so we can see where the problem might be.
Nov 12 '07 #2

P: 7
Hi,

I am creating a division like

[HTML]<div id="example" style="height:100px; width:100px; border:1px solid red; positon:absolute;">
Shadow
</div>
[/HTML]
I am applying shadow property for this division using

[HTML]<script type="text/javascript">
$("#example").shadow();
// This line is added for drag and drop
new Draggable("example");
</script>
[/HTML]
I am using the script files for the shadow are

************************* fx.shadow.js*******************
Expand|Select|Wrap|Line Numbers
  1. (function($1) {        
  2.     //Make nodes selectable by expression        
  3.     $1.extend($1.expr[':'], { shadowed: "(' '+a.className+' ').indexOf(' fx-shadowed ')" });
  4.  
  5.     $1.fn.shadowEnable = function() { if($1(this[0]).next().is(".fx-shadow")) $1(this[0]).next().show(); }
  6.     $1.fn.shadowDisable = function() { if($1(this[0]).next().is(".fx-shadow")) $1(this[0]).next().hide(); }
  7.  
  8.     $1.fn.shadow = function(element, options) {        
  9.         options = options || {};
  10.         options.offset = options.offset ? options.offset : 0;
  11.         options.opacity = options.opacity ? options.opacity : 0.2;
  12.         options.color = options.color || "#000";
  13.  
  14.         return this.each(function() {            
  15.             var cur = $1(this);                
  16.             //Create a shadow element
  17.             var shadow = $1('<div id="'+element +'_shadow"class="fx-shadow" style="position: relative;"></div>'); 
  18.             cur.after(shadow);
  19.  
  20.             //Figure the base height and width
  21.             var baseWidth = cur.outerWidth();            
  22.             var baseHeight = cur.outerHeight();
  23.  
  24.             //get the offset
  25.             var position = cur.position();
  26.  
  27.             //Append smooth corners
  28.             $1('<div class="fx-shadow-color fx-shadow-layer-1"></div>').css({ position: 'absolute', opacity: options.opacity-0.05, left: 5+options.offset, top: 5+options.offset, width: baseWidth+1, height: baseHeight+1 }).appendTo(shadow);
  29.             $1('<div class="fx-shadow-color fx-shadow-layer-2"></div>').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth, height: baseHeight-3 }).appendTo(shadow);
  30.             $1('<div class="fx-shadow-color fx-shadow-layer-3"></div>').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth-3, height: baseHeight }).appendTo(shadow);
  31.             $1('<div class="fx-shadow-color fx-shadow-layer-4"></div>').css({ position: 'absolute', opacity: options.opacity, left: 6+options.offset, top: 6+options.offset, width: baseWidth-1, height: baseHeight-1 }).appendTo(shadow);
  32.  
  33.             //Add color
  34.             $1("div.fx-shadow-color", shadow).css("background-color", options.color);            
  35.  
  36.             //Determine the stack order (attention: the zIndex will get one higher!)
  37.             if(!cur.css("zIndex") || cur.css("zIndex") == "auto") {
  38.                 var stack = 0;
  39.                 cur.css("position", (cur.css("position") == "static" ? "relative" : cur.css("position"))).css("z-index", "1");
  40.             } else {
  41.                 var stack = parseInt(cur.css("zIndex"));
  42.                 cur.css("zIndex", stack+1);
  43.             }
  44.  
  45.             //Copy the original z-index and position to the clone
  46.             //alert(shadow); If you insert this alert, opera will time correctly!!
  47.             shadow.css({
  48.                 position: "absolute",
  49.                 zIndex: stack,
  50.                 left: position.left,
  51.                 top: position.top,
  52.                 width: baseWidth,
  53.                 height: baseHeight,
  54.                 marginLeft: cur.css("marginLeft"),
  55.                 marginRight: cur.css("marginRight"),
  56.                 marginBottom: cur.css("marginBottom"),
  57.                 marginTop: cur.css("marginTop")
  58.             });
  59.  
  60.             function rearrangeShadow(el,sh) {                
  61.                 var $el = $1(el);
  62.                 $1(sh).css($el.position());
  63.                 $1(sh).children().css({ height: $el.outerHeight()+"px", width: $el.outerWidth()+"px" });
  64.             }
  65.  
  66.             if($1.browser.msie) {
  67.                 //Add dynamic css expressions
  68.                 shadow[0].style.setExpression("left","parseInt(jQuery(this.previousSibling).css('left'))+'px' || jQuery(this.previousSibling).position().left");
  69.                 shadow[0].style.setExpression("top","parseInt(jQuery(this.previousSibling).css('top'))+'px' || jQuery(this.previousSibling).position().top");
  70.             } else {
  71.                 //Bind events for good browsers
  72.                 this.addEventListener("DOMAttrModified",function() { rearrangeShadow(this,shadow); },false);
  73.             }
  74.  
  75.  
  76.         });
  77.     };
  78.  
  79. })(jQuery);
  80.  
***************************

**************** jquery.dimensions.js *************

Expand|Select|Wrap|Line Numbers
  1. (function($){
  2. $.dimensions = {
  3.     version: '@VERSION'
  4. };
  5.  
  6. // Create innerHeight, innerWidth, outerHeight and outerWidth methods
  7. $.each( [ 'Height', 'Width' ], function(i, name){
  8.  
  9.     // innerHeight and innerWidth
  10.     $.fn[ 'inner' + name ] = function() {
  11.         if (!this[0]) return;
  12.  
  13.         var torl = name == 'Height' ? 'Top'    : 'Left',  // top or left
  14.             borr = name == 'Height' ? 'Bottom' : 'Right'; // bottom or right
  15.  
  16.         return num( this, name.toLowerCase() ) + num(this, 'padding' + torl) + num(this, 'padding' + borr);
  17.     };
  18.  
  19.     // outerHeight and outerWidth
  20.     $.fn[ 'outer' + name ] = function(options) {
  21.         if (!this[0]) return;
  22.  
  23.         var torl = name == 'Height' ? 'Top'    : 'Left',  // top or left
  24.             borr = name == 'Height' ? 'Bottom' : 'Right'; // bottom or right
  25.  
  26.         options = $.extend({ margin: false }, options || {});
  27.  
  28.         return num( this, name.toLowerCase() )
  29.                 + num(this, 'border' + torl + 'Width') + num(this, 'border' + borr + 'Width')
  30.                 + num(this, 'padding' + torl) + num(this, 'padding' + borr)
  31.                 + (options.margin ? (num(this, 'margin' + torl) + num(this, 'margin' + borr)) : 0);
  32.     };
  33. });
  34.  
  35. // Create scrollLeft and scrollTop methods
  36. $.each( ['Left', 'Top'], function(i, name) {
  37.     $.fn[ 'scroll' + name ] = function(val) {
  38.         if (!this[0]) return;
  39.  
  40.         return val != undefined ?
  41.  
  42.             // Set the scroll offset
  43.             this.each(function() {
  44.                 this == window || this == document ?
  45.                     window.scrollTo( 
  46.                         name == 'Left' ? val : $(window)[ 'scrollLeft' ](),
  47.                         name == 'Top'  ? val : $(window)[ 'scrollTop'  ]()
  48.                     ) :
  49.                     this[ 'scroll' + name ] = val;
  50.             }) :
  51.  
  52.             // Return the scroll offset
  53.             this[0] == window || this[0] == document ?
  54.                 self[ (name == 'Left' ? 'pageXOffset' : 'pageYOffset') ] ||
  55.                     $.boxModel && document.documentElement[ 'scroll' + name ] ||
  56.                     document.body[ 'scroll' + name ] :
  57.                 this[0][ 'scroll' + name ];
  58.     };
  59. });
  60.  
  61. $.fn.extend({
  62.     position: function() {
  63.         var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results;
  64.  
  65.         if (elem) {
  66.             // Get *real* offsetParent
  67.             offsetParent = this.offsetParent();
  68.  
  69.             // Get correct offsets
  70.             offset       = this.offset();
  71.             parentOffset = offsetParent.offset();
  72.  
  73.             // Subtract element margins
  74.             offset.top  -= num(elem, 'marginTop');
  75.             offset.left -= num(elem, 'marginLeft');
  76.  
  77.             // Add offsetParent borders
  78.             parentOffset.top  += num(offsetParent, 'borderTopWidth');
  79.             parentOffset.left += num(offsetParent, 'borderLeftWidth');
  80.  
  81.             // Subtract the two offsets
  82.             results = {
  83.                 top:  offset.top  - parentOffset.top,
  84.                 left: offset.left - parentOffset.left
  85.             };
  86.         }
  87.  
  88.         return results;
  89.     },
  90.  
  91.     offsetParent: function() {
  92.         var offsetParent = this[0].offsetParent;
  93.         while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && $.css(offsetParent, 'position') == 'static') )
  94.             offsetParent = offsetParent.offsetParent;
  95.         return $(offsetParent);
  96.     }
  97. });
  98.  
  99. function num(el, prop) {
  100.     return parseInt($.css(el.jquery?el[0]:el,prop))||0;
  101. };
  102.  
  103. })(jQuery);
**********************
Im also using three more JS file with names event.js, core.js and selector.js.
Nov 13 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.