Imbriquement sur une "Page Glissante"

Question

Spirit_Afraid

15 Aug 2014 à 19:23

Bonjour à tous,

Etant assez néophtye en codage, j'essai tant bien que mal de créer actuellement une page d'accueil en html. Souhaitant réaliser un desgin sympathique j'ai entrepris de faire une "page glissante", j'ai trouvé par une recherche un post sur ce forum : http://forum.alsacreations.com/topic-5-67956-1-Resolu-Transition-de-pages-en-html5-.html[/url. J'ai donc utilisé au départ les éléments du sujet sans trop de soucis, jusqu'ici tout va bien.

Voici mon soucis, j'ai mes différentes zone de la page glissante avec pour identifiants boite1 (Accueil), boite2 (Forum), etc. Le problème est que lors du lancement de la page le contenu de la boite3 qui comporte un élément "object" (Twitch) apparaît sur la boite1 le temps de son chargement et ensuite se déplace sur la bonne zone (du coup il y a imbriquement des éléments au chargement).

Du coup je cherche désespérément le moyen de supprimer l'imbriquement du chargement, j'aimerai énormément pouvoir proposer une page d'accueil sympathique pour ma communauté car celle qui est en place actuellement est fade.

Je rajoute à la fin de ce post tout les codes possibles, mille mercis d'avance pour vos retours éventuels à mon problème.

Cordialement,

Jonas

Voici les différents éléments que je peux vous fournir en supplément d'informations :

Lien de la page html en cours de création : http://www.lesramollisdelamolette.org/h5-test

Code Javascript

/*======================================*/
/*     Initialisation au Chargement     */
/*======================================*/

window.onload = function ()
{
	boite.init();
}

window.onresize = function ()
{
	boite.init();
}

/********************************************/
/*                                          */
/*     Gestion de sous-pages Glissantes     */
/*                                          */
/********************************************/

var boite = {
/*==================================*/
/*     paramètre de l'animation     */
/*==================================*/

delay: null,
byStep: 100,
speed: 20,
mode: false,				/* true : avec animation, false : sans animation */

/*=============================*/
/*     Position des Boites     */
/*=============================*/

precX: 0,
precY: 0,
suivX: 0,
suivY: 0,

/*========================*/
/*     Initialisation     */
/*========================*/

init: function ()
{
	/*----------------------------------------*/
	/*     Largeur et Hauteur de la Boite     */
	/*----------------------------------------*/

	if (typeof(window.innerHeight) == "number")
	{
		var ww = parseInt(window.innerWidth);
		var hh = parseInt(window.innerHeight);
	}
	else
	{
		var ww = parseInt(window.screen.availWidth);
		var hh = parseInt(window.screen.availHeight) - parseInt(window.screenTop);
	}

	/*-------------------------------------------------------------*/
	/*     on force la largeur et la hauteur du bloc conteneur     */
	/*-------------------------------------------------------------*/

	var aa = ww * 5;		// Cinq boites par ligne
	var bb = hh * 1;		// Une boite par colonne

	window.document.body.style.width	= "" + aa + "px";
	window.document.body.style.height	= "" + bb + "px";

	/*-----------------------------------------------------------*/
	/*     on force la largeur et la hauteur de chaque boite     */
	/*-----------------------------------------------------------*/

	var xx = document.getElementsByTagName("div");

	for (var i=0; i<xx.length; i++)
	{
		if (xx.item(i).className == "commun")
		{
			xx.item(i).style.width  = "" + ww + "px";
			xx.item(i).style.height = "" + hh + "px";
		}
	}

	/*------------------------------------------*/
	/*     on se positionne sur la "boite1"     */
	/*------------------------------------------*/

	this.precX = document.getElementById("boite1").offsetLeft;
	this.precY = document.getElementById("boite1").offsetTop;

	window.scrollTo(this.precX, this.precY);
},

/*==================================*/
/*     Animation du Déplacement     */
/*==================================*/

anime: function ()
{
	/*-----------------------------*/
	/*     Mode Sans Animation     */
	/*-----------------------------*/

	if (this.mode)
	{
		window.scrollTo(this.suivX, this.suivY);
		return;
	}

	/*----------------------------*/
	/*     Mode AvecAnimation     */
	/*----------------------------*/

	var flagX = false;
	var flagY = false;

	/*-------------------------------*/
	/*     Ajustement Horizontal     */
	/*-------------------------------*/

	var stepX = this.suivX - this.precX;

	if (stepX > +this.byStep)
	{
		this.precX +=  this.byStep;
			 stepX  = +this.byStep;
	}
	else
	{
		if (stepX < -this.byStep)
		{
			this.precX -=  this.byStep;
				 stepX  = -this.byStep;
		}
		else
		{
			this.precX  = this.suivX;
			flagX       = true;
		}
	}
	
	/*-----------------------------*/
	/*     Ajustement Vertical     */
	/*-----------------------------*/

	var stepY = this.suivY - this.precY;

	if (stepY > +this.byStep)
	{
		this.precY +=  this.byStep;
			 stepY  = +this.byStep;
	}
	else
	{
		if (stepY < -this.byStep)
		{
			this.precY -=  this.byStep;
				 stepY  = -this.byStep;
		}
		else
		{
			this.precY = this.suivY;
			flagY      = true;
		}
	}
	
	window.scrollBy(stepX, stepY);

	/*------------------------------------*/
	/*     Poursuite de l'Animation ?     */
	/*------------------------------------*/

	if ((flagX == true) && (flagY == true))
	{
		clearInterval(this.delay);
		this.delay = null;

		this.precX = this.suivX;
		this.precY = this.suivY;
	}
	else
	{
		this.delay = setTimeout("boite.anime();", this.speed);
	}
},

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

deplace: function (node)
{
	var xx = document.getElementById("boite" + node.toString());

	this.suivX = xx.offsetLeft;
	this.suivY = xx.offsetTop;

	this.anime();
}

};

Code html avec le css intégré :

<!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" dir="ltr" id="min-width" lang="fr" xml:lang="fr">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see  www.w3.org"  />
<title>Les Ramollis De La Molette</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="google-site-verification" content="38ghLK6SmvA22KLpjqsyF0HYiANG_h5ZISx6OxNKFDg" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.aht.li/2345998/favicon.ico" />
<meta name="language" content="fr" />
<meta name="description" content="Forum des Ramollis De La Molette, Communauté Battlefield" />
<meta name="keywords" content="Forum, Ramollis, Molette, battlefield 2, bad company 2, jeu, clan, bf3, bf4, communauté, battefield 4, battlefield 3, rdlm" lang="fr" />
<meta name="robots" content="index, follow, noodp" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=5" title="Présentations des membres" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=40" title="Vos kiffes" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=8" title="Vos statistiques" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=18" title="Coup de pouce" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=62" title="Astuces & Techniques BF" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=7" title="Tu es un peu perdu ? Tu ne sais pas où poster ?" />
<link rel="alternate" type="application/rss+xml" href="/feed/?f=11" title="Marre de râler tout seul ?" />
<link rel="alternate" type="application/rss+xml" title="Derniers sujets (RSS 2.0)" href="http://www.lesramollisdelamolette.org/feed/" />
<link rel="alternate" type="application/atom+xml" title="Derniers sujets (ATOM)" href="http://www.lesramollisdelamolette.org/feed/?type=atom" />
<meta name="title" content="Les Ramollis De La Molette" />
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="" />
<link rel="search" type="application/opensearchdescription+xml" href="http://www.annuairedeforums.com/fr/search/improvedsearch.xml" title="Rechercher des forums" />
<script language="javascript" type="text/javascript" src="http://www.aht.li/2444323/Script.js"></script>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="CSS/Styles-IE.css" /
<![endif]-->
<style type="text/css">
/*<![CDATA[*/
  
body.loading {
		}
		
			body.loading * {
				-moz-transition: none !important;
				-webkit-transition: none !important;
				-o-transition: none !important;
				-ms-transition: none !important;
				transition: none !important;
			}
  
iframe.c5 {width: 890px; height: 360px;}
  
html { 
 overflow : hidden; 
}
 
body { 
 background-image: url(http://image.noelshack.com/fichiers/2014/33/1408023072-untitled-drawing-by-acersense.png); 
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-color: #222222;
}

/*--------------------*/
/*     Les Boites     */
/*--------------------*/

.commun {
 display : block;
 float : left;
 position : relative;
}

/*------------------------------------*/
/*    Présentation des Boites    */
/*------------------------------------*/

.cont {
 position : absolute;
 top : 100px;
 left : 125px;
right : 125px;
 bottom : 25px;
 background-color : transparent;
 z-index : 1;
}
    
.cont h1 {
 text-align : center;
}

.cont p {
 margin	: 10px;
 border	: 0px solid black;
 padding	: 10px;
}

.plop1 {
 font-family: 'Source Sans Pro', sans-serif;
}

/*-------------------*/
/*     Menu fixe     */
/*-------------------*/

#menu {
 background-color : #444444;
 position : fixed;
 top : 50px;
 left : 0px;
 padding : 5px;
 font-size : 25px;
 color : white;
 z-index : 2;
 font-family: inherit;
}

ul {
 padding:0;
 margin:0;
 list-style-type:none;
 }
li {
 margin-left:10px;
 margin-right:10px;
 float:left; /*pour IE*/
 }
ul li a {
 display:block;
 float:left;   
 width:100px;
 text-decoration:none;
 text-align:center;
 padding:5px;
 border:2px solid;
 }

/* pour ie

menu {		
 position : absolute;		
}
*/

/*-------------------*/
/*     Divers     */
/*-------------------*/ 
  
object.c3 {width: 650px; height: 400px; margin-top: 0px; margin-bottom: 0px; margin-left: -10px;}

/*]]>*/
</style>
</head>
<body>
	<!-------------------->
	<!-- Boite Numéro 1 -->
	<!-------------------->

	<div id="boite1" class="commun">
		<div class="cont">
			<div class="plop1">
					<header>
						<h2>Bienvenue</h2>
					</header>
					<p>
						chez<strong> Les Ramollis de la Molette</strong>, une communauté PC fun de détente pour les jeux Battlefield.
                          </p><p><a href="http://www.gametracker.com/server_info/109.239.151.186:25200/" target="_blank"><img src="http://cache.www.gametracker.com/server_info/109.239.151.186:25200/b_560_95_1.png" border="0" width="560" height="95" alt="" /></a></p>
				</div>
		</div>
	</div>

	<!-------------------->
	<!-- Boite Numéro 2 -->
	<!-------------------->

	<div id="boite2" class="commun">
		<div class="cont">
			<h1>Boite 2</h1>
			<p><a href="http://www.lesramollisdelamolette.org/">http://www.lesramollisdelamolette.org/</a></p>
		</div>
	</div>

	<!-------------------->
	<!-- Boite Numéro 3 -->
	<!-------------------->

	<div id="boite3" class="commun">
		<div class="cont">
<object type="application/x-shockwave-flash" id="live_embed_player_flash" data="http://www.twitch.tv/widgets/live_embed_player.swf?channel=ramollistv" class="c3"><param value="true" id="allowFullScreen" />
<param name="allowNetworking" value="all" />
<param name="movie" value="http://www.twitch.tv/widgets/live_embed_player.swf" />
<param name="flashvars" value="hostname=www.twitch.tv&channel=ramollistv&auto_play=true&start_volume=25" />
<param name="allowfullscreen" value="true" /></object><iframe frameborder="0" scrolling="no" src="http://twitch.tv/ramollistv/chat?popout=" height="400" width="240"></iframe>
		</div>
	</div>

	<!-------------------->
	<!-- Boite Numéro 4 -->
	<!-------------------->

	<div id="boite4" class="commun">
		<div class="cont">
		</div>
	</div>

	<!-------------------->
	<!-- Boite Numéro 5 -->
	<!-------------------->

	<div id="boite5" class="commun">
		<div class="cont">
			<h1>Boite 5</h1>
			<p>bla bla bla bla bla</p>
		</div>
	</div>

	<!------------------>
	<!-- Menu Général -->
	<!------------------>

	<ul id="menu">
          <li onclick="boite.deplace(1);" style="cursor:pointer;">Accueil</li>
	  <li onclick="boite.deplace(2);" style="cursor:pointer;">Forum</li>
	  <li onclick="boite.deplace(3);" style="cursor:pointer;">Twitch</li>
	  <li onclick="boite.deplace(4);" style="cursor:pointer;">Youtube</li>
	  <li onclick="boite.deplace(5);" style="cursor:pointer;">Infos Serveurs</li>
	</ul>
</body>
</html>

jlon

19 Aug 2014 à 09:51

Bonjour,

Les deux liens de ton post sont cassés...

Sujet clos

Questions générales et questions de débutants

Imbriquement sur une "Page Glissante"