Without a doubt, my favorite Javascript library is Dojo Toolkit. Unfortunately, it can be a bit challenging to learn via the dojo.manual, especially if you aren’t interested in the widgets, just the DOM, UI, and FX libraries.
I just wrapped up a project where I used Dojo quite heavily on the site. One effect I thought was particularly effective was a simple show/hide toggle with nice fades. Take a look at the live page.
It is a simple page, and the code that produces is it is simple, easily understood, and quite cross-browser friendly. Note particularly that I did not use any inline javascript.
How I implemented the effect
Markup
First, I made a div section which would be toggled, giving it the id of “suggestions”. Also, I made a graphical button and gave it the id “hider”. Lastly, I made another matching button with the “toggle back on” text.
Code
Then, I activated the toggle with this code:
dojo.require("dojo.lfx.*");
// show/hide toggle the "suggestions" div
function toggleSuggestions() {
var suggestion = dojo.byId("suggestions");
var hider = dojo.byId("hider");
var display = suggestion.getAttribute('displayed');
if (display == 'on') {
dojo.lfx.toggle.fade.hide(suggestion, 1000);
// change the button image
hider.setAttribute("src","media/images/show-suggestion.gif");
display = 'off';
} else {
dojo.lfx.toggle.fade.show(suggestion, 1000);
// change the button image back
hider.setAttribute("src","media/images/hide-suggestion.gif");
display = 'on';
}
// remember the toggle state
suggestion.setAttribute('displayed', display);
}
// dom hook and setup
function serenityInit() {
var hider = dojo.byId('hider');
// wire the event without using inline javascript, sweet!
dojo.event.connect(hider,'onclick',toggleSuggestions);
var suggestion = dojo.byId("suggestions");
// set the default displayed state
suggestion.setAttribute('displayed', 'on');
}
// Add the init to the load chain for the page.
dojo.addOnLoad(serenityInit);
[tags]dojo,dojotoolkit,javascript,lfx[/tags]
Related posts:
- Javascript Programming Conventions I’ve been meaning to write a Javascript “best practices” style...
About Bruce Kroeze
Hello,
me too I use DojoToolkit, but I think that this library is better for big project. Fro small project for me it’s better ScriptACulo or Prototype.
What do you think?
Hi
Alepuzio, I agree with you. If I hadn\’t already been using Dojo, I wouldn\’t recommend it for such a simple effect. Actually, my favorite lightweight Javascript library is jQuery.
In that library, you could duplicate the functionality like so:
$(document).ready(function() {
$(\'hider\').attr(\'show\',true);
$(\'hider\').click(function() {
var state = !($(\'suggestions\').attr(\'displayed\'));
var src = \"media/images/\"
+ (state ? \"show\" : \"hide\")
+ \"-suggestion.gif\";
$(\'suggestions\').toggleSlide(\"slow\")
.attr(\'suggestions\', state);
$(\'hider\').attr(\'src\', src);
});
Not sure what is up with the backslashes in my comment. Remove them to make the code work.
How i can take this with suggestions closed?
where i need to change?
I think need change ‘displayed’ but Im not sure, and don’t know what i need to replace by…
so… sorry my english, Im from Brazil
see you!
Is there any standalone JS script that could do this one? I don’t need any JS framework because this is the only effect I want.
@NetWaver:
function toggle(elem) {
e=document.getElementById(elem);
if(e.style.display==”none”) {
e.style.display=”";
} else {
e.style.display=”none”;
}
}
@lattenwald
I am hiding the div’s by the same methods but a want a slight delay in hiding/ showing the div so that it gives a blinking effect.
is there some pause mechanism ?
I got the blinking effect by using the delay parameter…
var fadeArgs ={
node : “myNode”,
duration: 200,
repeat:2
};
var fadeArgs1 ={
node : “myNode”,
duration: 200,
delay:210,
repeat:2
};
dojo.fadeOut(fadeArgs).play();
dojo.fadeIn(fadeArgs1).play();