Apparition progressive d'une div

Le
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é
Vidéos High-Tech et Jeu Vidéo
Téléchargements
Vos réponses
Gagnez chaque mois un abonnement Premium avec GNT : Inscrivez-vous !
Trier par : date / pertinence
Bruno Desthuilliers
Le #1465993
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é


SAM
Le #1465992
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 :


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

Jibé
Le #1465991

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;"



SAM
Le #1506685

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

Jibé
Le #1551015
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é




SAM
Le #1568999
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 :

du moins ... chez moi ...

--
sm

Jibé
Le #1581737
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 :

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é


SAM
Le #1581736
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 :


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 ?)


--
sm



Jibé
Le #1581735
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 :


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 ?)







SAM
Le #1609350
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

Publicité
Poster une réponse
Anonyme