incompatibilite entre 2 JS

[galeazzo]

Bonjour à tous,

Je dois vous prévenir que je suis passablement nouveau et même assez nul dans la création de sites web et des langages afférents.

J'ai un problème de cohabitation de 2 scripts JS sur une même page.

Ce sont

1/ switcher.js (qui permet la permutation de 2 ou plusieurs feuilles de style pour des présentations différentes) et

2/ thw.js qui permet la mobilité horizontale d'une page web (ex: http://www.thehorizontalway.com/).

Je suis vraiment bloqué et ne sais comment résoudre le conflit de ces 2 scripts.

Pouvez/voulez-vous m'aider, s'il vous plait ?

Merci beaucoup

Je mets donc les 2 scripts antagonistes:

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")); 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);

le second, qui sert au scrolling horizontal de ma page ici :

/* Horizontal Tiny Scrolling - a smooth scrolling script for horizontal websites
(the brother of the vertical "Tiny Scrolling")
by Marco Rosella - http://www.centralscrutinizer.it/en/...tiny-scrolling
v0.6 - February 14, 2007

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/

window.onload = function() {
HtinyScrolling.init(); scrollTips.init();
}

var HtinyScrolling = {
speed : 50, //set here the scroll speed: when this value increase, the speed decrease.
maxStep: 150, //set here the "uniform motion" step for long distances
brakeK: 3, //set here the coefficient of slowing down
hash:null,
currentBlock:null,
requestedX:0,
init: function() {
var lnks = document.getElementsByTagName('a');
for(var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
addEvent(lnk,'click',HtinyScrolling.initScroll,false);
lnk.onclick=function(){return false;} // Safari
}
}
},
getTarget: function(target) {
while(target.tagName.toLowerCase() != 'a')
target = target.parentNode;
return target;
},
getElementXpos: function(el){
var x = 0;
while(el.offsetParent){
x += el.offsetLeft;
el = el.offsetParent;
} return x;
},
getScrollLeft: function(){
if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
else return window.pageXOffset;
},
getWindowWidth: function(){
if (window.innerWidth) return window.innerWidth;
if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
},
getDocumentWidth: function(){
if (document.width) return document.width;
if(document.body.offsetWidth) return document.body.offsetWidth;
},
initScroll: function(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
targ = HtinyScrolling.getTarget(targ); //a fix by Skid X
HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
if(!HtinyScrolling.currentBlock) return;
HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
HtinyScrolling.scroll(targ);
return false;
},
scroll: function(targ){
var left = HtinyScrolling.getScrollLeft();
if(HtinyScrolling.requestedX > left) {
var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
var offset = Math.max(2, Math.min(endDistance, HtinyScrolling.maxStep));
} else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
} window.scrollTo(left + offset, 0);
if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
window.scrollTo(HtinyScrolling.requestedX, 0);
if(typeof XULDocument != 'undefined') {
location.hash = HtinyScrolling.hash;
}

//optional instructions: you can add an effect to enlight after the scroll the selected section.
//uncomment this line below if you want to change the opacity:
//mark.change_opacity(HtinyScrolling.hash);

//you can also call the function "mark.change_colors(HtinyScrolling.hash, fps, (duration in sec), #(color in hex), #(color in hex))" to change background color of selected section
HtinyScrolling.hash = null;
} else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
}
}

/* the mouse scrolling doesn't work with Opera, that hasn't a event associated to the mouse wheel */

var scrollTips = {
dx : null,
init : function() {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
} else document.attachEvent("onmousewheel", this.mouseScroll);
var left = document.getElementById('left');
addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
var right = document.getElementById('right');
addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
},
mouseScroll : function(e) {
if (!e) var e = window.event;
if (e.wheelDelta <= 0 || e.detail>=0){
window.scrollBy(80,0);
} else window.scrollBy(-80,0);
},
arrowScroll: function(val) {
if(val==1) {
window.scrollBy(70,0);
} else {
window.scrollBy(-70,0)
}
}
}

var mark = { //first four functions are based on The Fade Anything Technique by Adam Michela
valop : 100,
req : 0,
make_hex: function(r,g,b) {
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
change_colors: function(id, fps, duration, from, to) {
var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;

var frame = 0;
if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);
var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);
var r,g,b,h;
while (frame < frames) {
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);
setTimeout("mark.set_img_bgcolor('"+id+"','"+h+"')", delay);
frame++;
delay = interval * frame;
}
setTimeout("mark.set_img_bgcolor('"+id+"','"+to+"')", delay);
},

set_img_bgcolor: function(id, c) {
if(document.getElementById(id).getElementsByTagName('img')[0]) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
o.style.backgroundColor = c;} else return;
},
get_img_bgcolor: function(id) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
while(o) {
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
},
change_opacity: function(el) {
if(!(/^menu/.test(el))) {
var post = document.getElementById(el);
if (mark.valop > 10 && mark.req == 0) {
mark.valop -= 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 10) {mark.req = 1};
} else
if (mark.valop < 100 && mark.req == 1) {
mark.valop += 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 100) {mark.req = 2};
}
if (mark.req != 2){
setTimeout("mark.change_opacity('"+el+"')", 50);
}
else { mark.set_opacity(post,9999); mark.req = 0; return;}
}
},
set_opacity: function(post,val){
post.style.opacity='0.' + val;
post.style.filter="alpha(opacity=" + val + ")";
}
}

function addEvent( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}

function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
}

merci à ceux qui voudront bien m'aider.

[Mephisto]

et, plus precisement... le probleme, c'est quoi ? 'ca marche pas', c'est plutot vague

raporter un message d'erreur, ou decrire un comportement inattendu pourrait nous aider a te donner un coup de main

[galeazzo]

Ben .... ça marche pas et ça me fout le b.... dans ma page.

Chacun des 2 script à un window onload ce qui créé donc un conflit que je ne parviens pas à résoudre.

En tout cas, merci de ton intérêt

[Yangzebul]

Bah tu as bien diagnostiqué le problème apparement, tu es pas si inculte que tu le prétends.

Dans ton premier script, switcher.js :

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

var initSwitcher = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

Dans ton second script, thw.js :

/*
 * window.onload = function() {
 * HtinyScrolling.init(); scrollTips.init();
 * }
 */

En dernier, après tes deux scripts :

addEvent(window, 'load',  HtinyScrolling.init);
addEvent(window, 'load',  scrollTips.init);
addEvent(window, 'load',  initSwitcher);

Ca devrait résoudre tes problèmes d'initialisation, après y'a peut être d'autres sources d'incompatibilités, je n'ai pas fait un tour complet du code.

[galeazzo]

Bah tu as bien diagnostiqué le problème apparement, tu es pas si inculte que tu le prétends.

Dans ton premier script, switcher.js :

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

var initSwitcher = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

Dans ton second script, thw.js :

/*
 * window.onload = function() {
 * HtinyScrolling.init(); scrollTips.init();
 * }
 */

En dernier, après tes deux scripts :

addEvent(window, 'load',  HtinyScrolling.init);
addEvent(window, 'load',  scrollTips.init);
addEvent(window, 'load',  initSwitcher);

Ca devrait résoudre tes problèmes d'initialisation, après y'a peut être d'autres sources d'incompatibilités, je n'ai pas fait un tour complet du code.

Merci de ta réponse, je sens que je commence à être sur la voie ...

Mais, dois-je mettre la derniere portion de code [addEvent....] en fin de chacun des 2 scripts ? Parce qu'après essai, ça ne fonctionne pas. ou plutôt, le scroll fonctionne bien mais le switcher non.

[Mephisto]

les scripts doivent etre inclus avant la declaration du onload

et, n'etant pas coutumier des addEvent, j'aurais propose de rajouter une fonction onload() (ou mescouilles(), enfin, on s'en fou) lancant tes trois trucs, que tu appelerais de l'attribu onload de body

as-tu un message d'erreur quand tu tente de switcher ?

edit: pour debug du JS (sous firefox), j'affectionne tout particulierement FireBug

test, ca pourrait te rendre service

[galeazzo]

les scripts doivent etre inclus avant la declaration du onload

et, n'etant pas coutumier des addEvent, j'aurais propose de rajouter une fonction onload() (ou mescouilles(), enfin, on s'en fou) lancant tes trois trucs, que tu appelerais de l'attribu onload de body

as-tu un message d'erreur quand tu tente de switcher ?

edit: pour debug du JS (sous firefox), j'affectionne tout particulierement FireBug

test, ca pourrait te rendre service

Non, pas de message d'erreur, seulement le scroll horizontal qui ne fonctionne pas.

Quant à firebug, je ne sais pas comment m'en servir.

De la manière dont je l'utilise, tout semble OK

[Mephisto]

dans ton message precedant, c'etait le scroll qui fonctionnait bien, et le switch qui ne marchait pas... Tu peux clarifier ?

[galeazzo]

dans ton message precedant, c'etait le scroll qui fonctionnait bien, et le switch qui ne marchait pas... Tu peux clarifier ?

Je n'y comprends plus rien.

Pour t'éclairer, il faudrait que tu ailles sur mon site en ligne http://charivari.boite2sites.com/ et que tu voies la bête.

Bon. J'ai voulu rajouter un swicher pour changer de skin et là, hors ligne, sur mon ordi et avec le styleswicher.js, cela ne marche plus. Il entre en conflit avec le JS qui fait marcher le scrolling.

Depuis, je tente désespérément d'y parvenir avec votre aide.

[Yangzebul]

Merci de ta réponse, je sens que je commence à être sur la voie ...

Mais, dois-je mettre la derniere portion de code [addEvent....] en fin de chacun des 2 scripts ? Parce qu'après essai, ça ne fonctionne pas. ou plutôt, le scroll fonctionne bien mais le switcher non.

Non, non.

Tu dois mettre tes 3 initialisations (addEvent) à la fin.

En fait dans ton script de scrolling (à la fin du fichier) il y'a deux fonctions addEvent et removeEvent que j'utilise. C'est pour ça que ton switcher ne fonctionne pas tu utilise la fonction addEvent avant qu'elle n'ai été lue. Donc soit tu met toutes tes initialisations à la fin, soit tu remontes tes gestionnaires d'évènements au tout début. À toi de voir.

Au passage ces deux fonctions addEvent et removeEvent ont étés écrites par John Resig à l'occasion d'un concours organisé par Peter Paul Koch en 2005, et c'est une implémentation minimaliste et très connue. M. Marco Rosella à quand même pas mal de culot de les inclure dans son script sans même mettre un petit crédit pour l'auteur originel. 

[galeazzo]

Merci de ta réponse, je sens que je commence à être sur la voie ...

Mais, dois-je mettre la derniere portion de code [addEvent....] en fin de chacun des 2 scripts ? Parce qu'après essai, ça ne fonctionne pas. ou plutôt, le scroll fonctionne bien mais le switcher non.

Non, non.

Tu dois mettre tes 3 initialisations (addEvent) à la fin.

En fait dans ton script de scrolling (à la fin du fichier) il y'a deux fonctions addEvent et removeEvent que j'utilise. C'est pour ça que ton switcher ne fonctionne pas tu utilise la fonction addEvent avant qu'elle n'ai été lue. Donc soit tu met toutes tes initialisations à la fin, soit tu remontes tes gestionnaires d'évènements au tout début. À toi de voir.

Au passage ces deux fonctions addEvent et removeEvent ont étés écrites par John Resig à l'occasion d'un concours organisé par Peter Paul Koch en 2005, et c'est une implémentation minimaliste et très connue. M. Marco Rosella à quand même pas mal de culot de les inclure dans son script sans même mettre un petit crédit pour l'auteur originel. 

A la fin de quoi ? Je ne veux pas te gonfler mais il semble que tu oublies que je suis complètement nul en cette matière.

Tu me dis de mettre ces 3 addevent à la fin. Ok ok, mais où? A la fin de quel script ? Ou dois-je créér un script comme ceci:

<script type=text/javascript>
addEvent(window, 'load',  HtinyScrolling.init);
addEvent(window, 'load',  scrollTips.init);
addEvent(window, 'load',  initSwitcher);
</script>

Ecoute, j'ai l'impression d'être un

Cordialement

[Yangzebul]

À la fin de l'ensemble de tes scripts :

<script1:switch.js>

<script2:thw.js> <-- ici tu as  la déclaration de tes fonctions addEvent/removeEvent

* <--  A PARTIR D'ICI C'EST BON

<maPageHtml>

En fait tous ce qui compte c'est que ce soit après la déclaration de tes fonctions addEvent et removeEvent (qui sont situés je te le rapelle à la fin du fichier thw.js). Si tu met le bousin avant tu fais appel à des fonctions qui n'existent pas (normal le navigateur ne les as pas encore lus donc il ne voit pas de quoi tu lui parle). Il suffit juste que tu mette ton initialisation après ces deux fonctions, peu importe l'endroit.

[galeazzo]

À la fin de l'ensemble de tes scripts :

<script1:switch.js>

<script2:thw.js> <-- ici tu as  la déclaration de tes fonctions addEvent/removeEvent

* <--  A PARTIR D'ICI C'EST BON

<maPageHtml>

En fait tous ce qui compte c'est que ce soit après la déclaration de tes fonctions addEvent et removeEvent (qui sont situés je te le rapelle à la fin du fichier thw.js). Si tu met le bousin avant tu fais appel à des fonctions qui n'existent pas (normal le navigateur ne les as pas encore lus donc il ne voit pas de quoi tu lui parle). Il suffit juste que tu mette ton initialisation après ces deux fonctions, peu importe l'endroit.

Ca ne marche pas.

Je te remercie beaucoup pour ta patience et ta disponibilité. Mais je dois être trop c.. Je ne comprends rien. Je préfère m'en tenir à ce qui marche actuellement avant de tout foutre en l'air.

[galeazzo]

À la fin de l'ensemble de tes scripts :

<script1:switch.js>

<script2:thw.js> <-- ici tu as  la déclaration de tes fonctions addEvent/removeEvent

* <--  A PARTIR D'ICI C'EST BON

<maPageHtml>

En fait tous ce qui compte c'est que ce soit après la déclaration de tes fonctions addEvent et removeEvent (qui sont situés je te le rapelle à la fin du fichier thw.js). Si tu met le bousin avant tu fais appel à des fonctions qui n'existent pas (normal le navigateur ne les as pas encore lus donc il ne voit pas de quoi tu lui parle). Il suffit juste que tu mette ton initialisation après ces deux fonctions, peu importe l'endroit.

Ca ne marche pas.

Je te remercie beaucoup pour ta patience et ta disponibilité. Mais je dois être trop c.. Je ne comprends rien. Je préfère m'en tenir à ce qui marche actuellement avant de tout foutre en l'air.

[RESOLU ]

[Mephisto]

pense a changer le titre du topic, et attention a la gestion des resolutions (je suis pourtant qu'en 1024x768, mais j'ai une bande blanche en bas - pas terrible)

[Quarky]

Editer sous le premier message puis Edition complète