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.