olivier.s
Messages postés49Date d'inscriptionjeudi 11 avril 2002StatutMembreDernière intervention28 mars 2015
-
12 sept. 2011 à 13:21
Bonjour,
J'ai un problème pour faire un scroll javascript sur une DIV avec des boutons.
Je souhaiterais faire scroller une DIV qui contient du texte avec deux boutons. J'ai l'ai mise en overflow hidden. Les deux boutons ne doivent pas apparaitrent quand l'utilisateur n'a pas besoin de scroller (e.g.: le bouton gauche disparait quand on est tout à gauche du texte).
Mon problème est le suivent: l'utilisateur scrolle un peu à droite puis clique à gauche pour revenir en butée du scroll à gauche. Le bouton gauche disparait => c'est bon. Mais IE freeze. Je n'ai plus accès à aucun bouton (l'alert ne sert qu'a faire ce test) ni spécifique (à l'exception du sroit) ni ceux du navigateur. Si la fenetre perd le focus (on clique sur une autre fenetre e.g.: un explorateur qui n'a riens avoir puis reviens sans rien toucher), on recupere la possiblité de cliquer. Même chose si on clique sur le bouton droit.
Le pire étant que ca marche avec firefox mais pas avec IE6.
Si quelqu'un à une idée géniale, je suis preneur. J'ai déjà essayé de donner le focus à d'autres éléments sans succès. J'ai aussi essayé le visibility:hidden comme le display:none.
Merci d'avance.
Olivier
Voici ce ma page de test + CSS.
Ca marche bien avec Firefox mais pas avec IE6.
<head>
<LINK rel="stylesheet" type="text/css" href="test1css.css">
<SCRIPT language="Javascript">
function myScroll(content, myvalue) {
var lenghtText = document.getElementById(content).scrollWidth;
// now scroll
document.getElementById(content).scrollLeft += myvalue;
// get the with of the div => document.getElementById(content).offsetWidth);
var manageRightbut = document.getElementById(content).scrollLeft + document.getElementById(content).clientWidth;
// manage visibility of left button
if (myvalue < 0) {
if (document.getElementById(content).scrollLeft <= 0 ){
document.getElementById(content).scrollLeft = 0;
clearInterval(currentScroller);
myVisi('leftdivbut', 0);
}else{
myVisi('leftdivbut', 1);
myVisi('rightdivbut', 1);
}
}else if( myvalue > 0) {
if( manageRightbut >= lenghtText ){
clearInterval(currentScroller);
myVisi('rightdivbut', 0);
}else{
myVisi('leftdivbut', 1);
myVisi('rightdivbut', 1);
}
}
}
function myVisi(elmt, vis){
mydiv = document.getElementById(elmt);
if (vis == 0)
mydiv.style.visibility = "hidden"; //to hide it
else
mydiv.style.visibility = "visible";
}
function initRightButton(content){
if (document.getElementById(content).scrollWidth <= document.getElementById(content).clientWidth){
document.write('<div class=\"right\" id=\"rightdivbut\" style=\"visibility:hidden\"><button id=\"rightbut\" onmousedown=\"currentScroller = setInterval(function() { myScroll(\'menu\', 2) }, 5);\" onmouseup=\"clearInterval(currentScroller)\" >right</button></div>');
}else{
document.write('<div class=\"right\" id=\"rightdivbut\" style=\"visibility:visible\"><button id=\"rightbut\" onmousedown=\"currentScroller = setInterval(function() { myScroll(\'menu\', 2) }, 5);\" onmouseup=\"clearInterval(currentScroller)\" >right</button></div>');
}
}
</script>
</head>
<body>
<div class="scroll">
<div class="content" id="menu">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean pharetra, urna vel tristique condimentum, dolor sem consequat lectus, vitae pellentesque ipsum velit quis felis. Proin faucibus urna at enim. Nulla facilisi. Morbi eu urna id metus ullamcorper rutrum. Duis eu tortor ac augue rutrum sollicitudin. Sed gravida ornare leo. Nullam iaculis risus sed velit. Sed aliquet leo id lacus. Curabitur vestibulum ultrices ante. Nulla ut ante at justo tristique tempus. Donec magna massa, viverra sed, lobortis nec, dignissim id, libero. Quisque interdum pharetra lectus. Donec vestibulum tempus turpis. Phasellus rutrum leo in nunc. Maecenas a elit blandit nibh luctus dictum. Nunc vel tellus. Nullam ipsum ante, dapibus in, semper ut, iaculis quis, sem. Praesent eros.</div>
<!--
<div class="content" id="menu">Lorem ipsum dolor sit amet, Praesent eros.</div>
-->
<div class="left" id="leftdivbut" style="visibility:hidden" ><button id="leftbut" onmousedown="currentScroller = setInterval(function() { myScroll('menu', -2) }, 5);" onmouseup="clearInterval(currentScroller)" >left</button></div>
<script language="Javascript">
initRightButton('menu');
</script>
<div class="left" id="leftdiv2but" style="visibility:visible" ><button id="leftbut2" onclick="alert('toto')" >left alert </button></div>
</body>