Sujet Précédent Sujet Suivant

Toggle en position fermé par défaut

Résolu/Fermé
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013 - 12 nov. 2012 à 18:12
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013 - 9 janv. 2013 à 11:05
Bonjour,

j'etais à la recherche d'un moyen de faire un toggle et j'ai trouvé une source qui me convenait parfaitement ici : http://mbox.tuxfamily.org/toggle/
tout fonctionne, c'est assez simple, il y a juste un point que je n'arrive pas à faire : faire en sorte qu'à l'ouverture de ma page le toggle soit en position fermé ou replié par défaut (et pas ouvert comme dans l'exemple) mais je ne suis pas assez calé en javascript pour comprendre ce code.

Pouvez vous m'aider ?
pour gagner du temps, je remets le code complet de la page exemple ci dessous : 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			.toggleTitle{
				width:450px;
				height:36px;
				line-height:36px;
				padding-left:50px;
				display:block;
				color:#FFFFFF;
				font-size:16px;
				font-weight:bold;
				font-family:Verdana;
				text-decoration:none;
			}
			.open{
				background:url('background.png') top no-repeat;
			}
			.close{
				background:url('background.png') 0px -36px no-repeat;
			}
			.toggleTop{
				width:500px;
				height:4px;
				line-height:4px;
				display:block;
				background:url('top.png');
				margin-top:4px;
			}
			.toggleBottom{
				width:500px;
				height:5px;
				line-height:5px;
				display:block;
				background:url('bottom.png');
			}
			.contentToggle{
				width:590px;
				padding:5px;
				background:url('content.png') repeat-y;
			}
			.toggle{
				overflow:hidden;
			}
		</style>
		
		<script type="text/javascript">
			function getElementsByClassName(className, tag, elm){
				var testClass = new RegExp("(^|s)" + className + "(s|$)");
				var tag = tag || "*";
				var elm = elm || document;
				var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
				var returnElements = [];
				var current;
				var length = elements.length;
				for(var i=0; i<length; i++){
					current = elements[i ];
					if(testClass.test(current.className)){
						returnElements.push(current);
					}
				}
				return returnElements;
			};
			
			var Toggle = {
			    create: function(target) {
			        return {
			            id: "no name",
			            orientation: "vertical",
						myObject : target,
			            min: 0,
			            max: target.offsetHeight,
			            speed: 350,
						isOpen : true,
			            move: function(titleChange) {
							if(this.myObject.testTime == null){
								start = (this.isOpen) ? this.max:this.min;
								end = (this.isOpen) ? this.min:this.max;
				                c = (350 / 50);
				                d = Math.round(this.speed / c);
				                w = new Array();
								this.myObject.currentStepX = 0;
								this.myObject.testTime = null;
				                for (var i = 1; i <= d; i++) {
				                    w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
				                }
								titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
				                this.go(this,c,w);
							}
			            },
			            go: function(b, c , w) {
			                b.myObject.testTime = window.setInterval(function() {
			                    var a = true;
			                    if (w[b.myObject.currentStepX]) {
			                        b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
			                        b.myObject.currentStepX++;
			                        a = false
			                    }
			                    if (a) {
			                        window.clearInterval(b.myObject.testTime);
			                        b.myObject.testTime = null;
									b.isOpen = (b.isOpen) ? false:true;
			                        if (b.callBack) {
			                            b.callBack()
			                        }
			                        return
			                    }
			                },
			                c);
			            },
						easeOutCubic : function (t, b, c, d) {
			 				return c*((t=t/d-1)*t*t + 1) + b;
						}
			        }
			    }
			};
		</script>
	</head>
	<body>
		
			<a href="#" class="toggleTitle open" onclick="Toggle1.move(this);return false;">Ouvre</a>
			<div class="toggle">
				<span class="toggleTop"></span>
				<div class="contentToggle">
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
				</div>
				<span class="toggleBottom"></span>
			</div>
		<script type="text/javascript">
			var Toggle1 = Toggle.create(getElementsByClassName('toggle')[0]);
		</script>
	</body>
</html>


merci de votre aide

A voir également:

4 réponses

Réponse 1 / 4
epitale Messages postés 3943 Date d'inscription jeudi 5 février 2009 Statut Membre Dernière intervention 27 octobre 2017 915
13 nov. 2012 à 01:06
bonsoir jp.bond
<style>
#iddutrucatoggler{
display:none;
}
</style>

$('#l'iddutrucacliquer').click(function() {

$('#iddutrucatoggler').toggle();

)}

ceci en utilisant jquery
--
1
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013
13 nov. 2012 à 11:12
euh là je t'avoue que j'ai rien compris...lol
0
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013
13 nov. 2012 à 13:23
ah ok, je vois...merci !
0
Réponse 2 / 4
Atropa Messages postés 1940 Date d'inscription mercredi 25 juin 2008 Statut Membre Dernière intervention 11 mai 2014 274
13 nov. 2012 à 00:49
bonsoir

il est bien compliqué pour pas grand chose se code.
je t'en post un demain qui fait la même chose plus simplement
0
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013
13 nov. 2012 à 11:11
c'est gentil merci !
0
Réponse 3 / 4
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013
13 nov. 2012 à 13:23
effectivement, vos remarques m'ont permis de trouver la voie...avec le jquery toggle() je me suis débrouillé avec un truc comme ca :

$("#click1").click(function () {
$("#niv1").toggle("slow");
});

et en mettant un display:none sur mon style toggle.

ca marche nickel et c'est bcp plus simple...

merci
0
Réponse 4 / 4
jp.bond Messages postés 7 Date d'inscription mercredi 31 octobre 2012 Statut Membre Dernière intervention 9 janvier 2013
9 janv. 2013 à 11:05
donc au final, voila un code global qui fonctionne.
A vous de récuperer les images et de les placer à la racine du dossier et de les adapter selon vos souhaits : 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
	.toggleTitle{
		width:450px;
		height:36px;
		line-height:36px;
		padding-left:50px;
		display:block;
		color:#FFFFFF;
		font-size:16px;
		font-weight:bold;
		font-family:Verdana;
		text-decoration:none;
		background:url('background.png') 0px -36px no-repeat;
	}
	.toggleTitle:hover{
	color: #66CC33;
	}
	.open{
		background:url('background.png') top no-repeat;
	}
/*	.close{
		background:url('background.png') 0px -36px no-repeat;
	}*/
	.toggleTop{
		width:500px;
		height:4px;
		line-height:4px;
		display:block;
		background:url('top.png');
		margin-top:4px;
	}
	.toggleBottom{
		width:500px;
		height:5px;
		line-height:5px;
		display:block;
		background:url('bottom.png');
	}
	.contentToggle{
		width:490px;
		padding:5px;
		background:url('content.png') repeat-y;
	}
	.toggle{
		overflow:hidden;
		display:none;
	}
</style>
		
		<script type="text/javascript">
			function getElementsByClassName(className, tag, elm){
				var testClass = new RegExp("(^|s)" + className + "(s|$)");
				var tag = tag || "*";
				var elm = elm || document;
				var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
				var returnElements = [];
				var current;
				var length = elements.length;
				for(var i=0; i<length; i++){
					current = elements[i ];
					if(testClass.test(current.className)){
						returnElements.push(current);
					}
				}
				return returnElements;
			};
			
			var Toggle = {
			    create: function(target) {
			        return {
			            id: "no name",
			            orientation: "vertical",
						myObject : target,
			            min: 0,
			            max: target.offsetHeight,
			            speed: 350,
						isOpen : true,
			            move: function(titleChange) {
							if(this.myObject.testTime == null){
								start = (this.isOpen) ? this.max:this.min;
								end = (this.isOpen) ? this.min:this.max;
				                c = (350 / 50);
				                d = Math.round(this.speed / c);
				                w = new Array();
								this.myObject.currentStepX = 0;
								this.myObject.testTime = null;
				                for (var i = 1; i <= d; i++) {
				                    w.push(this.easeOutCubic(i * c, start, end - start, this.speed))
				                }
								titleChange.className = (this.isOpen) ? "toggleTitle close":"toggleTitle open"
				                this.go(this,c,w);
							}
			            },
			            go: function(b, c , w) {
			                b.myObject.testTime = window.setInterval(function() {
			                    var a = true;
			                    if (w[b.myObject.currentStepX]) {
			                        b.myObject.style['height'] = w[b.myObject.currentStepX] + 'px';
			                        b.myObject.currentStepX++;
			                        a = false
			                    }
			                    if (a) {
			                        window.clearInterval(b.myObject.testTime);
			                        b.myObject.testTime = null;
									b.isOpen = (b.isOpen) ? false:true;
			                        if (b.callBack) {
			                            b.callBack()
			                        }
			                        return
			                    }
			                },
			                c);
			            },
						easeOutCubic : function (t, b, c, d) {
			 				return c*((t=t/d-1)*t*t + 1) + b;
						}
			        }
			    }
			};
		</script>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
	</head>
	<body>
		
			<div id="click1"><a id="a1" href="#" class="toggleTitle">Ouvre</a></div>
			<div id="niv1" class="toggle">
				<span class="toggleTop"></span>
				<div class="contentToggle">
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
					et la plein plein  de contenu <br />
				</div>
				<span class="toggleBottom"></span>
			</div>
			<script type="text/javascript">
                $("#click1").click(function () {
                $("#niv1").toggle("slow");
                $('#a1.toggleTitle').toggleClass('open');
    }); 
            </script>
	</body>
</html>
0

Discussions similaires

Coco chat connexion sur mobile, le tchat est fermé ?
Pisceneo -
brucine -

24 réponses
J'ai été banni de Coco et on me demande de payer
marco -
ouinly -

44 réponses