Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Apparition progressive d'une div

Apparition progressive d'une div

10 réponses
Avatar
Jibé
Bonjour,

pour un site dont je m'occupe je cherche à faire apparaitre
progressivement une div après clic sur un lien ainsi que son contenu. En
cherchant avec l'aide de "mon ami google" je tombe sans cesse sur des
truc qui ont recours à des "motools" et "autre prototype".
J'aimerai éviter d'utiliser un B52 pour tuer une fourmie ;) donc si
quelqu'un connait des url de ressources ou de script moins lourd je suis
preneur

Merci d'avance

JiBé
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Avatar
Bruno Desthuilliers
Bonjour,

pour un site dont je m'occupe je cherche à faire apparaitre
progressivement une div après clic sur un lien ainsi que son contenu. En
cherchant avec l'aide de "mon ami google" je tombe sans cesse sur des
truc qui ont recours à des "motools" et "autre prototype".
J'aimerai éviter d'utiliser un B52 pour tuer une fourmie ;) donc si
quelqu'un connait des url de ressources ou de script moins lourd je suis
preneur


jQuery est un poil plus léger qu'un B52 (en comparaison de prototype +
scriptaculous, ça fait même figure de planeur...).

Merci d'avance

JiBé


Avatar
SAM
Bonjour,

pour un site dont je m'occupe je cherche à faire apparaitre
progressivement une div après clic sur un lien ainsi que son contenu.



Que veux dire : faire apparaitre "progressivement" ?

Par glissade depuis le bord (droit ou gauche) de la page ?
Par expansion sous le lien à cliquer ?
Par "fadding" (de transparent à normal) ?

Il y aura t-il d'autres liens dans l'truc ?
Il y aura t-il d'autres bazars (réactifs) dans l'truc ?


Bon, sans trop savoir, peut-être que :
<http://www.walterzorn.com/tooltip/tooltip_e.htm>


Un truc qui glisse depuis la gauche :

<html>
<script type="text/javascript">
function glisse(what, sens) {
var quoi = document.getElementById(what);
var origine = quoi.offsetWidth+20;
var larg = sens>0? 0 : origine;
glisser(what, larg, origine, sens);
}
function glisser(what, larg, origine, sens) {
var quoi = document.getElementById(what);
larg += sens;
if(larg>0 && larg<origine) {
quoi.style.marginLeft = -larg+'px';
setTimeout('glisser("'+what+'",'+larg+','+origine+','+sens+')',10);
}
}
</script>
<a href="#" onclick="glisse('truc',-1);return false;">montrer</a>
<div id="truc"
style="border:1px solid;height:200px;background:#ffc;
width: 200px; margin-left:-220px;">
<p>je suis le truc</p>
<p><a href="#" onclick="glisse('truc',1);return false;">cacher</a>
</div>
</html>

Le 'truc' a une marge gauche négative = sa largeur (complète) +20
Pour accélérer : augmenter valeur de 'sens dans les onclick :
onclick="glisse('truc',5);return false;"

--
sm

Avatar
Jibé

Que veux dire : faire apparaitre "progressivement" ?

Par glissade depuis le bord (droit ou gauche) de la page ?
Par expansion sous le lien à cliquer ?
Par "fadding" (de transparent à normal) ?


Oui vous avez raison je suis un peu vague...
L'idée c'est une apparition de haut en bas et il y a effectivement des
liens vers des pages externes dans la div qui doit apparaitre.

Je vais essayer le truc qui glisse depuis la gauche et si je suis pas
trop nul j'essayerai de l'adapter pour qu'il glisse depuis le haut ;)

Merci en tout cas.

Jibé

<html>
<script type="text/javascript">
function glisse(what, sens) {
var quoi = document.getElementById(what);
var origine = quoi.offsetWidth+20;
var larg = sens>0? 0 : origine;
glisser(what, larg, origine, sens);
}
function glisser(what, larg, origine, sens) {
var quoi = document.getElementById(what);
larg += sens;
if(larg>0 && larg<origine) {
quoi.style.marginLeft = -larg+'px';
setTimeout('glisser("'+what+'",'+larg+','+origine+','+sens+')',10);
}
}
</script>
<a href="#" onclick="glisse('truc',-1);return false;">montrer</a>
<div id="truc"
style="border:1px solid;height:200px;background:#ffc;
width: 200px; margin-left:-220px;">
<p>je suis le truc</p>
<p><a href="#" onclick="glisse('truc',1);return false;">cacher</a>
</div>
</html>

Le 'truc' a une marge gauche négative = sa largeur (complète) +20
Pour accélérer : augmenter valeur de 'sens dans les onclick :
onclick="glisse('truc',5);return false;"



Avatar
SAM

Je vais essayer le truc qui glisse depuis la gauche et si je suis pas
trop nul j'essayerai de l'adapter pour qu'il glisse depuis le haut ;)


Tant qu'à y être : mettre un JS pour cacher le menu au départ.
Il ne faudrait pas que faute de JS activé on ne puisse le voir !

--
sm

Avatar
Jibé
Bon ben en fait je me suis rabattu sur le planneur ;)
29 ko restent raisonnables pour mon usage

Merci

JiBé

Bonjour,

pour un site dont je m'occupe je cherche à faire apparaitre
progressivement une div après clic sur un lien ainsi que son contenu.
En cherchant avec l'aide de "mon ami google" je tombe sans cesse sur
des truc qui ont recours à des "motools" et "autre prototype".
J'aimerai éviter d'utiliser un B52 pour tuer une fourmie ;) donc si
quelqu'un connait des url de ressources ou de script moins lourd je
suis preneur


jQuery est un poil plus léger qu'un B52 (en comparaison de prototype +
scriptaculous, ça fait même figure de planeur...).

Merci d'avance

JiBé




Avatar
SAM
Bon ben en fait je me suis rabattu sur le planneur ;)
29 ko restent raisonnables pour mon usage


Tant pis ...
le truc fonctionnait aussi en vertical :
<http://cjoint.com/data/dmqJ2jUVSl_sh-truc-ht-bas.htm>

du moins ... chez moi ...

--
sm

Avatar
Jibé
Bon ben en fait je me suis rabattu sur le planneur ;)
29 ko restent raisonnables pour mon usage


Tant pis ...
le truc fonctionnait aussi en vertical :
<http://cjoint.com/data/dmqJ2jUVSl_sh-truc-ht-bas.htm>

du moins ... chez moi ...



Oui je me doute mais mon truc n'apparait pas en haut de l'écran mais au
milieu et comme je suis pas très bon (c'est un euphémisme) en javascript
et qu'il y avait une certaine urgence j'ai été au plus simple et au plus
rapide. Je vais me re-pencher sur le truc par ce que je ne suis pas
hyper satisfait du recours à une bibliothèque aussi complète pour une
"yoli animation"

En tout cas merci

JiBé


Avatar
SAM
Bon ben en fait je me suis rabattu sur le planneur ;)
29 ko restent raisonnables pour mon usage


Tant pis ...
le truc fonctionnait aussi en vertical :
<http://cjoint.com/data/dmqJ2jUVSl_sh-truc-ht-bas.htm>


Oui je me doute mais mon truc n'apparait pas en haut de l'écran


Ha! ben ! si tu changes toudi d'idée ! aussi !

mais au milieu


Alors il ne glisse plus ?

et comme je suis pas très bon (c'est un euphémisme) en javascript
et qu'il y avait une certaine urgence j'ai été au plus simple et au plus
rapide. Je vais me re-pencher sur le truc par ce que je ne suis pas
hyper satisfait du recours à une bibliothèque aussi complète pour une
"yoli animation"


La page s'affiche dans un seul écran ?
(elle tient en entier dans du 800/600 ? elle ne fait que 500 de haut ?)

<http://cjoint.com/data/domVsGq6aF_sh-truc-milieu.htm>

--
sm



Avatar
Jibé
Whaou trop fort!!!
Je m'y remet ce weekend. Ce que je cherche à faire est visible à cette
adresse par exemple :
http://www.aqui.fr/politiques/francois-bayrou-il-n-y-a-plus-de-triangulaire-a-pau,775.html

il s'agit de l'ouverture du menu de "partagez cet article" en bas de
chaque article.

Encore merci

JiBé


Bon ben en fait je me suis rabattu sur le planneur ;)
29 ko restent raisonnables pour mon usage


Tant pis ...
le truc fonctionnait aussi en vertical :
<http://cjoint.com/data/dmqJ2jUVSl_sh-truc-ht-bas.htm>


Oui je me doute mais mon truc n'apparait pas en haut de l'écran


Ha! ben ! si tu changes toudi d'idée ! aussi !

mais au milieu


Alors il ne glisse plus ?

et comme je suis pas très bon (c'est un euphémisme) en javascript et
qu'il y avait une certaine urgence j'ai été au plus simple et au plus
rapide. Je vais me re-pencher sur le truc par ce que je ne suis pas
hyper satisfait du recours à une bibliothèque aussi complète pour une
"yoli animation"


La page s'affiche dans un seul écran ?
(elle tient en entier dans du 800/600 ? elle ne fait que 500 de haut ?)

<http://cjoint.com/data/domVsGq6aF_sh-truc-milieu.htm>






Avatar
SAM
Whaou trop fort!!!
Je m'y remet ce weekend. Ce que je cherche à faire est visible à cette
adresse par exemple :
http://www.aqui.fr/politiques/francois-bayrou-il-n-y-a-plus-de-triangulaire-a-pau,775.html

il s'agit de l'ouverture du menu de "partagez cet article" en bas de
chaque article.


Non testé avec les IE :



<script type="text/javascript">

var truc = false;

function ouvre(divId){
if(truc) clearTimeout(truc);
var M = document.getElementById(divId);
M.style.height = 'auto';
var H = M.offsetHeight;
var sens = M.style.visibility=='hidden'? 1 : -1;
M.style.visibility = 'visible';
var larg = sens>0? 0 : H;
glisser(divId, larg, H, sens);
return false;
}

function glisser(what, larg, origine, sens) {
var M = document.getElementById(what);
larg += sens;
if(larg>0 && larg<origine) {
M.style.height = larg+'px';
truc = setTimeout('glisser("'+what+'",'+larg+','+
origine+','+sens+')',10);
}
else if(larg<=0) M.style.visibility = 'hidden';
}

</script>

<div id="menu" style="float: right;">
<a href="#" onclick="return ouvre('bookmark')"
title="Partagez cet article">
<img ...

(...)

<div id="bookmark"
style="visibility: hidden; overflow: hidden;
border: 1px solid silver; background-color: rgb(255, 255, 255);
z-index: 10; clear: both; float: right;
width: 410px; padding-bottom: 5px;">
<div style="margin: 3px; float: right;">
<a href="#" onclick="return ouvre('bookmark')">
(etc)



Attention à respecter le style du div à ouvrir
visibility: hidden; overflow: hidden;
et à ce qu'il soit dans la balise.

La fonction d'ouverture doit pouvoir fonctionner avec d'autres trucs du
même genre.


Maintenant ... quand on voit que la page fait plus de 600Ko ....
en effet ce n'est plus à 26ko près

--
sm