rss
Ils ont besoin de votre aide Tous les messages sans réponse
Les règles à respecter
 Réserver un accueil cordial aux nouveaux utilisateurs.
 Poster son message dans le thème le plus approprié.
 Respecter la législation en vigueur.
 Faire usage de formule de politesse et échanger avec courtoisie.
 Ne pas poster de message à vocation commerciale.
 Rédiger les messages dans un langage clair sans abréviations, style télégraphique ou mode SMS
Le cas échéant, expliquer de manière pédagogique les règles du forum
Lire le texte complet de la charte
[Javascript] Problèmes setInterval et div
par Prosis
 Fil de Discussions
Statut : Non résolu
vendredi 29 décembre 2006 à 20:52:42
Bonjour

Ci dessous, vous trouverez le code qui me fait de la misère :P vous pouvez le copier/coller dans un fichier html et l'essayer.

Les problèmes sont les suivants: Les divs s'agrandissent et se repositionnent mais Dieu que c'est lent. Connaissez-vous une façon de les faire aller plus vite?

Ensuite, vous remarquerez que, lorsqu'un div se "referme" l'autre div s'agrandit. Comment éviter cela?

Merci :) 


<html>
<head>
<title></title>

<style type="text/css">
#page{
	height: 500px;
	width: 800px;
}
</style>
<script type="text/javascript">
	function open_page(page_id, previous_id, current_top, div_number, previous_height){
		if(document.getElementById(page_id).style.height != "350px"){
			document.getElementById(page_id).style.overflow = "auto";
			var next_height = 20;
			var page_top = Number(div_number) * 20;
			var timer = {"ID":0};
			timer.callBack = function() {
				document.getElementById(previous_id).style.height = previous_height;
				document.getElementById(page_id).style.height = next_height;
				document.getElementById(page_id).style.top = current_top;
				previous_height--;
				next_height++;
				current_top--;
				if (current_top < page_top) { 
					clearInterval(timer.ID);
					timer.ID=null;
					timer.callBack=null;
					timer=null; 
				}
			};
			timer.ID=setInterval(timer.callBack, 1)
		}
		else{
			var current_height = 350;
			var page_top = Number(div_number) * 20;
			var timer = {"ID":0};
			timer.callBack = function() {
				document.getElementById(previous_id).style.height = previous_height;
				document.getElementById(page_id).style.height = current_height;
				document.getElementById(page_id).style.top = page_top;
				current_height--;
				previous_height++;
				page_top++;
				if (page_top > current_top) { 
					clearInterval(timer.ID);
					timer.ID=null;
					timer.callBack=null;
					timer=null; 
				}
			};
			timer.ID=setInterval(timer.callBack, 1)
			document.getElementById(page_id).style.overflow = "hidden";	
		}	
	}
</script>

</head>

<body bgcolor="#FFFFFF" topmargin="0" leftmargin="0" marginwidth="0" marginheight="0">
<div id = "page">
	<div id="header">
		The Header
	</div>
	<div id="home" style="position: absolute; top: 20px; height: 350px; width: 800px; background: red; overflow:hidden;">
		Home<br/><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vestibulum. Aliquam vel elit vel orci vulputate feugiat. Sed aliquam. Duis sit amet nulla. Fusce lorem. Maecenas pellentesque. In eu velit sed velit molestie gravida. Nullam dictum sapien vitae risus. Sed condimentum, dolor id pharetra interdum, metus turpis ornare diam, at sagittis pede lacus nec erat. Vivamus lobortis nibh non erat.

		Donec sed enim. Cras tincidunt eros eu risus. Praesent porta volutpat dui. Pellentesque fringilla urna sed magna. Fusce neque diam, congue quis, laoreet volutpat, ultrices eu, lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rutrum lectus a dolor. Integer elit. Ut dolor. Vestibulum quis turpis. Proin sit amet nisi. Nulla ullamcorper, quam nec tincidunt consequat, magna lorem ultricies lectus, faucibus sollicitudin purus neque sit amet turpis. Mauris ornare ante sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

		Pellentesque dapibus orci eu nisl. Donec vitae urna quis lacus bibendum semper. Mauris vulputate quam nec urna. Donec nec leo in ligula cursus tempus. In eu metus at nibh egestas placerat. Sed id pede. Nulla semper. Quisque odio tortor, interdum a, sagittis non, commodo congue, massa. Sed dolor eros, molestie at, volutpat ac, egestas eget, pede. Etiam pulvinar, felis non ultricies gravida, nisi magna ullamcorper lacus, vel faucibus nisl purus vitae libero. Duis tempus accumsan tellus. Praesent vel tellus. Vestibulum consectetuer consequat lectus.

		Proin elementum libero. Morbi posuere risus ac nisl. In hac habitasse platea dictumst. Quisque vel urna hendrerit erat fermentum fermentum. In hac habitasse platea dictumst. Quisque non massa a risus luctus suscipit. Praesent eros ipsum, sollicitudin ac, interdum commodo, vulputate nec, eros. Pellentesque elementum. Aenean tempor. Integer dolor felis, tempus ut, pellentesque non, pretium nec, nibh. Phasellus eu urna. Nullam semper sodales neque.

		Aenean nibh augue, lobortis eget, gravida a, porttitor eget, pede. Suspendisse laoreet libero at tortor. Suspendisse ultricies feugiat elit. Suspendisse vel massa vel urna rhoncus dictum. Aliquam fringilla mi pulvinar tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eget nulla ut ipsum varius accumsan. Aenean elementum laoreet odio. Suspendisse luctus augue eget risus. Etiam a dolor at ante lobortis fringilla. Aliquam sed diam. Nullam iaculis fringilla leo. Ut sit amet mi. Pellentesque sed risus.
	</div>
	<div id="about" style = "position: absolute; top: 370px; height: 20px; width: 800px; background: blue; overflow:hidden;">
		<a href="javascript: open_page('about','home','370','2','350');">About</a><br/><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vestibulum. Aliquam vel elit vel orci vulputate feugiat. Sed aliquam. Duis sit amet nulla. Fusce lorem. Maecenas pellentesque. In eu velit sed velit molestie gravida. Nullam dictum sapien vitae risus. Sed condimentum, dolor id pharetra interdum, metus turpis ornare diam, at sagittis pede lacus nec erat. Vivamus lobortis nibh non erat.

		Donec sed enim. Cras tincidunt eros eu risus. Praesent porta volutpat dui. Pellentesque fringilla urna sed magna. Fusce neque diam, congue quis, laoreet volutpat, ultrices eu, lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rutrum lectus a dolor. Integer elit. Ut dolor. Vestibulum quis turpis. Proin sit amet nisi. Nulla ullamcorper, quam nec tincidunt consequat, magna lorem ultricies lectus, faucibus sollicitudin purus neque sit amet turpis. Mauris ornare ante sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

		Pellentesque dapibus orci eu nisl. Donec vitae urna quis lacus bibendum semper. Mauris vulputate quam nec urna. Donec nec leo in ligula cursus tempus. In eu metus at nibh egestas placerat. Sed id pede. Nulla semper. Quisque odio tortor, interdum a, sagittis non, commodo congue, massa. Sed dolor eros, molestie at, volutpat ac, egestas eget, pede. Etiam pulvinar, felis non ultricies gravida, nisi magna ullamcorper lacus, vel faucibus nisl purus vitae libero. Duis tempus accumsan tellus. Praesent vel tellus. Vestibulum consectetuer consequat lectus.

		Proin elementum libero. Morbi posuere risus ac nisl. In hac habitasse platea dictumst. Quisque vel urna hendrerit erat fermentum fermentum. In hac habitasse platea dictumst. Quisque non massa a risus luctus suscipit. Praesent eros ipsum, sollicitudin ac, interdum commodo, vulputate nec, eros. Pellentesque elementum. Aenean tempor. Integer dolor felis, tempus ut, pellentesque non, pretium nec, nibh. Phasellus eu urna. Nullam semper sodales neque.

		Aenean nibh augue, lobortis eget, gravida a, porttitor eget, pede. Suspendisse laoreet libero at tortor. Suspendisse ultricies feugiat elit. Suspendisse vel massa vel urna rhoncus dictum. Aliquam fringilla mi pulvinar tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eget nulla ut ipsum varius accumsan. Aenean elementum laoreet odio. Suspendisse luctus augue eget risus. Etiam a dolor at ante lobortis fringilla. Aliquam sed diam. Nullam iaculis fringilla leo. Ut sit amet mi. Pellentesque sed risus.
	</div>
	<div id="services" style = "position: absolute; top: 390px; height: 20px; width: 800px; background: yellow; overflow:hidden;">
		<a href="javascript: open_page('services','about','390','3','350');">Services</a><br/><b­r/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vestibulum. Aliquam vel elit vel orci vulputate feugiat. Sed aliquam. Duis sit amet nulla. Fusce lorem. Maecenas pellentesque. In eu velit sed velit molestie gravida. Nullam dictum sapien vitae risus. Sed condimentum, dolor id pharetra interdum, metus turpis ornare diam, at sagittis pede lacus nec erat. Vivamus lobortis nibh non erat.

		Donec sed enim. Cras tincidunt eros eu risus. Praesent porta volutpat dui. Pellentesque fringilla urna sed magna. Fusce neque diam, congue quis, laoreet volutpat, ultrices eu, lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rutrum lectus a dolor. Integer elit. Ut dolor. Vestibulum quis turpis. Proin sit amet nisi. Nulla ullamcorper, quam nec tincidunt consequat, magna lorem ultricies lectus, faucibus sollicitudin purus neque sit amet turpis. Mauris ornare ante sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

		Pellentesque dapibus orci eu nisl. Donec vitae urna quis lacus bibendum semper. Mauris vulputate quam nec urna. Donec nec leo in ligula cursus tempus. In eu metus at nibh egestas placerat. Sed id pede. Nulla semper. Quisque odio tortor, interdum a, sagittis non, commodo congue, massa. Sed dolor eros, molestie at, volutpat ac, egestas eget, pede. Etiam pulvinar, felis non ultricies gravida, nisi magna ullamcorper lacus, vel faucibus nisl purus vitae libero. Duis tempus accumsan tellus. Praesent vel tellus. Vestibulum consectetuer consequat lectus.

		Proin elementum libero. Morbi posuere risus ac nisl. In hac habitasse platea dictumst. Quisque vel urna hendrerit erat fermentum fermentum. In hac habitasse platea dictumst. Quisque non massa a risus luctus suscipit. Praesent eros ipsum, sollicitudin ac, interdum commodo, vulputate nec, eros. Pellentesque elementum. Aenean tempor. Integer dolor felis, tempus ut, pellentesque non, pretium nec, nibh. Phasellus eu urna. Nullam semper sodales neque.

		Aenean nibh augue, lobortis eget, gravida a, porttitor eget, pede. Suspendisse laoreet libero at tortor. Suspendisse ultricies feugiat elit. Suspendisse vel massa vel urna rhoncus dictum. Aliquam fringilla mi pulvinar tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eget nulla ut ipsum varius accumsan. Aenean elementum laoreet odio. Suspendisse luctus augue eget risus. Etiam a dolor at ante lobortis fringilla. Aliquam sed diam. Nullam iaculis fringilla leo. Ut sit amet mi. Pellentesque sed risus.
	</div>
	<div id="support" style = "position: absolute; top: 410px; height: 20px; width: 800px; background: green; overflow:hidden;">
		<a href="javascript: open_page('support','services','410','4','350');">Support and Contact</a><br/><br/>
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque vestibulum. Aliquam vel elit vel orci vulputate feugiat. Sed aliquam. Duis sit amet nulla. Fusce lorem. Maecenas pellentesque. In eu velit sed velit molestie gravida. Nullam dictum sapien vitae risus. Sed condimentum, dolor id pharetra interdum, metus turpis ornare diam, at sagittis pede lacus nec erat. Vivamus lobortis nibh non erat.

		Donec sed enim. Cras tincidunt eros eu risus. Praesent porta volutpat dui. Pellentesque fringilla urna sed magna. Fusce neque diam, congue quis, laoreet volutpat, ultrices eu, lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla rutrum lectus a dolor. Integer elit. Ut dolor. Vestibulum quis turpis. Proin sit amet nisi. Nulla ullamcorper, quam nec tincidunt consequat, magna lorem ultricies lectus, faucibus sollicitudin purus neque sit amet turpis. Mauris ornare ante sed arcu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

		Pellentesque dapibus orci eu nisl. Donec vitae urna quis lacus bibendum semper. Mauris vulputate quam nec urna. Donec nec leo in ligula cursus tempus. In eu metus at nibh egestas placerat. Sed id pede. Nulla semper. Quisque odio tortor, interdum a, sagittis non, commodo congue, massa. Sed dolor eros, molestie at, volutpat ac, egestas eget, pede. Etiam pulvinar, felis non ultricies gravida, nisi magna ullamcorper lacus, vel faucibus nisl purus vitae libero. Duis tempus accumsan tellus. Praesent vel tellus. Vestibulum consectetuer consequat lectus.

		Proin elementum libero. Morbi posuere risus ac nisl. In hac habitasse platea dictumst. Quisque vel urna hendrerit erat fermentum fermentum. In hac habitasse platea dictumst. Quisque non massa a risus luctus suscipit. Praesent eros ipsum, sollicitudin ac, interdum commodo, vulputate nec, eros. Pellentesque elementum. Aenean tempor. Integer dolor felis, tempus ut, pellentesque non, pretium nec, nibh. Phasellus eu urna. Nullam semper sodales neque.

		Aenean nibh augue, lobortis eget, gravida a, porttitor eget, pede. Suspendisse laoreet libero at tortor. Suspendisse ultricies feugiat elit. Suspendisse vel massa vel urna rhoncus dictum. Aliquam fringilla mi pulvinar tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi eget nulla ut ipsum varius accumsan. Aenean elementum laoreet odio. Suspendisse luctus augue eget risus. Etiam a dolor at ante lobortis fringilla. Aliquam sed diam. Nullam iaculis fringilla leo. Ut sit amet mi. Pellentesque sed risus.
	</div>
</div>

</body>
Configuration: Windows XP
Firefox 2.0.0.1
Répondre à Prosis  Signaler ce message aux modérateurs
Discussions pertinentes trouvées dans le forum
26/11 16h27javascript 2 DIV, un seul affichage.Programmation27/11 18h373
03/12 12h32probleme javascript iframe+div+IEWindows16/05 14h202
07/10 11h31javascript flash div et macWindows07/10 11h310
01/07 17h28javascript et DIVWindows02/07 00h511
17/06 18h04javascript et div-layerWindows17/06 18h040
Plus de discussions sur « [Javascript] Problèmes setInterval et div » Discussion en cours Discussion fermée Problème résolu
Logiciels pertinents trouvés dans les téléchargements
Télécharger DivX codecs 6.8.3DivX codecs - Le codec Divx Community est gratuit pour un usage personnel et permet de lire les fichiers au format DivX ! L'installeur...Catégorie: Codecs
Licence: Freeware/gratuit
Télécharger Dr.DivX OSS 2.0.0Dr.DivX OSS - Dr. DivX OSS est une application libre et portable permettant de convertir (transcoder) un grand nombre de formats vidéo...Catégorie: Conversion
Licence: Open Source
Télécharger DivFix 1.10DivFix - Il est fréquent que lors d'un téléchargement de vidéos ou lors d'un gravage sur CD ou autres supports la vidéo soit...Catégorie: Codecs
Licence: Freeware/gratuit
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [Javascript] Problèmes setInterval et div »
Répondre
Titre du message :
Votre pseudo:
Votre email :
Message: 
  •  
  •  
Options: Recevoir les réponses par mail.
 

Aide