11548 sujets

JavaScript, DOM et API Web HTML5

Sliding content

Bonjour à tous,
j'aimerai faire un site dont la navigation se fait par un menu fixe faisant slider le contenu de mon site présent sur une seule page html dans laquelle chaque div correspond à une catégorie du menu à slider.
Jusque la tout va bien, mais j'aimerai que la page s'affiche sur le menu "my desk" et non automatiquement par la première div de mon code html.

Voici l'url du code :
http://www.ctookom.com/test/

Est ce possible avec ce code ? si quelqu'un à une idée merci d'avance Smiley cligne
yooole a écrit :
j'aimerai faire un site dont la navigation se fait par un menu fixe faisant slider le contenu de mon site présent sur une seule page html dans laquelle chaque div correspond à une catégorie du menu à slider.

Bonsoir,

Je n'ai aucune réponse à poster, je tenais simplement à dire que je trouvais ce concept assez génial, je l'ai déjà vu mais n'ai jamais pensé à le mettre en œuvre. Une bonne idée à explorer un de ces jours...
Modifié par Olivier C (21 Jun 2011 - 21:25)
Bonjour à toutes et à tous,

j'ai regardé ton code javascript et je trouve que cela est bien trop compliqué pour juste faire glisser ta page.

J'ai fait cette exercice qui me semble plus souple à l'usage que ce que tu fais !

Si j'ai bien compris le principe, tu as un menu qui est toujours fixe par rapport à la fenêtre et tu désires découper ta page HTML en plusieurs boites dont chaque boite a exactement la largeur et la hauteur de ta fenêtre.

Lorsque tu cliques sur une catégorie de ton menu, tu désires faire coïncider la boite correspondante qui est donc masquée avec la fenêtre afin de la rendre visible mais par glissement.

Personnellement, dans le code HTML, je procéderais en créant une boite conteneur où je placerais toutes mes autres boites comme s'il s'agissait d'un ruban que je déplacerais en faisant un changement de coordonnées en fonction de la catégorie du menu.

Chaque boite serait gérer indépendamment les unes des autres.

Pour ce qui est de la présentation, je te laisse faire.

@+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>page glissante</title>
<script language="javascript" type="text/javascript" src="Show_Props.js"></script>

<style type="text/css">
* {
			margin					: 0;
			border					: none;
			padding					: 0;
			overflow				: hidden;
}

body	{	background-color		: grey;			}
#boite1 {	background-color		: red;			}
#boite2 {	background-color		: green;		}
#boite3 {	background-color		: blue;			}
#boite4 {	background-color		: yellow;		}
#boite5 {	background-color		: pink;			}
#boite6 {	background-color		: lightyellow;	}
#boite7 {	background-color		: skyblue;		}
#boite8 {	background-color		: maroon;		}
#boite9 {	background-color		: white;		}

#menu	{
			position				: fixed;
			top						: 200px;
			left					: 200px;
			font-size				: 2em;
}

li		{	list-style-type			: none;
}

.commun {
			padding					: 10px;
			width					: 1440px;
			height					: 780px;
}
</style>

<!--[if IE]>
<style type="text/css">
menu {		position				: absolute;		}
</style>
<![endif]-->

<script language="javascript" type="text/javascript">
var boite = {
/*----------------------------------*/
/*     paramètre de l'animation     */
/*----------------------------------*/

delay: null,

/*-----------------------------*/
/*     position précedente     */
/*-----------------------------*/

horiz: 0,
verti: 0,

/*---------------------------*/
/*     position suivante     */
/*---------------------------*/

posX: 0,
posY: 0,

/*-------------------------------*/
/*     le Pas du Déplacement     */
/*-------------------------------*/

stepHor: 0,
stepVer: 0,

/*----------------------------------*/
/*     Animation du Déplacement     */
/*----------------------------------*/

anime: function anime()
{
	if (this.horiz > this.posX)	{this.horiz -= 50; this.stepHor = -50;}
	if (this.horiz < this.posX)	{this.horiz += 50; this.stepHor = +50;}

	if (this.verti > this.posY)	{this.verti -= 50; this.stepVer = -50;}
	if (this.verti < this.posY)	{this.verti += 50; this.stepVer = +50;}

	window.scrollBy(this.stepHor, this.stepVer);

	this.stepHor = 0;
	this.stepVer = 0;
	
	if ((this.horiz == this.posX) && (this.verti == this.poxY))
	{
		clearInterval(this.delay);
		this.delay = null;

		this.horiz = this.posX;
		this.verti = this.posY;

		this.posX  = 0;
		this.posY  = 0;
	}
	else
	{
		this.delay = setTimeout("boite.anime();", 40);
	}
},

/*------------------------------------------------*/
/*     Déplacement vers une nouvelle position     */
/*------------------------------------------------*/

deplace: function (node)
{
	switch (node)
	{
		case 1:
			this.posX =    0;
			this.posY =    0;
			this.anime();
			break;

		case 2:
			this.posX =    0;
			this.posY =  800;
			this.anime();
			break;

		case 3:
			this.posX =    0;
			this.posY = 1600;
			this.anime();
			break;

		case 4:
			this.posX =    0;
			this.posY = 2400;
			this.anime();
			break;

		case 5:
			this.posX =    0;
			this.posY = 3200;
			this.anime();
			break;

		case 6:
			this.posX =    0;
			this.posY = 4000;
			this.anime();
			break;

		case 7:
			this.posX =    0;
			this.posY = 4800;
			this.anime();
			break;

		case 8:
			this.posX =    0;
			this.posY = 5600;
			this.anime();
			break;

		case 9:
			this.posX =    0;
			this.posY = 6400;
			this.anime();
			break;
	}
}

};
</script>
</head>

<body>
	<ul id="menu">
		<li onclick="boite.deplace(1);">Boite 1</li>
		<li onclick="boite.deplace(2);">Boite 2</li>
		<li onclick="boite.deplace(3);">Boite 3</li>
		<li onclick="boite.deplace(4);">Boite 4</li>
		<li onclick="boite.deplace(5);">Boite 5</li>
		<li onclick="boite.deplace(6);">Boite 6</li>
		<li onclick="boite.deplace(7);">Boite 7</li>
		<li onclick="boite.deplace(8);">Boite 8</li>
		<li onclick="boite.deplace(9);">Boite 9</li>
	</ul>

	<div id="bloc">
		<div id="boite1" class="commun"><h1>Boite 1</h1><p>bla bla bla bla bla</p></div>
		<div id="boite2" class="commun"><h1>Boite 2</h1><p>bla bla bla bla bla</p></div>
		<div id="boite3" class="commun"><h1>Boite 3</h1><p>bla bla bla bla bla</p></div>
		<div id="boite4" class="commun"><h1>Boite 4</h1><p>bla bla bla bla bla</p></div>
		<div id="boite5" class="commun"><h1>Boite 5</h1><p>bla bla bla bla bla</p></div>
		<div id="boite6" class="commun"><h1>Boite 6</h1><p>bla bla bla bla bla</p></div>
		<div id="boite7" class="commun"><h1>Boite 7</h1><p>bla bla bla bla bla</p></div>
		<div id="boite8" class="commun"><h1>Boite 8</h1><p>bla bla bla bla bla</p></div>
		<div id="boite9" class="commun"><h1>Boite 9</h1><p>bla bla bla bla bla</p></div>
	</div>
</body>
</html>
Merci pour ce code Artemus Smiley cligne ,
il est vraiment simplifié, c'est super. Sais tu comment je peux faire démarrer ma page sur la boite 3 ou 4 par exemple et non la boite 1 ?

Merci d'avance
bonjour Yoole,

tu rajoutes quelque part dans le script JS le code ci-dessous, et au démarrage de ton site, il y aura une animation qui se positionnera sur la troisième boite !

window.onload = function ()
{
	boite.deplace(3);
}


Autre solution : tu utilises un scrollTo().

window.onload = function ()
{
	 boite.horiz = 0;
	 boite.verti = 1600;

	window.scrollTo(0, 1600);
}


Car cette fois-ci il n'y a plus d'animation. Attention au positionnement de l'horizontal et du vertical !

@+
Modifié par Artemus24 (22 Jun 2011 - 17:39)
Sujet clos
Aller à