Page 1 of 2
JavaScript / DHTML Highlight & Fade Script?
Posted: Mon Apr 09, 2007 1:53 am
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?
Posted: Mon Apr 09, 2007 5:16 am
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
Posted: Mon Apr 09, 2007 3:19 pm
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.

Posted: Mon Apr 09, 2007 3:37 pm
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?
Posted: Mon Apr 09, 2007 3:38 pm
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});
Posted: Mon Apr 09, 2007 4:06 pm
by JAB Creations
Thanks, though at this point how do I do it with Jquery?
Posted: Mon Apr 09, 2007 4:10 pm
by JAB Creations
Posted: Mon Apr 09, 2007 4:14 pm
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;">
Posted: Mon Apr 09, 2007 4:46 pm
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);
Posted: Mon Apr 09, 2007 4:52 pm
by JAB Creations
Gah, I was trying unsuccessfully with script.aculo.us last night! LoL Thanks, it's working great right now.

Posted: Mon Apr 09, 2007 4:57 pm
by Kieran Huggins
my pleasure, welcome to the cult of jQuery
*FREE KOOL-AID WITH EVERY JUMPSUIT!!!*
Posted: Mon Apr 09, 2007 5:41 pm
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.
Posted: Mon Apr 09, 2007 6:02 pm
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!
Posted: Mon Apr 09, 2007 8:43 pm
by JAB Creations
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...
Error: $ is not defined
How can I avoid error messages as I'm a perfectionist?

Posted: Mon Apr 09, 2007 10:56 pm
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) ?