new!
|
[ Forums >> JavaScript >> Problèmes de création JavaScript / DHTML >> fonction apparaitre/disparaitre un div en nominatif. ]
| > fonction apparaitre/disparaitre un div en nominatif. |
[ Posté par Nyoz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 20-06-2008 à 22:49 | 63 messages ]
Bonjour à toutes et à tous. Alors voilà mon problème : j'ai un script js me permettant d'afficher/masquer un div en le déroulant (en fait le script est dispo sur l'editeurjavascript : "Cacher/Afficher un div avec du "style" !", mais je l'ai un petit peu modifiée), le probléme c'est qu'il n'est codé que pour fonctionner avec un seul div (popup).
Or j'aimerais bien pouvoir faire en sorte que la fonction soit nominative (elle prend comme variable un id, et le div ayant cet id se voit appliqué la fonction), exactement comme ce code là :
function DivStatus( nom, numero )
{
var divID = nom + numero;
if ( document.getElementById && document.getElementById( divID ) )
{
Pdiv = document.getElementById( divID );
PcH = true;
}
else if ( document.all && document.all[ divID ] )
{
Pdiv = document.all[ divID ];
PcH = true;
}
else if ( document.layers && document.layers[ divID ] )
{
Pdiv = document.layers[ divID ];
PcH = true;
}
else
{
PcH = false;
}
if ( PcH )
{
Pdiv.className = ( Pdiv.className == 'cachediv' ) ? '' : 'cachediv';
}
} |
|
MAIS BON JE N'Y ARRIVE PAS. Malgré avoir trifouillé un peu partout...
Voilà une page exemple entière contenant le script :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ESSAI</title>
<script type="text/javascript">
function Suite(lien){
var objet = document.getElementById('popup'); // entre les deux ' mettre le nom du div à faire apparaître !
if(objet.style.display == "none" || !objet.style.display){
objet.style.display = "block";
objet.style.overflow = "hidden";
lien.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 <= 20)
{
clearInterval(timer); //Arrête le timer
objet.style.display = "none";
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
lien.innerHTML = "+";
}
}
</script>
</head>
<body>
[<a href="javascript:;" onclick="Suite(this)">+</a>]
<div id="popup" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78"></div>
<div id="popup2" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78"></div>
<br /><br />Ici 
</body>
</html> |
|
Donc j'espère que quelqu'un saura m'éclairer...
Merci d'avance !
________________
:: nyoz ::
|
|
|
|
[ Posté par guySk ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 21-06-2008 à 01:55 | 713 messages ]
le:
| else if(objet.style.display == "block") |
|
est de trop, puisqu'il ne peut y avoir que 2 états, ouvert ou fermer, si le premier n'est pas valider par la première condition, alors c'est forcément la seconde.
Sinon pour ton code tu modifies ta fonction Suite(lien) en : Suite(lien,div_id) ce qui donnerait:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ESSAI</title>
<script type="text/javascript">
function Suite(lien,div_id){
var objet = document.getElementById(div_id); // entre les deux ' mettre le nom du div à faire apparaître !
if(objet.style.display == "none" || !objet.style.display){
objet.style.display = "block";
objet.style.overflow = "hidden";
lien.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 {
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 <= 20)
{
clearInterval(timer); //Arrête le timer
objet.style.display = "none";
}
};
fct();
timer = setInterval(fct,40); //Toute les 40 ms
lien.innerHTML = "+";
}
}
</script>
</head>
<body>
[<a href="javascript:;" onclick="Suite(this,'popup')">+</a>]
<div id="popup" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78">popup</div>
<div id="popup2" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78">popup2</div>
<br /><br />Ici
</body>
</html> |
|
________________
a'++'a
| [ Posté par guySk ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 21-06-2008 à 01:58 | 713 messages ]
Pour la partie html, tu voudrais plutôt:
<body>
[<a href="javascript:;" onclick="Suite(this,'popup')">+</a>]
<div id="popup" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78">popup</div>
<br />[<a href="javascript:;" onclick="Suite(this,'popup2')">+</a>]
<div id="popup2" style="display: none; border: 1px solid #000000; width: 300px; height:18px">
<img src="images/bannieres/bann_gn_300x78.jpg" width="300" height="78">popup2</div>
<br /><br />Ici
</body>
|
|
________________
a'++'a
| [ Posté par Nyoz ] [ Détails ] [ Contact ] [ Citer ]
[ Posté le 22-06-2008 à 08:16 | 63 messages ]
Ah merci beaucoup, c'est exactement ce que je voulais ! Je me disais bien qu'il fallait rentrer un petit "var objet = document.getElementById(div_id);" quelque part, mais je n'arrivais pas à intégrer parfaitement la variable...
Merci beaucoup !
________________
:: nyoz ::
|
|
Services email :
Vous devez vous identifier pour profiter des services par email du forum.
|
|
]
