[Résolu] Problème pour faire fonctionner 2 javascripts en même temps

Question

bibi-arnaud

26 Jun 2008 à 14:34

Bonjour,

voila mon problème.

J'ai sur une page d'accueil un script pour faire fonctionner un flux d'info sous forme d'un texte défilant verticalement.
Celui-ci après test fonctionne à merveille.

J'ai un deuxième script qui lui sert à faire un défilement d'image horizontalement.
Celui-ci fonctionne aussi à merveille.

Ces 2 scripts sont totalement indépendants l'un de l'autre.
Lorsque je les fait fonctionner séparément, il n'y a aucun problème, par contre lorsque je les intègre en même temps sur la page, il n'y a plus que le fil info qui fonctionne.

Je deviens fou.

Voila mon code où j'appelle les fichiers javascripts externes.


<div id="div_contenu_index">
	<script language="javascript" type="text/javascript" src="scripts/imageslide_accueil.js"></script>
	<script language="javascript" type="text/javascript" src="scripts/slide.js"></script>
	
	
	<div id="info_accueil">
		<div class="titre">
			********
		</div>
		<div id="contenu_accueil">
		</div>
	</div>
	
	<div id="actu_accueil">
		<script language="javascript" type="text/javascript" src="scripts/news.js"></script>
	</div>
</div>

Si vous voulez voir les fichiers javascripts en eux même pas de problème, il suffit de me le dire.

J'espère que quelqu'un réussira à m'aider.

Merci d'avance.

Arnaud S.
Modifié par bibi-arnaud (25 Oct 2008 - 15:00)

Heyoan

26 Jun 2008 à 14:42

Salut,

bibi-arnaud a écrit :
Si vous voulez voir les fichiers javascripts en eux même pas de problème, il suffit de me le dire.

Euh... oui ! Ce serait plus simple Smiley cligne

!

bibi-arnaud

26 Jun 2008 à 14:48

Comme ils étaient bien long je me suis dit vais attendre avant de rallonger la page au cas où l'erreur serait directement dans le fichier principal.

imageslide_accueil.js


// JavaScript Document
var leftrightslide = new Array();



leftrightslide[0] ='<IMG src="images/diapo/accueil/1.png" border=1 alt="1"/>';

leftrightslide[1] ='<IMG src="images/diapo/accueil/2.png" border=1 alt="2"/>';

leftrightslide[2] ='<IMG src="images/diapo/accueil/3.png" border=1 alt="3"/>';

leftrightslide[3] ='<IMG src="images/diapo/accueil/4.png" border=1 alt="4"/>';

leftrightslide[4] ='<IMG src="images/diapo/accueil/5.png" border=1 alt="5"/>';

slide.js


		var sliderwidth="50px"

		var sliderheight="120px"

		var slidespeed=2

		slidebgcolor="00OO00"

		var finalslide=''

		var copyspeed=slidespeed

		leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'

		var iedom=document.all||document.getElementById

		if (iedom)

			document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

			var actualwidth=''

			var cross_slide, ns_slide

		function fillup()
		{

			if (iedom)
			{

				cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

				cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

				cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

				actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

				cross_slide2.style.left=actualwidth+4+"px"

			}

			else if (document.layers)
			{

				ns_slide=document.ns_slidemenu.document.ns_slidemenu2

				ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

				ns_slide.document.write(leftrightslide)

				ns_slide.document.close()

				actualwidth=ns_slide.document.width

				ns_slide2.left=actualwidth+4

				ns_slide2.document.write(leftrightslide)

				ns_slide2.document.close()

			}

			lefttime=setInterval("slideleft()",30)

		}

		window.onload=fillup

		function slideleft()
		{

			if (iedom)
			{

				if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+0))

					cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"

				else

					cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+4+"px"

				if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+0))

					cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"

				else

					cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+4+"px"

			}

			else if (document.layers)
			{

				if (ns_slide.left>(actualwidth*(-1)+0))

					ns_slide.left-=copyspeed

				else

					ns_slide.left=ns_slide2.left+actualwidth+4

				if (ns_slide2.left>(actualwidth*(-1)+0))

					ns_slide2.left-=copyspeed

				else

					ns_slide2.left=ns_slide.left+actualwidth+4

			}

		}

		if (iedom||document.layers)
		{

			with (document)
			{

				if (iedom)
				{

					write('<table width=680 align=center border=0 id="cinesearch"><tr><td>')

					write('<div style="position:relative;top:1px;left:-1px;width:100%;height:1;" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

					write('<div style="position:absolute;top:303px;left:-1px;width:100%;height:170;overflow:hidden;">')

					write('<div id="test2" style="position:absolute;width:100%;left:-1px;top:1px"></div>')

					write('<div id="test3" style="position:absolute;width:100%;left:-1000px;top:1px"></div></div></div>')

					write('</td></tr></table>')

				}

				else if (document.layers)
				{

				}

			}

		}

news.js


			ejs_scroll_largeur = 265;
			ejs_scroll_hauteur = 142;
			ejs_scroll_bgcolor = '#FFFFFF';
			/* Mettre ici le chemin de l'image de fond */
			ejs_scroll_background = "";
			/* Mettre ici le temps en secondes */
			ejs_scroll_pause_seconde = 5;

			ejs_scroll_message = new Array;
			ejs_scroll_message[0]='<a href="http://www.santimaria.fr" class="ejs_scroll">Bonjour, nous allons faire un test afin de vous proposer des news sur le site de *****. Bienvenue à vous !</a>';
			ejs_scroll_message[1]='<a href="http://www.santimaria.fr" class="ejs_scroll">Bonjour, Bonjour, nous allons faire un test afin de vous proposer des news sur le site de *****. Bienvenue à vous !</a>';
			function d(texte)
				{
				document.write(texte);
				}

			d('<DIV ID=ejs_scroll_relativ STYLE="position:relative;width:'+ejs_scroll_largeur+';height:'+ejs_scroll_hauteur+';background-color:'+ejs_scroll_bgcolor+';background-image:url('+ejs_scroll_background+')">');
			d('<DIV ID=ejs_scroll_cadre STYLE="position:absolute;width:'+(ejs_scroll_largeur-8)+';height:'+(ejs_scroll_hauteur-8)+';top:4;left:4;clip:rect(0 '+(ejs_scroll_largeur-8)+' '+(ejs_scroll_hauteur-8)+' 0)">');
			d('<div id=ejs_scroller_1 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:0;" CLASS=ejs_scroll>'+ejs_scroll_message[0]+'</DIV>');
			d('<div id=ejs_scroller_2 style="position:absolute;width:'+(ejs_scroll_largeur-8)+';left:0;top:'+ejs_scroll_hauteur+';" CLASS=ejs_scroll>'+ejs_scroll_message[1]+'</DIV>');
			d('</DIV></DIV>');

			ejs_scroll_mode =1;
			ejs_scroll_actuel = 0;

			function ejs_scroll_start()
				{
				if(ejs_scroll_mode == 1)
					{
					ejs_scroller_haut = "ejs_scroller_1";
					ejs_scroller_bas = "ejs_scroller_2";
					ejs_scroll_mode = 0;
					}
				else
					{
					ejs_scroller_bas = "ejs_scroller_1";
					ejs_scroller_haut = "ejs_scroller_2";
					ejs_scroll_mode = 1;
					}
				ejs_scroll_nb_message = ejs_scroll_message.length-1;
				if(ejs_scroll_actuel == ejs_scroll_nb_message)
					ejs_scroll_suivant = 0;
				else
					ejs_scroll_suivant = ejs_scroll_actuel+1;
				if(document.getElementById)
					document.getElementById(ejs_scroller_bas).innerHTML = ejs_scroll_message[ejs_scroll_suivant];
				ejs_scroll_top = 0;
				if(document.getElementById)
					setTimeout("ejs_scroll_action()",ejs_scroll_pause_seconde*1000)
				}

			function ejs_scroll_action()
				{
				ejs_scroll_top -= 1;
				document.getElementById(ejs_scroller_haut).style.top = ejs_scroll_top;
				document.getElementById(ejs_scroller_bas).style.top = ejs_scroll_top+ejs_scroll_hauteur;
				if((ejs_scroll_top+ejs_scroll_hauteur) > 0)
					setTimeout("ejs_scroll_action()",10)
				else
					ejs_scroll_stop()
				}

			function ejs_scroll_stop()
				{
				ejs_scroll_actuel = ejs_scroll_suivant;
				ejs_scroll_start()
				}

			window.onload = ejs_scroll_start;

Voila la jolie lecture lool

Merci d'avance.
Modifié par bibi-arnaud (31 Oct 2008 - 16:54)

koala64

Modérateur

26 Jun 2008 à 14:50

Salut,

Tes scripts sont tous deux lancés sur le onload. Pour corriger ce problème, tu peux consulter ce ci. Smiley cligne

Modifié par koala64 (26 Jun 2008 - 14:51)

Heyoan

26 Jun 2008 à 14:52

Re',

je dirais qu'il s'agit d'un classique conflit de window.onload. Une solution dans ce tuto.

A+

Edit: grillé Smiley biggol

!
Modifié par Heyoan (26 Jun 2008 - 14:53)

bibi-arnaud

26 Jun 2008 à 14:57

Je vais y jeter un coup d'oeil directement et tester pour essayer de résoudre le problème.
Je vous remercie beaucoup tous les deux pour votre réponse rapide.

bibi-arnaud

26 Jun 2008 à 15:14

Si j'ai bien compris, il faudrait que j'utilise ce script


function addLoadEvent(func)
{
   var oldonload = window.onload;
   if(typeof window.onload != 'function')
   {
      window.onload = func;
   }
   else
   {
      window.onload = function()
      {
         oldonload();
         func();
      }
   }
}

et que dans ce script j'intègre mes fonctions des javascripts externes.
Mais comment les intégrer exactement ?? Smiley confused

Désole, je débute dans ce qui est javascript.

De plus il y a une question que je me pose, c'est que vous dites que les scripts que j'appelle essaient sûrement de s'approprier chacun le onload, mais j'ai une page principale en PHP dans laquelle j'inclus différentes pages PHP (de façon à ne pas avoir tout le coe sur une seule longue page) qui elle aussi contient un peu de javascript. Voila le code en question :


<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        
        <title>*****</title>
        
        <link rel="shortcut icon" href="images/favicon/favicon.ico" />
        <link href="styles/styles.css" type="text/css" rel="stylesheet" />
        <link href="styles/menu.css" type="text/css" rel="stylesheet" />
    </head>
    
    <script language="javascript">
		var bodycolor_list = new Array ( "#3F3F3F",  "#B1C800" );
		var bodycolor_index = Math.floor (Math.random() * bodycolor_list.length);
		var bodycolor = bodycolor_list[bodycolor_index];
		document.write ("<body bgcolor=" + bodycolor + " oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>");
	</script>
    
    	<div id="div_generale">
                
			<?php
				include 'header.php';
				include 'menu.php';
				include 'contenu_index.php';  
				include 'footer.php';
				include 'validation.php';
			?>
                
		</div>
    </body>
</html>

La page contenu_index.php est celle qui contient la div ou j'appelle mes 3 fichiers JS externes.
Or, donc comme vous avez pu le voir j'ai aussi du javascript sur cette page principale (code qui me sert à alterner la couleur de fond du site) et ce code marche parfaitement en même temps que soit le système de news, soit la galerie d'image.
Comment cela se fait-il ?
Modifié par bibi-arnaud (25 Oct 2008 - 15:01)

bibi-arnaud

26 Jun 2008 à 15:31

C'est bon problème résolu.

Voila la solution qui a fonctionné

<body onload="startscript();">


<script>
function startscript()
{
    fillup();
    ejs_scroll_start();
}
</script>

et donc enlever les window.onload des 2 scripts.

Merci à vous pour la piste et à Christounet aussi pour son aide précieuse.
Modifié par bibi-arnaud (26 Jun 2008 - 15:39)

Heyoan

26 Jun 2008 à 15:36

bibi-arnaud a écrit :
C'est bon problème résolu.

Sauf que justement c'est pour éviter de faire ça qu'on utilise la fonction addLoadEvent Smiley cligne

.

Il suffit de remplacer window.onload=fillup; par addLoadEvent(fillup); et window.onload=ejs_scroll_start; par addLoadEvent(ejs_scroll_start);

bibi-arnaud

26 Jun 2008 à 15:47

Heyoan a écrit :
Sauf que justement c'est pour éviter de faire ça qu'on utilise la fonction addLoadEvent .

Il suffit de remplacer window.onload=fillup; par addLoadEvent(fillup); et window.onload=ejs_scroll_start; par addLoadEvent(ejs_scroll_start);

Ah oui j'avais pas vu ça sous cet angle.
Effectivement, vu comme ça c'est plus pratique Smiley cligne

Donc j'ai copié la fonction addLoadEvent que j'ai mis dans un fichier js externe, que j'ai appelé en même temps que les autres.
Et j'ai donc changé le onload par l'appel de la fonction addLoadEvent et ça marche impec aussi.

Je pense que je vais plutôt utiliser celle là que la solution que j'avais écrit un peu plus haut.

Merci beaucoup Smiley smile

, j'ai vraiment avancé dans ma compréhension du javascript là
Smiley biggrin

Heyoan

26 Jun 2008 à 15:52

bibi-arnaud a écrit :
Merci beaucoup , j'ai vraiment avancé dans ma compréhension du javascript là

Cool

!

Au passage les tutos Javascript m'avaient bien fait avancer moi aussi Smiley cligne

!

bibi-arnaud

26 Jun 2008 à 16:19

Heyoan a écrit :
Cool !

Au passage les tutos Javascript m'avaient bien fait avancer moi aussi !

Direct mis en favoris Smiley lol

Depuis que j'ai trouvé la section Tutos de Alsacreation il y a beaucoup de choses que j'ai réussi à vraiment mieux assimiler.
Franchement du super boulot.
Smiley cligne

Sujet clos