Aller au menu - Aller au contenu

Boutons qui bouge un scroll horizontal

Ma fonciton marche mais pas joli et rame

Pour accéder à cette section
Connectez-vous !
connexion_rpx
Page 1 
Auteur Message
1 visiteur sur ce sujet (1 Anonyme)
Page 1 
Hors ligne Shantees # Posté le 09/02/2010 à 01:52:55
Avatar

Ville : Paris
Pays : France métropolitaine
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 :

Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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 :

Code : HTML
1
2
3
<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
Édité le 09/02/2010 à 02:42:24 par Shantees
Hors ligne Totony # Posté le 09/02/2010 à 02:25:52
おれわTotonyですか。
Tu pourrais faire un onMouseDown = foo = setInterval(truc qui le fait bouger, interval) onMouseUp = clearInterval(foo);
Hors ligne Shantees # Posté le 09/02/2010 à 02:26:42
Avatar

Ville : Paris
Pays : France métropolitaine
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?
Hors ligne Totony # Posté le 09/02/2010 à 02:30:12
おれわTotonyですか。
setTimeout function(){}, /* ->>>>>> Pas 1 !! <<<<<<<- */ 100 /* ou 50 */

Edit : Tu utilise un timeout donc clearTimeout.
Pour interval c'est clearInterval.
Édité le 09/02/2010 à 02:33:58 par Totony
Hors ligne Shantees # Posté le 09/02/2010 à 02:32:49
Avatar

Ville : Paris
Pays : France métropolitaine
Comment on clear un setinterval ?
Hors ligne Totony # Posté le 09/02/2010 à 02:34:37
おれわTotonyですか。
(Voir l'edit)
Hors ligne Shantees # Posté le 09/02/2010 à 02:39:23
Avatar

Ville : Paris
Pays : France métropolitaine
Alors, merci mais les interval se désactive pas du coup ca plante à tous les coups voici mon nouveua code :
Code : JavaScript
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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);
}


Code : HTML
1
2
3
<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 ?
Édité le 09/02/2010 à 02:46:25 par Shantees
Hors ligne Totony # Posté le 09/02/2010 à 02:42:45
おれわTotonyですか。
Perso, je fais Timer = clearInterval(Timer);
(Et j'utilise javascript: avant le code (onClick="javascript:alert('Clicked');")
Hors ligne Shantees # Posté le 09/02/2010 à 02:46:03
Avatar

Ville : Paris
Pays : France métropolitaine
Les timer ne sont toujours pas reset j'ai update le code.. )=

Merci pour ton suivi
Édité le 09/02/2010 à 02:47:47 par Shantees
Hors ligne Totony # Posté le 09/02/2010 à 02:48:28
おれわTotonyですか。
Peux-tu poster tout ton code (de la page) (ou avec des [...]) exemple : Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html><head><script [...]>[...]
function scrollVersqqpart()
{

}
</script>
</head>
<body>
<div [...]>
</div>
</body>
</html>
Édité le 09/02/2010 à 02:48:47 par Totony
Hors ligne Shantees # Posté le 09/02/2010 à 02:53:02
Avatar

Ville : Paris
Pays : France métropolitaine
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

Secret (cliquez pour afficher)
Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!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 ;)
Édité le 09/02/2010 à 03:07:00 par Shantees
Hors ligne Totony # Posté le 09/02/2010 à 02:55:01
おれわTotonyですか。
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.
Édité le 09/02/2010 à 03:01:09 par Totony
Hors ligne Shantees # Posté le 09/02/2010 à 03:01:32
Avatar

Ville : Paris
Pays : France métropolitaine
Code mis a jour mais ca déconne toujours )=
Hors ligne Golmote # Posté le 09/02/2010 à 03:03:03
Not a LARBIN !
Avatar
Flux RSS
close

Ville : Lanvallay
Pays : France métropolitaine
Comme ça ça fonctionne pas ?

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<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/
Édité le 09/02/2010 à 06:17:11 par Golmote
Image utilisateur

Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
 
Hors ligne Shantees # Posté le 09/02/2010 à 03:11:57
Avatar

Ville : Paris
Pays : France métropolitaine
Si parfait! bravo golmote..

Pourquoi mixer timeout et interval ?

Pas compris la subtilité, veux bien une explication, si c'est pas une erreur ty :)
Édité le 09/02/2010 à 03:21:56 par Shantees
Hors ligne Golmote # Posté le 09/02/2010 à 06:05:16
Not a LARBIN !
Avatar
Flux RSS
close

Ville : Lanvallay
Pays : France métropolitaine
C'est une faute de frappe ^^
clearTimeout dans les deux cas ;)

EDIT : C'est étrange que ça ait quand même fonctionné xD
Édité le 09/02/2010 à 06:16:07 par Golmote
Image utilisateur

Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
 
Hors ligne Shantees # Posté le 09/02/2010 à 14:19:05
Avatar

Ville : Paris
Pays : France métropolitaine
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 ? :)

Édité le 09/02/2010 à 14:23:36 par Shantees
Hors ligne Golmote # Posté le 09/02/2010 à 15:40:26
Not a LARBIN !
Avatar
Flux RSS
close

Ville : Lanvallay
Pays : France métropolitaine
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:
Image utilisateur

Pour abréger JavaScript, on dit JS, pas Java.
Java != JavaScript
Merci.
Sachez aussi que vous aider est éprouvant.
Veuillez excuser les désagréments encourus.
 
Hors ligne Shantees # Posté le 09/02/2010 à 16:14:16
Avatar

Ville : Paris
Pays : France métropolitaine
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

Retour au forum "Javascript" ou à la liste des forums

Pour accéder à cette section
Connectez-vous !
connexion_rpx