JavaScript / DHTML Highlight & Fade Script?
Moderator: General Moderators
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
JavaScript / DHTML Highlight & Fade Script?
There is an almost perfect example at...
http://wiki.script.aculo.us/scriptaculo ... ffectsDemo
...try the bottom right, "Click for Effect.Highlight demo".
The only problem is since it's a library I can't edit the duration without it effecting other scripts. Furthermore I'd like to add a delay and the code I have just is not working with it. Suggestions for similar scripts?
http://wiki.script.aculo.us/scriptaculo ... ffectsDemo
...try the bottom right, "Click for Effect.Highlight demo".
The only problem is since it's a library I can't edit the duration without it effecting other scripts. Furthermore I'd like to add a delay and the code I have just is not working with it. Suggestions for similar scripts?
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
try jQuery - you'll find it's much more flexible. Specifically, "Interface":
http://interface.eyecon.ro/docs/fx - "Highlight" is the effect you're after
http://interface.eyecon.ro/docs/fx - "Highlight" is the effect you're after
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Sweet, thanks!
I was initially using script.aculo.us but it was not as flexible as I wanted it to be plus I had to implement a small hot fix to get it to work with application/xhtml+xml.
I was able to replace script.aculo.us with Jquery in about half an hour including updating many already existing DHTML effects all without a hot fix.
I was initially using script.aculo.us but it was not as flexible as I wanted it to be plus I had to implement a small hot fix to get it to work with application/xhtml+xml.
I was able to replace script.aculo.us with Jquery in about half an hour including updating many already existing DHTML effects all without a hot fix.
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
You don't need to:The only problem is since it's a library I can't edit the duration without it effecting other scripts.
Code: Select all
Effect.Highlight('my_element', {duration:10});
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Never mind...
Code: Select all
.pause(1000)- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Actually, how do I implement the pause before the effect? The following pauses the effect after it has already initiated.
Code: Select all
<span onclick="$('#side').pause(3000).Highlight(1000, '#fff');return false;">- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
I don't know which pause plugin you're using, but most functions in jquery offer a callback argument.
I would use the setTimeout function in your case:
I would use the setTimeout function in your case:
Code: Select all
window.setTimeout(function(){
$('#side').Highlight(1000, '#fff');
},4000);
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
- JAB Creations
- DevNet Resident
- Posts: 2341
- Joined: Thu Jan 13, 2005 6:44 pm
- Location: Sarasota Florida
- Contact:
Ok, I have a big hairy question!
I just added the option to disable all DHTML effects (and they will be disabled by default for dial-up users) on the absolute latest version of my site...
What I'd like to do is simply replace functions with a return false, but thus far I have been unsuccessful! I'm not going to kill the server to add or remove JavaScript events dozens of times per page per visitors when I'm sure I can just serve a different script file that returns false. All the functions for jQuery return the following error when I intentionally do not serve the jQuery script files...

I just added the option to disable all DHTML effects (and they will be disabled by default for dial-up users) on the absolute latest version of my site...
What I'd like to do is simply replace functions with a return false, but thus far I have been unsuccessful! I'm not going to kill the server to add or remove JavaScript events dozens of times per page per visitors when I'm sure I can just serve a different script file that returns false. All the functions for jQuery return the following error when I intentionally do not serve the jQuery script files...
How can I avoid error messages as I'm a perfectionist?Error: $ is not defined
- Kieran Huggins
- DevNet Master
- Posts: 3635
- Joined: Wed Dec 06, 2006 4:14 pm
- Location: Toronto, Canada
- Contact:
hmm.. why are you disabling dhtml effects for dial-up users? They don't take any extra bandwidth (aside from a 20k jquery file once.. it's cached).
Simply replacing everything with "return false" is a terrible idea, especially if you have onclick handlers since the link will never allow the user to go anywhere. "return false" will cancel the click event on a anchor (among other things).
If you want to remove the effects anyway, keep them all in a separate javascript file (no inline assignments!!!) and return a blank document in it's place. jQuery makes it easy to keep this code separation with it's event assignment methods:
@everah: welcome to the dark side!
jcookie? Do you want http://www.visualjquery.com/1.1.1.html (click plugins, then cookie) ?
Simply replacing everything with "return false" is a terrible idea, especially if you have onclick handlers since the link will never allow the user to go anywhere. "return false" will cancel the click event on a anchor (among other things).
If you want to remove the effects anyway, keep them all in a separate javascript file (no inline assignments!!!) and return a blank document in it's place. jQuery makes it easy to keep this code separation with it's event assignment methods:
Code: Select all
$('#id').click(function(){
alert('don't click this!');
return false;
})jcookie? Do you want http://www.visualjquery.com/1.1.1.html (click plugins, then cookie) ?