How to Show/Hide a layer using Javascript
This is a very simple but effective script, an example of which can be seen on this page when you press the english and french flags at the top right.
The javascript function showlayer() has a parameter "layer", which you can feed the id of a div that you would like to hide or show, for instance:
<div id="french">Your Text</div>Our div id here is 'french'...
The next thing we need to do once we have created our first div (which we wish to be hidden when the document initially loads) is to add the following CSS for our div id, like so:
#french { display:none; }(You can add any other styling you require to your CSS, although if you wish for divs to be on top of one another the position attributes must be the same).
Now we need to create a second div ('english') which will initially be visible, and add the CSS for this:
#english { display:block; }(Again, you may add any other styles you require.)
Now, create two new links or buttons anywhere within your HTML to control the Show/Hide behaviour using the following examples for each (replacing 'french' and 'english' with your div names)
To show:
<a href="#" onClick="document.getElementById('english').style.display='none';
document.getElementById('french').style.display='block'">French</a>To Hide:
<a href="#" onClick="document.getElementById('french').style.display='none';
document.getElementById('english').style.display='block'">English</a>And that's all there is too it. This is a very useful tool which I haven't found much information about, so hopefully it will help :)
Contact Fudoyoki?
To discuss any forthcoming projects or should you have any comments on the site etc I would love to hear from you. My contact email is fudoyoki@gmail.com. You can also download a PDF of my CV here
I am always happy to help or advise :)
Comment rendre visible ou cacher un layer avec Javascript?
Ce script simple et efficace est utilisé sur cette page en haut à droite lorsque vous cliquez sur les drapeaux Anglais et Français.
La fonction Javascript showlayer() a un paramètre ‘layer’ pour lequel vous donnez un DIV ID pour pouvoir le rendre visible ou le cacher ; ici nous l’avons nommé ‘french’.
<div id="french">Your Text</div>Ensuite, après avoir créé le DIV (qui devra être caché lors téléchargement initial du document), vous devrez ajouter le CSS suivant pour le DIV ID.
#french { display:none; }(Vous pouvez ajouter d’autres styles au CSS, cependant si vous souhaitez voir apparaître les DIV au-dessus d’autres DIV la position doit rester la même.)
Maintenant, un second DIV nommé ‘english’ doit être créé. Il sera visible pour commencer et ajouté au CSS de la façon suivante :
#english { display:block; }(Encore une fois vous pouvez ajouter d’autres styles.)
Finalement, vous devrez créer deux nouveaux liens ou boutons sur votre HTML pour activer le scénario visible/caché en utilisant les exemples suivant pour chacun d’eux (remplaçant ‘french’ et ‘english’ par vos propres DIVS.)
Visible:
<a href="#" onClick="document.getElementById('english').style.display='none';
document.getElementById('french').style.display='block'">French</a>Caché:
<a href="#" onClick="document.getElementById('french').style.display='none';
document.getElementById('english').style.display='block'">English</a>Voilà c’est tout ce qu’il y a à faire. C’est une technique rapide et simple sur laquelle j’avais trouvé peu d’informations. Peut-être que ceci pourra aider.
Contact Fudoyoki?
Si vous souhaitez m'adresser vos projets ou vos recommandations, je serais ravi d'en savoir plus. Contactez-moi par e-mail sur fudoyoki@gmail.com. Vous pouvez aussi télécharger mon cv version PDF ici.
Je suis prêt si vous avez besoin d’aide ou de conseils :)
