Discussion :

[Arsene12]

bonjour,

j'ai insérer le dock css-dock-menu dans une application.

http://ndesign-studio.com/blog/css-dock-menu

Le dock est positionné au bas de la page mais j'aimerai que le ruban noir s'étale sur toute la largeur.

Auriez-vous la solution pour faire cela ? Merci.

[01001111]

il faut passer par une sorte de trick, car c'est le js (compressé malheureusement donc illisible) qui détermine la largeur du conteneur qui a l'image de fond
Je n'ai pas accès à la source js donc voici ce que je te propose :
remplace

Code html :

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

<div class="dock" id="dock2">

par

Code html :

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

<div class="dock" id="dock2" style="background-image:url(images/dock-bg.gif); background-repeat:repeat-x;">

[NoSmoking]

Bonjour,
effectivement pas besoin d'accéder au javascript car il s'agit d'un problème de CSS et comme le stipule 01001111 déporte l'image de fond sur le conteneur.

[Arsene12]

Bonjour,

je ne me rappelle plus comment j'ai transposé le dock, je n'ai pas appliqué la feuille de style, elle fonctionne pas, mais j'ai trouvé une astuce. Je rajoute une autre div juste avant le dock et ça marche aussi bien.

Code html :

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

<div id="bandeNoire" ></div>

Code css :

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
#bandeNoire { 
    display:block;
    clear:left;
    left:0;
    font-size: 17px;
	bottom: 0;
    padding-top:0;
	margin-top:0;
    padding-bottom:0;
	margin-bottom:0;    
    border-top: solid 0px;
    background:black;
	position: fixed;
	width: 100%;
    height: 50px;
}

Par contre, j'ai un autre problème. Je voudrai reconfigurer le dock, c'est à dire ajouter ou supprimer des icônes à ma guise en faisant juste un click. Est-ce réalisable avec jQuery et savez-vous comment faire? Merci.


Code HTLM du Dock :

Code html :

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
<div id="dock">
	<div class="dock-container">
		<a class="dock-item" id="dockAccueil" href=""><span>Accueil</span><img src="images/Accueuil.png" alt="Accueil" /></a>
		<a class="dock-item" id="tiret1" href="#"><span></span><img src="images/tiret.png" alt="" /></a>
		<a class="dock-item" id="dockVérifier" href="#"><span>Vérifier</span><img src="images/check1.png" alt="Vérifier" /></a>
		<a class="dock-item" id="tiret2" href="#"><span></span><img src="images/tiret.png" alt="" /></a>
		<a class="dock-item" id="dockStop" href="#"><span>Stop</span><img src="images/stop.png" alt="Stop" /></a>
                <a class="dock-item" id="tiret3" href="#"><span></span><img src="images/tiret.png" alt="" /></a>       
		<a class="dock-item" id="dockAction1"  display="none" href="#"><span>Action1</span><img src="images/Action1.png" alt="Liens" /></a>
		<a class="dock-item" id="dockAction2" href="#"><span>Action2</span><img src="images/play.png" alt="dockAction2" /></a>
                <a class="dock-item" id="tiret4" href="#"><span></span><img src="images/tiret.png" alt="" /></a>       
		<a class="dock-item" id="dockInfos" href="#"><span>Infos</span><img src="images/Infos.png" alt="Infos" /></a>
                <a class="dock-item" id="tiret5" href="#"><span></span><img src="images/tiret.png" alt="" /></a>
                <a class="dock-item" id="dockQuitter" href="self.close()"><span>Quitter</span><img src="images/exit.png" alt="Quitter" /></a>         
	</div>
</div>

[Arsene12]

J'ai réfléchi et j'ai compris comment il fallait s'y prendre. Le dock contient un nombre limité d’éléments.

On peut en éliminer quelques uns en faisant hide().

On peut aussi modifier un élément en changeant sa valeur et créer des fonctions qui correspondent aux différentes valeurs. Une nouvelle image doit être attribuer à cet élément à chaque fois qu'il change de valeur.

Je vais chercher comment changer l'image d'un élément et comment en modifier la valeur avec jQuery. Ça me semble facilement réalisable.

[NoSmoking]

mais j'ai trouvé une astuce. Je rajoute une autre div juste avant le dock et ça marche aussi bien.

tu en reviens donc à la structure initiale proposée

Le dock contient un nombre limité d’éléments.

Il contient le nombre d'éléments que tu mets dans ton conteneur.

Je vais chercher comment changer l'image d'un élément et comment en modifier la valeur avec jQuery.

J'ai du mal à vraiment comprendre ce que tu cherches à faire, modification dynamique une fois la page chargée !?!