Boutons qui bouge un scroll horizontal

Ma fonciton marche mais pas joli et rame

9 février 2010 à 1:52:55

Bonjour,

J'ai fait 2 bouton qui gère un scroll horizontal sur une div.

J'ai codé 2 fonction mais l'effet n'est vraiment pas top ca rame...

Comment le rendre plus joli ?

le code js :

var timer1=null; var timer2=null; 

function scrollGauche()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollG = document.getElementById('boutonscrollG');
div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft-1;	
timer1 = setTimeout(function(){scrollGauche();},1);
}

function scrollDroite()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollD = document.getElementById('boutonscrollD');

div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft+1;	
timer2 = setTimeout(function(){scrollDroite();},1);
}

Coté html :

<img src="images/fleche-gauche.png" id="boutonscrollG" alt="Precedentes" onmouseup="scrollGauche();" onmousedown="ClearTimeout(timer1); clearTimeout(timer2);"
  />  
<img src="images/fleche-droite.png" id="boutonscrollD"  alt="Suivantes" onmouseup="scrollDroite();" onmousedown="ClearTimeout(timer1); clearTimeout(timer2);"/>

Autre chose j'ai jquery donc pourquoi pas une solution jquery

Totony

9 février 2010 à 2:25:53

Tu pourrais faire un onMouseDown = foo = setInterval(truc qui le fait bouger, interval) onMouseUp = clearInterval(foo);

Shantees

9 février 2010 à 2:26:43

Salut je viens de modifier mon sujet j'ai fait en gros comme tu me dis.. ca marche mais rame et pas joli,

Une idée?

Totony

9 février 2010 à 2:30:13

setTimeout function(){}, /* ->>>>>> Pas 1 !! <<<<<<<- */ 100 /* ou 50 */

Edit : Tu utilise un timeout donc clearTimeout.
Pour interval c'est clearInterval.

Shantees

9 février 2010 à 2:32:49

Comment on clear un setinterval ?

Totony

9 février 2010 à 2:34:38

(Voir l'edit)

Shantees

9 février 2010 à 2:39:24

Alors, merci mais les interval se désactive pas du coup ca plante à tous les coups voici mon nouveua code :

var timer1=null; var timer2=null; 
function scrollGauche()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollG = document.getElementById('boutonscrollG');
div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft-1;	
timer1 = setInterval(function(){scrollGauche();},500);
}

function scrollDroite()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollD = document.getElementById('boutonscrollD');

div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft+1;	
timer2 = setInterval(function(){scrollDroite();},500);
}

<img src="images/fleche-gauche.png" id="boutonscrollG" style="visibility:hidden;position:relative;top:-40px;left:-20px" alt="Precedentes" onmouseover="scrollGauche();" onmouseout="javascript:timer1 = clearInterval(timer1); timer2 = clearInterval(timer2); "
  />  
<img src="images/fleche-droite.png" id="boutonscrollD" style="visibility:hidden;position:relative;top:-40px;left:595px" alt="Suivantes" onmouseover="scrollDroite();" onmouseout="javascript:timer1 = clearInterval(timer1); timer2 = clearInterval(timer2); "/>

Y'a pas une manière plus séxy et intelligente & moins ramante via effets Jquery ?

Totony

9 février 2010 à 2:42:45

Perso, je fais Timer = clearInterval(Timer);
(Et j'utilise javascript: avant le code (onClick="javascript:alert('Clicked');")

Shantees

9 février 2010 à 2:46:03

Les timer ne sont toujours pas reset j'ai update le code.. )=

Merci pour ton suivi

Totony

9 février 2010 à 2:48:28

Peux-tu poster tout ton code (de la page) (ou avec des [...]) exemple :

<html><head><script [...]>[...]
function scrollVersqqpart()
{

}
</script>
</head>
<body>
<div [...]>
</div>
</body>
</html>

Shantees

9 février 2010 à 2:53:02

C'est une page blindée de php et traitement ajax..

Je fait tout sur une page xhtml simple pour vous rendre la vie plus facile

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script language="javascript">
function scrollGauche()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollG = document.getElementById('boutonscrollG');
div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft-1;        
timer1 = setInterval(function(){scrollGauche();},500);
}

function scrollDroite()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollD = document.getElementById('boutonscrollD');

div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft+1;        
timer2 = setInterval(function(){scrollDroite();},500);
}
function desactiveTimeOut()
{
clearInterval(timer1); clearInterval(timer2);	
}
</script>
</head>

<body>
 <div id="MenuSlidePhoto" style="position:relative;overflow-x:none;white-space:nowrap;overflow:hidden ; width:600px; height:100px; border:1px solid red;">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test </div>
 
 <img src="http://www.musiciens.eu/images/fleche-gauche.png" id="boutonscrollG" style="position:relative;top:-40px;left: 0px" alt="Precedentes" onmouseover="scrollGauche();" desactiveTimeOut(); "
  />  
<img src="http://www.musiciens.eu/images/fleche-droite.png" id="boutonscrollD" style="position:relative;top:-40px;left:595px" alt="Suivantes" onmouseover="scrollDroite();" onmouseout="desactiveTimeOut();"/>
</body>
</html>

A copier coller pour test

Totony

9 février 2010 à 2:55:02

Essaies de faire quelque chose comme ça :
(Edit : )

var TimerFoo;
var TimerFoo2;

(/Edit)

function ScrollDown()
{
//Code pour scroll down
}

function ScrollUp()
{
//Code pour scroll up
}

function RemoveIntervals()
{
//Remove les intervalles
TimerFoo = clearInterval(TimerFoo);
TimerFoo2 = clearInterval(TimerFoo2);
}

function SetInterval(ToSet)
{
TimerFoo = setInterval(/* function */, /* Interval */);
TimerFoo2 = setInterval(/*...*/);
}

Edit : Et aussi déclares les variables Timer# au début du JS.

Shantees

9 février 2010 à 3:01:33

Code mis a jour mais ca déconne toujours )=

Golmote

9 février 2010 à 3:03:03

Comme ça ça fonctionne pas ?

<script type="text/javascript">
var timer; 
function scrollGauche()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollG = document.getElementById('boutonscrollG');
div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft-2;	
timer = setTimeout(scrollGauche,50);
}

function scrollDroite()
{
var div = document.getElementById('MenuSlidePhoto');
var boutonscrollD = document.getElementById('boutonscrollD');
div.scrollLeft=document.getElementById('MenuSlidePhoto').scrollLeft+2;	
timer = setTimeout(scrollDroite},50);
}

</script>
<img src="images/fleche-gauche.png" id="boutonscrollG" style="visibility:hidden;position:relative;top:-40px;left:-20px" alt="Precedentes" onmouseover="scrollGauche();" onmouseout="clearTimeout(timer);" />  
<img src="images/fleche-droite.png" id="boutonscrollD" style="visibility:hidden;position:relative;top:-40px;left:595px" alt="Suivantes" onmouseover="scrollDroite();" onmouseout="clearTimeout(timer);" />

EDIT : Erreur corrigée

EDIT 2 : Tiens, j'ai posté ce post à 03:03:03 \o/

Shantees

9 février 2010 à 3:11:58

Si parfait! bravo golmote..

Pourquoi mixer timeout et interval ?

Pas compris la subtilité, veux bien une explication, si c'est pas une erreur ty

Golmote

9 février 2010 à 6:05:17

C'est une faute de frappe

clearTimeout dans les deux cas

EDIT : C'est étrange que ça ait quand même fonctionné xD

Shantees

9 février 2010 à 14:19:06

Merci golmote,

Néanmoins ca me convient pas trop, (même si ca marche).
Ca rame beaucoup ca saccade.. Bref. Pis diminuer encore le timeout fait grave planter les navs donc bon..

Je voudrais savoir si vous avez pas une idée pour une solution plus sexy rapide et fluide, maybe basé sur un effet jquery ?

Golmote

9 février 2010 à 15:40:26

Ca changera pas grand chose...

Tu sais, jQuery, c'est du JS, ils ne peuvent rien inventer de plus...

Tout ce que tu peux faire pour fluidifier, selon moi, c'est jouer avec le pas des lignes 7 et 15 et le délai des lignes 8 et 16 :euh:

Shantees

9 février 2010 à 16:14:16

Ouep j'ai pas arretté de jouer avec ces params, rien n'y fait.

J'ai vu ce genre d'effet sur des sites fait très fluide, mais impossible de remettre la main sur un de ces sites, j'aurais pu m'inspirer du cs, dommage.

Merci