CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 16:22:50

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

Défilement automatique d'une page

Poser une question dans le forum ou lancer une discussion

Défilement automatique d'une page

mardi 9 septembre 2008 à 11:02:19 | Défilement automatique d'une page

scls19fr

12 msg

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

12 msg

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

11957 msg

13347 msg CS

bonjour,

function top()
{ if ( document.body.scrollTop==0 ) return true; }

peut-être ?

Cordialement

Bul[mon Site][M'écrire]

mardi 9 septembre 2008 à 13:09:45 | Re : Défilement automatique d'une page

scls19fr

12 msg

nickel merci beaucoup

mardi 9 septembre 2008 à 13:34:26 | Re : Défilement automatique d'une page

bultez

11957 msg

13347 msg CS

il ne reste qu'à optimiser un ch'tiot poil....
mais bon, pour le principe, pas pour les performances

Cordialement Bul [mon Site] [M'écrire]

mardi 9 septembre 2008 à 13:53:31 | Re : Défilement automatique d'une page

scls19fr

12 msg

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

12 msg

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

12 msg

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

12 msg

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

11957 msg

13347 msg CS

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.

Cordialement

Bul[mon Site][M'écrire]

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 Savoir si le l'ascenceur est en bas [ par jmtoulon ] Bonjour,Voila je voudrais savoir comment faire pour afficher la valeur True dans le cas ou le scroll vertical est au maximun de la page, c'est à dire déclencher des fonctions d'alluamge et modification de boutons d'un autre frame [ par BrunoJWest ] le problème s'est posé plusieurs fois et je ne l'ai pas résolu sans contournement pour l'instant.Sur la plupart de mes sites j'ai deux frames, on va d structure HTML [ par pitchoune ] Bonjour, Soit le code d'une page HTML suivant : Titre < revenir en haut de la page sans <a href="#ancre"> [ par humhumha ] Bonjour, je ne sais pas si c'est le bon thème, j'ai pris celui qui s'y rapprochai le +, désolé si c'est hors-sujet.J'ai un petit problème qui n'a pas position bas du footer page web [ par Jarod1980 ] Bonjour,Je savoir comment positionner mon footer de ma page web en bas de mon écran et ceci pour chaque résolution.Mon footer est défini entre 2 balis Positionner curseur en haut de la page [ par aloisio11 ] Bonjour,J'ai un problemme peut banal : Je charge une page avec plein de référence, je clique sur le haut de ma page pour pouvoir faire une recherche a actualiser la valeur d'une boite texte à partir d'une autre frame [ par vodkapomme43 ] Bonjour,Mon problème est le suivant:J'ai une page index.php qui est divisée en deux frames. Dans la frame "Haut" j'ai la page Haut.php et dans la fram Comment Bloquer une frame a X pxl du bas ... [ par GuilleW ] Voila mon probleme je voudrai avoir un semblant de barre de navigation en ba d'une page ...cette page a deux frame une en haut une en bas ... je voudr popup + barre de défilement [ par minet03 ] Coucou, j'ai un petit problème avec un popup, j'ai trouver la source sur TJS et elle ne marche pas. En fait je voudrais qu'il y ai la barre de défilem

Livres en rapport

Tous les livres pour Page, Défilement, Haut, Bas, Défile

Nos sponsors

Derniers Blogs

[TECHDAYS 2010] #03 - WEB CONTENT MANAGEMENT SOUS SHAREPOINT 2010 par pierre

[DESIGN PATTERNS] PARTIE 2: DIP: DEPENDENCY INVERSION PRINCIPLE par tja

TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

Forum

RE : COUPER UNE PARTIE DE CHAINE par nhervagault

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5