Accueil > Forum > > > > Défilement automatique d'une page
 Défilement automatique d'une page
mardi 9 septembre 2008 à 11:02:19 |
Défilement automatique d'une page
scls19fr
|
Bonjour, je souhaite faire en sorte que le contenu d'une fenêtre du navigateur défile automatiquement vers le bas (jusqu'au bas de la page). Une fois le bas de la page atteint, il faut que ça défile vers le haut jusqu'à atteindre le haut de la page et vice verca (c'est pour faire un système d'affichage dynamique) Je ne sais pas trop comment gérer ça en JavaScript j'ai googler un peu avec des mots comme javascript scroll up down top bottom mais sans succès... Je suis tombé notamment sur http://www.javascriptfr.com/forum/sujet-SCROLL-SUR-PAGE-WEB_940672.aspx mais comment créer une fonction top() qui retourne vrai lorsque le haut est atteint Sur le principe je pense qu'il vaut une variable qui stocke l'état (défilement vers le bas en cours ou défilement vers le haut ou pas de défilement) Il faut tester si le haut est atteint. Dans ce cas si on était en train de défiler vers le haut on défile vers le bas (on change la variable d'état) Il faut aussi tester si le bas est atteint Si c'est le cas et que l'on était en train de défiler ver les bas on défile vers le haut (en fait on change la variable d'état) On décale ensuite en fonction de la valeur contenue dans la variable d'état Pouvez-vous m'aider ? Merci d'avance |
|
mardi 9 septembre 2008 à 11:40:10 |
Re : Défilement automatique d'une page
scls19fr
|
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>
<body onLoad="pageScroll()">
<h1>Scroll</h1>
<?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";
?>
</body>
</html>
|
|
mardi 9 septembre 2008 à 12:40:40 |
Re : Défilement automatique d'une page
bultez
|
bonjour, function top() { if ( document.body.scrollTop==0 ) return true; } peut-être ? |
|
mardi 9 septembre 2008 à 13:09:45 |
Re : Défilement automatique d'une page
|
mardi 9 septembre 2008 à 13:34:26 |
Re : Défilement automatique d'une page
bultez
|
il ne reste qu'à optimiser un ch'tiot poil.... mais bon, pour le principe, pas pour les performances  |
|
mardi 9 septembre 2008 à 13:53:31 |
Re : Défilement automatique d'une page
scls19fr
|
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>
<body>
<h1>Content</h1>
<?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";
?>
</body>
</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>
<body onLoad="pageScroll(document.getElementById('mydata').body)">
<iframe id="mydata" src="content.php" height="100%" width="100%" frameborder="0">
Alternative text for browsers that do not understand IFrames.
</iframe>
</body>
</html>
|
|
mardi 9 septembre 2008 à 14:11:22 |
Re : Défilement automatique d'une page
scls19fr
|
Attention... j'ai oublié de préciser une chose je ne veux/peux pas toucher au fichier content.php
En effet, le contenu de l'iframe est généré par une application sur laquelle je n'ai pas la main... donc il faut que je fasse ça depuis le contenant (scroll_iframe.php)
|
|
mardi 9 septembre 2008 à 14:40:27 |
Re : Défilement automatique d'une page
scls19fr
|
J'ai essayé de mettre
onLoad="pageScroll(document.getElementById('mydata').contentDocument.body)"
mais cela ne fonctionne pas...
Une idée ?
|
|
mardi 9 septembre 2008 à 14:57:21 |
Re : Défilement automatique d'une page
scls19fr
|
Je pense être sur la piste d'une idée...
Le problème vient vraissembalement de
window.scrollBy(0, step);
Il faudrait appliquer scrollBy non pas à la fenêtre mais à l'iframe
j'ai essayé
document.getElementById('mydata').scrollBy(0, step); mais ça ne marche pas
une idée ? merci...
|
|
mardi 9 septembre 2008 à 15:00:40 |
Re : Défilement automatique d'une page
bultez
|
c'est "le contenu" de l'iframe qu'il faut bouger pas le contenu de la page. le fait de mettre dans un .js ne change rien. |
|
Cette discussion est classée dans : page, défilement, haut, bas, défile
 Répondre à ce message
 Sujets en rapport avec ce message
défilement de bas en haut [ par moha007 ]
bonjour les amisj'ai créé un système de news en php et je veux que mes news s'affichent ds une case, mais le prob, je veux qu'ils défilent de bas en h
ouvrir une page par le bas automatiquement ? [ par odysseum13 ]
Bonjour, Peut-on m'aider: je voudrais qu'une page de mon site s'ouvre et s'affiche obligatoirement par le bas; est-ce possible ? mon site est en html
Petite fenetre en bas de page [ par larime95 ]
Bonsoir, je cherche a créé une petite fenetre en bas de ma page, qui ne se rafraichira pas quand les utilisateur changerons de page. Que le site glis
Souris sur image [ par Gaelyann ]
Bonjour, Je suis perdue et je ne trouve pas mon bonheur car je n'ai pas le langage. Je cherche en [b]AS2[/b], le code qui permet de ralentir des ima
Probleme Scrolling avec Iframe [ par YueBe ]
Bonsoir,Je vais essayée d'expliquer mon petit soucis le plus simplement possible.J'ai crée une page web, de à rien de très difficile avec Dreamweaver
Images défilantes de bas en haut [ par hhhteddy ]
Bonjour,J'en suis à mes débuts en ce qui concerne la programmation et je souhaite faire un script en n'importe quel language compréhensible qui ferai
Menu - image qui apparaît de bas en haut au survol de la souris [ par ju0123456789 ]
Bonjour, J'ai un menu sur mon site, où quand on passe la souris dessus un arrière plan apparaît, (fait en CSS). Mais je trouve ça un peu bateau. Je v
Script sur volet [ par POL83 ]
Bonjour sur ma page [url=http://gifs-et-compagnie.over-blog.com/pages/Les_Fetes_Nationales_dans_le_Monde-4423033.html][b]ici[/b][/url] j'ai fait en b
Compte à rebour toujours en haut de page [ par oki972 ]
Bonjour à tous !J'aimerais trouver ou faire un script d'un compte à rebour toujours affiché en haut de page.Je m'explique : Configuré par exemple pour
 Livres en rapport
|
Derniers Blogs
 XNA IS DEAD!XNA IS DEAD! par richardc
Depuis la semaine dernière (et grâce aux TechDays 2012), je me penche activement sur la nouvelle version de Windows, aka Windows 8. Vous me direz, il était temps puisque la première preview date de Septembre dernier.
OK. Remarquez, on n'en est qu'aux...
Cliquez pour lire la suite de l'article par richardc TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 !TECHDAYS PARIS 2012 : WINDOWS SERVER "8" QUOI DE 9 ! par ROMELARD Fabrice
Speakers: Fabrice Meillon et Stanislas Quastana Cette session est basée entièrement sur celle donnée lors de la BUILD cet hiver. Il n'y a pas d'ajout d'information en rapport avec cet évènement passé. Windows 8 Server sera intégralem...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice [HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE)[HTML5] AUTOUR DU W3C : NOUVEAUX STANDARDS ET WEB MOBILE (LILLE) par Gio
Je m'y prends un peu tard je sais, mais bon je suis développeur web et donc hyper fainéant ! Toujours dans le cadre des technologies émergentes, ici HTML5, parce qu'on aime HTML5 chez Wyg , nous seront présent, le vieux ( Aurélien V.) et moi, pour pr...
Cliquez pour lire la suite de l'article par Gio [WP7] DYNAMICALLY CHANGE STARTUP PAGE[WP7] DYNAMICALLY CHANGE STARTUP PAGE par KooKiz
Let's say that you want to allow the user to customize the startup page of your application. You can easily change the startup page by editing the 'NavigationPage' attribute in the manifest file. But the manifest cannot be modified once the applicatio...
Cliquez pour lire la suite de l'article par KooKiz
Logiciels
 DocTranslate (V3.1.0.0)DOCTRANSLATE (V3.1.0.0)DocTranslate est un traducteur de document Microsoft Word, PowerPoint et Excel. Il permet d'autom... Cliquez pour télécharger DocTranslate Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System
|