473,327 Members | 2,069 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

Problem with shadow in FireFox

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
2 3636
acoder
16,027 Expert Mod 8TB
Jagadeesh, welcome to TSDN!

Post your code so we can see where the problem might be.
Nov 12 '07 #2
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

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

Similar topics

8
by: Phoenix | last post by:
Here's a challenge that is killing me: I've got 2 web servers and a SQL Server and about 5,000 'users' who stay connected to the site all day. I have a page that is supposed to be 'real-time',...
0
by: Damien Anselmi | last post by:
I am using the CompileAssemblyFromSource method of an ICodeCompiler instance to dynamically compile an assembly used by a Web Application. The assembly may be recompiled any number of times during...
0
by: luca p. | last post by:
I have Windows XP SP2. I install Shadow Copy SDK, on a Windows Server 2003 all works fine, on my windows xp I have a problem. C:\script>vshadow -p -nw c: VSHADOW.EXE 2.2 - Volume Shadow Copy...
0
by: medvegonok | last post by:
Please look at http://www.smarteus.com/test.html There are 3 lines in the table there. When pressed each line is supposed to open/close IFRAME below itself. It works fine in IE, but in Firefox...
4
by: marfola | last post by:
I'm trying to implement bottom-to-top vertical text using CSS attributes in IE : writing-mode: tb-rl; filter: flipv fliph; But I have encountered the following: the text is...
9
by: adastic | last post by:
Any idea how this guy does his AJAX drop shadows (see the post title "New Year New Site" in blue with the light gray in larger font offset from it): ...
2
by: swethak | last post by:
Hi, I am getting the problem the problem with google map in Internet Explorer. This map worked fine in mozilla . When i opened the same map in Internet Explorer i am getting the error...
2
by: swethak | last post by:
Hi, I am developing the google application. In my google.js file consists the icon1=new GIcon(); icon1.image = "images/bmw-small.png"; icon1.shadow = "images/shadow50.png";...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.