Mootools. de liens avec Fx.Elements et Slimbox

**Stickmaniak** · 09/05/2008, 09h04

Bonjours à tous, je suis nouveau sur ce forum et je viens vous demander
un petit peu d'aide. Tout d'abord, merci d'avance a tous ceux qui prendrons le temps de s'attarder un peu sur mes problèmes.

Je rencontre quelques problèmes dans la conception de ma page web.

Je présente tout mon contenu sur une seul et même page (dans l'air du temps?)
et j'utilise le framework ajax mootools.
Sur mes pages (page de "bienvenue" et l'index), j'utilise Fx.Elements pour créer
des menus qui ressemblent à des accordéons.

L'idéal serait que mes pages sous firefox et ie et safari confondu ressemblent
à ça (pris sous safari):

Pour un coup d'œil en direct c'est par la. cliquez ici

La ou les problèmes commencent...
Voici la structure de la seconde page.
- html et javascript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>
 
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Voici le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
#kwicks_container    /**DIV**/
{
overflow:hidden;
width:100%;
min-width:800px;
height:130px;
position:absolute;
top:0px;
left:0px;
padding-left:42px;
background-image:url("ressources/menuBK.gif");
background-position:top left;
background-repeat:no-repeat;
background-color:#619faf;
}
 
#kwicks {  /**UL**/
width:800px;
height: 130px;
display:inline;
background-color:none;
position:relative;
top:0px;
}
 
#kwicks .kwick { /**LIi**/
	float: left;
	display: block;
	width: 50px;
	height: 130px;
}
 
#kwick_1 {background-image:url("ressources/menu1b.jpg"); background-color: #2c2e2e;}
#kwick_2 {background-image:url("ressources/menu2b.jpg"); background-color: #2e3b3f;}
#kwick_3 {background-image:url("ressources/menu3b.jpg"); background-color: #376471;}
#kwick_4 {background-image:url("ressources/menu4b.jpg"); background-color: #3c7d8e;}
#kwick_5 {background-image:url("ressources/menu5b.jpg"); background-color: #4194ab;}
#kwick_6 {background-image:url("ressources/menu6b.jpg"); background-color: #45aac6;}
#kwick_7 {background-image:url("ressources/menu7b.jpg"); background-color: #49bcdb;}
#kwick_8 {background-image:url("ressources/menu8b.jpg"); background-color: #4bc8ea;}
#kwick_9 {background-image:url("ressources/menu9b.jpg"); background-color: #4cccee;} 
 
#kwick .kwick span {
	display:none;
}

Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
1 sur la première balise li, avec pour cible la même page (pour une actualisation).
Le second sur la dernière balise li.

Firefox affiche alors le menu en décalent le contenu vers le bas, laissant apparaître en haut le background de la balise ul...

Quand je rajoute un lien sur la balise li suivante, le contenu de la balise li concerné ce décale encore un peu plus (ce qui à la fin fait une sorte d'escalier), alors que pour la dernière balise li le lien n'a aucun effet sur la position de balises li. C'est le premier problème.

Ensuite, IE (7) quand à lui ne créer pas de problème de décalage, mais m'inverse la balise li entouré d'un balise <a> avec la balise li antécédente...
On peut l'observer sur la première page, ou la bulle n'apparait pas corectement
et dans le menu de la seconde page.

Peut être que je place mal mes balise <a>? Comment devrais-je les placer?
Dans le code source de l'index de mootools.net, sur lequel est utiliser un menu
kwick, les balises <a> se trouvent à l'intérieur des balises <li>, mais quand je les positionnes de cette manière, plus rien n'est cliquable...

Enfin, le dernier problème sur lequel je me demande ce qui se passe:
puisque j'utilise mootools, j'ai chercher une galerie comme celle de la lightbox
compatible. J'ai trouver Slimbox qui est similaire à lightbox, et qui en plus fonctionne avec les mêmes balises.
Le problème est que sous firefox et safari (pas sous IE bizarrement...), la slimbox s'affiche derrière mon carrousel.

Je vous colle le head de la seconde page, le problème vient peut être de la?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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">
   <head>
       <title>Sticky's website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
	   <link rel="shortcut icon" type="image/x-icon" href="" />
 
	   <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
	   <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
	   <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
	   <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
	   <script type="text/javascript">
	   jQuery(document).ready(function() {
			jQuery('#mycarousel').jcarousel({
				horizontal: true,
				scroll: 1
			});
		});
	   </script>
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>

Est ce que ça peut venir du positionnement des différents codes dans <head>?

Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.

**Stickmaniak** · 09/05/2008, 12h12

Bonjours à tous (désolé je reposte se topic dans la section html, peut être que vous pourriez aussi m'aider?), je suis nouveau sur ce forum et je viens vous demander
un petit peu d'aide. Tout d'abord, merci d'avance a tous ceux qui prendrons le temps de s'attarder un peu sur mes problèmes.

Je rencontre quelques problèmes dans la conception de ma page web.

Je présente tout mon contenu sur une seul et même page (dans l'air du temps?)
et j'utilise le framework ajax mootools.
Sur mes pages (page de "bienvenue" et l'index), j'utilise Fx.Elements pour créer
des menus qui ressemblent à des accordéons.

L'idéal serait que mes pages sous firefox et ie et safari confondu ressemblent
à ça (pris sous safari):

Pour un coup d'œil en direct c'est par la. cliquez ici

La ou les problèmes commencent...
Voici la structure de la seconde page.
- html et javascript.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>
 
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Voici le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
#kwicks_container    /**DIV**/
{
overflow:hidden;
width:100%;
min-width:800px;
height:130px;
position:absolute;
top:0px;
left:0px;
padding-left:42px;
background-image:url("ressources/menuBK.gif");
background-position:top left;
background-repeat:no-repeat;
background-color:#619faf;
}
 
#kwicks {  /**UL**/
width:800px;
height: 130px;
display:inline;
background-color:none;
position:relative;
top:0px;
}
 
#kwicks .kwick { /**LIi**/
	float: left;
	display: block;
	width: 50px;
	height: 130px;
}
 
#kwick_1 {background-image:url("ressources/menu1b.jpg"); background-color: #2c2e2e;}
#kwick_2 {background-image:url("ressources/menu2b.jpg"); background-color: #2e3b3f;}
#kwick_3 {background-image:url("ressources/menu3b.jpg"); background-color: #376471;}
#kwick_4 {background-image:url("ressources/menu4b.jpg"); background-color: #3c7d8e;}
#kwick_5 {background-image:url("ressources/menu5b.jpg"); background-color: #4194ab;}
#kwick_6 {background-image:url("ressources/menu6b.jpg"); background-color: #45aac6;}
#kwick_7 {background-image:url("ressources/menu7b.jpg"); background-color: #49bcdb;}
#kwick_8 {background-image:url("ressources/menu8b.jpg"); background-color: #4bc8ea;}
#kwick_9 {background-image:url("ressources/menu9b.jpg"); background-color: #4cccee;} 
 
#kwick .kwick span {
	display:none;
}

Dans le code html, mon menu kwick (avec Fx.Elements) comporte 2 liens.
1 sur la première balise li, avec pour cible la même page (pour une actualisation).
Le second sur la dernière balise li.

Firefox affiche alors le menu en décalent le contenu vers le bas, laissant apparaître en haut le background de la balise ul...

Quand je rajoute un lien sur la balise li suivante, le contenu de la balise li concerné ce décale encore un peu plus (ce qui à la fin fait une sorte d'escalier), alors que pour la dernière balise li le lien n'a aucun effet sur la position de balises li. C'est le premier problème.

Ensuite, IE (7) quand à lui ne créer pas de problème de décalage, mais m'inverse la balise li entouré d'un balise <a> avec la balise li antécédente...
On peut l'observer sur la première page, ou la bulle n'apparait pas corectement
et dans le menu de la seconde page.

Peut être que je place mal mes balise <a>? Comment devrais-je les placer?
Dans le code source de l'index de mootools.net, sur lequel est utiliser un menu
kwick, les balises <a> se trouvent à l'intérieur des balises <li>, mais quand je les positionnes de cette manière, plus rien n'est cliquable...

Enfin, le dernier problème sur lequel je me demande ce qui se passe:
puisque j'utilise mootools, j'ai chercher une galerie comme celle de la lightbox
compatible. J'ai trouver Slimbox qui est similaire à lightbox, et qui en plus fonctionne avec les mêmes balises.
Le problème est que sous firefox et safari (pas sous IE bizarrement...), la slimbox s'affiche derrière mon carrousel.

Je vous colle le head de la seconde page, le problème vient peut être de la?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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">
   <head>
       <title>Sticky's website</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="sti" href="sti.css"/>
	   <link rel="shortcut icon" type="image/x-icon" href="" />
 
	   <script type="text/javascript" src="jcarousel/lib/jquery-1.2.1.pack.js"></script>
	   <script type="text/javascript" src="jcarousel/lib/jquery.jcarousel.pack.js"></script>
	   <link rel="stylesheet" type="text/css" href="jcarousel/lib/jquery.jcarousel.css" />
	   <link rel="stylesheet" type="text/css" href="jcarousel/skins/jcarousel/jcarousel.css" />
	   <script type="text/javascript">
	   jQuery(document).ready(function() {
			jQuery('#mycarousel').jcarousel({
				horizontal: true,
				scroll: 1
			});
		});
	   </script>
 
	   <link rel="stylesheet" href="slimbox/css/slimbox.css" type="text/css" media="screen" />
	   <script type="text/javascript" src="java/mootools.svn.js"></script>
	   <script type="text/javascript" src="java/demos.js"></script>
	   <script type="text/javascript" src="slimbox/js/slimbox.js"></script>
	   <script type="text/javascript">
		window.addEvent('domready', function(){
			var szNormal = 50, szSmall  = 60, szFull   = 250;
 
			var kwicks = $$("#kwicks .kwick");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Back.easeOut});
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
 
			$("kwicks").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
 
		}); 
		</script>
   </head>  
<body>

Est ce que ça peut venir du positionnement des différents codes dans <head>?

Désolé pour la longueur de ce post, mais je voulais d'expliquer clairement les problèmes que je rencontre.
Merci d'avance.

**Stickmaniak** · 10/05/2008, 13h09

Personne n'à d'idée? Une remarque qui pourrait faire avancer le chmilblic?

**Sacha999** · 10/05/2008, 15h59

Concernant Firefox

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="kwicks_container">
			<ul id="kwicks">
				<a id="kwick_1" class="kwick" href="index2.html"><li ><span></span></li></a>
				<li id="kwick_2" class="kwick"><span></span></li>
				<li id="kwick_3" class="kwick"><span></span></li>
				<li id="kwick_4" class="kwick"><span></span></li>
				<li id="kwick_5" class="kwick"><span></span></li>
				<li id="kwick_6" class="kwick"><span></span></li>
				<li id="kwick_7" class="kwick"><span></span></li>
				<li id="kwick_8" class="kwick"><span></span></li>
				<a id="kwick_9" class="kwick" href="http://stickart-blog.blogspot.com" target="_blank"><li ><span></span></li></a>
			</ul>
</div>

Pourquoi ne mets tu pas les balise <a> dans les balise <span> (pas <li>)? Ca devrait corriger le dacalage vers le bas

**Kerod** · 10/05/2008, 16h07

Déjà ce n'est pas très HTML de mettre une balise a comme enfant direct d'un ul. Ce doit être ul li et dans le li tu mets ce que tu veux. Mais pas l'inverse

**Stickmaniak** · 10/05/2008, 18h10

Tout d'abord, merci à vous d'avoir pris le temps de tout lire et de répondre sur ce topic.
J'ai déplacer les balises <a> dans <ul> <li>, comme me l'a conseiller Kerod, et miracle... IE n'inverse plus les balises <li> suivie d'un lien.
Voir ici.
Sacha999, le fait que les balise <a> soit à l'intérieur ou autour des balises <span> ne règle pas le problème de décalage, au contraire maintenant, IE lui aussi affiche ce décalage.
Firefox:

On remarque aussi que cette barre qui décale le contenu va maintenant jusqu'au
bout a gauche du menu, contrairement à avant ou elle s'arrétait avant le dernier <li>.

IE:

Cette première évolution réduit elle champ de recherche?

Mootools. de liens avec Fx.Elements et Slimbox

Bibliothèques & Frameworks

Vue hybride

Discussions similaires

Partager

Partager