DIV QUI SUIT LE SCROLLING DE LA PAGE

Commentaire de kiki2sirom le 09/11/2007 16:25: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

Commentaire de coucou747 le 10/11/2007 14:04:01 administrateur CS

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

quelquechose a ajouter ?

Commentaire de alover971 le 12/11/2007 07:48:59

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 !

Commentaire de jjdagadir le 12/11/2007 15:32:58

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

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

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

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.

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

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.

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+

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 ?

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)

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)

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

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

Commentaire de misscatas le 07/11/2008 12:56:26

merci beaucoup pour ses infos. bonne journée

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)

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)

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)

Commentaire de renaud321 le 25/12/2008 08:31:40

super!!!

Commentaire de PetoleTeam le 22/01/2009 18:03:20

Bonjour,
pour avoir le même effet sur les différents navigateurs il te faut mettre dans le style
body {
  margin : 0;
  padding : 0;
}
Les valeurs par défaut des navigateurs n'étant pas les mêmes.

Tiens moi au courant, voir donnes moi un lien pour me rendre compte.

;O)

Commentaire de PetoleTeam le 22/01/2009 22:31:03

Sans voir cela va être difficile, mais...
Nous en arrivons donc au plus délicat
- IE et FireFox ne gérant pas de la même façon les border et les padding essaies de les mettre à zéro pour test...
- quel DOCTYPE utilises tu, un strict est préférable pour un rendu plus fidéle...

Wait and SEA
;O)

Commentaire de didieri le 27/02/2009 02:29:32

bravo
seulement j'ai un petit problème... j'aimerai avoir un menu réellement FIXE, connaîtriez vous une méthode pour éliminer le ""sautillement"" qui a lieu lorsqu'on scroll???
un autre script, une bidouille?

Commentaire de naturewe le 11/09/2009 11:21:23

Bonjour,

Comment faire pour toujours centrer le bloc sur un page ?
(pour s'en servir de menu horizontal collé en haut de la fenêtre du navigateur)

Les css "margin-right : auto" et "margin-left : auto" ne sont d'aucun effet.

merci beaucoup

Commentaire de guillaume2vo le 29/11/2009 23:16:21

bonjours

c'est ce que je recherche comme code, je ne comprend rien en langage informatique (javascript)

j'ai ce code mais je ne veut pas que mon menu descende, je veut qu'il monte, jusqu'à une hauteur de 10px du haut de l'écran
et qu'il reste fixe a cette hauteur de l'écran malgré la longueur du texte que j'ai pu écrire, 100 ou 1000 ligne sur la droite



<script type="text/javascript">

function depl (){
if(document.body.scrollTop>=document.getElementById('divTopLeft').offsetTop-10){
document.getElementById('divTopLeft').style.top=document.body.scrollTop
}
}
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function JSFX_FloatDiv(id, sx, sy)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
var px = document.layers ? "" : "px";
window[id + "_obj"] = el;
if(d.layers)el.style=el;
el.cx = el.sx = sx;
el.cy = el.sy = sy;
el.sP=function(x,y)
{
this.style.left=x+px;this.style.top=y+px;
};
el.floatIt=function()
{
var pX, pY;
pX = (this.sx >= 0) ? 0 : ns ? innerWidth :
document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body.clientWidth;
pY = ns ? pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop;
if(this.sy<0)
pY += ns ? innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body.clientHeight;
this.cx += (pX + this.sx - this.cx)/8;
this.cy += (pY + this.sy - this.cy)/8;
this.sP(this.cx, this.cy);
setTimeout(this.id + "_obj.floatIt()", 40);
}
return el;

JSFX_FloatDiv("divTopLeft", 200,200).floatIt();
</script>

Commentaire de poma2 le 15/12/2009 04:40:17

Rien à dire nickel! bravo

Commentaire de PetoleTeam le 16/01/2010 07:31:03

Bonjour,
pas de problème, mais il faudra veiller après le drag de mettre à jour les nouvelles positions.
;O)

Commentaire de PetoleTeam le 19/07/2010 20:27:40

Bonjour,
dans la fonction function DIV_Deplace( x_, y_){
mets la ligne 100 en commentaire
this.Obj.style.left = parseInt(x_) +"px";
c'est cette ligne dans le fichier lu à cette adresse
http://files.codes-sources.com/fichier.aspx?id=44655&f=gf_scroll_div.js
;O)

Commentaire de evinfo le 05/08/2010 01:41:29

Propre et fluide, Super !!!
félicitations et merci encore...

Commentaire de moni58testctfg le 05/11/2010 13:34:56

salut, c nikel ce code mais comment je peu déplacer ce div à la droite de la page,est ce que vous pouvez m'aidez? merci

Commentaire de moni58testctfg le 08/11/2010 10:06:44

merci PetoleTeam pour votre réponse mais malheuresement, elle ne fonctionne pas

Commentaire de PetoleTeam le 11/11/2010 09:30:56

Bonjour,
il serait sympa que tu indiques la solution qui a réglée ton soucis, cela pourrait en aider d'autres.

;O)

Commentaire de moni58testctfg le 03/01/2011 12:01:21

pour déplacer le div vers le droite il suffit de supprimer de fichier css left:30px et le remplacer par right:30px

Commentaire de moni58testctfg le 03/01/2011 15:49:25

bonjour,
bon j'ai une probléme,je veux que ce div suit que le scrolling vertical,j'ai tout essayé mai j'ai pas trouvé des solutions,est ce qu'il y'a quelqu'un qui peut m'aider,merci d'avance.

Commentaire de moni58testctfg le 04/01/2011 10:40:51

je veux que l'image reste fixe comme dans http://www.africanmanager.com/articles.php alors j'ai mis cela
<div >
<a href="#"><img src="img/logo.jpg" width="100" height="550" style="position:fixed; top:10px; right:20px" /></a>

</div>
mais come méme il ne fonctionne pas.

Commentaire de PetoleTeam le 05/01/2011 13:05:32

Bonjour,
mettre la DIV en position fixed va à l'encontre du pourquoi de cette source.
Je répète, si l'image est contenu dans la DIV elle se déplacera avec celle ci.
;O)

Commentaire de feil le 03/02/2011 16:46:37

Bonjour PeloteTeam et merci pour ce code qui va peut-être me servir !
Après quelques heures de recherches et des cheveux en moins, je viens crier à l'aide (je débute en java).
Tout fonctionne parfaitement mais j'aimerai apporter une petite modif.

Ma DIV_MOVE se situe juste en dessous du header (qui fait 230 px de hauteur).
J'aimerai que la DIV_MOVE suive le scroll uniquement au moment où le scroll est supérieur ou égal à 230 px.
En gros je veux "borner" son déplacement, qu'elle ne "descende" qu'à partir de 230 px.

Lui mettre une marge Top de 230 ne m'intéresse pas car je veux que lorsque je scroll, la div soit "collée" au Top de la fenêtre. Or quand j'ajoute une marge, il y a un blanc de 230 pixel au dessus d'elle (un peu comme dans l'exemple).


Merci d'avance,
bonne journée

Commentaire de phasm le 05/02/2011 19:37:22

Bonjour Petole,

Merci pour ce script qui est exactement ce que je cherche.
En revanche, après avoir intégré ça au code de mon site, je comprends (un peu trop tard) que les deux logiques semblent rentrer en conflit. :-(
Je m'explique :
Je tiens à ce que le contenu de mon site reste centré dans le navigateur, quel que soit l'écran de l'internaute.
#container {position: relative; margin: 0 auto;}
Or, si j'ai bien tout saisi, le div à scroller ne peut pas être imbriqué dans un div principal et centré. Ses positions sont absolues.
Lorsque j'essaie d'intégrer ça à l'intérieur de mon div central/centré la position initiale est bonne, mais dès que je bouge quoi que ce soit, le div à scroller se met n'importe où horizontalement (ie sur le contenu principal).
Y a-t-il une solution ?
Avec mes remerciements désespérés. :-)

Commentaire de feil le 05/02/2011 21:37:52

Salut,
Si tu veux que ton site soit centré dans la page, règle ta balise body (du style 900px de large, margin auto), elle remplacera ta div container. Comme ça ta div scroll ne sera pas forcément collée à un bord de ta fenêtre.

Par contre ma question reste sans réponses... peux-être qu'il n'y a pas de solutions ????

Commentaire de phasm le 06/02/2011 16:46:12

Mhhh. on dirait que j'avais oublié d'indiquer "position: relative", ça semble marcher, merci :-)

Sinon je crois qu'il y a également des façons de centrer un site avec des positions absolute (en utilisant des %).
Je me renseigne.

Il y a des jours où l'entêtement remplace l'intelligence :-)

Commentaire de PetoleTeam le 11/02/2011 10:09:20

Bonjour,
à l'attention de feil.
Il te faut modifier la fonction DIV_CheckScroll comme suit
<CODE>
//------------------------
function DIV_CheckScroll(){
  var Scroll  = GetScrollPage();
  var Mini = 230;
  //-- New position  du menu
  if( Scroll.top > Mini){
    O_DivScroll.NewX = Scroll.left +O_DivScroll.DebX;
    O_DivScroll.NewY = Scroll.top  +O_DivScroll.DebY;// -Mini;
  }
  else{
    O_DivScroll.NewX = Scroll.left +O_DivScroll.DebX;
    O_DivScroll.NewY = Mini;//Scroll.top  +O_DivScroll.DebY;  
  }  
  //-- Si pas la bonne Position
  if(( O_DivScroll.PosY != O_DivScroll.NewY)||( O_DivScroll.PosX != O_DivScroll.NewX)){
    //-- Clear l'encours
    clearInterval( IdTimer_1);
    IdTimer_1 = setInterval("DIV_Replace(" + O_DivScroll.NewX +"," + O_DivScroll.NewY +")", 10);
  }
  return( true);
}
</CODE>
si tu veux que la DIV reste en 0 une fois le scroll de 230px effectué alors modifiie la ligne
O_DivScroll.NewY = Scroll.top  +O_DivScroll.DebY;// -Mini;
comme suit
O_DivScroll.NewY = Scroll.top  +O_DivScroll.DebY -Mini;

;O)

Commentaire de flom93 le 05/03/2011 16:33:10

Bonjour PetoleTam,

Pourrais tu m'aider stp, j'ai ajouté le script sur mon site www.smileyemoticone.com mais je n'arrive pas à bien modifier ce qu'il faut pour que tout la pub apparaisse bien...
C'est sur la pub de droite j'en vois que la moitié...

Merci par avance

Florent

Commentaire de torg33 le 18/04/2011 18:52:39

Bonjour tout le monde,
je viens d'intégrer ce script à mon portfolio et je tiens a dire que c'est tout à fait ce qu'il me faut.
Mais (et oui il y a un MAIS ^^) le soucis que je rencontre, n'étant pas un codeur chevronné en java, c'est que ma div, placé sur la droite dans ma div "contenu", dépasse mon "Footer" (la dernière div de ma page) quand je scroll tout en bas et l'effet étend ma page à l'infini si je continu a scroller.
C'est surement du a la longueur de ma div...
Alors ce que j'aimerais savoir c'est:
-si c'est possible de démarrer le scroll de ma div "que" quand le haut de la page "touche" le haut de ma "div" (pas direct quand je scroll), parce-que sinon on ne voit pas la totalité du contenu, et le fait que sa scroll, on ne voit jamais le contenu qu'il y a en bas.
-si c'est possible d'arrêter le scroll quand le bas de ma div "touche" le début de mon "footer", en sachant que le contenu de ma div "contenu" à gauche de ma div "qui scroll" est variable.

C'est bon vous m'avez suivit ? ^^

Et dernière petite question:
Je voudrais savoir ou je pourrais récupérer ce script (ou équivalent) nommé "actionbar" dans le code:
http://www.elleadore.com/cote-cuisine/cote-recettes/plats/gratin-de-crozet-au-beaufort-comte-et-lardon.php
C'est la barre qui scroll sur la gauche avec les icônes.

Merci d'avance pour vos réponse.
Cordialement.