11552 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Alors je suis entrain de réaliser mon premier programme Jquerry. Donc voila c'est un programme qui affiche des balises <LI>, sous forme de tableaux ou sous forme de ligne.

Voici le programme action

De plus j'ai ajouté une forme de trie par type, donc quand on clique sur par exemple livre, les balises avec L'id livre disparaissent . Mais le problème c'est que de faire disparaitre des éléments me fait des vides dans mon tableaux. Et je vois pas trop comment résoudre ça.

Existe t'il une fonction ou un programme du genre, que tant que me balise peux monter, elle monte pour remplacer les vides ?
Bon, je crois avoir trouvé la solution.

Mais je cherche une solution pour récupérer la largeur qu'il y a entre l'image et le bord. Pour jouer entre float left et right par rapport à la position de l'image.
Bonjour Salva91,

j'ai refait tout ton programme en javascript, sans les animations. Ce fut un bon exercice.
Le script est beaucoup plus court que le tiens.
J'ai un léger problème avec offsetWidth et offsetHeight sous IE, car je ne me souviens plus de son équivalent.

J'ai faut d'abord un maximum en HTML et en CSS avant de le compléter en javascript.
Voici le code HTML :
<!doctype html>
<html>
<head>
<!-- ==== -->
<!-- Meta -->
<!-- ==== -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title></title>

<!-- ========== -->
<!-- JavaScript -->
<!-- ========== -->

<script type="text/javascript">
function execute(addr, choix)
{
	var node = document.getElementById("liste");

	/*---------------------------------------*/
	/*     Sélection du mode d'affichage     */
	/*---------------------------------------*/

	if (addr.parentNode.id == "menu1")
	{
		document.getElementById("detail").style.display = "none";
		node.style.display = "block";

		switch (choix)
		{
			case "t":	node.className = "tableau";
						break;
			case "l":	node.className = "ligne";
						break;
		}
	}

	/*------------------------------*/
	/*     Affichage des Images     */
	/*------------------------------*/

	if (addr.parentNode.id == "menu2")
	{
		if (addr.style.color == "red")	addr.style.color = "black";
		else							addr.style.color = "red";

		var list = node.getElementsByTagName("li");

		for (var i=0; i<list.length; i++)
		{
			if (list[i].className == choix)
			{
				if (list[i].style.display == "none")
						list[i].style.display = "block";
				else	list[i].style.display = "none";
			}
		}
	}
}

function traite(addr)
{
	document.getElementById("liste").style.display = "none";

	var node = document.getElementById("detail");
	node.style.display = "block";
	node.getElementsByTagName("p")[0].innerHTML = addr.parentNode.getElementsByTagName("p")[0].innerHTML;
	node.getElementsByTagName("img")[0].setAttribute("src", addr.src);

	if (document.all)
	{
		node.style.top  = Math.round((document.documentElement.height - node.offsetHeight) / 2) + "px";
		node.style.left = Math.round((document.documentElement.width  - node.offsetWidth)  / 2) + "px";
	}
	else
	{
		node.style.top  = Math.round((window.innerHeight - node.offsetHeight) / 2) + "px";
		node.style.left = Math.round((window.innerWidth  - node.offsetWidth)  / 2) + "px";
	}
}
</script>

<!-- ====================== -->
<!-- Cascading Style Sheets -->
<!-- ====================== -->

<style type="text/css">
body {
			background-color	: maroon;
}

/*==============*/
/*     Menu     */
/*==============*/

.menu {
			position			: fixed;
			list-style			: none;
			z-index				: 2;
			right				: 0;

			font-size			: 30px;
			background-color	: #DDD;

			margin				: 10px;
			padding				: 10px;
			border				: 0 none;
			width				: 160px;
			text-align			: left;
}

ul#menu1 {	top					: 0;		}
ul#menu2 {	top					: 150px;	}

/*==================================*/
/*     Commun à Tableau & Ligne     */
/*==================================*/

ul#liste {
			display				: block;
			list-style			: none;
			margin				: 0 50px;
			padding				: 0;
}

ul#liste li {
			float				: left;
			background-color	: #DEE;
}

/*=================*/
/*     Tableau     */
/*=================*/

ul.tableau li {
			opacity				: 0.5;
			filter				: opacity(50);
}

ul.tableau p {
			display				: none;
}

ul.tableau img {
			margin				: 10px;
			width				: 155px;
			height				: 155px;
}

/*===============*/
/*     Ligne     */
/*===============*/

ul.ligne li {
			width				: 400px;
			margin				: 5px;
}

ul.ligne p {
			padding				: 5px;
}

ul.ligne img {
			float				: left;
			margin				: 10px;
			width				: 180px;
			height				: 180px;
}

/*================*/
/*     Détail     */
/*================*/

#detail {
			display				: none;
			position			: absolute;
			background-color	: #DEE;
			width				: 500px;
}

#detail p {
			padding				: 5px;
}

#detail img {
			float				: left;
			margin				: 10px;
}

/*================*/
/*     Divers     */
/*================*/

.a1 {		display				: block;	}
.a2 {		display				: block;	}
.a3 {		display				: block;	}
.a4 {		display				: block;	}
</style>
</head>

<body>

<!-- ===== -->
<!-- Liste -->
<!-- ===== -->

	<ul id="liste" class="tableau">
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a4">
			<img src="Images/d.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a1">
			<img src="Images/a.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a2">
			<img src="Images/b.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
		<li class="a3">
			<img src="Images/c.png" onclick="javascript:traite(this);" />
			<p>Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina</p>
		</li>
	</ul>

<!-- ====== -->
<!-- Détail -->
<!-- ====== -->

	<div id="detail">
		<img src="" />
		<p></p>
	</div>

<!-- ==== -->
<!-- Menu -->
<!-- ==== -->

	<ul id="menu1" class="menu">
		<li onclick="javascript:execute(this, 't');">Tableau</li>
		<li onclick="javascript:execute(this, 'l');">Ligne</li>
	</ul>

	<ul id="menu2" class="menu">
		<li onclick="javascript:execute(this, 'a1');">Livre</li>
		<li onclick="javascript:execute(this, 'a2');">Voiture</li>
		<li onclick="javascript:execute(this, 'a3');">Technologie</li>
		<li onclick="javascript:execute(this, 'a4');">Photographie</li>
	</ul>
</body>
</html>


@+[/i][/i][/i][/i]
Ba c'est plutôt intéressant, mais comme ta pu voir c'est mes premiers pas en Js et je me suis orienté Js + la bibliothèque Jquerry

Après je suis impressionné par ton code, il est vraiment beau et propre, je devrais prendre exemple Smiley smile

sinon j'ai reussi à résoudre mon problème avec un programme qui inverse les balises. Ce qui permet de boucher les trous lors de l'animation.

si tu veux voir ce que ça donne ici

Mais le code est vraiment brouillon, va falloir que je nettoie tout ça
Bonjour salva91,

merci de m'avoir mis le lien. Oui, c'est nettement mieux !
Je ne connais pas le jquery. Je devrais l'apprendre. Mais comme j'arrive à maitriser le javascript, je me contente de lui. Reste que je ne maitrise pas tout du langage. J'ai encore des problèmes avec les particularités des navigateurs.

Lorsque je développe, j'ai pris l'habitude de commencer par le HTML, uniquement par lui. Ensuite j'externalise (bon c'est pas le cas ici) les CSS, en faisant en sorte de ne pas intervenir dans le HTML. Parfois, c'est juste choisir des identifiants ou des classes afin d'arriver à mes fins. Puis pour terminer, j'externalise le javascript (comme le CSS) et je minimise les modification aussi bien dans le HTML et le CSS.

Comme tu l'as remarqué, je fais un effort de présentation afin de faciliter la maintenance. C'est un truc de fainéant : en faire le plus au début pour en faire le moins par la suite, ce qui fait que j'optimise mon temps de travail.

Et puis prendre des bonnes habitudes dès le départ te fait gagner du temps par la suite.

Ah oui, j'oubliais. Je suis un amateur et non un professionnel du web.

Si tu as besoin de conseils, n"hésite pas à poser des questions sur cet excellent forum.

@+
Ba avec Jquery tu fait les même choses que le javascript mais en bcp plus rapide.
Au lieux d'écrire
Var a = document.getElementById('b').
Tu vas écrire
var a = $('#b').

Enfin dans l'ensemble tu gagneras beaucoup de temps quand tu écriras ton code vu qu'il y a beaucoup moins à écrire. Et c'est facile à apprendre. J'avais pratiquement aucune base en JS et j'ai pondu ce programme en 4 jours
Bonsoir salva91,

ne me dit pas que tu n'as jamais ouvert un livre de programmation et qu'en quatre jours tu as pu pondre cela ? Smiley eek

Pour le concis, je reconnais que tu peux faire plus court que le javascript.
Mais le gros inconvénient est bien la bibliothèque Jquery (le framework) que tu es obligé de te coltiner, même si tu ne fais qu'une toute petite fonction de dix lignes. Tu n'as pas cet inconvénient avec la javascript qui est natif sur tout les navigateurs.

Je prends l'exemple de la dernière version (jQuery 1.7.2 Released) datant de mars 2012.
La version non compressé à une taille de 246Ko et la version compressé est de 92.63Ko (je viens de le vérifier en le téléchargeant sur mon ordinateur).

Ce n'est pas rien en volumétrie, sachant qu'une page HTML, donc juste le code, tourne autour des 10Ko. Et a cela, il faut ajouter les images, le son, le CSS et les Script Jquery. Il y a des sites qui sont très volumineux. Et je ne te parles même pas du temps de chargement. Tout le monde n'a pas un ordinateur de dernière génération, c'est à dire un turbo ! Il y a encore beaucoup de gens qui ont une trottinette.

Personnellement, je préfère optimiser la volumétrie et pour cela, une seule façon de faire : compresser !

Pour gagner du temps, il faut parfaitement connaitre le langage. Je ne sais pas combien de temps tu as mis pour pondre ton code, j'ai mis environ deux heures !

@+
Ba j'étais pas un AS en programmation. Je bidouiller vite fait des sliders Jquery déjà fait. Et en javascript j'en était aux tableaux. Voila c'était mon niveaux de programmation.

Par contre j'ai surement quelque chose qui peut t'intéresser ici. C'est le framework Jquery avec pratiquement toutes les fontions et allégé à 90%.

Et pour faire ce code je pense plus de vingt heures. Vu que j'étais en apprentissage en même temps.

Oui quand je les finit, je peux te dire que j'étais content.

Et la j'attaque un nouveaux programme. Une balle qui rebondit dans une DIV. Je me renseigne à droite à gauche pour trouver comment faire ça
Bonjour salva91,

voici un exemple d'animation d'un globe dans la page HTML.
J'espère que cela répond à ta question.
<!doctype html>
<html lang='fr'>
<head>
<!-- ---- -->
<!-- Meta -->
<!-- ---- -->

<meta http-equiv="Content-Type"        content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type"  content="text/css" />

<title>Déplacement d'une image</title>

<!-- ---------- -->
<!-- JavaScript -->
<!-- ---------- -->

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

<!-- ---------------------- -->
<!-- Cascading Style Sheets -->
<!-- ---------------------- -->

<link rel="stylesheet" type="text/css" href="Styles.css" />
</head>

<body>
<div>Cliquez sur le globe pour l'animer !</div>
<div id="globe" onclick="javascript:deplace.init();">
	<img src="Images/world.jpg" />
</div>
</body>
</html>


window.onresize = function ()
{
	if (deplace.start == 1)
		deplace.init ();
};

/***********************************/
/*                                 */
/*     Déplacement d'une image     */
/*                                 */
/***********************************/

deplace = {

width:  0,
height: 0,

speedX: 5,
speedY: 5,

posX:   300,
posY:   10,

start:  0,
objet:  null,

init: function ()
{
	/*=========================================*/
	/*     Dimension de la page intérieure     */
	/*=========================================*/

	if (document.all)
	{
		this.width  = document.documentElement.clientWidth;
		this.height = document.documentElement.clientHeight;
	}
	else
	{
		this.width  = window.innerWidth;
		this.height = window.innerHeight;
	}

	this.width  -= 100;
	this.height -= 105;

	/*==================================*/
	/*     Lancement du Déplacement     */
	/*==================================*/

	if (this.start == 0)
	{
		this.start = 1;
		this.move ();
	}
},

move: function ()
{
	this.objet = document.getElementById("globe");

	/*=================================*/
	/*     Déplacement horizontale     */
	/*=================================*/

	this.posX += this.speedX;

	if (this.posX < 0)
	{
		this.speedX = +5;
		this.posX   =  0;
	}

	if (this.posX > this.width)
	{
		this.speedX = -5;
		this.posX   = this.width;
	}		

	/*===============================*/
	/*     Déplacement verticale     */
	/*===============================*/

	this.posY += this.speedY;

	if (this.posY < 0)
	{
		this.speedY = +5;
		this.posY   =  0;
	}

	if (this.posY > this.height)
	{
		this.speedY = -5;
		this.posY   = this.height;
	}		

	/*=================================*/
	/*     Modification des styles     */
	/*=================================*/

	var chaine = "top:" + this.posY + "px; left:" + this.posX + "px;";

	if (document.all)
			this.objet.style.setAttribute("cssText", chaine);
	else	this.objet.setAttribute("style", chaine);

	/*==================================*/
	/*     Déclenchement du Timeout     */
	/*==================================*/

	window.setTimeout("deplace.move();", 20);
}

};


@+
Artemus24 a écrit :


Je prends l'exemple de la dernière version (jQuery 1.7.2 Released) datant de mars 2012.
La version non compressé à une taille de 246Ko et la version compressé est de 92.63Ko (je viens de le vérifier en le téléchargeant sur mon ordinateur).


Pour être plus clair c'est 246 Ko la version de développement pour les plugineurs (donc celle qu'on n'utilise pas en production), 92,63 Ko c'est la version sans la compression gzip côté serveur, avec on tombe à environ 30 Ko. Smiley cligne
Bonjour Patidou,

c'est à dire que la version épurée n'est pas une version compressée ? Est-ce bien cela ?

Je veux dire par là, que la version épurée ne contient plus les commentaires ni les tabulations ni les CR & LF ! Et je crois qu'une version compressée n'est pas exploitable directement sur le site du client.

La version compressée n'est utile que pour le transfert du serveur vers le client.
Ensuite il faut la décompresser pour quelle soit exploitable. Au final, tu as bien 92.63 ko !
Est-ce que je me trompe ?

@+
Modifié par Artemus24 (09 May 2012 - 18:53)
Artemus24 a écrit :
Au final, tu as bien 92.63 ko !


C'est vrai que 92ko sur un disque dur moderne c'est vraiment énorme... Smiley sweatdrop

La version compressée avec gzip transférée du serveur au client c'est bien 30 ko et pas 92 ko. Soit même pas le poids d'une petite photo (a peu prés équivalent à une bannière standard de pub de 728x90 en jpg).

Soit 0.02 secondes de transfert sur ma connexion ADSL toute pourrie ou 0.3 secondes sur un Wifi public moyen ou 1 seconde sur les connexions les plus lentes en France (ce qui représente environ 2.4% de la population). Smiley lol

En plus (je te l'ai déjà dit sur un autre topic) tu peux utiliser les CDN de Google et tu as pas mal de chance pour que tes visiteurs n'ai même pas besoin de charger le fichier car il sera déjà présent dans le cache de leur navigateur.
Modifié par jb_gfx (09 May 2012 - 19:08)
Alors merci Artemus pour l'exemple de script de balle qui rebondit, je vais m'en aspirer. Même si j'ai un peu de mal à tout comprendre pour l'instant. Mais je pense qu'il me seras utile par la suite.

Je vais m'orienté vers une solution Javascript, avec des balises canvas HTML 5.

Sinon si ça t'intéresse je pense que j'ai pratiquement finit la version stable de mon premier script.

Tu va voir un ptit air de ressemmblence dans le script Smiley smile

Et sinon il est en ligne toujours à cette adresse ici
Le javascript + Le Html



<html>
  <head>
    <script src="js/js.js"></script>
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
  </head>
  <body>

    

    <div class="conteneur">

         <img src="images/titre.png" alt="header" class="entete"/>
         <div class="menu">

            <ul>

              <li id="ligne"><img src="images/lignedeclen.png" alt="ligne" id="imageligne" class=""/></li>
              <li id="tableau"><img src="images/tableauenclen.png" alt="tableau" id="imagetableau" class=""/></li>
              <li class="trie" id="listeur"><div class="clear"/><p>Trier par</p><img src="images/trietriange.png" alt=""><div class="clear"/>

                      <ul class="liste" >

                          <li id="voiturebouton">Voiture</li>
                          <li id="livrebouton">Livre</li>
                          <li id="technologiebouton">Technologie</li>
                          <li id="photographiebouton">photographie</li>

                      </ul>
              </li>

            </ul>

         </div>

         <ul class="conteneu" id="un">

            <li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
            <li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
            <li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
            <li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
            <li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
            <li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
            <li value="0" id="voiture"><div ><img src="b.png"><p> </p></div></li>
            <li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>

         </ul>

         <ul class="conteneu" id="deux">

            <li value="0" id="tech"><div ><img src="c.png"><p> </p></div></li>
            <li value="0" id="livre"><div ><img src="a.png"><p> </p></div></li>
            <li value="0" id="photo"><div ><img src="d.png"><p> </p></div></li>
            <li value="0"  id="voiture"><div ><img src="b.png"><p> </p></div></li>
            <li value="0"  id="tech"><div ><img src="c.png"><p> </p></div></li>
            <li value="0"  id="voiture"><div ><img src="b.png"><p> </p></div></li>
            <li value="0"  id="livre"><div ><img src="a.png"><p> </p></div></li>
            <li value="0"  id="photo"><div ><img src="d.png"><p> </p></div></li>

         </ul>
              
      </ul>

    </div>

              
<script type="text/javascript">

                              /*================================================*/

                              /*        DEBUT DU SCRIPT   - Les Fonctions       */

                              /*================================================*/ 
             
       
                              /*================================================*/

                              /*     Dans tableaux effet d'agrandissement       */

                              /*================================================*/ 


  (function($)
   {
   $.fn.voir=function()                       
   {
              $(this).stop();
       
     
              $(this).animate({
                width : '310px'
                ,height:'310px',
                opacity:'1'
              
                }
                ,{
                  duration : 1000
                , easing   : 'swing'
                , queue    : true   
                 }
                ).queue(function()
                {
                 
                 
                 $(this).dequeue();
                }
                );
   };
    
  })(jQuery);

                               /*===============================================*/

                              /*     Dans tableaux effet de retrécissement      */

                              /*================================================*/ 
                                  

   (function($)
    {
    $.fn.cache=function()                 
    {
       
                $('.conteneu>li').animate({
                  width : '150px'
                  ,height:'150px'
                 
                  }
                  ,{
                    duration : 1000
                  , easing   : 'swing'
                  , queue    : true


                   }
                  ).queue(function()
                  {
       
                  
                   $(this).dequeue();
                  }
                  );
    };
    })(jQuery);

                              /*================================================*/

                              /*     Transforme Ligne en Tableaux               */  

                              /*================================================*/  

      (function($)
    {
    $.fn.translignetab=function()       
    {
              $('.conteneu>li').css('margin-left', '0');
               $('.conteneu>li>p').hide(1000);
              $('.conteneu>li').animate({
                width: '150px',
                padding: '-20px'
                }, 2000)
              .queue(function (){
               $('.conteneu>li').animate({
                 height: '150px',
                 opacity:0.5,
                 }, 2000);
               $(this).fadeIn(1000, function(){
                 $('.conteneu').addClass('ultableau');
               $('.conteneu>li').addClass('tableauli');
               $('.conteneu>li').removeClass('ligneli');
              
              
               $('li').stop(true, true);
               });
               
               $(this).dequeue();
              });
    };
    })(jQuery);
                              /*================================================*/

                              /*        Tranforme Tableau en Ligne              */

                              /*================================================*/  
         (function($)
    {
    $.fn.transtabligne=function()                       
    {
           
              $('ul').removeClass('ultableau');
              $('.conteneu>li').animate(
                {width: "750px", 
                height: "310px",
                opacity:1,
                }
                , 2000).queue(
                function () {
                $('.conteneu>li').removeClass('tableauli')
                $('.conteneu>li').addClass('ligneli');
                $('.conteneu>li').css('padding', '20px');
                $('.conteneu>li').css('margin-left', '-100px');
                $('p').show('p');
                b='ligne';
                 $('.conteneu>li').stop(true, true);
              })
    };
    })(jQuery);

    $.fn.tagName = function() {
   return this.get(0).tagName.toLowerCase();
}
                                  /*==================================*/

                                  /*              Script              */

                                  /*==================================*/  




var colorphoto = 0 ;
var colorlivre = 0 ;
var colortech = 0 ;
var colorvoiture = 0 ;
var b = 'tableau';

$('.conteneu>li').addClass('tableauli');
$('ul.conteneu').addClass('ultableau');


                         /*====================================================*/

                          /*     Transforme le mode Tableaux en mode Ligne     */

                          /*===================================================*/  
                          



$('#ligne').click(function() {  
  if (b=='tableau') 
    {

    $(this).transtabligne();
    $('#imageligne').attr('src', 'images/ligneenclen.png');
    $('#imagetableau').attr('src', 'images/tableaudeclen.png');

    };
b='ligne';
});
                          /*====================================================*/

                          /*     Transforme le mode Ligne en mode Tableaux     */

                          /*===================================================*/  


$('#tableau').click(function() {   
  if (b=='ligne') 
    {

    $(this).translignetab();
    $('#imageligne').attr('src', 'images/lignedeclen.png');
    $('#imagetableau').attr('src', 'images/tableauenclen.png');
    };

b='tableau';
});

                          /*====================================================*/

                          /*           Trie les données                         */

                          /*===================================================*/  

$('#livrebouton').click(function() 
  {

    $('li#livre').toggle('slow');

    if (colorlivre == 0) {
      $('#livrebouton').css('color', '#3d6f93');
      colorlivre = 1 ;
    }
    else  {
      $('#livrebouton').css('color', '#7a7979');
      colorlivre = 0 ;
    };
  });

 $('#voiturebouton').click(function() 
 {

  $('li#voiture').toggle('slow');

    if (colorvoiture == 0) {
      $('#voiturebouton').css('color', '#3d6f93');
      colorvoiture = 1 ;
    }
    else  {
      $('#voiturebouton').css('color', '#7a7979');
      colorvoiture = 0 ;
    };

 });

  $('#technologiebouton').click(function() 
  {

  $('li#tech').toggle('slow');

  if (colortech == 0) {
      $('#technologiebouton').css('color', '#3d6f93');
      colortech = 1 ;
    }
    else  {
      $('#technologiebouton').css('color', '#7a7979');
      colortech = 0 ;
    };

  });
   $('#photographiebouton').click(function() 
  {

  $('li#photo').toggle('slow');

  if (colorphoto == 0) {
      $('#photographiebouton').css('color', '#3d6f93');
      colorphoto = 1 ;
    }
    else  {
      $('#photographiebouton').css('color', '#7a7979');
      colorphoto = 0 ;
    };

  });

                          /*====================================================*/

                          /*  Agrandisement  petits carreaux  dans Tableau     */

                          /*===================================================*/  

$('.conteneu>li').live('click',function()
{      
  
  var inco = $(this).index();            
  inco = inco%2;

  var value = $(this).attr('value');

  if (b=='tableau') 
  {
    if (value==1) 
    {

        $("li").cache();
        $("li[value=1").cache();
        $("li").attr('value', '0');
      
    } 
    else if(value==0)
        {

          if(inco)
            {

              $(this).attr('value', '1');
              var tab = $(this).prev().clone();
              $(this).clone().replaceAll($(this).prev());
              $(tab).clone().replaceAll($(this));

            }

        $(this).attr('value', '1');
        $("li[value=1]").voir();
        
        };

  };
});
                          /*====================================================*/

                           /*          Effet d'opacité dans  Tableaux           */

                          /*===================================================*/  
                
$('.conteneu>li[value=0]').live('mouseenter',       
 function  () 
 {

   if (b=='tableau') 
     {
     $(this).fadeTo('slow',1);  
     };
 
 });

 $('.conteneu>li[value=0]').live('mouseout',
 function  () {

     if (b=='tableau') 
     {
     $(this).fadeTo('slow',0.6);  
     };
 
 });
                

                      /*====================================================*/

                       /*          Menu déroulant pour lister           */

                      /*===================================================*/  
             


$('ul.liste').hide('slow');

 $('#listeur').hover(function () {
    if ($("ul.liste").is(":hidden")) {
      $("ul.liste").slideDown("slow");
    } else {
      $("ul.liste").slideUp();
    }
  });

                       /*===================================================*/

                       /*                  Provisoire                       */

                       /*===================================================*/  
        

c = $('a#etat').text();
$('html').mousemove(function() {
   if (b=='tableau') {
   
   };
$('a#etat').text(c+b);

 });
              


$('.conteneu>li>div>p').text('Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina ');

</script>

               
  </body>
</html>


Et le CSS


body
{
  background-image:url(../1.jpg);
  color: #7a7979;
  
}

p{
          width:400px;
          float: right;
}
.conteneur
{
        width:750px;
        margin-left:auto;
        margin-right:auto;
     
}
.entete
{
          display: block;
          width:467px;
          margin-left: 100px;
} 
.menu
{
          background-image:url(../images/menufond.png);
          height:86px;
          width: 100%;
          position: absolute;
          left:0;
}
.menu ul
{
          width: 750px;
          margin-left: auto;
          margin-right: auto;
          position: relative;
          top:-15px;
}

.menu li
{
          list-style:none;
          float: left;
          width:150px;
          height:86px;
          margin-right: 29px;
          margin-left: -19px;
          cursor:pointer;
          z-index: 1;
}
.menu li:hover
{
          list-style:none;
          float: left;
          background-image:url(../images/fonddebouton.png);
          background-repeat: repeat-x;
}
.menu img
{

          display:block;
          margin-left:auto;
          margin-right: auto;
          margin-top: 8px;
}
.menu .trie
{
          width:290px;
          font-size:40px;
          padding: 10px;
          height:83px;        

}
.menu .trie:hover
{
          background-image:url(../images/fonddeboutontrie.png);
          background-repeat: repeat-x;

}
.menu .trie p
{
          width:auto;
          font-size:40px;
          float:left;
          margin-top:10px;

}
.menu .trie img
{
         
          float:right;
          margin-top: 20px;
          margin-right: 50px;
}
.menu .trie .liste 
{        
          
          
          height:auto;
          position: relative;
          width: 310px;
          padding:  0px ;
          top:-23px;
          left:-10px;
          -moz-box-shadow: 0px  0px  6px  #a1a1a1;
          -webkit-box-shadow: 0px  0px  6px  #a1a1a1;
          box-shadow: 0px  0px  6px  #a1a1a1;

}
.menu .trie .liste li
{        
          float: none;
          margin:0;
          font-size:20px;
          background-color: #DDD;
          z-index: 100;
          height:40px;
          width:290px;
          position: relative;
          padding: 5px 5px 5px 15px;
          border-top: 0px 1px 1px 1px solid #999;
          background-image:url(../images/texture.png);


}
.menu .trie .liste li:hover
{        
          background-image:url(../images/fonddeboutontrie.png);
          color:white;
         
}

.conteneu
{
        margin-top: 100px;
}
.conteneu li{
        -moz-box-shadow: 0px  0px  6px  #a1a1a1;
        -webkit-box-shadow: 0px  0px  6px  #a1a1a1;
        box-shadow: 0px  0px  6px  #a1a1a1;
        cursor: pointer;
}
 .ultableau
{
        width:330px;
        height:auto;
        
        float:left;
        overflow: hidden;
        list-style:none;
        margin-left:-45px;
        position: relative;
        
        font-size: 50px;
}





.ligneli
{
        width:750px;
        height:auto;
        margin: 5px;
        padding: 20px;
        background-color: #DEE;
        float:left;
        overflow: hidden;
        left:0;
        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1)
        z-index:1;
        margin-left: -50px;
                    
}  

.tableauli{
       width:150px;
       height:150px;
       margin: 5px;
       background-color: #DEE;
       float:left;
       overflow: hidden;
       opacity: 0.6;
       -moz-opacity: 0.6;
       filter:alpha(opacity=6);
       z-index:1;
}   

.niak
{
 
        top:0;
        width: 100%;
        margin-top: -2px;
}   

.img
{
        float:left;
        top:0;
        margin-right:20px;
}

.col4
{
        opacity: 1;
        -moz-opacity: 1;
        filter:alpha(opacity=1);
} 



.a2 .ahover
{
          font-size:50px;
          margin-left: 50px;
          display: block;
          top:0;
          position: absolute;
          left:62%;
          z-index:4;

} 
.clear
{
  clear: both;
}
 


Modifié par salva91 (12 May 2012 - 03:05)
Modérateur
salva91 a écrit :
Alors merci Artemus pour l'exemple de script de balle qui rebondit, je vais m'en aspirer.


N'oublie pas d'expirer après, tu pourrais t'étouffer. Smiley biggol
Bonsoir Salva91,

quelques petites remarques :

1) il n'était pas nécessaire de mettre ton code HTML + CSS + JAVASCRIPT dans le fil de la discussion car tu avais déjà mis un lien vers ta page WEB. Et il est très facile de faire une visualisation de ton code.

2) tu as oublier de mettre un doctype, un title et d'autres petites bricoles pour finaliser ta page.

3) pourquoi avoir mis le code Jquery juste avant la balise </body> ?
Tu aurais pu le mettre dans la balise <head> en tant que fichier externe.

Le résultat final me plait beaucoup. Bravo pour ta performance.

Pour le petit script, c'est vraiment du basique de chez basique !

On dit "inspirer", parce que si tu m'aspires, tu risques de t'étouffer comme le dit si bien Tony Monast !

@+
Modifié par Artemus24 (13 May 2012 - 17:32)