JeuWeb Créez votre jeu par navigateur !

phenix · (Modification du message : 04-05-2009, 02:48 PM par phenix.)

Bonjour à tous,

Voila, je suis occuper a refaire l'interface de la vallée des larmes. Pour ce faire j'ai décider d'utiliser un maximum d'Ajax.

Avec jQuery, faire de l'Ajax est vraiment simple, et vu que j'aime pas me casser la tête :p.

Seulement voila, les pages que je charge sont de taille variable, et le design lui est trop fixe. Il faudrait que certaine Div s'adapte au contenu.

J'ai essayer d'utiliser les propriété .height() mais sa ne fonctionne pas.

Voila le bout de code:



/* Sytème Ajax */

		$("a.Ajax").livequery('click',



		function() 



			{

				$("div.table_center").load(this.href);

				

				size();

				

				return false;



			}



		);

Rien de bien compliqué quoi.

Voici la fonction size() qui est devrait mêttre à jour la taille des div du désign:



(function($) {

	size = function() 

		{	

			/* Modicateurs des hauteurs des Div principal*/

			

			/* Récupération des hauteur des div */

			height_gauche = $("div.table_gauche").height();



			height_center = $("div.table_center").height();



			height_droite = $("div.table_droite").height();

			

			/* On cherche la plus grande */



			if (height_gauche > height_droite) height = height_gauche;



			else height = height_droite;





			if (height < height_center) height = height_center;



			

			/*On applique la plus grande hauteur a toutes les div désign */



			$("div.Xgauche").height(height);



			$("div.table_gauche").height(height);



			$("div.gauche").height(height);



		



			$("div.table_center").height(height);



		



			$("div.Xdroite").height(height);



			$("div.table_droite").height(height);



			$("div.droite").height(height);

			



			/* Fin des Modicateurs des hauteurs des Div principal*/

		}

})(jQuery);

Voila, merci d'avance de votre aide.

madri2 · 04-05-2009, 02:54 PM

dans height tu met rien comme ça le div s'adapte au contenu

phenix · 04-05-2009, 03:47 PM

Non, car il faut que toutes les Div ai la taille de la plus grande des div. C'est pour sa que je passe par du javascript, sinon, je mettrais simple un css...

wild-D · (Modification du message : 04-05-2009, 05:15 PM par wild-D.)

(04-05-2009, 03:47 PM)phenix a écrit : Non, car il faut que toutes les Div ai la taille de la plus grande des div. C'est pour sa que je passe par du javascript, sinon, je mettrais simple un css...

ça me rappelle vaguement des souvenirs^^
il me semble que y avait des astuces justement pour s'éviter le passage par javascript. (ça nécessitait soit une bonne maitrise des clear, soit de multiplier les divs; mais ça marchait... enfin tout dépend aussi de la structure de tes pages et de ce que tu veux faire; mais le coup classique c'était d'avoir 2 ou 3 colonnes et de vouloir quelles soient toute avec de même hauteur quelque soit le contenu de chacune; pas besoin de javascript pour ça ; y avait aussi avec le background; ou si t'as un contenu avec un hauteur fixe; le height:100%)

phenix · 04-05-2009, 05:17 PM

Citation :il me semble que y avait des astuces justement pour s'éviter le passage par javascript. (ça nécessitait soit une bonne maitrise des clear, soit de multiplier les divs; mais ça marchait... enfin tout dépend aussi de la structure de tes pages et de ce que tu veux faire; mais le coup classique c'était d'avoir 2 ou 3 colonnes et de vouloir quelles soient toute avec de même hauteur quelque soit le contenu de chacune; pas besoin de javascript pour ça )

Oui, mais ce genre d'astuce fait le même bug avec l'Ajax. De plus elles sont généralement pas très propre a mettre en place. (Empiler des Div les une sur les autres ne ma jamais sembler propre.)

En tout cas j'ai jamais trouvé la bonne solution, c'est pour sa que je me suis tourné vers le javascript. Sa bousillais pas ma mise en page, sa tient en quelques ligne et sa fonctionne tout le temps. Sauf avec l'Ajax...

Bref, je suis toujours au même point, maintenant si tu as une méthode en CSS, je veux bien aussi.

Allwise · 04-05-2009, 06:10 PM

Normalement, la taille d'un calque s'adapte à son contenu, que ce soit au chargement de la page ou après une requête Ajax qui en modifie le contenu.
D'après le nom de tes divs, tu aurais une structure du type : Un div conteneur, avec, à l'intérieur, d'autres divs.

Pour que ça marche, il faut 1° que tu gères le positionnement des divs à contenu changeant avec les flottants ( par opposition au positionnement absolu ), et 2° que tu n'oublies pas d'utiliser la propriété css clear dans un autre div pour "rétablir le positionnement du flux" ( c'est pas très clair mais tu trouveras des infos dessus sur Google ), et 3° que tu ne spécifies pas de hauteur au div conteneur.

Et rien n'est crade dans tout ça.

Un petit schéma comme je les aime Smile

:

phenix · 04-05-2009, 10:27 PM

Citation :Pour que ça marche, il faut 1° que tu gères le positionnement des divs à contenu changeant avec les flottants ( par opposition au positionnement absolu ), et 2° que tu n'oublies pas d'utiliser la propriété css clear dans un autre div pour "rétablir le positionnement du flux" ( c'est pas très clair mais tu trouveras des infos dessus sur Google ), et 3° que tu ne spécifies pas de hauteur au div conteneur.

Non, sa ne fonctionne pas...

Voici ce qui concerne mon affichage:

une page:

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//FR" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

    <title>..::La Vallée des larmes::..</title>

    <meta name="description" content="La Vallée des Larmes, MMORPG gratuit ::Version LOKI:: Jeu par navigateur" />

    <meta name="keywords" content="Vallée, vallee, larmes, irae, mmorpg, MMORPG, navigateur, MMWBRPG, mmwbrpg, jeu, role, rôle, jeu de role, jeu de rôle, online, Larmes, larme, Irae, gratuit, jeu gratuit, JdR, pbem, jpem, monstre, trésor, sortilège, sort, armure, arme, aventure, simulation, asynchrone" />

    <meta name="robots" content="index" />

    <meta name="REVISIT-AFTER" content="7 days" />

    <meta name="author" content="Phenix" />

    <meta name="Copyright" content="Phenix" />

    <meta name="Publisher" content="Phenix" />

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" />

    <meta http-equiv="Content-Language" content="fr" />

    <link href="design/vallee.css" rel="stylesheet" type="text/css" />

<!-- jQuery -->

<script type="text/javascript" src="design/javascript/jquery.js"></script>

<!-- Live Query -->

<script type="text/javascript" src="design/javascript/jquery.livequery.js"></script>

<!-- jQuery Alert -->

<script type="text/javascript" src="design/javascript/jquery.alerts.js"></script>

<!-- ValmeQuery -->

<script type="text/javascript" src="design/javascript/valmequery.js"></script>

<!-- valmetips -->

<script type="text/javascript" src="design/javascript/jquery.valmetips.js"></script>

<!-- Overlib à la sauce valme -->

<script type="text/javascript" src="design/javascript/overvalme.js"></script>

</head>

<body>

<!-- Si le javascript n'est pas activé, on demande de l'activer -->

<noscript>Il est impossible de visualiser ce site sans le javascript.</noscript>

<!-- Div de l'infobulle -->

<div id="tips"></div>  

<div class="main_table">

<!-- Header -->

<div class="headerXgauche"></div>

<div class="rose">

    <!-- Lien de la rose -->

    <div class="acceuil">

        <a href="index.php">

            <img src="design/image/acceuil.jpg" alt="acceuil" class="HoverFade" />

        </a>

    </div>

    <div class="forum">

        <a href="#">

            <img src="design/image/forum.jpg" alt="forum" class="HoverFade" />

        </a>

    </div>

    <div class="tutoriel">

        <a href="tutoriel.php" class="Ajax">

            <img src="design/image/tutoriel.jpg" alt="tutoriel" class="HoverFade" />

        </a>

    </div>

    <div class="background">

        <a href="backg.php" class="Ajax">

            <img src="design/image/background.jpg" alt="background" class="HoverFade" />

        </a>

    </div>

    <!-- Fin des liens de la rose -->

</div>

<div class="ange">

    <img src="design/image/ange.jpg" alt="La vallée des Larmes" class="HoverFade" />

</div>

<div class="tombe">

    <!-- Lien de la tombe -->

    <div class="lacharte">

        <a href="charte.php" class="Ajax">

            <img src="design/image/lacharte.jpg" alt="la charte" class="HoverFade" />

        </a>

    </div>

    <div class="classement">

        <a href="classement.php" class="Ajax">

            <img src="design/image/classement.jpg" alt="classement" class="HoverFade" />

        </a>

    </div>

    <div class="screenshot">

        <a href="screenshot.php" class="Ajax">

            <img src="<?php echo $modif_path; ?>design/image/screenshot.jpg" alt="screenshot" class="HoverFade" />

        </a>

    </div>

    <!-- Fin des liens de la tombe -->

</div>

<div class="headerXdroite"></div>

<!-- Fin Header -->

<!-- Tableau de gauche -->

<div class="Xgauche"></div>

<div class="table_gauche">

</div>

<div class="gauche"></div>

<!-- Fin tableau de gauche -->

    <div class="table_center">

<!-- contenu -->

        </div>

<!-- fin tableau du centre -->

<!-- tableau de droite -->

<div class="Xdroite"></div>

<div class="table_droite">

</div>

<div class="droite"></div>

<!-- Fin tableau de droite -->

<!-- Footer -->

<div class="footer"></div>

</div>

</body>

</html>

La css qui devrait marcher mais qui marche pas...



/*Contruction du tableau de base et ajustement des DIV */

.main_table

	{

		width: 959px;

		height: auto;

		margin: 0 auto;

	}



/* Début du Header */

.headerXgauche

	{

		width: 18px;

		height: 227px;

		float: left;

		background: #363b33 url(image/headerXgauche.jpg) no-repeat;

	}

.rose

	{

		width: 271px;

		height: 85px;

		float: left;

		background: #363b33 url(image/rose.jpg) no-repeat;

		padding-top: 142px;



		padding-left: 90px;

	}

.ange

	{

		width: 201px;

		height: 227px;

		float: left;

		background: #363b33 url(image/angeHover.jpg) no-repeat;

	}

.tombe

	{

		width: 327px;

		height: 85px;

		float: left;

		background: #363b33 url(image/tombe.jpg) no-repeat;

		padding-top: 142px;

		padding-left: 34px;

	}

.headerXdroite

	{

		width: 18px;

		height: 227px;

		float: left;

		background: #363b33 url(image/headerXdroite.jpg) no-repeat;

	}

/* Fin du Header */



/* Tableau de gauche */

.Xgauche

	{

		width: 18px;

		background: #363b33 url(image/Xgauche.jpg) repeat-y;

		float: left;

		height: 100%;

		clear: left;

	}

.table_gauche

	{

		width: 125px;

		min-height: 614px;

		background: #131313;

		float: left;

		padding-left: 5px;

		padding-right: 5px;

		margin: 0 auto;

		text-align: center;

		clear: left;

	}



.gauche

	{

		width: 18px;

		background: #363b33 url(image/gauche.jpg) repeat-y;

		float: left;

		height: 100%;

		clear: left;

	}

/* Fin tableau de gauche */	



/* Tableau du centre */



.table_center

	{

		width: 582px;

		min-height: 614px;

		background: #131313;

		float: left;

		clear: left;

	}

/* Fin tableau du centre */



/* Tableau de droite*/

.Xdroite

	{

		width: 18px;

		background: #363b33 url(image/Xdroite.jpg) repeat-y;

		float: left;

		height: 100%;

		clear: left;

	}

.table_droite

	{

		width: 160px;

		height: 100%;

		background: #131313;

		float: left;

		padding-left: 5px;

		padding-right: 5px;

		clear: left;

	}

.droite

	{

		width: 18px;

		background: #363b33 url(image/droite.jpg) repeat-y;

		float: left;

		height: 100%;

		clear: left;

	}

/* Fin tableau de droite*/



/* Footer */

.footer

	{

		width: 959px;

		height: 39px;

		background: #363b33 url(image/footer.jpg) no-repeat;

		float: left;

		clear: both;

	}

/* Fin footer */

Voila, moi je comprend plus rien à cette histoire de clear et de float... J'ai un affichage qui fonctionne pas du tout...

jo_link_noir · 04-05-2009, 10:30 PM



$.ajax({

	url : this.href,

	dataType : "html",

	beforeSend : function(){

		$("div.table_center").append("<p>Chargement...</p>");

	},

	success : function(reponse){

		$("div.table_center").html(reponse);

		size();

	},

	error : function(){

		$("div.table_center").text("<p>Erreur.</p>");

	}

});

au lieu du $("div.table_center").load(this.href); ?

En fait c'est quoi livequery ? un truc genre live de jQuery ?

phenix · 04-05-2009, 10:49 PM

j-12, ta solution ne marche pas Sad

Citation :En fait c'est quoi livequery ? un truc genre live de jQuery ?

Un truc qui me permet d'exécuter de l'Ajax dans une page déjà appler avec Ajax, le tout dans la même div.

C'est un plugin. je sais juste ce que sa permet de faire sa, j'ai jamais pousser plus loin.

Thedeejay · 04-05-2009, 10:51 PM

tu ne peut pas mettre simplement 100%?
ou alors met une marge de 1px en bas, et une valeur au pif pour la div, elle s'adaptera non?

Sujets apparemment similaires…
Sujet		Auteur	Réponses	Affichages	Dernier message
	Adapter un jeu html au format android ?	starmindfr	6	4 668	13-09-2013, 09:05 PM Dernier message: starmindfr
	[Résolu] jQuery et l'ajout de contenu dans une formulaire	supermeganono	11	5 539	06-04-2012, 02:28 PM Dernier message: Maks
	Simuler min-height sans hack CSS ni Javascript	php_addict	12	5 129	22-02-2011, 10:48 PM Dernier message: php_addict
	[Résolu][JavaScript & jquery] Affichage contenu DIV	tog84	4	3 234	07-08-2008, 06:00 PM Dernier message: tog84