begin process at 2012 05 29 06:33:48
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Divers

 > 

fonction cache montre avec slide


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

fonction cache montre avec slide

mercredi 5 janvier 2011 à 17:56:59 | fonction cache montre avec slide

thejoker31200

Bonjour
j'ai amélioré un bout de code pour afficher et cacher du texte avec effet de slide (affichage progressif)
sans le slide ca fonctionne
avec le slide ca fonctionne aussi maais une seule fois sur chacun des items...

mon code
//////////*****/////////
Code Javascript :
function SuiteH(thingId){	
	//  On ajoute la div a afficher et sa hauteur
	/// on recupere le nombre d'id
	 z=0;
	 for(i=1; i<=10;i++){
	 if (document.getElementById("divid" + i) ) z++;
	 } 
 //alert ('toto '+z);		 
	//on recupere id de la div a cacher
	IDaC=0;
	NbId =1;
	for (i = 1; i <= z; i++) {
		var objet = document.getElementById("divid" + i) ;
		//alert ('tutu '+document.getElementById("divid" + i).style.display);
		if (objet.style.display == "block") {
	       IDaC=NbId;
		    }
		NbId++;	
	}
	//alert ('toto '+IDaC);
   //on definit la largeur(hauteur) a reduire	
	largeur = 600;
///on cache la div
	//var i;
	var targetElement;
	//for(i=1; i<=NbId;i++){
	/* targetElement = document.getElementById("divid" + i) ;
	 targetElement.style.display = "none" ;*/
	if (IDaC != "0") {
alert ('tata '+IDaC);
	var targetElement = document.getElementById("divid" + IDaC);
	var lFinalH = 0; //largeur finale 
	var lActuelH = largeur; //largeur initiale 
	var timer;
	var fctH = function(){
		lActuelH -= 10; //Augmente la largeur de -10px  
		targetElement.style.width = lActuelH + 'px';
		if (lActuelH <= lFinalH) {
			clearInterval(timer); //Arrête le timer
			//targetElement.style.overflow = 'hidden';
			targetElement.style.display = "none";
			targetElement.style.width = "0"; // Fix du cache de la div +++
		}
	};
	fctH();
	timer = setInterval(fctH, 1); //Toutes les 1 ms
	//IDaC.innerHTML = "+";
	document.getElementById("divid" + IDaC).value = "+";
}
// }
 //on montre la div
 var objet;
 var linal;
 var lActuel;
 largeur2=600;
	var objet = document.getElementById("divid" + thingId) ; // entre les deux  le nom du div que tu veux faire apparaître 
	if (objet.style.display == "none" /*|| !objet.style.display*/) {
alert ('titi '+thingId);
		
		//objet.style.width  = "400px";
		//objet.style.overflow = "hidden";
		//thingId.innerHTML = "-";
		document.getElementById("divid" + thingId).value = "-";
		var lFinal = largeur2; //largeur finale (la largeur une fois que ça aura fini de déplier) 
		var lActuel = 0; //largeur initiale (la hauteur au début)
		var timer;
		
		var fct = function(){
			lActuel += 10; //Augmente la largeur de 10px  
			objet.style.width = lActuel + 'px';
			if (lActuel > lFinal) {
				clearInterval(timer); //Arrête le timer
			/*objet.style.overflow = 'inherit';*/
			}
		};
		fct();
		timer = setInterval(fct, 1); //Toutes les 1 ms
		objet.style.display = "block";
	}	
}

//////////*****/////////

appel de la fonction
Code HTML :
<a href="#" onclick="SuiteH('1')">et encore...</a><br />
<a href="#" onclick="SuiteH('2')">et plus...</a><br /><br />

<div id="bloc6">
<div id="divid1" style="position: absolute;display: none;  width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
<div id="divid2" style="position: absolute;display: none;  width: 0px;background-color : #734994; color : #ffffff;filter:alpha(opacity=90);opacity:0.9;">
texte
</div>
</div>
jeudi 6 janvier 2011 à 18:46:47 | Re : fonction cache montre avec slide

PetoleTeam

Membre Club
Bonjour,
visiblement un problème de conflit de timer, il t'en faut 2, donc renommes le second

;O)


Cette discussion est classée dans : fonction, timer, code, texte, slide


Répondre à ce message

Sujets en rapport avec ce message

Arret/reprise timer [ par ju0123456789 ] Bonjour, J'ai une fonction que j'ai dèv. qui compte le temps passé sur une page, j'aimerais rajouter un bouton "stop timer" et "reprise timer", mais problème placement d'une div dans une boucle php (fonction ajax) [ par testyo ] Bonjour à tous , J'ai un fichier php qui génère un tableau à la fin de chaque ligne j'ai créé des boutons (+) et (-) qui affiche et masque des détail incompatibilité d'un code javascript pour firefox et IE8 [ par chmidou ] Bonjour, j'ai récupéré un code et je l'ai adapté à mes besoins seulement, ça ne marche que sur chrome. voici, le code en question veuillez m'aidez. Position d'une selection dans un div editable [ par fefefefef ] Bonjour, je cherche a obtenir la position d'une sélection d'un texte placé dans un div que l'on peut modifier à l'aide de l'attribut contentEditable. Redimensionner une iframe tout en étant à l'intérieur [ par eagledark ] Bonjour à tous, Je rencontre actuellement un problème. Je suis dans une iframe et j'ai un button. En cliquant dessus, sur la propriété onClick, j'ex Fonction STOP [ par bydouille ] Bonjour à tous, Voilà mon soucis : Je lance un lecteur Mp3 avec cela [code=html] <param name="movie" value="sons/dewplayer-vol.swf?son=&a recherche fonction convertion champ texte formulaire en majuscule début de phrase, y compris après un point [ par RomantikA ] Bonjour à tous, je viens vous voir parceque depuis avant hier je buche sur une fonction (et je précise que je suis nul en javascript...). j'ai alors p Filtrer : bloquer l'email déjà utilisé : une seule demande par email. [ par aspkiddy ] Bonjour,[^^happy3] J'ai un champ de texte pour les emails et un bouton... [code=php]Votre email* : <input name="email" type Appel de plusieurs fonction JS avec windows.onload [ par frlobe ] Bonjour j'ai un script d'autocompletion en JS qui fonctionne très bien. Il s'appelle de cette façon: [code=js]{body} [/code] Et la fonction JS initial demand de correction d'un code [ par lyamcarter ] Bonjour, c'est mon premier message ici. Je suis novice, et j'essaye de faire une page web dans laquelle il y a un tableau. Je souhaite en cliquant su


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,218 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales