Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

DIV QUI SUIT LE SCROLLING DE LA PAGE


Information sur la source

Catégorie :Effets Classé sous : DIV, SCROLLING, SCROLL, PAGE Niveau : Débutant Date de création : 09/11/2007 Date de mise à jour : 09/11/2007 15:54:12 Vu / téléchargé: 11 725 / 1 405

Note :
8,8 / 10 - par 5 personnes
8,80 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (37)
Ajouter un commentaire et/ou une note


Description

Le but du jeu est de faire suivre un DIV lorsque l'on a un scrolling de la page.

Utilisation possible pour un menu flottant qui restera donc toujours visible.

Have a good FUN !
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

09 novembre 2007 15:54:12 :
Pb avec nouvelle version de javascriptfr

Commentaires et avis

signaler à un administrateur
Commentaire de kiki2sirom le 09/11/2007 16:25:10 9/10

veni vidi vici : je suis venu, j'ai vu, je suis convaincu...

nickel chrome ?!?!
note : 9, juste pour histoire de pas mettre 10
quoi dire d'autre... sinon que ça marche aussi avec Orca Browser

kiki

signaler à un administrateur
Commentaire de celeg le 09/11/2007 17:15:39 8/10

J'en vois pas l'utiliter pour mon site, mais bien coder, compact, Expliquer/ Commenter. 8 pour le fun. je le garde dans un coin si un jours j'en ai besoin ;).

signaler à un administrateur
Commentaire de coucou747 le 10/11/2007 14:04:01

<div stype="position:fixed"> </div>

quelquechose a ajouter ?

signaler à un administrateur
Commentaire de alover971 le 12/11/2007 07:46:11

Oui coucou747.. le position: fixed ne fonctionne sur quasiment aucun navigateur !
donc met ta solution a la trappe..

signaler à un administrateur
Commentaire de alover971 le 12/11/2007 07:48:59 8/10

Bon bien fait et commenter..
Pour ma part je trouve tout de meme le code ultra long et lourd pour un si petit effet :)
avec deux fois moins de codes je fais des actualités defilante avec 4effet possibles :/
mais bon :) bien quand meme !

signaler à un administrateur
Commentaire de coucou747 le 12/11/2007 09:09:22

apparement depuis MSIE7 si, conclusion, les dernieres versions des 4 grands navigateurs webs le gerent... (Khtml et ses forks, MSIE, opera, gecko)

signaler à un administrateur
Commentaire de jjdagadir le 12/11/2007 15:32:58 10/10

Ben oui, c'est propre, çà marche au poil, bravo et merci
Kenavo

signaler à un administrateur
Commentaire de PetoleTeam le 13/11/2007 21:19:36

Bonjour,

A l'attention de kiki2sirom
Merci pour l'info sur Orca Browser, mais apparement c'est le moteur Gecko qui est utilisé donc normalement compatible.

A l'attention de coucou747
Le but ici n'est pas de fixer un div mais de le faire revenir à la même place après un scroll de page.
Concernant le position : fixed, j'ai d'ailleurs, il y a peu proposé, une source,
DIV POSITION FIXED SUR LA PAGE http://www.javascriptfr.com/code.aspx?ID=43444
pour palier au manque de IE en espérant également que IE en version 7 corrigerait son manque.

A l'attention de alover971
Je suis tout à fait d'accord avec toi pour la longueur du code mais je privilégie souvent la réutilisation des fonctions ce qui explique, de plus certains effets, pour petit qu'il soit, requirent souvent plus de code que l'on ne le souhaite.
Penses à mettre en ligne tes sources cela peut intéresser du monde.

Merci à tous
;0)

signaler à un administrateur
Commentaire de XtremDuke le 14/11/2007 16:03:09

Même si ce genre de widget fait, à mon goût, un peu trop 'old school', le code a le mérite d'être propre, fonctionnel et bien implémenté.


Have fun

signaler à un administrateur
Commentaire de engelein le 26/11/2007 09:15:12

Bonjour,
Est-il possible de centrer horizontalement le div sur la page quelque soit la taille
de celle-ci?
Merci d'avance.

signaler à un administrateur
Commentaire de aufrya le 11/12/2007 19:22:51

Bonjour à tous,
Je m'y reprend pour la 2 èmes fois.
J'ai déja demander comment stoper cette envahissement d'émail??
Comme j'ai dis la première fois,je pensais être tomber sur un site raisonnable,je voie que se n'est pas le cas!!!
Je ferais remarquer que sur mon compte aucune,je dis bien aucune options pour recevoir des émail n'est cochées.
Le lien que vous mettez a chaque émail envoyer pour se désabonner de ces émail a répétition ne mène nul part vu que je n'ai rien de cocher
J'aimerais avoir des nouvelles pour stoper desuite tous ces émail qui ne sont plus a la semaine la.
Merci de stoper ses émail et même se compte si il fallait passer par la pour en stoper avec cela,merci

signaler à un administrateur
Commentaire de coucou747 le 11/12/2007 19:55:02

clique sur mon compte, parametrer, et la tu vois un truc au sujet des adresses mails

signaler à un administrateur
Commentaire de aufrya68 le 12/12/2007 19:57:43

Bonjour à tous,
salut coucou 747,j'ai regarder mais je ne voie rien qui pourrias mamené sur un truc concret qui enfin ferme ses mail ou le compte,donc je renouvelle,Message aux admin,fermer mon compte ou arrêter ces émails a répètitions que de 1 je n'ai pas demander,de 2 ses pas cocher dans mon compte,de 3,l'url que vous mettez dans vos mail pour soit disans arrter ses émail ne mène nul part.
Donc j'ai pas fini de venir je pense,se qui deviens embêtant pour les autres membres,mais je n'ai aucun retour de votre part,donc je continue jusqu'a bannissement ou fermeture de mon compte,(enfin,compte!!!mdrrrr,si ont peu dire,pour les membres,désolés,aurevoir à tous.

signaler à un administrateur
Commentaire de coucou747 le 12/12/2007 21:57:57

... quand t'ajoutes un commentaire, t'as une CASE A COCHER pour etre avertis !!!

"Etre averti par email lorsqu'un nouveau commentaire est ajouté sur cette source"

si tu la coches la premiere fois, t'es inscrit sur une liste que tu peux gerer en cliquant sur les liens que je t'ai indique plus haut, ca y est, suffit de lire !!!

signaler à un administrateur
Commentaire de zilica01 le 19/02/2008 11:55:43

Bonjours et un grand merci pour ton code, cependant j'ai un petit problème, sur firefox cela marche, mais sous IE7 ma div se trouve en plein milieu de la page mais sa fonctionne quand même.Comment faire pour que ma div soi bien placée.Merci d'avance

signaler à un administrateur
Commentaire de PetoleTeam le 19/02/2008 17:56:59

Bonjour,

Je n'ai pas IE7, et sans plus d'info difficile de répondre, peut être un problème de placement initial.

Si tu avais un lien pour voir si il s'agit d'une contrariété due à IE7.
;O)

signaler à un administrateur
Commentaire de pat84 le 21/04/2008 13:28:02

Bonjour à tous,
Le téléchargement du fichier me renvoie ceci depuis ma plate-forme de sécurité :
"Le fichier javascriptfr_DIV-SUIT-SCROLLING-PAGE___Page.zip contient le virus Compressed_Huge_File: ce fichier a été détruit."

It's a shame !
PAB.

signaler à un administrateur
Commentaire de PCPT le 21/04/2008 18:39:46 administrateur CS

salut,
pat84 -> tu passes sans doute par un firewall d'entreprise qui n'accepte pas cette compression.
vois avec l'administrateur pour laisser du leste, ou télécharge la source d'un autre poste ;)

++
PCPT  [AFCK]

signaler à un administrateur
Commentaire de pat84 le 22/04/2008 13:16:36

Salut PCPT,
Pour ce qui est de lâcher du lest, ce ne sera pas possible. Par contre, j'essaierai ce soir depuis mon poste perso.
Merci pour l'info, d'autant plus que ce n'est pas la première fois...
A+

signaler à un administrateur
Commentaire de Sheemon le 21/07/2008 03:12:52

Nickel !
Le truc intégré en 2s et fonctionne du 1er coup, merci :)

signaler à un administrateur
Commentaire de UZUL33 le 01/09/2008 16:41:54

bonjour et merci pour ce script :
juste une petite question, est-il possible de déasctiver le scroll vertical et si oui de quelle manière ?

signaler à un administrateur
Commentaire de UZUL33 le 01/09/2008 16:56:47

re-bonjour solution trouvée pour le scroll vertical cependant juste là une question de positionnement, où paramètres-tu la position de ton div: si tu souhaite par exemple que ton div_move soit toujours calé au milieu de ta page ?

signaler à un administrateur
Commentaire de PetoleTeam le 01/09/2008 22:09:51

Bonjour,
Le DIV retrouve la place qu'il a à l'ouverture de la page, si il est au milieu il y retournera, en fait ce sont les positions left et top qui sont reprise, donc si on agrandi la fenêtre le milieu ne sera pas restitué.
Tu peux dans ce cas revoir le script en calculant la position à atteindre et ce en tenant compte de la fenêtre active.
;O)

signaler à un administrateur
Commentaire de kingFleo le 24/09/2008 18:29:24 9/10

Bonjour,

Je voudrais utiliser ton script mais sur 2 menu disposer de chaque coté d'un contenu centrale..

Quelqu'un aurait il quelque piste pour que cela fonctionne?
Pour l'instant j'arrive a n'en faire bouger qu'un, l'autre venant se superposer sur le premier.

signaler à un administrateur
Commentaire de PetoleTeam le 03/10/2008 14:52:50

Bonjour,
I'm SORRY but le code ne le permet pas dans sa forme actuelle.
Tu peux toujours essayer en dupliquant les lignes de sources.

Very navred
;0)

signaler à un administrateur
Commentaire de UZUL33 le 03/10/2008 15:17:56

Bonjour,
J'ai testé deux div en scroll l'un horizontal, l'autre vertical => en synthèse aucun problème pour paramétrer les deux JS (et oui, on configure l'un en scroll horizont. et un second en Vertical, sachant que les div doivent dans les Js porter des noms différents ! idem dans le code de la page !).
Cependant les deux div en question se retrouvent de fait en position relative donc leurs positionnements reste complexes ( risque de chevauchement, de superposition malgré un z-index mentionné ou égal,...).
Pour ma part j'ai du me résoudre à abandonner le fait d'utiliser deux fois cet excellent code source au sein d'une même page (trop de problème de positionnement sous IE et Firefox).

signaler à un administrateur
Commentaire de kingFleo le 03/10/2008 15:55:43

Bonjour,
J'ai teste la duplication pour avoir deux div scrollable horizontale et n'ai finalement pas reussi.. Merci quand meme d'avoir jeté un oeuil a mon post..

A tt

signaler à un administrateur
Commentaire de PetoleTeam le 03/10/2008 16:11:40

Re,
Si tu as un lien pour récupérer ta page et ton code, à l'occasion je peux y jeter un oeil...
;0)

signaler à un administrateur
Commentaire de misscatas le 06/11/2008 23:34:54

bonjour,
je voudrais savoir ou se trouve les paramètres pour modifier l'effet du menu.
En gros j'aimerais qu'il n'y est pas cette sorte de delay sur le menu mais qu'il soit plus actif rapidement quand on déplace le scroll.
merci

signaler à un administrateur
Commentaire de PetoleTeam le 07/11/2008 12:00:18

Bonjour,
Tout ce joue dans le fichier gf_scroll_div.js

modifie la ligne 77
var Rapport = 1.0/20.0;  // On divise par 20

en mettant par exemple
var Rapport = 1.0/1.0;

le DIV se repositionnera tout de suite, plus le chiffre du diviseur est important plus le déplacement est lent.

Voilou...
;O)

signaler à un administrateur
Commentaire de misscatas le 07/11/2008 12:56:26

merci beaucoup pour ses infos. bonne journée

signaler à un administrateur
Commentaire de gavemela le 13/11/2008 10:14:13

Bonjour,

très bon code. une question
Je positionne ma div au milieu de ma page en modifiant cette fonction

function GetScrollPage(){
  var Left;
  var Top;
  var DocRef;

  if( window.innerWidth){
    with( window){
      Left   = 550+pageXOffset;
      Top    = 350+pageYOffset;
    }
  }
  else{ // Cas Explorer a part
    if( document.documentElement && document.documentElement.clientWidth)
      DocRef = document.documentElement;
    else
      DocRef = document.body;

    with( DocRef){
      Left   = 550+scrollLeft;
      Top    = 350+scrollTop;
    }
  }
  return({top:Top, left:Left});
}
mais le problème est que la div n'apparait qu'au premier scroll de la souris et pas au clic. Si vous avez une solution merci

signaler à un administrateur
Commentaire de PetoleTeam le 13/11/2008 18:23:28

Bonjour,
Perso je ferai plutôt
return({top:Top+350, left:Left+550});
pour n'avoir qu'un seul endroit ou changer éventuellement...

Je ne saisi pas ton problème "...et pas au clic..."

;O)

signaler à un administrateur
Commentaire de gavemela le 14/11/2008 10:09:40

Bonjour merci pour la reponse.

En fait je fait apparaitre une div via une liste de liens qui apparaissent selon une liste dynamique. donc je ne sais pas ou on est dans la page a ce moment la. Donc j'ai ajouté ton code a ma div pour qu'elle apparaisse la ou on est dans la page mais le probleme est qu'elle n'apparait pas immédiatement sur ma page mais quand par exemple je fait un scroll. Alors que je voudrais qu'elle apparaisse immédiatement. (je ne sais pas si je suis bien claire) Merci

signaler à un administrateur
Commentaire de PetoleTeam le 14/11/2008 13:23:49

Bonjour,
Si j'ai bien compris, le DIV apparaît sur un click et tu veux qu'il soit déjà positionné lorsque celui ci est affiché, puis qu'il suive le scroll de la page lorsque visible.

1/ rétablir le fichier gf_scroll_div.js comme à l'origine
2/ dans la fonction d'affichage il faut forcer le DIV à se positionner à la bonne position
3/ cela nous donne par exemple le fichier test suivant

<html>
<head>
<title>[PetoleTeam] Test...</title>
<style type="text/css">
body {
  height : 2000px;
  width  : 2000px;
}
#DIV_MOVE {
  left : 550px;
  top : 350px;
  color : #000000;
  font-size : 13px;
  font-family : Verdana;
  text-align : center;
  background-color : #b0c4de;
  height : 150px;
  width  : 130px;
  border-style : solid;
  border-width : 1px;
  border-color :  #ffffff #808080 #808080 #ffffff;
  z-index : 1000;
  visibility : hidden; /* IMPORTANT pas display :none */
}
</style>
<script type="text/javascript" src="gf_scroll_div.js"></script>
<script type="text/javascript">
//-------------
function Swap(){
  //-- Recup ref. de l'objet
  var Obj = O_DivScroll.Obj;
  //-- Mets en position de fin de deplacement
  O_DivScroll.Move( O_DivScroll.NewX, O_DivScroll.NewY);
  //--------------------------------------------------------------//
  // IMPORTANT on joue avec style.visibility et non style.display //
  //--------------------------------------------------------------//
  if( Obj.style.visibility == 'hidden')
    Obj.style.visibility = 'visible';
  else
    Obj.style.visibility = 'hidden';
}
</script>
</head>
<body onclick="Swap();">
<div id="DIV_MOVE">L'objet qui suit</div>
</body>
</html>

C'est la fonction Swap qui ce charge de le mettre à la bonne position avant affichage.

Nota :
  - Le onclick dans l'exemple est mis sur le BODY, mais peut s'adapter à d'autre élément.
  - On utilise les propriétés O_DivScroll.NewX et O_DivScroll.NewY pour placer le DIV en position finale aprés scroll.
  - On utilise style.visibility et non display car la fonction de récupération de la position, telqu'utilisée ne peut récupérer les valeurs si l'objet est en display :none.

Voila j'espère avoir été aussi clair que possible

;O)

signaler à un administrateur
Commentaire de sebbe le 20/11/2008 16:47:04

Bonjour et merci pour ce code!
Une question : à différentes résolution d'écran, le div se place à différents endroit (au niveau horizontal). Comment puis je faire pour l'avoir au même endroit de ma page, quelle que soit la résolution de l'écran?
Merci encore!

signaler à un administrateur
Commentaire de PetoleTeam le 22/11/2008 01:22:52

Bonjour,

Si tu déclares des positions de départ dans ta feuille de style en px aucun problème de positionnement n'est à craindre et ce quelque soit la résolution.

Si tu déclares la position en % la position dépendra effectivement de la largeur de ta page donc de la résolution de l'affichage du PC hôte.

;O)

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Centrer un div [ par coyote ] Je voudrais centrer un div (qui apparait)&nbsp; lors d'un clic souri. Le probleme est que je veux le centrer relativement au scroll de la page: la pag scroll barre [ par viking11100 ] salut je debute alors evidemment j'ai dess blemsje fais un site avec frontpage et je voudrais savoir comment je peux faire pour que ma page index qui Probleme nombre de div dans la page [ par gatita_dev ] Bonjour, je fais l'interpretation d'une feuille excel sur une page Web, je travaille comme suit:j'ai fais des tableau dans chaque cellule il y a un &l Structure d'une page avec des DIV [ par MadM@tt ] Bonjour j'ai une question toute simple qui me résiste depuis plusieurs année !et comme je commence un nouveau site web, j'aimerais le faire propre, c' Cacher balise DIV [ par aloisio11 ] Bonjour,J'utilise ce code pour cacher des parties (&lt;div&gt;&lt;/div&gt;) de ma page :document.getElementById('DivIcones').style.display='none';Il f Problème de DIV lors de la réduction [ par nico3141 ] Bonjour, J'essaye d'utiliser des feuilles de style pour mettre en page un site. Quand Modification de tableau par balise div [ par gourango ] Boujour et bien voila un grand probleme se pose la comptabilitee :J ai cree un script pour mon site malheureusement imcompatible avec ie !!!(internet Drag [ par gazalii ] Bonjour j'ai une div que j'affiche après un click sur un lien lorsque je clique sur ce lien j'affiche un scrolling du background permanent [ par sapakus ] Bonjour, J'ai réalisé une photo panoramique à 360° et je veux la faire défiler comme background d'un bloc en permanence. Soit quelque chose du type : Comment atteindre un objet au-dessus de l'objet document ? [ par sbertho ] Dans une page, je cr&#233;e dynamiquement une div avec un id. Cette div contient un table contenant un iframe.Cette iframe fait appel &#224; une page


Nos sponsors

Sondage...

CalendriCode

Décembre 2008
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,374 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.