Forums des Zéros

10 avril 2009 à 10:06:37

Bonjour à vous tous

J'ai un petit soucis

J'ai créé le site de mon club, et une galerie d'image.

Le problème, quand vous cliquez sur inter-Club puis sur les images, on est obligé de redescendre la page à chaque fois ; c'est chiant.

Je pense qu'il faudrait du Js pour que la page descende de quelque cm.

Merci de votre aide, tchoooo

10 avril 2009 à 10:34:04

Tu places une div en absolute avec un id... et t'utilises les ancres...
Et tout ça en HTML/PHP/CSS...

10 avril 2009 à 11:02:13

J'ai tenté ceci :

.XX{height:0;position:absolute;top:24px;width:100%}

<div class=gbh>

Sans résultat à par un décalage de toute la page

Comment faire ? :euh:

10 avril 2009 à 11:03:41

<div id="ici" stlyle="position:absolute;display:none;top:50px;"></div>

10 avril 2009 à 11:10:54

En faite, je ré-édite, cela ne marche pas.

10 avril 2009 à 12:20:34

bah déjà, essayes de mettre une div avec un fond rouge...

10 avril 2009 à 12:35:42

Pourquoi n'utilises-tu pas une lightbox (puisqu'on est dans le forum js) ? Ca évite de quitter la page à chaque fois, et donc on reste toujours dans le bah de page

Faudrait revoir un peu la structure du site mais ça serait plus simple

10 avril 2009 à 12:49:42

Citation : cerium50

Faudrait revoir un peu la structure du site mais ça serait plus simple

10 avril 2009 à 13:54:36

Sinon au chargement de la page un simple
document.body.scrollTop = La_position_souhaitée;

10 avril 2009 à 18:12:12

Citation : xavierm02

Citation : cerium50

Faudrait revoir un peu la structure du site mais ça serait plus simple

Mettre en place une lightbox est difficile ?!

J'avais bien pensé à scrolltop comme Tiller, mais quitte à utiliser du JS autant profiter de toutes ses possibilités...

10 avril 2009 à 18:38:59

J'ai déjà une lightbox sur le site.

Sauf que là, j'utilise 2bGal donc je créé mon dossier, mets mes photos de dedans et tous se créé assez vite en fait.

Et ceci :
document.body.scrollTop = La_position_souhaitée;

Je met en px c'est sa ?

10 avril 2009 à 18:48:51

Tu fais ça :

<script type="text/javascript">
window.onload = function() {
scrollTo(0, 555); //remplace le 555 par la taille en px
};
</script>

10 avril 2009 à 19:15:38

Citation : cerium50

Tu fais ça :

<script type="text/javascript">
window.onload = function() {
scrollTo(0, 555); //remplace le 555 par la taille en px
};
</script>

Sa ne marche pas :S

Pourtant, il est placé correctement dans le header.

10 avril 2009 à 20:54:06

scrollTop se met sans unité je crois

10 avril 2009 à 20:59:12

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<script type="text/javascript">
	window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	};
	</script>

    <title>Testeuh</title>
</head>
<body>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

<h2>Header Level 2</h2>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<h3>Header Level 3</h3>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>

</body>
</html>

J'ai essayé ça et ça marche nickel...

Edit : remet-nous le lien vers la page qu'on puisse voir si t'as pas du js qui rentre en conflit...

11 avril 2009 à 19:53:04

Voilà, c'est placé et sa ne marche pas.
(http://www.dijonbmx.fr/V2/espacelic/photos/2bgal/)

Je l'ai mis dans le "header.php" qui est appelé dans le fichier "img.php"

Mercii,

11 avril 2009 à 19:56:09

<script type="text/javascript">
	window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	};
	</script>
<body onLoad="loadIt('',this.form)">

Essai ça:

<script type="text/javascript">
	window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	loadIt('', ''); //J'ai supprimer this.form car je vois pas a quoi c'est censé renvoyer -.-
	};
	</script>
<body>

11 avril 2009 à 20:11:42

Ca ne marche toujours pas :/

J'utilise la galerie d'image 2bgal, je l'ai modifié et met le script dans le header qui est appelé par img.php donc normalement sa devrait marcher.

Le haut de l'header : (il n'est pas en entier)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>DijonBMX - BMX Dijon &copy;</title>	
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen" href="http://www.dijonbmx.fr/V2/include/css/style.css" />
<meta name="Keywords" content="BMX, BCD, v&eacute;lo, bicross, bmx, dijon, race, saut, petit velo, bicross dijon, dijon bicross">
<meta name="Copyright" content="Copyright &copy; 2009 DijonBMX - Tous droits r&eacute;serv&eacute;s">
<meta name="reply-to" content="webmaster@dijonbmx.fr">
<script type="text/javascript">
	window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	loadIt('', ''); //J'ai supprimer this.form car je vois pas a quoi c'est censé renvoyer -.-
	};
	</script>

<?
  //--------------------------------
  //CONSERVER CETTE PARTIE DU CODE
  require("config.inc.php");
  echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/".$templatefolder."/2bgal.css\" media=\"screen\" />\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/minmax.js\"></script>\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/2bgalfadein.js\"></script>\n";
  //--------------------------------
?>
<script type="text/javascript">
	window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	};
	</script>
<body onLoad="loadIt('',this.form)">

11 avril 2009 à 20:59:24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>DijonBMX - BMX Dijon &copy;</title>	
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen" href="http://www.dijonbmx.fr/V2/include/css/style.css" />
<meta name="Keywords" content="BMX, BCD, v&eacute;lo, bicross, bmx, dijon, race, saut, petit velo, bicross dijon, dijon bicross">
<meta name="Copyright" content="Copyright &copy; 2009 DijonBMX - Tous droits r&eacute;serv&eacute;s">
<meta name="reply-to" content="webmaster@dijonbmx.fr">
<script type="text/javascript">
window.onload = function() {
	scrollTo(0, 555); //remplace le 555 par la taille en px
	loadIt('',this.form);
};
</script>

<?
  //--------------------------------
  //CONSERVER CETTE PARTIE DU CODE
  require("config.inc.php");
  echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/".$templatefolder."/2bgal.css\" media=\"screen\" />\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/minmax.js\"></script>\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/2bgalfadein.js\"></script>\n";
  //--------------------------------
?>
<body>

11 avril 2009 à 21:05:53

Non toujours rien :S

Tu as besoin d'un fichier ? Script ?

11 avril 2009 à 21:08:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>DijonBMX - BMX Dijon &copy;</title>	
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" media="screen" href="http://www.dijonbmx.fr/V2/include/css/style.css" />
<meta name="Keywords" content="BMX, BCD, v&eacute;lo, bicross, bmx, dijon, race, saut, petit velo, bicross dijon, dijon bicross">
<meta name="Copyright" content="Copyright &copy; 2009 DijonBMX - Tous droits r&eacute;serv&eacute;s">
<meta name="reply-to" content="webmaster@dijonbmx.fr">
<script type="text/javascript">
window.onload = function() {
	setTimeout(function() { scrollTo(0, 555); document.body.scrollTop = 555; }, 5000); //Regarde si 5sec après ça marche
	loadIt('',this.form);
};
</script>

<?
  //--------------------------------
  //CONSERVER CETTE PARTIE DU CODE
  require("config.inc.php");
  echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/".$templatefolder."/2bgal.css\" media=\"screen\" />\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/minmax.js\"></script>\n";
  echo "<script type=\"text/javascript\" src=\"style/".$templatefolder."/2bgalfadein.js\"></script>\n";
  //--------------------------------
?>
<body>

11 avril 2009 à 21:14:43

Ouais sa marche mais bien 5 secondes après donc c'est assez long...

Ce que je demandais, même si ce que tu as fait est bien, c'est quelque chose de ce genre :
http://www.bmx2day.com/photos/index.ph [...] mFilters=#pic
L'image se change, la page se charge mais reste toujours au même endroit,

Merci quand même,

11 avril 2009 à 21:43:24

Bah c'est juste une ancre! Tu mets un id à la première photo et à chaque fois que tu lies la page tu la lies avec #id à la fin... Rien de bien compliqué. Pourquoi t'utilises pas une ancre standard ?

Edit : en plus pour passer à la photo suivante, il suffit de cliquer sur la photo, pas de besoin de revenir en arrière.