JavaScript / DHTML Highlight & Fade Script?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

JavaScript / DHTML Highlight & Fade Script?

Post by JAB Creations »

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?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

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
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

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. :D
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

I do have a quick question, is there an easy way to delay the function, say by not executing the script for four seconds?
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

The only problem is since it's a library I can't edit the duration without it effecting other scripts.
You don't need to:

Code: Select all

Effect.Highlight('my_element', {duration:10});
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Thanks, though at this point how do I do it with Jquery?
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Never mind...

Code: Select all

.pause(1000)
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

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;">
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

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:

Code: Select all

window.setTimeout(function(){
  $('#side').Highlight(1000, '#fff');
},4000);
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Gah, I was trying unsuccessfully with script.aculo.us last night! LoL Thanks, it's working great right now. :D
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

my pleasure, welcome to the cult of jQuery ;-)

*FREE KOOL-AID WITH EVERY JUMPSUIT!!!*
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

You are very quickly winning me to the jquery side of the force. I have been playing with it and I like it a lot. As soon as I get this jcookie thing down I will be in it to win it.
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Considering my only top level of standards discriminative coding practices combined with half an hour implementation and replacement of script.aculo.us it can be said that jQuery is one seriously badass JavaScript library!
User avatar
JAB Creations
DevNet Resident
Posts: 2341
Joined: Thu Jan 13, 2005 6:44 pm
Location: Sarasota Florida
Contact:

Post by JAB Creations »

Ok, I have a big hairy question! :lol:

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...
Error: $ is not defined
How can I avoid error messages as I'm a perfectionist? 8)
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

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:

Code: Select all

$('#id').click(function(){
   alert('don't click this!');
   return false;
})
@everah: welcome to the dark side!

jcookie? Do you want http://www.visualjquery.com/1.1.1.html (click plugins, then cookie) ?
Post Reply