Un genre de popUp.

par **Myst3ry** » 05 oct. 2008, 21:41

Je comprend maintenant!
Super exemple.
Encore merci de ton aide!
Sa fonctionne nikel!

Mille merci!!!
Maxime

par AB » 05 oct. 2008, 20:13

"document" correspond à la page dans laquelle le script est écrit. Et quand on fait document.getElementById('toto') on désigne l'élément dont l'ID est "toto" dans la page en cours.

Donc si dans mon code html j'ai un id que j'appelle toto je vais désigner cet élément là.

Une fois l'élément désigné on peut éventuellement lui appliquer des styles en utilisant la même syntaxe que pour les css - excepté pour les mots composés pour lesquels on enlève le tiret et on ajoute une majuscule au second nom ex : font-weight devient fontWeight -

Par exemple tu peux tester ce code :

Code : Tout sélectionner

<body>
<div id="toto" style="position:absolute;left:20%;height:200px;width:200px;display:none;color:#FFFFFF;background:green;border:2px solid black">
Test d'affichage.<br /> Dans cette div tu peux très bien mettre un formulaire <br />
<input style="position:absolute;right:0px;bottom:0px" type = "button" value = "cacher" onclick = "document.getElementById('toto').style.display = 'none';"/>
</div>
<input type = "button" value = "afficher" onclick = "document.getElementById('toto').style.display = 'block';"/>
</body>

par **Myst3ry** » 05 oct. 2008, 18:16

Je ne suis pas trop certain de comprendre,

"document" est le nom CSS ? exemple: style.css?
Et puis comment trouver le id de l'élément?

Peut-être que je ne suis pas assez instruit sur le Javascript.

Encore merci de vos réponses rapides!
Maxime

par **Ryle** » 05 oct. 2008, 18:02

Tu peux accéder simplement aux propriétés de tes éléments en javascript en suivant l'arborescence du dom :

document.getElementById('id_de_ton_element').style.display = 'block'; // ou 'none' pour le masquer
document.getElementById('id_de_ton_element').style.visibility = 'visible'; // ou 'hidden' pour le masquer

"document" correspond à la page, le "getElementById" te reoutrne l'objet dont l'id est spécifié, "style" l'attribut éponyme, quant à "display" ou "visibility" elles te donnent accès à ces propriétés. Il ne te reste plus qu'à leur passer de nouvelles valeurs pour les modifier

tu peux également utiliser un

document.getElementById('id_de_ton_element').className = 'nom_classe_css';

pour changer la classe css de l'élément

par **Myst3ry** » 05 oct. 2008, 17:39

Oki, merci.

Je vais tenter de le faire moi même et si j'y arrive pas je me tournerai vers les script tout fait!
Petite question sauf,
Comment changer un paramêtre de CSS (comme Display ou Visibility) via JavaScript?

Merci encore!
Maxime

par **jojolapine** » 05 oct. 2008, 09:25

en gros (hormis l'effet de fondus), c'est assez simple...
Il suffit, en html et css de construire ta boîte au dessus de tout le reste centré et tt et tt, et après, tu joues sur les propriétés display ou visibility...
Mais si tu veux que ce soit "tout joli" comme ton exemple, il y a des librairies qui propose ça...
En l'occurence, sur ton exemple, il utilisent http://script.aculo.us/ plus des ajouts à eux...

par **Myst3ry** » 05 oct. 2008, 06:00

D'accord merci,

Si quelqu'un à de la documentation qui explique comment faire se genre d'effet ou bien la base de ce genre d'effet, je suis très intéraissé!

Au moi je sais dans qu'elle direction chercher!

Merci encore!

par AB » 05 oct. 2008, 04:59

Javascript peut faire ce genre de chose. Pas besoin d'un autre langage.

J'ai pas de tuto sous la main ni le temps de t'en dire plus mais cherche dans cette direction, la base n'est pas très compliquée.

D'ailleurs l'exemple que tu donne est bien fait puisque si javascript est désactivé dans le navigateur un autre affichage est proposé pour la connexion (du bon boulot)

par **Myst3ry** » 05 oct. 2008, 04:41

Bonjour,

J'aimerais réaliser un genre de "PopUp", mais pas sous une autre page.

C'est un peu complexe à expliquer en mots donc voici un exemple,

Rendez-vous au:
http://www.tomsguide.com/fr/

Ensuite dans le coin supérieur droit, cliquer sur "Se connecter"
Vous verrez normalement un genre de "popup" s'ouvrir (si je peux appeler sa comme sa).

Je me demande si c'est possible de créer ce genre de "popUp" en JavaScript. Ou bien c'est du Java, ou encore du Flash?
Mon niveau dans ces 3 languages est quasiment nulle.
Si quelqu'un à la réponse à ma question ou si il existe de la documentation pour faire se genre d'effet. Je lui serais ÉNORMÉMENT reconnaissant!

Merci beaucoup!
Maxime

Un genre de popUp.

Répondre

Étendre la vue Revue du sujet : Un genre de popUp.

Un genre de popUp.