Hiding a div

I think there are a lot of people like you work a lot in code instead of design mode, for those in my situation, following a little tip to hide our big div that we create.
It will allow us to see the code a little clear and more easy to work, and of course, it can display the div again if you wish, here the code to add between .

function hide(link){
var objet = document.getElementById(‘popup’); // entre les deux ‘ tu mes le nom du div que tu veux faire apparaître !
if(objet.style.display == “none” || !objet.style.display){
objet.innerHTML = “Ici le text que tu veux faire apparaître !”;
objet.style.display = “block”;
objet.style.overflow = “hidden”;
link.innerHTML = “-“;
var hFinal = 200; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 0; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function () {
hActuel += 20; //Augmente la hauteur de 20px (tu peux modifier) tous les 40ms !

objet.style.height = hActuel + ‘px’;

if( hActuel > hFinal)
{
clearInterval(timer); //Arrête le timer
objet.style.overflow = ‘inherit’;
} };
fct();
timer = setInterval(fct,40); //Toute les 40 ms
}else if(objet.style.display == “block”){
var hFinal = 0; //Hauteur finale (la hauteur une fois que ça aura fini de déplier !)
var hActuel = 200; //Hauteur initiale (la hauteur dès le début !)
var timer;
var fct = function () {
hActuel -= 20; //Augmente la hauteur de -20px (tu peux modifier) tous les 40ms !
objet.style.height = hActuel + ‘px’;
if( hActuel < hFinal) {
clearInterval(timer); //Arrête le timer
objet.style.overflow = ‘inherit’;
objet.style.display = “none”;
} };
fct();
timer = setInterval(fct,40); //Toute les 40 ms
link.innerHTML = “+”;

} }

Following the code to be addedd between

[+]

Over there my friend !!!

Hope it will be useful for everybody

3 Responses to Hiding a div
  1. NYWebTeam
    April 3, 2009 | 10:25 pm

    Great article. Very helpful Thank you.

  2. The Artful Dodger
    November 22, 2008 | 8:44 pm

    Good advice, blacklight, although I would add that instead of having code like this:
    onclick=’ZWDialog.Alert(“The user has clicked this button”);’>

    you have event driven JS so that you reduce the chances of a JS error on the onclick handler (maybe for some reason the JS file doesn’t load, or the programmer just leaves out the function for the event handler for some reason). Also, it better follows the rules for progressive enhancement, where the markup is semantic markup only, and the JS is a completely separate chunk of code.

  3. blacklight
    October 15, 2008 | 11:36 pm

    You should take a look at object oriented style of javascript coding. One of the strengths of javascript is the way it can be functional (think c) and object oriented (c++) at the same time. It also treats every object and its members as a key/value associative array (think hash or map).

    A good example of that is this Drag and Drop DHTML Dialog. Its pretty cool. It is a total cross-browser compatible drag and drop interface. An example is given with a simple dialog box. But it is written in object oriented javascript, which makes easy to reuse (namespace collisions etc).