Discussion :

[dhillig]

Bonsoir à tous,
J'ai un footer qui s'affiche et ce cache via Toggle. En voici les CSS :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
#toggler{
	text-align: center;
	position: fixed;
	bottom: 30px;
	width: 100%;
	height: 30px;
	z-index: 9999999;
	left: 0px;
	right: 0px;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
}#toggle{
	text-align: center;
	bottom: 0px;
	position: fixed;
	width: 100%;
	z-index: 999999;
	background-color: #000000;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0em;
}
#toggle p{text-align:center;padding:0}
 
.button {
	background-image: url(imgs/fleche_haut.jpg);
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
	background-position: 50% 0%;
	margin-bottom: 0px;
}
 
.background {
	/* [disabled]background-color: #CC3300; */
	background-image: url(imgs/fleche_bas.jpg);
	background-repeat: no-repeat;
}

et le js :

Code javascript :

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
jQuery(document).ready(function()
{
   jQuery('#toggle').hide();
   // toggle()
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').slideToggle(400);
      return false;
   });
});
/* ]]> */
</script>
<script>
$(".button").on('click', function(){ $(this).toggleClass('background'); })
</script>
<script>
$(document).ready(function(){
	$('.logo').hide();
});
$(window).load(function(){
	$('.header').fadeIn('slow');
	$(".header").delay(1800).animate({
		marginTop:'0px',
		opacity:1
	},1800,'swing');
});
</script>

Y'a y'il moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?
Voici mon html actuel :

Code :

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

1
2
<a href="#" id="toggler" class="button">Ouvrir</a>
<div id="toggle" style="display:none;">

Merci pour votre aide.
Bonne fin de week-end,
dh

[NoSmoking]

Bonjour,

...moyen de remplacer les images (fleche_haut et _bas.jpg) par du texte/icônes ?

qu'est ce qui t'en empêche !?! tu mets bien ce que tu veux, ou presque, entre <a> et </a>.

[dhillig]

Bonjour NoSmoking,
Je ne vois pas du tout
Puis-je en savoir plus ?
Merci et bonne journée,
dh

[Invité]

Bonjour,

peux-tu toi-même expliquer plus clairement et en détail ce que tu veux faire ?

• Changer quelle flèche par quelle autre sur quel évènement ?
• Remplacer quel texte par quel autre sur quel évènement ?
• ...

En jQuery, on peut modifier :

• un contenu HTML avec .html()
• du CSS avec .css()

As-tu au moins eu la curiosité de faire une recherche ?

[dhillig]

Bonjour Jérôme,
Voici une partie du code initial :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.button {
	background-image: url(imgs/fleche_haut.jpg);
	background-repeat: no-repeat;
	text-align: center;
	position: relative;
	background-position: 50% 0%;
}
 
.background {
	/* [disabled]background-color: #CC3300; */
	background-image: url(imgs/fleche_bas.jpg);
	background-repeat: no-repeat;
}

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
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type='text/javascript'>
/* <![CDATA[ */ 
/*
|-----------------------------------------------------------------------
|  jQuery Toggle Script by Matt - skyminds.net
|-----------------------------------------------------------------------
|
|
*/
 
jQuery(document).ready(function()
{
   jQuery('#toggle').hide();
   jQuery('a#toggler').click(function()
  {
      jQuery('#toggle').slideToggle(400);
      return false;
   });
});
/* ]]> */
</script>
<script>
$(".button").on('click', function(){ $(this).toggleClass('background'); })
</script>

Je souhaiterais simplement remplacer les images fleche_haut et flèche_bas par deux icônes "font awesome", plus propres.
Désolé de ne pas avoir été plus clair.
Merci à NoSmoking et à toi pour vos réponses.
Bonne journée,
dh

[Invité]

Par exemple :

Code html :

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

1
2
3
4
<a href="#" id="toggler" class="button"><i class="fa fa-arrow-down"> Ouvrir</i></a>
<div>
	SESAME OUVRE TOI !
</div>

Code javascript :

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
jQuery(document).ready(function()
{
	jQuery('a#toggler').next('div').hide();
	// toggle()
	jQuery('a#toggler').on( 'click', function()
	{
		// changer la flèche (font-awesome)
		jQuery(this).find('i').toggleClass('fa-arrow-down fa-arrow-up');
 
		// changer le texte		
		( jQuery(this).find('i').html() == ' Ouvrir' )? jQuery(this).find('i').html(' Fermer') : jQuery(this).find('i').html(' Ouvrir');
 
		// Ouvirir/Fermer le div
		jQuery('a#toggler').next('div').slideToggle(400);
		return false;
	});
});

Et du coup supprimer le CSS de .background.

[dhillig]

Bonjour Jérôme et merci pour ta réponse.
Peux-tu m'expliquer un peu ton code ?
Malheureusement j'ai du fauter qq part, le div "auteurs" n'est plus hidden. Logiquement in ne devrait apparaître qu'au clic.
As-tu une idée ?
La page en question : http://impactetroit.com/toggle.html
Merci pour ton aide,
dh

[dhillig]

En jQuery, on peut modifier :
un contenu HTML avec .html()
du CSS avec .css()

Oui, mais c'est toujours un peu compliqué pour moi

[NoSmoking]

Et tu les déclares où tes classes fa-arrow-down et fa-arrow-up ?

Malheureusement j'ai du fauter qq part, le div "auteurs" n'est plus hidden.

Une fois de plus une de tes discussions qui est en train de dériver du sujet initial !!!

[dhillig]

Désolé NoSloking, j'ai tendance à m'emballer
Pour ce qui est du div hauteur, c'est mieux comme ça :

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
**** <a href="#" id="toggler" class="button"><i class="fa fa-arrow-down"> Ouvrir</i></a>
<div><div id="auteurs">
<div class="footerFloat">
  <h2>EUROPEENS</h2>
  <ul>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Carali </a> </li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Giorgio Cavazzano </a> </li>
    <li><a href="../europeens.html"><i class="fa fa-star"></i> Angelo Di Marco</a></li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Henri Dufranne </a> </li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Leone Frollo </a> </li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Marcel Gotlib </a> </li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Lacroix </a> </li>
    <li> <a href="../europeens.html"> <i class="fa fa-star"></i> Tanino Liberatore </a> </li>
  </ul>
</div>
<div class="footerFloat">
  <h2>AMERICAINS</h2>
  <ul>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Neal Adams </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Kyle Baker </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> John Buscema </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Gene Colan </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Scott Hampton </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Bill Sienkiewicz </a> </li>
    <li> <a href="../americains.html"> <i class="fa fa-star"></i> Ashley Wood </a> </li>
  </ul>
</div>
<div class="footerFloat">
  <h2>DESSINS DE PRESSE</h2>
  <ul>
    <li><a href="../presse.html"><i class="fa fa-star"></i> Angelo Di Marco</a></li>
    <li><a href="../presse.html"><i class="fa fa-star"></i> Hoviv</a></li>
    <li><a href="../presse.html"><i class="fa fa-star"></i> Laville</a></li>
    <li><a href="../presse.html"><i class="fa fa-star"></i> Luis Ruiz</a></li>
    <li><a href="../presse.html"><i class="fa fa-star"></i> Trez</a></li>
  </ul>
</div>
<div class="footerFloat">
  <h2>BRIC A BRAC</h2>
  <ul>
    <li><a href="../divers.html"><i class="fa fa-star"></i> Germaine Bouret</a></li>
    <li><a href="../divers.html"><i class="fa fa-star"></i> Alfred Dehodencq</a></li>
    <li><a href="../divers.html"><i class="fa fa-star"></i> Poulbot</a></li>
    <li><a href="../divers.html"><i class="fa fa-star"></i> Publicités</a></li>
  </ul>
</div>
<div class="footerFloat">
  <h2>DEDICACES & FAIRE-PART</h2>
  <ul>
    <li><a href="dedicaces.html"><i class="fa fa-star"></i> Neal Adams </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Dany </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Will Eisner </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean Giraud </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Marcel Gotlib </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Scott Hampton </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Lob </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean-Claude Mézières </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Mœbius </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Bill Sienkiewicz </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Jean Solé </a></li>
    <li><a href="../dedicaces.html"><i class="fa fa-star"></i> Denis Verlaine </a></li>
  </ul>
</div>
<div class="footerFloat"> <img src="img/original/gotlib_g.jpg" alt="" class="fullsreen"/> </div></div>

Une bêtise rattrapée
dh

[dhillig]

Slt NoSmoking,
J'ai du mal avec les icones, et le "ouvrie"/"fermer" que je ne désire pas
Pour ce qui est du JQuery, je lancerais une nouvelle discussion.
Encore merci aux membres de Développez.com,
dh

[Invité]

@NoSmoking

"fa", "fa-arrow-down" et "fa-arrow-up" sont des classes de Font Awesome.

Il faut juste le fichier CSS qui va avec :

Code html :

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

	<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"><!-- Font-Awesome -->

@dhillig

Il ne suffit pas de dire "Je ne sais pas faire...".
Si on te fournit des liens vers la doc, c'est pour que tu la lises.

Code :

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

1
2
3
4
<a href="#" id="toggler" class="button"><i class="fa fa-arrow-down"> Ouvrir</i></a>
<div>
  <div id="auteurs">
...

Ce n'est pas de la même forme que le code donné initialement (il y a ici un div supplémentaire entre le <a> et le <div> à masquer/afficher)

=> mon code est donc à adapter.

Code javascript :

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
jQuery(document).ready(function()
{
	jQuery('#auteurs').hide();
	// toggle()
	jQuery('a#toggler').on( 'click', function()
	{
		// changer la flèche (font-awesome)
		jQuery(this).find('i').toggleClass('fa-arrow-down fa-arrow-up');
 
		// changer le texte		
		( jQuery(this).find('i').html() == ' Ouvrir' )? jQuery(this).find('i').html(' Fermer') : jQuery(this).find('i').html(' Ouvrir');
 
		// Ouvirir/Fermer le div
		jQuery('#auteurs').slideToggle(400);
		return false;
	});
});

Ce n'était pourtant pas bien difficile à trouver...

[NoSmoking]

@NoSmoking"fa", "fa-arrow-down" et "fa-arrow-up" sont des classes de Font Awesome.

je te rassures, pas de soucis pour moi, mais notre ami charge 30 tonnes de fichier CSS mais pas les seuls utiles sur sa page de test

[Invité]

LOL. (Je me disais aussi...)

Je n'ai pas ouvert sa page de test...

[dhillig]