Positionnement de bloc DIV [Résolu]

Signaler
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006
-
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006
-
Bonjour, voilà, disons que je suis webdesigner amateur, et j'aurais besoin de
savoir s'il est possible de fixer la position d'un bloc
par rapport
à l'écran à l'aide d'un code javascript. Ce que je demande est relativement
simple : imaginez une image positionnée en bas à gauche de l'écran, et qui
devrait rester à cette même place, même lors d'un scrolling vertical.
Evidemment, le css ne m'aidant pas ici, j'ai pensé au javascript... En espérant
que vous saurez m'aider...
Merci d'avance

9 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
 
Bonjour...
vu l'heure tôtive... Arto_8000 à commis quelques impairs...

essaies avec ce morceau de code...

<html>
<head>
<title>TEST</title>
<script type= "text/javascript">
function replaceDiv( id , positionX, positionY){
  // positionX et positionY corresponde à la position fixe par rapport à l'écran //
  offsetY = (document.all) ? document.body.scrollTop : window.pageYOffset;
  offsetX = (document.all) ? document.body.scrollLeft : window.pageXOffset;
  document.getElementById( id ).style.top = positionY + offsetY +'px';
  document.getElementById( id).style.left = positionX + offsetX +'px';
  //-- pour le rafraîchissement
  setTimeout ("replaceDiv('" +id+"'," +positionX +"," +positionY +")",1);
}
</script>
</head>

Bonjour

Bas de Page...
<script type ="text/javascript">
  //-- lancement de l'action mettre en fin de document par exemple
  replaceDiv('DIV_0',200,200);
</script>

</html>

Nota :
 je prefère utiliser setTimeout plutôt que setInterval car elle n'est pas prioritaire et laisse donc le temps de faire autre chose...

;0)
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006

Je mets ça ici, à défaut de le mettre chais-pas où =P :

----- html ---------------
<html>
[...]

contenu du bloc flottant

contenu de la page

</html>

----- css ---------------
#fix {
     position:absolute;
     top: ordonnée de l'objet;
     left: abscisse de l'objet;
}
body>div#fixe {
    position: fixed;
}

html,body {
    margin: 0;
    padding: 0;
    overflow-y: hidden;
    height: 100%;
}

#container {
    z-index: 10;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

Voilà, ça doit être bon (si ça ne marche pas, c'est que j'ai fait une erreur en recopiant :/)
Et si j'ai mis ça là où fallait pas, merci de me dire pour que je rectifie le tir
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
Voici quelque chose qui peut t'aider :

function replaceDiv(id,positionX,positionY)
{
//
positionX et positionY corresponde à la position fixe par rapport à l'écran //
offsetY = (document.all) ? document.body.scrollTop : window.pageYOffset;
offsetX = (document.all) ? document.body.scrollLeft : window.pageXOffset;
document.getElementById("divName").style.top = positionY + offsetY;
document.getElementById("divName").style.left = positionX + offsetX;
}

et si tu veux que cela se rafraichisse tout le temps il suffit de rajouter ceci à l'extérieur de la fonction :

setInterval("replaceDiv('id',positionX,positionY)",1);
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006

k, je vais essayer ça et j'accepterai cette réponse si elle marche (ce qui va être le cas, je suppose ^^)
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006

Emm... Une autre question (je maîtrise pas encore le javascript, mais ça va venir =P) :
Si je créé mon bloc div avec ce code :

...

J'ai bien l'idée de ma div, mais je vois pas ce que tu appelles divName, du coup... ^^''
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006

En fait, je dois louper quelque chose... Encore une fois, chui nouveau dans le js, alors si quelqu'un pouvait m'expliquer ça plus en détail, svp ^^''
Messages postés
1044
Date d'inscription
lundi 7 mars 2005
Statut
Membre
Dernière intervention
13 juillet 2010
6
Merci de me corriger j'ai souvent tendance à faire des erreurs, mais pour l'heure je crois qu'il était pas très tard, car je suis de montréal et non de France :p

Pour le setTimeout, j'ignorais la différence, mais pour moi je trouve ça plus pratique de le mettre en setInterval. Mais bon c'est une question de goût, car je ne crois pas qu'il y a une grosse différence pour les performances, s'il n'y a pas grand chose à faire rouler.
Messages postés
16
Date d'inscription
lundi 5 juin 2006
Statut
Membre
Dernière intervention
9 novembre 2006

Ca a l'air Ok
Merci à vous deux
Celà dit, j'ai trouvé une solution jouant avec du code css, ce qui est moins lourd ^^
Je garde ce code quand même, je vais en avoir besoin à coup sûr =P
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
13
B

onjour...
Il me semblait bien qu'en CSS il y avait moyen de moyenner...
Si cela était un effet de ta grande bonté que de nous faire partager ta trouvaille...certains désactivent le javascript alors cela peut être très utile...

;0)