Bonjour,

J'utilise ca :
http://flowplayer.org/tools/demos/scro [...] toscroll.html
http://flowplayer.org/tools/demos/scro [...] vigation.html

Le scroll est donc automatique, en fonction d'une intervalle
et j'ai aussi les touches de navigation, je peux donc mettre suivant ou précédent manuellement.

J'aimerais que après avoir cliqué sur suivant ou précédent, que le décompte de l'intervalle se remette à zéro, comment faire svp ?

Je ne m'y connais pas trop en jQuery...

Je comprends ce que tu entends par "intervalle" ... ?

eh bien dans le code, si je met interval:4000,

le défilement automatique se fait toutes les 4 secondes...
hors, si j'ai fait un défilement manuel et que le décompte était arrivé à 3, il ne reste donc plus que 1 seconde avant le prochain défilement, du coup la personne n'a pas le temps de voir l'information comme il le faut...

intervalle est donc le temps entre chaque scroll automatique.

désolé si je n'ai pas bien expliqué

Ok j'ai compris. Bah montre ton code actuel (HTML et JS (CSS éventuellement))

Ok, alors voici le html

<a class="prev" style="text-decoration:none;margin-left:35px;">Voir le bloc Précèdent</a> - 
<a class="next" style="text-decoration:none;">Voir le bloc Suivant</a>

  <div class="scrollable"> 
     <div class="items"> 
	<div>Bloc dinfos 1</div>
	<div>Bloc dinfos 2</div>
	<div>Bloc dinfos 3</div>
	<div>Bloc dinfos 4</div>
     </div> 
   </div>

et le JS

<script>
	$(function() {		
		$("div.scrollable").scrollable({ 
			size:2, //Nombre d'items visibles
			easing: 'linear', //Effet de glissement
			interval: 4000,  //Intervalle, ici 4 secondes entre chaque glissement
			loop: true,  //Tourner en boucle
			speed: 500, //Vitesse du glissement
			onBeforeSeek: function() { 
				this.getItems().fadeTo(300, 0.3); //Transparence pendant glissement
			}, 
			onSeek: function() { 
				this.getItems().fadeTo(300, 1); //Enleve la transparence en fin de glissement
			} 
			
		});
	});
	</script>

Rappel : pour faire cela, j'ai suivi ce qu'ils disent sur :
jQuery Tools - (c'est la partie "5 Scrolabble" qui nous intéresse)

EDIT : Sur le site, ici plus précisément il y a des infos en bas de page concernant les méthodes possibles et tout... mais je n'y connais rien là dedans... (j'aimerais bien apprendre d'ailleurs...[c'est un peu ce que je fais là en même temps lol])

Donne ton CSS aussi, stp, parce que là chez moi, le test n'est pas super concluent...

Ok, le voici...

div.scrollable {
	
	/* required settings */
	position:relative;
	overflow:hidden;	 	
	width: 630px;	
	height:148px;	
	margin:auto;
	-moz-border-radius: 10px;
	/*background: #F0F6F9;*/
	border: 1px solid #ccc;
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
div.scrollable div.items {	
	/* this cannot be too large */
	width:20000em;	
	position:absolute;
	clear:both;		
	/* decoration */
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	
	/* custom decoration */
	text-align:center;
	width:315px;
	padding:0 0px;
	height:148px;
	margin-right: auto;	
	-moz-border-radius:30px;
}

/* active item */
div.scrollable div.items div.active {
	border:1px none #ccc;		
	background-color:#eee;
}

/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	margin-left:0px;
	width:200px;
	height:8px;
	
	top:255px;
	right:-130px;
	display:inline-block;
	position:absolute;
}


/* items inside navigator */
div.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:0 3px;
	background:url(navigator.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
div.navi a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
div.navi a.active {
	background-position:0 -16px;     
}

Alors, il faudrait que tu remplaces tes deux liens prev et next par ça :

<button onclick="precedent();">Voir le bloc Précédent</button> -
<button onclick="suivant();">Voir le bloc Suivant</button>

Et mettre ce code JavaScript :

var scr, timer;
	$(function() {		
		scr = $("div.scrollable").scrollable({ 
                        api: true,
			size:2, //Nombre d'items visibles
			easing: 'linear', //Effet de glissement
			interval: 0,  //Intervalle, ici 4 secondes entre chaque glissement
			loop: true,  //Tourner en boucle
			speed: 500, //Vitesse du glissement
			onBeforeSeek: function() { 
				this.getItems().fadeTo(300, 0.3); //Transparence pendant glissement
			}, 
			onSeek: function() { 
				this.getItems().fadeTo(300, 1); //Enleve la transparence en fin de glissement
			} 
			
		});
    timer = setTimeout(defile,4000);
	});
function defile() {
  scr.next();
  timer = setTimeout(defile,4000);
}
function suivant() {
  clearTimeout(timer);
  scr.next();
  setTimeout(defile,4000);
}
function precedent() {
  clearTimeout(timer);
  scr.prev();
  setTimeout(defile,4000);
}

Le défilement automatique était chiant à gérer, du coup je l'ai recréé pour qu'il soit plus facilement contrôlable

Si tu as des questions, n'hésite pas.

Si ton sujet est résolu, pense à l'indiquer à l'aide du lien en bas de page.

Eh bien Merci beaucoup !
Ce que j'ai demandé marche parfaitement !! (après un click sur précédent ou suivant, le décompte avant le défilement recommence)

Mais il y a un mais... lol

Avant d'appliquer ta modification, lorsque la souris était sur un items ou lorsque je cliquais sur un item (ca revient au même je crois, étant donné que la souris doit être dessus pour cliqué),

Et bien le système que je voulais et que j'ai maintenant pour les boutons suivant/précédent fonctionnait...(le fait que l'intervalle soit remise à 0) et là ça ne fonctionne plus...

Voilà, je pense que tu pourra résoudre ce problème... (vu ce que t'a fais en haut... en voyant je me suis dit Wouaww !!!)

Donc, c'est bien de demander de l'aide, mais c'est mieux de comprendre (pour ne plus avoir besoin à demander de l'aide lol)
Si j'ai bien compris tu fais de la fonction scrollable une variable src
ensuite, tu utilise src pour gérer le défilement avec un setTimeout.
J'ai vu que tu utilise next() et prev() pour les fonctions que ta créé, ce sont eux même les fonctions cités sur le site que j'ai donné ? qui sont utilisable parce que ta déclarer api = true dans la fonction scrollable ?

Si c'est ca, j'ai appris pas mal de chose aujourd'hui grâce à ton aide.

et désolé si ce n'est pas ca, je suis vraiment nul en js, je voudrais m'y mettre, mais pour l'instant je n'ai pas le temps (oui tout le monde dis ca lol mais moi c'est vrai xd)

Bref, merci encore !

Modifie la première fonction comme ceci :

$(function() {		
		scr = $("div.scrollable").scrollable({ 
                        api: true,
			size:2, //Nombre d'items visibles
			easing: 'linear', //Effet de glissement
			interval: 0,  //Intervalle, ici 4 secondes entre chaque glissement
			loop: true,  //Tourner en boucle
			speed: 500, //Vitesse du glissement
			onBeforeSeek: function() { 
				this.getItems().fadeTo(300, 0.3); //Transparence pendant glissement
			}, 
			onSeek: function() { 
				this.getItems().fadeTo(300, 1); //Enleve la transparence en fin de glissement
			} 
			
		});
    timer = setTimeout(defile,4000);
    $("div.scrollable")[0].onmouseover = function() {
      clearTimeout(timer);
    };
    $("div.scrollable")[0].onmouseout = function() {
      timer = setTimeout(defile,4000);
    };
	});

Sinon, je crois que tu as bien compris ce que j'avais fait, félicitations ! J'ai en effet utilisé les infos présentes sur la page que tu avais mise en lien.

Grâce au paramètre api passé à true, il est possible de contrôler entièrement le scroll. Ce qui offre bien entendu beaucoup plus de libertés.

Par contre, la variable s'appelle "scr"... C'était un diminutif pour "scroll".
Voilà. Le setTimeout récursif de la fonction defile() permet de faire le défilement automatique.
Et les clearTimeout permettent de l'arrêter quand il faut

Oops... là je ne comprend pas et ca ne marche pas...

Quand je rajoute ce que t'a surligné, ca ne scroll plus...

petite "décortication"
$("div.scrollable")[0].onmouseover

entre parenthèse = éléments html concerné ".onmouseover" pour laction onmouseover, ca revient donc à dire quand la souris est sur l'élément, faire telle fonction... c'est bien ca ?

mais le [0] c'est quoi ?

C'est pas si compliqué a comprendre on dirait... mais bon va me falloir encore pas mal d'exemple pour mieux "cerné" la chose... un peux comme j'ai fait avec php, aujourd'hui, je n'ai plus vraiment besoin d'aide au niveau du php, je réflchie à ce que je veux faire, et je le fait... lol c'est chouette
je cherche de l'aide pour le php quand ca ne marche vraiment pas... mais sinon, voilà quoi, j'espère pouvoir faire pareil pour le js un jour...



En fait si, ca scroll, mais ca s'affole... :s


Après plus de tests, ca quand on passe dessu, ca fonctionne (ca ne bouge plus), quand on sors, ca fonctionne (c'est après le délais défini que ca scroll) MAIS c'est si on joue avec les touches suivant précédent que après ca ne fonctionne plus pour le mouseover...

Ok, bon, j'ai revu un peu le code. J'ai basé le code sur l'événement onseek, pour relancé l'intervalle.
Ainsi, ça permet la gestion des boutons, des touches, des clics, etc.

J'ai supprimé la fonction defile(), qui était, du coup, devenue totalement inutile

Normalement, ça devrait résisté à tout. Enfin j'espère.

var scr, timer;
	$(function() {		
		scr = $("div.scrollable").scrollable({ 
                        api: true,
			size:2, //Nombre d'items visibles
			easing: 'linear', //Effet de glissement
			interval: 0,  //Intervalle, ici 4 secondes entre chaque glissement
			loop: true,  //Tourner en boucle
			speed: 500, //Vitesse du glissement
			onBeforeSeek: function() { 
				this.getItems().fadeTo(300, 0.3); //Transparence pendant glissement
			}, 
			onSeek: function() { 
				this.getItems().fadeTo(300, 1); //Enleve la transparence en fin de glissement
        clearTimeout(timer);
        timer = setTimeout(function() { scr.next(); },4000);
			} 
			
		});
    timer = setTimeout(function() { scr.next(); },4000);
    $("div.scrollable")[0].onmouseover = function() {
      clearTimeout(timer);
    };
    $("div.scrollable")[0].onmouseout = function() {
      timer = setTimeout(function() { scr.next(); },4000);
    };
	});
function suivant() {
  clearTimeout(timer);
  scr.next();
}
function precedent() {
  clearTimeout(timer);
  scr.prev();
}

EDIT : Et paf ! La même chose en ayant sorti le JS du HTML (c'est mieux) et avec la syntaxe propre à jQuery... tant qu'à l'utiliser, autant le faire jusqu'au bout...

<body>
<button id="prev">Voir le bloc Précédent</button> -
<button id="next">Voir le bloc Suivant</button>


  <div id="scroll" class="scrollable"> 
     <div class="items"> 
	<div>Bloc dinfos 1</div>
	<div>Bloc dinfos 2</div>
	<div>Bloc dinfos 3</div>
	<div>Bloc dinfos 4</div>
     </div> 
   </div>

<script type="text/javascript">
$(function() {
  var div = $("div#scroll");
  var timer;
  var scr = div.scrollable({ 
    api: true,
    size:2, //Nombre d'items visibles
    easing: 'linear', //Effet de glissement
    interval: 0,  //Intervalle, ici 4 secondes entre chaque glissement
    loop: true,  //Tourner en boucle
    speed: 500, //Vitesse du glissement
    onBeforeSeek: function() { 
      this.getItems().fadeTo(300, 0.3); //Transparence pendant glissement
    }, 
    onSeek: function() { 
      this.getItems().fadeTo(300, 1); //Enleve la transparence en fin de glissement
      clearTimeout(timer);
      timer = setTimeout(function() { scr.next(); },4000);
    } 
  });
  timer = setTimeout(function() { scr.next(); },4000);
  div.mouseenter(function() {
    clearTimeout(timer);
  });
  div.mouseleave(function() {
    timer = setTimeout(function() { scr.next(); },4000);
  });
  
  $("#prev").click(function() {
    scr.prev();
  });
  $("#next").click(function() {
    scr.next();
  });
});

</script>
</body>

Édition :

• 26/07/09 à 19:42 : ajout en JS non-obstrusif

</span>

Alors là, Chapeau !!!!

Ca a bel et bien l'air de résisté à tout, je vais regarder un peu le code maintenant (pour comprendre vu que pour l'instant je n'ai que copié collé pour voir si ca marche)

Je vais continuer à tester aussi... lol

Et j'ai d'autres problèmes avec ce jQuery Tools... cette fois-ci c'est avec overlay, je posterais dans un autre sujet...

je pense que je vais pas tardé à mettre celui là en résolu.

Merci encore !


Euh... attend, je lis ton "edit" précédent et le temps de comprendre je rééditerais ce post (ou posterias un nouveau si possible et après je mettrais en résolu.


Alors, avec ton premier code (du dernier post) c'est bon, tout est ok (l'intervalle repart de 0 quand ca scroll, quand on clique, quand on passe dessus, quand on clique sur suivant ou précédent et quand on utilise les touches du clavier...)
Mais avec ton second code, quand on clique sur suivant ou précedent, ca s'affole...

Mais... Je suis content
parce que je viens de résoudre le problème tout seul !!
j'ai remplacé ca :

$("#prev").click(function() {
    scr.prev();
  });
  $("#next").click(function() {
    scr.next();
  });

par...

$("#prev").click(function() {
    clearTimeout(timer);
      timer = setTimeout(function() { scr.prev(); },4000);
  });
  $("#next").click(function() {
    clearTimeout(timer);
      timer = setTimeout(function() { scr.next(); },4000);
  });

Tu pense que c'est bon ou pas ? (en tout cas, ca fonctionne comme je veux (comme ton premier code de ton dernier post fonctionnait)

Merci encore en tout cas !! j'ai l'impression d'avoir compris un peu...

Bah je pensais que le deuxième fonctionnerait. Enfin dans tous les cas, tu as ajouté une sécurité et c'est pas plus mal