11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème de cohabitation de plusieurs scripts

Bonjour à tous,

J'ai effectué une longue recherche avant de solliciter votre aide sur ce forum. J'ai notamment consulté le tutoriel d'Alsacreations "Java Script : organiser son code en modules" sans parvenir, par manque de connaissance en Java Script, à résoudre mon problème.

Le voici donc : je ne parviens pas à faire cohabiter deux scripts dans une même pages xhtml. Un de ces scripts génère une galerie photo, sur la base du code fournit dans un des tutoriels d'Alsacreations. Le second gère un changement du CSS (me permettant notamment de changer la couleur du background).

Sans aucun doute, mon intégration des scripts est mauvaise. Je n'ai aucune connaissance en Java Script, je compte m'y mettre sous peu, lorsque j'aurais suffisamment approfondi le xhtml et css.

En attendant, j'ai besoin de votre aide pour identifier mes erreurs. Indépendamment, ces deux scripts fonctionnent parfaitement. Il semble qu'il y ait un problème d'interaction ?

Mon head html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
		<script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="styleswitcher.js"></script>
		<title>TITRE</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
		<link rel="alternate stylesheet" type="text/css" title="design2" href="design2.css">
   </head>


Le script de la galerie (script.js): 

function displayPics()
{
	var photos = document.getElementById('galerie_mini') ;
	var liens = photos.getElementsByTagName('a') ;
	var big_photo = document.getElementById('big_pict') ;
	for (var i = 0 ; i < liens.length ; ++i) {
		liens[i].onclick = function() {
			big_photo.src = this.href;
			big_photo.alt = this.title;
			return false;
		};
	}
}
window.onload = displayPics;


Le script du changement de CSS (styleswitcher.js) : 

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}
function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}
function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}
function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}
window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);


Merci pour votre aide.
Robin[/i][/i][/i][/i][/i]
Modifié par Meego (19 Jul 2008 - 12:16)
Le problème est qu'il n'est pas possible de mettre deux événement onload sur l'élément window.

Ce que tu peux faire (entre plein d'autre solutions, c'est un problème très très fréquent sur ce forum et d'autres Smiley cligne ), c'est dans ton premier script enlever la ligne 
window.onload = displayPics;


et dans le deuxième remplacer :
window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

par 
window.onload = function(e) {
  displayPics();
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

Modifié par matmat (18 Jul 2008 - 20:00)
Sujet clos
Aller à