Discussion :

[Katapult]

Bonjour à tous !

Je viens vers vous car j'ai grand besoin d'être aiguillée !

Je suis débutante en Javascript et je crois m'être lancée dans un truc un peu trop gros pour moi. Je vous explique :

J'essaye de faire un site web en utilisant le plugin Scrollto (je suis passée par cette structure). Jusque là tout va bien, mes ancres envoient aux bons endroits, c'est joli, ça tourne. Mais je voudrais faire un système de fil d'Ariane sous forme de "barre à étapes" fixe (que j'ai récupérée ici), un peu comme un menu qui se créerait au fur et à mesure...

Le plan c'est qu'à chaque fois que l'on clique sur une ancre, une étape s'ajoute à la barre, permettant ainsi de revenir plus tard à l'écran en question. En gros, on est sur l'#item3, on clique sur l'ancre #item4, l'écran glisse vers l'#item4, et une étape contenant l'ancre #item4 s'ajoute dans la barre. Ainsi, lorsque je serai sur l'#item 6, par exemple, je pourrai retourner directement sur l'#item4 en cliquant sur mon étape correspondante dans ma petite barre.

Alors ça marche, les liens s'ajoutent dans des <li>, mais mon problème c'est que je n'arrive pas à récupérer les différentes ancres quand elles sont cliquées pour les injecter dans ma barre, ni à ce qu'elle ne soient ajoutées qu'une seule fois. J'en suis arrivée à utiliser un tableau, je voulais essayer d'incrémenter les clés... mais là je suis complètement perdue :3


Voici mon code Js en chantier :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
$(document).ready(function() {
 
 
 
	$('#wrapper').scrollTo('.item1', 0); 
 
 
	$('a.panel').click(function () {
 
		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
 
		current = $(this);
 
// Début du code maison
 
		parentUl = document.getElementById("bar");
		createLi = document.createElement("li");
  		createLi.setAttribute("class","active");
		nbLi = document.getElementsByTagName('li')
 
		if ( nbLi.length <= 0 ){
			parentUl.appendChild(createLi);	
			createLi.innerHTML = '<a href="' + current.attr('href') + '" class="panel selected lienmenu">Lien actif</a>';
 
		}
		else if (nbLi.length >= 1) {	
			var tab=new Array() 
			$.each($("a.lienmenu"),function(){ 
			tab.push($(this).attr('href'))  
				});
 
 
			function VerifDuplicate(a) {
 
				var temp = {};
 
				for (var i = 0; i < a.length; i++)
 
					temp[a[i]] = true;
 
				var r = [];
 
				for (var k in temp)
 
					r.push(k);
 
				return r;
 
 
			}
 
 
			var arrayVerif = VerifDuplicate(tab);
 
			alert(arrayVerif);
 
			}
 
		$("li").on("click", "a.panel", function (){
 
		$('#wrapper').scrollTo($(this).attr('href') , 800 , {easing:'easeInOutCubic'});		
		});
 
//Fin du code maison
 
		$('#wrapper').scrollTo($(this).attr('href') , 800 , {easing:'easeInOutCubic'});		
 
		return false;
	});
 
	$(window).resize(function () {
		resizePanel();
	});
 
 
 
 
});
 
 
function resizePanel() {
 
	width = $(window).width();
	height = $(window).height();
 
	mask_width = width * $('.item').length;
 
	$('#debug').html(width  + ' ' + height + ' ' + mask_width);
 
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}

et voici mon Html :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<div id="nav">
      <div class="checkout-wrap">
        <ul id="bar" class="checkout-bar"> Là où les étapes vont s ajouter à chaque clic </ul>
    </div>
</div>
 
 
 
<div id="wrapper">
	<div id="mask">
 
	<!-- first row -->
            <!-- first -->
                <div class="item"></div>
 
            <!-- second -->
                <div class="item"></div>
 
            <!-- third -->
                <div id="item1" class="item1 item">
                   <a name="item1"></a>
                    <div id="content1" class="content">
                    	BLABLA ITEM1
                            <a href="#item2" class="panel">Vers ITEM2</a>
                	</div>
            	</div>
 
            <!-- fourth -->
            	<div class="item"></div>
            <!-- fifth -->
            	<div class="item"></div>
 
            <div class="clear"></div>
 
 
 
	<!-- second row -->	
 
            <!-- first -->
            	<div class="item"></div>
 
            <!-- second -->
                <div id="item2" class="item">
                    <a name="item2"></a>
                    <div id="content2" class="content">
                        BLABLA ITEM2
                        <a href="#item3" class="panel">Vers ITEM3</a> | 
                        <a href="#item4" class="panel">Vers ITEM4</a>
                    </div>
                </div>
 
            <!-- third -->
            	<div class="item"></div>
 
            <!-- fourth -->
                <div id="item3" class="item">
                    <a name="item3"></a>
                    <div id="content3" class="content"> 
                         BLABLA ITEM3
                         <a href="#item5" class="panel">Vers ITEM5</a> | 
                        <a href="#item6" class="panel">Vers ITEM6</a>
                    </div>
                </div>
 
            <!-- fifth -->
            	<div class="item"></div>
 
			<div class="clear"></div>
 
 
 
	<!-- third row -->
 
            <!-- first -->
                <div id="item4" class="item">
                    <a name="item4"></a>
                    <div id="content4" class="content">
                       BLABLA ITEM4                
                    </div>
                </div>
 
            <!-- second -->
                <div id="item5" class="item">
                    <a name="item5"></a>
                    <div id="content5" class="content">
                        BLABLA ITEM5
                        <a href="#item4" class="panel">Vers ITEM4</a> | <a href="#item6" class="panel">Vers ITEM6</a>
                    </div>
               </div>
 
            <!-- third -->
                <div id="item6" class="item">
                    <a name="item6"></a>
                    <div id="content6" class="content"> 
                      BLABLA ITEM6
                    </div>
                </div>
 
            <!-- fourth -->
            	<div class="item"></div>
 
            <!-- fifth -->
                <div class="item">
                </div>		
 
            <div class="clear"></div>
 
	</div>
</div>

Merci d'avance pour votre aide, j'espère avoir été claire et ne pas être complètement irrécupérable ni trop à côté de la plaque -_-

Kat