designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010
-
14 avril 2010 à 14:41
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010
-
15 avril 2010 à 00:27
Salut,
Je suis graphiste et je souhaite créer une div qui bouge normalement en scroll vertical avec les autres div de la page mais qui ne bouge pas en cas de scroll horizontal, contrairement aux autres div qui bougent horizontalement.
(Un peut comme une position:fixed horizontal uniquement, ce qui n'est pas possible en CSS)
Voici l'essai que j'ai réalisé, et ça ne fonctionne pas. Le scroll est OK à la verticale car tous les div bougent, mais le bloc noir continue de bouger en scrollant à l'horizontale alors que je veux qu'il reste immobile.
Il y a une(des) erreur(s) que je n'arrive pas à trouver avec mon petit niveau de graphiste. Je créé un second post ci-dessous pour y mettre le code seul.
<script type="text/javascript">
function move_blocnoir()
{
var Y = document.body.scrollTop;
document.getElementById("div_noir").style.top=Y;
}
</script>
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010 14 avril 2010 à 18:54
Merci PetoleTeam pour cette réponse.
Correction faite j'ai enlevé les 4 lettres de trop [div_], et ... ça ne fonctionne pas. La div noir glisse toujours en scrollant horizontalement au lieux de rester fixe.
ghost_of_prog était content de sa solution avec quelques coquilles dans ses posts, du coup, difficile de reproduire et déceler là où ça cloche même si la solution est proche.
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010 14 avril 2010 à 19:48
Génial, en changeant l'entête ça fonctionne !
Mais dans le mauvais sens : le bloc noir reste fixe en cas de srcoll vertical alors qu'il devrait le rester en scroll horizontal.
Pour changer le sens (X au lieu d'Y) j'ai donc remplacé :
var Y = document.body.scrollTop;
document.getElementById("noir").style.top=Y;
Par :
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;)
Mais ça ne fonction plus dans le sens désiré.
Pour que tu puisses voir l'effet, j'ai laissé pour le moment le lien avec l'effet qui fonctionne, mais dans le mauvais sens (les 2 lignes de code en X sont en note// juste en dessous).
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010 14 avril 2010 à 20:31
Bingo ça fonctionne comme je le voulais ! Réponses efficaces et pro. Merci beaucoup, je suis ravi! (J'espère que le changement d'entête ne posera pas de problèmes.)
Sur safari : Il y a un tout petit mouvement horizontal du bloc noir de 8 pixels vers la gauche quand je scroll dans les deux sens, mais ça reste fluide, c'est OK.
Sur Firefox et Opera : nickel en scroll vertical, en scroll horizontal le bloc noir tramblotte.
Sur Explorer : je suis sur mac (Power PC), j'utilise donc le site netrenderer (http://www.netrenderer.com) qui fait une capture d'écran sous Explorer 7 et 8, et là, le bloc noir n'apparait pas !
Je poste à nouveau le code propre en intégralité en dessous pour que cela soit utile à ceux qui veulent le même effets (en note // l'effet à la verticale).
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010 14 avril 2010 à 20:32
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>bloc fixe horizontalement</title>
<script type="text/javascript">
function move_blocnoir()
{
//var Y = document.body.scrollTop;
//document.getElementById("noir").style.top=Y;
var X = document.body.scrollLeft;
document.getElementById("noir").style.left=X;
div noir qui doit bouger en scroll vertical uniquement, mais qui ne doit pas bouger en cas de scroll horizontal de la page, contrairement au bloc gris qui bouge dans les 2 sens
(VIGNETTES DU PORTFOLIO)
div gris qui doit bouger en même temps que le bloc noir en cas de scroll vertical, mais qui bouge seul à l'horizontale en cas de scroll horizontal (le bloc noir devant rester immobile, ce qui ne fonctionne pas pour le moment)
(IMAGES EN GRAND DU PORTFOLIO)
designnn
Messages postés9Date d'inscriptionmercredi 14 avril 2010StatutMembreDernière intervention15 avril 2010 15 avril 2010 à 00:27
Les deux M'sieur !
Maintenant, c'est nickel sur tous les navigateurs. Juste quelques tremblotements sur FF et Opera. En espérant que ce tutoriel soit aussi utile à d'autres.