Jquery :: Shadow Slowing Things Down?
Oct 24, 2009
I'm developing a website utilizing Jquery Drop Shadow and thickbox and other things. I just implemented the thickbox and thought that maybe the slow response was my system (I've had photoshop, 12+ browser windows up, etc). I realize that may not be the case and I suspect jquery's drop shadow is a hog. I don't want to go through the entire code and implement a different shadow method at this point. Instead I'm wondering if anyone can verify this issue
[URL]... Click on the "Film Reel" and it may be especially slow to load. If you suspect it is my use of the Jquery Drop Shadow, can you recommend ways I could optimize it? One idea I have is to toggle it off and on when thickbox is opened and closed. However I don't know how to do that yet.
View 4 Replies
ADVERTISEMENT
Jan 29, 2011
I have this demo here: [url]
It's three div's stacked on top of each other. When you scroll the page the div most central will change opacity and the other div's will have a lower opacity.
Code:
The problem with this is the speed - the transition can be really slow and the speed can vary between div's
I have another demo here, where the speed is better - the divs change opacity almost immediately.
[url]
The problem here is I can't get the div to change back to there lower opacity without effecting the speed. This code dosen't have the else statement that was changing the div's to there lower setting.
Code:
How can I change the opacity of the div's to the lower opacity without the else statement, which seems to make the whole thing slow.
View 4 Replies
View Related
Dec 23, 2005
I'm not sure if this is a CSS question or a JS question, but I have a rollover image gallery using css for style and js for the behavior.
The css I'm using is meant to crop the thumbnails into perfect squares. However, it seems to also be slowing down the rollover.
View 9 Replies
View Related
Mar 19, 2010
I have found a wonderful script at: [url]
But it seems that you can only move the boxes if you click them and then move them really really fast, otherwise they don't react... I looked at the js file but I can't figure out what to change in order to make the boxes move more smoothly...I can't place the js file because its to big...
View 4 Replies
View Related
Sep 28, 2010
I've tried a variety of ways to animate the CSS box-shadow property and have been having hit or miss success. Can jQuery animate the box-shadow yet and if so, anyone have code? I noticed a plugin that does this but it seems to get down into the bowels of JavaScript and manipulate and extend jQuery in ways that i don't want to get into.
I know that there's the box-shadow, -moz-box-shadow, and -webkit-box-shadow properties available, and to use them in jQuery they'd be BoxShadow, MozBoxShadow, and WebKitBoxShadow, but anytime I animate them I lose my initial CSS box shadow settings. More importantly I haven't found a way to manipulate some of the box shadow properties without modifying them all. In other words, I'd also like to animate just the x-offset without having to specify the entire box shadow string every time.
I assumed that this might be related to animating the border-radius CSS property and read a thread on stackoverflow about how to animate that, but it doesn't seem to extend as readily to the box shadow as I had hoped.
View 3 Replies
View Related
Aug 24, 2010
how to use the jquery and the dropshadow pluggin to do drop shadows on images.I'm doing this:
Code:
<script type="text/javascript" src="/css-js/jquery.js"></script>
<script type="text/javascript" src="/css-js/jquery.dropshadow.js"></script>
<script type="text/javascript">
[code]...
View 1 Replies
View Related
Jan 26, 2011
I want to know that how can I achieve overlay and shadow box when I click some button or link. I was trying to search, but I don't know to locate.
View 1 Replies
View Related
Jan 6, 2010
drop shadow not displaying right in certain browsers?
View 2 Replies
View Related
Dec 31, 2011
i have a problem with fading things in and out using jquery. Please check it out.THe problem is that sometimes the fading in happens before the fading out. What can be done to fix it?
[Code]...
View 12 Replies
View Related
Jul 19, 2009
I am using and modifying the sample demo page and have a error on IE:
Using:
The fade effect on IE causes that the image shadow.png appears black on border for a while, fade effect is too uggly, firefox and safari works fine. Now I have to set fade=0 only to support IE7.
View 7 Replies
View Related
May 25, 2009
How can I make something in jQuery slideDown without pushing things under it down? To take it out of the flow so it just overlays a slidedown like a typical dropdown menu? Can slideDown be used for that?
View 2 Replies
View Related
Jul 16, 2009
I downloaded a shadow box from the web that uses javascript and based on the size of the div it applies a shadow. This is great however when i apply a slider javascript function to it to make the div bigger the shadow goes nuts and does not like it.
Below is the code for the shadow box.
There is a live example of this here. [url]
View 1 Replies
View Related
Dec 23, 2010
I have some contents on my page that are displayed on click or hover.Therefore, initially they are hidden using the hide() method.
They work fine as intended.
But if it is a slow computer, you can see them on the screen for a second or two before they disappear. Or if the user refreshes the page - you get the same thing happen. How can I prevent this?
View 3 Replies
View Related
Feb 22, 2011
I have the cycle plugin running, works fine on all but IE7 (not catering to IE6). The pager elements on the right do not appear in IE7. I have tried adjusting the z-index, etc., but can't figure it out.
Also, the caption text transitions in with bolded elements properly appearing, and then they flip to regular text (the whole line of text transitions a bit strangely).
View 4 Replies
View Related
Jul 23, 2005
Can anyone tell me how to make a drop shadow for a table or td through
css. I dont want to use any image. I want it done through background
color.
View 3 Replies
View Related
Nov 16, 2011
On the mouseDown I've added a inset box-shadow to a button. This needs to stay active while the functionality of the button is in use, then when the button is clicked again the functionality stops and therefore I need to remove the inset box-shadow. This is the simple piece of Javascript I have written so far:
function mouseDown(ctrl){
ctrl.style.borderColor = '#aaaaaa';
ctrl.style.boxShadow = 'inset 0 0 5px #999999';
ctrl.style.WebkitBoxShadow = 'inset 0 0 5px #999999';
}
View 2 Replies
View Related
Mar 26, 2009
I want to change the color and the direction and color of the shadow of a text in a DIV area randomly.So far I've made a function that uses random
[Code]...
P.S. When I press DOT after tekst.style I dont see anything related to shadow.
View 2 Replies
View Related
Jun 30, 2011
I would like some help in how to "shadow effect" words and letters in.I don't know anything about Javascript butI know there has to be a simple way to do this and be able to change the shadow color, whether shadow is left or right, size, etc.
View 14 Replies
View Related
Jan 8, 2011
I'm trying to build a background in two parts. The header bg is in the body and the lower part is a div with a gradient background color generated by CSS3 or IE filters. I had problems with getting the gradient to stretch all the way to the side in IE7 with plain CSS so I had to start looking for more watertight solutions.
[Code]...
If there are easier methods to solve this split background thing than JavaScript, I'm all ears. I can PM the address of the website, if someone wants to take a look.
View 5 Replies
View Related
Jul 8, 2010
I have a basic CSS menu, that has submenus. I am wanting to add a drop shadow to the drop down boxes, using jQuery. I have found a nifty jQuery plugin that does shadows: [URL] the drop down shadow displays whether or not the submenu is showing/visible. The menu structure is rather simple with UL and LI:
[Code]....
View 3 Replies
View Related
Mar 4, 2011
I'm trying to slowly blur text but I'm running into a problem where color: transparent text is applied before text-shadow. I need it to apply at the same time. If it isn't apparent by the example, I'm using text-shadow to blur the text out to be unreadable, I'm not trying to add a simple text shadow. I need this to a slow animation. I realize you can select the text and continue reading, but I'm not trying to block access to the text, I just need the blur effect.
Below is a full working version of my code.
<script src="[URL]"></script>
<script src="[URL]"></script>
<script>
$(document).ready(function(){
$("#blur01").click(function() {
$(this).animate({ backgroundColor: '#999999', textShadow: '0 0 15px #000', color: 'transparent' }, 2000); });
$("#blur02").click(function() {
$(this).addClass('blur', 2000);
});
$("#blur03").toggle(function() {
$(this).animate({ textShadow: "0 0 15px #000", color: "transparent", backgroundColor: "#999999"}, 2000);
},function() {
$(this).animate({ textShadow: "0 0 15px #F00", color: "transparent", backgroundColor: "#999999"}, 2000);});});
</script><style>
div {font-size:30px; margin:5px; padding:5px;}
.blur {text-shadow:0 0 15px #000; color:transparent; background:#999999;}
</style>
<div id="blur01">Text Blur 01 - click</div>
<div id="blur02">Text Blur 02 - click</div>
<div id="blur03">Text Blur 03 - toggle</div>
View 3 Replies
View Related
May 27, 2009
I've made a code that finds the factors of an inputted number. Here's the script code...
However, when I factor it, It will go to a blank unformatted page to list the factors. How can I list the factors on the webpage itself like a div? I tried using a <div> and innerHTML but it only lists one factor.
View 3 Replies
View Related
Nov 9, 2009
i have a box:
<img id="imgSearch" src="" alt="Websites" />
<input type="button" value="Toggle Search" id="btnSearch" />
^being the button to toggle between websites.
basically i'd like this button to toggle between different websites when clicked.
secondly:changing span tag colors
html code:
Traffic Light: <span id="trafficLight"></span>
<input type="button" value="Prevent Accident" id="btnTraffic" />
i'd like to change the color of this span id by pressing the button. so in this case it would change red, yellow green and last:
changing the font in a bold tag bold by pressing a button
html code: (note, the font weight in normal in css for bold)
<b>i want this bold when you hit the button!</b>
<input type="button" value="Set Bold" id="btnBold" />
View 1 Replies
View Related
Jun 13, 2010
Can a checkbox do 2 different things after it is clicked? Right now I am using this...
<input type="checkbox" onclick="processCheckbox(this);">
<input type="checkbox" onclick="activLink(this.checked)">
I don't want to have 2 checkboxes on my page, just 1 and get the same result.
View 2 Replies
View Related
Jun 6, 2007
Are there pointers in Javascript available, like for example in Turbo Pascal 7? :)
So i could use
function TestFunc(PointerToFunctionA, FunctionAItself) {
FunctionAItself('Hallo'));
//And how to use the Pointer then?
PointerToFunction('Hallo')...???
}
function PassedFunction(TextToShow) { alert(TextToShow); }
TestFunc(^PassedFunction,PassedFunction);
View 2 Replies
View Related
Jul 28, 2005
I'm trying to make selected text appear / disappear depending on what the user clicks on. It works perfectly (as far as i can tell) in firefox, but in IE i get "Could not get the display property. Invalid argument". the strange thing is, it will make things disappear, but not show. I'm trying to change the display from 'none' to 'table-row' because that's the only thing that would display properly in firefox. here is the applicable [code]...
View 6 Replies
View Related
