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
2 3636
Jagadeesh, welcome to TSDN!
Post your code so we can see where the problem might be.
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******************* - (function($1) {
-
//Make nodes selectable by expression
-
$1.extend($1.expr[':'], { shadowed: "(' '+a.className+' ').indexOf(' fx-shadowed ')" });
-
-
$1.fn.shadowEnable = function() { if($1(this[0]).next().is(".fx-shadow")) $1(this[0]).next().show(); }
-
$1.fn.shadowDisable = function() { if($1(this[0]).next().is(".fx-shadow")) $1(this[0]).next().hide(); }
-
-
$1.fn.shadow = function(element, options) {
-
options = options || {};
-
options.offset = options.offset ? options.offset : 0;
-
options.opacity = options.opacity ? options.opacity : 0.2;
-
options.color = options.color || "#000";
-
-
return this.each(function() {
-
var cur = $1(this);
-
//Create a shadow element
-
var shadow = $1('<div id="'+element +'_shadow"class="fx-shadow" style="position: relative;"></div>');
-
cur.after(shadow);
-
-
//Figure the base height and width
-
var baseWidth = cur.outerWidth();
-
var baseHeight = cur.outerHeight();
-
-
//get the offset
-
var position = cur.position();
-
-
//Append smooth corners
-
$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);
-
$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);
-
$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);
-
$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);
-
-
//Add color
-
$1("div.fx-shadow-color", shadow).css("background-color", options.color);
-
-
//Determine the stack order (attention: the zIndex will get one higher!)
-
if(!cur.css("zIndex") || cur.css("zIndex") == "auto") {
-
var stack = 0;
-
cur.css("position", (cur.css("position") == "static" ? "relative" : cur.css("position"))).css("z-index", "1");
-
} else {
-
var stack = parseInt(cur.css("zIndex"));
-
cur.css("zIndex", stack+1);
-
}
-
-
//Copy the original z-index and position to the clone
-
//alert(shadow); If you insert this alert, opera will time correctly!!
-
shadow.css({
-
position: "absolute",
-
zIndex: stack,
-
left: position.left,
-
top: position.top,
-
width: baseWidth,
-
height: baseHeight,
-
marginLeft: cur.css("marginLeft"),
-
marginRight: cur.css("marginRight"),
-
marginBottom: cur.css("marginBottom"),
-
marginTop: cur.css("marginTop")
-
});
-
-
function rearrangeShadow(el,sh) {
-
var $el = $1(el);
-
$1(sh).css($el.position());
-
$1(sh).children().css({ height: $el.outerHeight()+"px", width: $el.outerWidth()+"px" });
-
}
-
-
if($1.browser.msie) {
-
//Add dynamic css expressions
-
shadow[0].style.setExpression("left","parseInt(jQuery(this.previousSibling).css('left'))+'px' || jQuery(this.previousSibling).position().left");
-
shadow[0].style.setExpression("top","parseInt(jQuery(this.previousSibling).css('top'))+'px' || jQuery(this.previousSibling).position().top");
-
} else {
-
//Bind events for good browsers
-
this.addEventListener("DOMAttrModified",function() { rearrangeShadow(this,shadow); },false);
-
}
-
-
-
});
-
};
-
-
})(jQuery);
-
***************************
**************** jquery.dimensions.js ************* - (function($){
-
$.dimensions = {
-
version: '@VERSION'
-
};
-
-
// Create innerHeight, innerWidth, outerHeight and outerWidth methods
-
$.each( [ 'Height', 'Width' ], function(i, name){
-
-
// innerHeight and innerWidth
-
$.fn[ 'inner' + name ] = function() {
-
if (!this[0]) return;
-
-
var torl = name == 'Height' ? 'Top' : 'Left', // top or left
-
borr = name == 'Height' ? 'Bottom' : 'Right'; // bottom or right
-
-
return num( this, name.toLowerCase() ) + num(this, 'padding' + torl) + num(this, 'padding' + borr);
-
};
-
-
// outerHeight and outerWidth
-
$.fn[ 'outer' + name ] = function(options) {
-
if (!this[0]) return;
-
-
var torl = name == 'Height' ? 'Top' : 'Left', // top or left
-
borr = name == 'Height' ? 'Bottom' : 'Right'; // bottom or right
-
-
options = $.extend({ margin: false }, options || {});
-
-
return num( this, name.toLowerCase() )
-
+ num(this, 'border' + torl + 'Width') + num(this, 'border' + borr + 'Width')
-
+ num(this, 'padding' + torl) + num(this, 'padding' + borr)
-
+ (options.margin ? (num(this, 'margin' + torl) + num(this, 'margin' + borr)) : 0);
-
};
-
});
-
-
// Create scrollLeft and scrollTop methods
-
$.each( ['Left', 'Top'], function(i, name) {
-
$.fn[ 'scroll' + name ] = function(val) {
-
if (!this[0]) return;
-
-
return val != undefined ?
-
-
// Set the scroll offset
-
this.each(function() {
-
this == window || this == document ?
-
window.scrollTo(
-
name == 'Left' ? val : $(window)[ 'scrollLeft' ](),
-
name == 'Top' ? val : $(window)[ 'scrollTop' ]()
-
) :
-
this[ 'scroll' + name ] = val;
-
}) :
-
-
// Return the scroll offset
-
this[0] == window || this[0] == document ?
-
self[ (name == 'Left' ? 'pageXOffset' : 'pageYOffset') ] ||
-
$.boxModel && document.documentElement[ 'scroll' + name ] ||
-
document.body[ 'scroll' + name ] :
-
this[0][ 'scroll' + name ];
-
};
-
});
-
-
$.fn.extend({
-
position: function() {
-
var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results;
-
-
if (elem) {
-
// Get *real* offsetParent
-
offsetParent = this.offsetParent();
-
-
// Get correct offsets
-
offset = this.offset();
-
parentOffset = offsetParent.offset();
-
-
// Subtract element margins
-
offset.top -= num(elem, 'marginTop');
-
offset.left -= num(elem, 'marginLeft');
-
-
// Add offsetParent borders
-
parentOffset.top += num(offsetParent, 'borderTopWidth');
-
parentOffset.left += num(offsetParent, 'borderLeftWidth');
-
-
// Subtract the two offsets
-
results = {
-
top: offset.top - parentOffset.top,
-
left: offset.left - parentOffset.left
-
};
-
}
-
-
return results;
-
},
-
-
offsetParent: function() {
-
var offsetParent = this[0].offsetParent;
-
while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && $.css(offsetParent, 'position') == 'static') )
-
offsetParent = offsetParent.offsetParent;
-
return $(offsetParent);
-
}
-
});
-
-
function num(el, prop) {
-
return parseInt($.css(el.jquery?el[0]:el,prop))||0;
-
};
-
-
})(jQuery);
**********************
Im also using three more JS file with names event.js, core.js and selector.js.
Sign in to post your reply or Sign up for a free account.
Similar topics
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',...
|
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...
|
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...
|
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...
|
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...
|
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):
...
|
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...
|
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";...
|
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...
|
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...
|
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...
|
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...
|
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...
|
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)...
|
by: Defcon1945 |
last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
|
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
|
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...
| |