Défilement automatique d'une page
cs_scls19fr
Membre Dernière intervention
29 janvier 2009
- - Dernière réponse : DevDeb - 11 janv. 2016 à 15:30
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
A voir également:
- Scroll automatique
- Défilement automatique page web - Meilleures réponses
- Défilement automatique - Meilleures réponses
- Scroller automatiquement un listbox ✓ - Forum - VB.NET
- Scroller automatiquement sur un Panel ✓ - Forum - VB.NET
- Scroll automatique d'un richtextbox ✓ - Forum - C# / .NET
- Empecher le scroll automatique dans un richedit ✓ - Forum - Delphi / Pascal
- Javascript : Confortable auto défilement ou (scroll bar) tout automatique avec vitesse librem - Guide
18 réponses
Meilleure réponse
- Messages postés
- 13619
- Date d'inscription
- jeudi 13 février 2003
- Statut
il ne reste qu'à optimiser un ch'tiot poil....
mais bon, pour le principe, pas pour les performances
Cordialement Bul
mais bon, pour le principe, pas pour les performances
Cordialement Bul
Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire
116 internautes nous ont dit merci ce mois-ci
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
Actuellement j'ai fait ceci (mais je ne sais pas quoi mettre dans ma fonction top)
<html>
<head>
<title>Scroll</title>
<script language="JavaScript">
var direction = true; // true=bas false=haut
var scroll = true;
function pageScroll() {
if (scroll) {
if (bottom())
direction=false;
if (top())
direction=true;
if (direction) {
window.scrollBy(0,10);
} else {
window.scrollBy(0,-10);
}
}
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1000 milliseconds
}
/*
function stopScroll() {
clearTimeout(scrolldelay);
}
function jumpScroll() {
window.scroll(0,150); // horizontal and vertical scroll targets
}
*/
function bottom()
{
if ((document.body.scrollTop + document.body.clientHeight) == document.body.scrollHeight)
return true;
}
function top()
{
return false;
//if (document.body.scrollTop == 0)
// return true;
}
</script>
</head>
Scroll
<?php
$str="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla metus velit, lobortis a, tincidunt vitae, bibendum tincidunt, eros. In eget orci aliquam eros tristique feugiat. Vestibulum feugiat vehicula enim. Aenean bibendum ipsum in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra mi non odio. Integer orci nisl, placerat non, adipiscing et, congue non, velit. Integer ipsum. Duis ac ipsum at eros egestas aliquam. Praesent quis sem et justo rutrum tincidunt. Morbi mattis pretium urna. Pellentesque eget orci auctor libero tristique condimentum. ";
for ($i==0 ; $i<20 ; $i++) {
echo $str;
}
echo "\n";
?>
</html>
<html>
<head>
<title>Scroll</title>
<script language="JavaScript">
var direction = true; // true=bas false=haut
var scroll = true;
function pageScroll() {
if (scroll) {
if (bottom())
direction=false;
if (top())
direction=true;
if (direction) {
window.scrollBy(0,10);
} else {
window.scrollBy(0,-10);
}
}
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 1000 milliseconds
}
/*
function stopScroll() {
clearTimeout(scrolldelay);
}
function jumpScroll() {
window.scroll(0,150); // horizontal and vertical scroll targets
}
*/
function bottom()
{
if ((document.body.scrollTop + document.body.clientHeight) == document.body.scrollHeight)
return true;
}
function top()
{
return false;
//if (document.body.scrollTop == 0)
// return true;
}
</script>
</head>
Scroll
<?php
$str="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla metus velit, lobortis a, tincidunt vitae, bibendum tincidunt, eros. In eget orci aliquam eros tristique feugiat. Vestibulum feugiat vehicula enim. Aenean bibendum ipsum in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra mi non odio. Integer orci nisl, placerat non, adipiscing et, congue non, velit. Integer ipsum. Duis ac ipsum at eros egestas aliquam. Praesent quis sem et justo rutrum tincidunt. Morbi mattis pretium urna. Pellentesque eget orci auctor libero tristique condimentum. ";
for ($i==0 ; $i<20 ; $i++) {
echo $str;
}
echo "\n";
?>
</html>
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
Ah... j'ai quand même un petit soucis...
je veux faire la même chose mais pour un iframe
j'ai mis mon code JavaScript dans un .js
j'ai essayé et ça marche nickel pour faire défiler une page html simple
par contre ça merde pour ma page contenant un iframe
As-tu une idée ?
(c'est parfois difficile lorsqu'on est seul de voir pourquoi ça déconne)
Si tu peux aussi me dire ce que tu optimiserais
(ainsi qu'un BON bouquin ou très bon site sur JS)
Merci d'avance
Le fichier autoscroll.js
var direction = true; // true=bas false=haut
var scroll = true;
var delay=100;
var step=5;
var obj=null;
function pageScroll(new_obj) {
scrolldelay = setTimeout('pageScroll(obj)', delay); // scrolls every xxx milliseconds
obj=new_obj;
//obj=document.body;
//obj=document.getElementById('mydata').src;
if (scroll) {
if ( bottom() ) {
direction=false;
//alert("bottom");
}
if ( top() ) {
direction=true;
//alert("top");
}
if ( direction ) {
window.scrollBy(0, step);
} else {
window.scrollBy(0, -step);
}
}
}
function bottom()
{
if ( (obj.scrollTop + obj.clientHeight) == obj.scrollHeight ) {
return true;
} else {
return false;
}
}
function top()
{
if ( obj.scrollTop==0 ) {
return true;
} else {
return false;
}
}
Le contenu (ce qui est dans l'iframe) content.php
<html>
<head>
<title>Content</title>
</head>
Content
<?php
$str="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla metus velit, lobortis a, tincidunt vitae, bibendum tincidunt, eros. In eget orci aliquam eros tristique feugiat. Vestibulum feugiat vehicula enim. Aenean bibendum ipsum in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra mi non odio. Integer orci nisl, placerat non, adipiscing et, congue non, velit. Integer ipsum. Duis ac ipsum at eros egestas aliquam. Praesent quis sem et justo rutrum tincidunt. Morbi mattis pretium urna. Pellentesque eget orci auctor libero tristique condimentum. ";
for ($i==0 ; $i<7 ; $i++) {
echo $str;
}
echo "\n";
?>
</html>
et le contenant (la page qui contient l'iframe) scroll_iframe.php
<html>
<head>
<title>Scroll an iframe</title>
<script language="javascript" src="autoscroll.js"></script>
</head>
Alternative text for browsers that do not understand IFrames.
</html>
je veux faire la même chose mais pour un iframe
j'ai mis mon code JavaScript dans un .js
j'ai essayé et ça marche nickel pour faire défiler une page html simple
par contre ça merde pour ma page contenant un iframe
As-tu une idée ?
(c'est parfois difficile lorsqu'on est seul de voir pourquoi ça déconne)
Si tu peux aussi me dire ce que tu optimiserais
(ainsi qu'un BON bouquin ou très bon site sur JS)
Merci d'avance
Le fichier autoscroll.js
var direction = true; // true=bas false=haut
var scroll = true;
var delay=100;
var step=5;
var obj=null;
function pageScroll(new_obj) {
scrolldelay = setTimeout('pageScroll(obj)', delay); // scrolls every xxx milliseconds
obj=new_obj;
//obj=document.body;
//obj=document.getElementById('mydata').src;
if (scroll) {
if ( bottom() ) {
direction=false;
//alert("bottom");
}
if ( top() ) {
direction=true;
//alert("top");
}
if ( direction ) {
window.scrollBy(0, step);
} else {
window.scrollBy(0, -step);
}
}
}
function bottom()
{
if ( (obj.scrollTop + obj.clientHeight) == obj.scrollHeight ) {
return true;
} else {
return false;
}
}
function top()
{
if ( obj.scrollTop==0 ) {
return true;
} else {
return false;
}
}
Le contenu (ce qui est dans l'iframe) content.php
<html>
<head>
<title>Content</title>
</head>
Content
<?php
$str="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla metus velit, lobortis a, tincidunt vitae, bibendum tincidunt, eros. In eget orci aliquam eros tristique feugiat. Vestibulum feugiat vehicula enim. Aenean bibendum ipsum in enim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra mi non odio. Integer orci nisl, placerat non, adipiscing et, congue non, velit. Integer ipsum. Duis ac ipsum at eros egestas aliquam. Praesent quis sem et justo rutrum tincidunt. Morbi mattis pretium urna. Pellentesque eget orci auctor libero tristique condimentum. ";
for ($i==0 ; $i<7 ; $i++) {
echo $str;
}
echo "\n";
?>
</html>
et le contenant (la page qui contient l'iframe) scroll_iframe.php
<html>
<head>
<title>Scroll an iframe</title>
<script language="javascript" src="autoscroll.js"></script>
</head>
Alternative text for browsers that do not understand IFrames.
</html>
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
En fait j'ai enfin un début de solution
var fen=window.frames[0];
if ( direction ) {
fen.scrollBy(0, step);
} else {
fen.scrollBy(0, -step);
}
mais j'aurais préféré identifier mon iframe à l'aide de son id... plutôt qu'avec l'indice 0 dans window.frames[]... mais à la rigueur je m'en fiche car je n'ai qu'un iframe
j'ai trouvé la solution ici
http://www.webmasterworld.com/forum91/299.htm
var fen=window.frames[0];
if ( direction ) {
fen.scrollBy(0, step);
} else {
fen.scrollBy(0, -step);
}
mais j'aurais préféré identifier mon iframe à l'aide de son id... plutôt qu'avec l'indice 0 dans window.frames[]... mais à la rigueur je m'en fiche car je n'ai qu'un iframe
j'ai trouvé la solution ici
http://www.webmasterworld.com/forum91/299.htm
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
Désolé mais j'ai essayé window.frames["mydata"] et window.frames['mydata']
avec mydata l'id du frame et ça ne marche pas...
j'ai aussi un autre problème (sécurité cette fois)
ça marche nickel pour les pages qui sont hébergé sur mon serveur
par contre ça ne fonctionne pas sur d'autres alors que les noms de domaines sont
(où il y a mon script) et http://www.domaine.fr où il y a aussi des pages qui doivent être vue de manière défilante
j'ai lu sur
http://www.webmasterworld.com/forum91/5373.htm
qu'il fallait jouer avec mod_proxy sur apache... j'essairais ça à l'occasion...
(si tu as des connaissances là dessus je suis intéressé aussi)
avec mydata l'id du frame et ça ne marche pas...
j'ai aussi un autre problème (sécurité cette fois)
ça marche nickel pour les pages qui sont hébergé sur mon serveur
par contre ça ne fonctionne pas sur d'autres alors que les noms de domaines sont
(où il y a mon script) et http://www.domaine.fr où il y a aussi des pages qui doivent être vue de manière défilante
j'ai lu sur
http://www.webmasterworld.com/forum91/5373.htm
qu'il fallait jouer avec mod_proxy sur apache... j'essairais ça à l'occasion...
(si tu as des connaissances là dessus je suis intéressé aussi)
- Messages postés
- 13619
- Date d'inscription
- jeudi 13 février 2003
- Statut
>>avec mydata l'id du fram
pas l'id... le name, et ça baigne ( tu me diras que d'habitude
IE sait remplacer l'ID par le name et lycée de versailles...
pa ici peut-être ? )
>>ça ne fonctionne pas sur d'autres domaines
oui. sur un autre domaine on ne peut qu'afficher, rien d'autres.
( on se demande bien pourquoi... mais bon, c'est ainsi )
il y a peu, XTremDuke nous parlais d'une possibilité,
mais uniquement avec ajax sous FF, pour l'instant (?)
en paramétrant un machin qui ressemble à la gestion de htaccess
CordialementBu
pas l'id... le name, et ça baigne ( tu me diras que d'habitude
IE sait remplacer l'ID par le name et lycée de versailles...
pa ici peut-être ? )
>>ça ne fonctionne pas sur d'autres domaines
oui. sur un autre domaine on ne peut qu'afficher, rien d'autres.
( on se demande bien pourquoi... mais bon, c'est ainsi )
il y a peu, XTremDuke nous parlais d'une possibilité,
mais uniquement avec ajax sous FF, pour l'instant (?)
en paramétrant un machin qui ressemble à la gestion de htaccess
CordialementBu
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
Ah! j'avoue que je ne connais pas la différence entre id et name....
Je suis très interessé par la solution dont tu me parles car justement mon afficheur dynamique utilise Firefox (en fait ça sera basé matériellement sur Linutop http://www.linutop.com ) et côté navigateur Firefox + une extension pour faire un mode kiosque (kiosk mode extension R-Kiosk https://addons.mozilla.org/en-US/firefox/addon/1659 )
Je suis très interessé par la solution dont tu me parles car justement mon afficheur dynamique utilise Firefox (en fait ça sera basé matériellement sur Linutop http://www.linutop.com ) et côté navigateur Firefox + une extension pour faire un mode kiosque (kiosk mode extension R-Kiosk https://addons.mozilla.org/en-US/firefox/addon/1659 )
- Messages postés
- 13619
- Date d'inscription
- jeudi 13 février 2003
- Statut
...
document.getElementById("toto")
window.frames["tata"]
>>solution dont tu me parles
noté ni les infos, ni où on en causait, ni rien ( pas de besoins pour l'instant,
entr'autres car, hélas, exclusif FF aujourd'hui )
poser la question dans le forum ? rechercher dans les réponses de XTRemDuke ?
les moteurs recherches ?
CordialementBu
document.getElementById("toto")
window.frames["tata"]
>>solution dont tu me parles
noté ni les infos, ni où on en causait, ni rien ( pas de besoins pour l'instant,
entr'autres car, hélas, exclusif FF aujourd'hui )
poser la question dans le forum ? rechercher dans les réponses de XTRemDuke ?
les moteurs recherches ?
CordialementBu
- Messages postés
- 260
- Date d'inscription
- vendredi 19 novembre 2004
- Statut
- Messages postés
- 15
- Date d'inscription
- lundi 19 janvier 2004
- Statut
Ravi que ça te convienne (au départ ça n'est pas l'objectif mais tant mieux si ça peut servir à d'autres)
En fait au départ c'est pour faire un afficheur dynamique autonome qui fait défiler des pages web sans qu'il y ai besoin d'action de la part de l'utilisateur.
J'ai rajouté un petit système de pause en haut et en bas pour éviter d'avoir "le mal de mer"
Un exemple :
http://www.celles.net/php/scroll/scroll_iframe.php (fait scroller le contenu d'un iframe)
ou
http://www.celles.net/php/scroll/scroll_page.php (fait scroller le contenu d'une page... mais il y a une petite erreur... je ne sais plus où... ça a eu marché !!)
Je poste ici le code js si je venais à effacer ma page
Il doit y avoir moyen d'intégrer ça dans un script GreaseMonkey pour Firefox
http://www.greasespot.net/
https://addons.mozilla.org/fr/firefox/addon/748
afin de faire une extension qui permette de faire défiler n'importe quelle page web visualisée dans un navigateur (le code JavaScript est injecté dans la page après l'avoir récupérée puis le JS est interprété... ça permet de customiser n'importe quel affichage de page web sans avoir le droit de modifier le source de la page web.
/*
Gestion du scrolling vertical d'une page HTML ou d'un iframe
Défile vers le bas.
Quand le bas est atteint défile vers le haut
Quand le haut est atteint, défile vers le bas
etc...
*/
var delay=50;
var step=1;
var pause_delay_bottom = 1500; //0; //1500; // pause en ms en bas
var pause_delay_top = 1500; //0; //1500; // pause en ms en haut
var direction = true; // true=bas false=haut
var scroll = true;
var obj=null;
var win=null;
function play() {
}
function pause() {
}
function pageScroll(new_obj, new_win) {
obj=new_obj;
//obj=document.body;
//obj=document.getElementById('mydata').contentDocument.body;
win=new_win
//alert('objet autoscroll "'+obj.value+"'")
if (scroll) {
if ( bottom() ) {
direction=false;
//alert("bottom");
scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_bottom);
} else if ( top() ) {
direction=true;
//alert("top");
scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_top);
} else {
scrolldelay = setTimeout('pageScroll(obj,win)', delay); // scrolls every xxx milliseconds
}
//var win=window;
//var=top.framename;
//var=top.frames[1];
//var win=window.frames[0];
if ( direction ) {
//document.getElementById('mydata').scrollBy(0, step);
//window.scrollBy(0, step);
win.scrollBy(0, step);
} else {
//document.getElementById('mydata').scrollBy(0, -step);
//window.scrollBy(0, -step);
win.scrollBy(0, -step);
}
}
}
function bottom()
{
if ( (obj.body.scrollTop + obj.body.clientHeight) == obj.body.scrollHeight ) {
return true;
} else {
return false;
}
}
function top()
{
if ( obj.body.scrollTop==0 ) {
return true;
} else {
return false;
}
}
function debug()
{
alert(obj.body.innerHTML);
//alert("hello");
}
En fait au départ c'est pour faire un afficheur dynamique autonome qui fait défiler des pages web sans qu'il y ai besoin d'action de la part de l'utilisateur.
J'ai rajouté un petit système de pause en haut et en bas pour éviter d'avoir "le mal de mer"
Un exemple :
http://www.celles.net/php/scroll/scroll_iframe.php (fait scroller le contenu d'un iframe)
ou
http://www.celles.net/php/scroll/scroll_page.php (fait scroller le contenu d'une page... mais il y a une petite erreur... je ne sais plus où... ça a eu marché !!)
Je poste ici le code js si je venais à effacer ma page
Il doit y avoir moyen d'intégrer ça dans un script GreaseMonkey pour Firefox
http://www.greasespot.net/
https://addons.mozilla.org/fr/firefox/addon/748
afin de faire une extension qui permette de faire défiler n'importe quelle page web visualisée dans un navigateur (le code JavaScript est injecté dans la page après l'avoir récupérée puis le JS est interprété... ça permet de customiser n'importe quel affichage de page web sans avoir le droit de modifier le source de la page web.
/*
Gestion du scrolling vertical d'une page HTML ou d'un iframe
Défile vers le bas.
Quand le bas est atteint défile vers le haut
Quand le haut est atteint, défile vers le bas
etc...
*/
var delay=50;
var step=1;
var pause_delay_bottom = 1500; //0; //1500; // pause en ms en bas
var pause_delay_top = 1500; //0; //1500; // pause en ms en haut
var direction = true; // true=bas false=haut
var scroll = true;
var obj=null;
var win=null;
function play() {
}
function pause() {
}
function pageScroll(new_obj, new_win) {
obj=new_obj;
//obj=document.body;
//obj=document.getElementById('mydata').contentDocument.body;
win=new_win
//alert('objet autoscroll "'+obj.value+"'")
if (scroll) {
if ( bottom() ) {
direction=false;
//alert("bottom");
scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_bottom);
} else if ( top() ) {
direction=true;
//alert("top");
scrolldelay = setTimeout('pageScroll(obj,win)', pause_delay_top);
} else {
scrolldelay = setTimeout('pageScroll(obj,win)', delay); // scrolls every xxx milliseconds
}
//var win=window;
//var=top.framename;
//var=top.frames[1];
//var win=window.frames[0];
if ( direction ) {
//document.getElementById('mydata').scrollBy(0, step);
//window.scrollBy(0, step);
win.scrollBy(0, step);
} else {
//document.getElementById('mydata').scrollBy(0, -step);
//window.scrollBy(0, -step);
win.scrollBy(0, -step);
}
}
}
function bottom()
{
if ( (obj.body.scrollTop + obj.body.clientHeight) == obj.body.scrollHeight ) {
return true;
} else {
return false;
}
}
function top()
{
if ( obj.body.scrollTop==0 ) {
return true;
} else {
return false;
}
}
function debug()
{
alert(obj.body.innerHTML);
//alert("hello");
}
slt désolé j'arrive tardivement sur cette discussion mais cela m'intéresse bcp j'ai lu sur l'un des poste qu'une personne chercher à faire défiler automatiquement des pages web. Cela m'intéresse beaucoup, je cherche à faire défiler des pages web sur un grand écran (monitoring) et je ne trouve pas bcp d'aide sur internet donc si tu pouvais m'aider un peu, je te remercie d'avance
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.