Besoin d'un code javascript

Crash84 · 17 Juillet 2010

Salut à tous,

Je vous explique ce que j'aimerais avoir.

Voilà ma future page d'accueil : ici, mais j'aimerais que lorsqu'on clique sur "Le club", la partie d'en dessous s'affiche, et lorsqu'on clique sur "Ma zone supporter" la partie d'en dessous s'affiche, mais je ne trouve pas de code pour me permettre un tel résultat.

Si vous ne comprenez pas, j'aimerais un effet comme sur la FAQ, mais avec des images.

Merci beaucoup !!

YoyoS · 17 Juillet 2010

Avec jQuery par exemple: http://api.jquery.com/slideDown/

Crash84 · 17 Juillet 2010

Si tu as le temps, peux tu m'expliquer s'il te plait ?

Car je n'ai pas tout compris.

YoyoS · 17 Juillet 2010

Tu importes jQuery, ensuite sur l'évenement onclick de ton objet à cliquer pour afficher ton panneau, tu crées une fonction qui fait : $('#monpanneau').slideDown()

Pour plus d'info, apprend les bases de jQuery: https://www.google.be/search?q=apprendre+jquery&ie=utf-8&oe=utf-8&aq=t& ... =firefox-a

Crash84 · 17 Juillet 2010

Avec forumactif on ne peut pas importer de chose sur une base de donné.

Blogueur · 17 Juillet 2010

Hors sujet: fond d'écran sur la home "...de quoi montrez à tout le monde ton équipe préférée." montrer c'est mieux

Crash84 · 17 Juillet 2010

Merci !

mrPringle · 18 Juillet 2010

Jquery est déjà implémenté sur la page par défaut visiblement, tu peux donc directement utiliser la fonction qu'on t'a proposé.

Crash84 · 18 Juillet 2010

J'y arrive pas :? , laissez tomber.

Merci quand même

Zecat · 18 Juillet 2010

Crash84 a dit:
Salut à tous,
Si vous ne comprenez pas, j'aimerais un effet comme sur la FAQ, mais avec des images.
quote]
C'est tres facile a faire en quelques lignes ...

Est ce que c'est comme sur cette page (clic sur la petite fleche en haut a gauche (zone membres) [v] ) :

http://www.az-sante.com/

Si c'ets ca ca se fait simplement avec div ... Tu noteras que l'on peut en mettre autant qu'on veut sur la meme page (voir le liens "suite ..." dans la colonne de droite sur cette meme page.

Regarde dans le source de la page :

1 - Une fonction
==============

Code:

<script> var hide = true; function showmembres() { if (hide) { document.getElementById("zonemembres").style.display='block'; hide = false; } else { document.getElementById("zonemembres").style.display='none'; hide = true; } } </script>

2 - L'image que tu vas cliquer
========================

Code:

<a onclick="showmembres()" style="cursor:pointer"> <img border="0" cellspacing="0" cellpadding="0" src="http://www.az-sante.com/IMG/fleche-bas.GIF"> </a>

et 3 piour finir, la zone que tu deploies :
==================================

Code:

<div id="zonemembres" style="display:none"> Ici tu mets ce que tu veux, des images, des tables des td la photo de ta belle mere etc etc </div>

Voila si là tu t'en sort pas ... :wink:

Crash84 · 18 Juillet 2010

Mais le problème c'est que je ne peux mettre qu'une fois le script par page.

==> http://www.arles-avignon.com/TEST-h21.htm

Code:

<br><br><center><img src="http://www.arles-avignon.com/users/1715/22/71/48/album/019.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/115.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/212.png" alt="">

<script>

var hide = true;
function showmembres()
{

   if (hide)
      {
         document.getElementById("zonemembres").style.display='block';
         hide = false;

      }
      else
      {
         document.getElementById("zonemembres").style.display='none';
         hide = true;

      }   
}

</script>

<a onclick="showmembres()" style="cursor:pointer">
<img border="0" cellspacing="0" cellpadding="0" src="http://www.arles-avignon.com/users/1715/22/71/48/album/313.png"></a><div id="zonemembres" style="display:none">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/410.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/510.png" alt="">
</div>






<script>

var hide = true;
function showmembres()
{

   if (hide)
      {
         document.getElementById("zonemembres").style.display='block';
         hide = false;

      }
      else
      {
         document.getElementById("zonemembres").style.display='none';
         hide = true;

      }   
}

</script>

<a onclick="showmembres()" style="cursor:pointer">
<img border="0" cellspacing="0" cellpadding="0" src="http://www.arles-avignon.com/users/1715/22/71/48/album/610.png"></a><div id="zonemembres" style="display:none">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/411.png" alt=""><img src="http://www.arles-avignon.com/users/1715/22/71/48/album/7a10.png" alt="">
</div>
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/810.png" alt=""><br><br><br>

Zecat · 18 Juillet 2010

regarde sur az ... il y a bien deux zones deployables ... regarde le source et tu devrais piger ... tu ne dois pas mettre tes deux images dans showmembres mais faire une showmembres2 pour la seconde image et le second deployé.

Note : tu devrais alléger tes images sur ton site : leur durée de chargement est une horreur ...

Crash84 · 18 Juillet 2010

Où en vois tu deux ?

Pour les images, j'y songe.

Zecat · 18 Juillet 2010

Crash84 a dit:
Où en vois tu deux ?

Pour les images, j'y songe.

Regarde le liens "suite ..." dans la colonne de droite ... (derniers commentaires) :wink: et dans le source au lieu de showmembers c'est ... showcomments (pas original mais pratique :wink: ).

Crash84 · 18 Juillet 2010

Ça ne marche pas :

Code:

<br><br><center><img src="http://www.arles-avignon.com/users/1715/22/71/48/album/019.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/115.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/212.png" alt="">

<script>

var hide = true;
function showmembres()
{

   if (hide)
      {
         document.getElementById("zonemembres").style.display='block';
         hide = false;

      }
      else
      {
         document.getElementById("zonemembres").style.display='none';
         hide = true;

      }   
}

</script>

<a onclick="showmembres()" style="cursor:pointer">
<img border="0" cellspacing="0" cellpadding="0" src="http://www.arles-avignon.com/users/1715/22/71/48/album/313.png"></a><div id="zonemembres" style="display:none">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/410.png" alt="">
<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/510.png" alt="">
</div>




	
     					<a name="comment"></a>
						<a onclick="showcomment()" style="cursor: pointer;">
							<div align="center">
								<b><u>
<img border="0" cellspacing="0" cellpadding="0" src="http://www.arles-avignon.com/users/1715/22/71/48/album/610.png"></u></b>
           					</div>
           				</a>
           				<br>
     					<div id="zonecomment" style="display: none;">

     						
     						<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/411.png" alt=""><img src="http://www.arles-avignon.com/users/1715/22/71/48/album/7a10.png" alt="">
     					</div>


<img src="http://www.arles-avignon.com/users/1715/22/71/48/album/810.png" alt=""><br><br><br>

Zecat · 18 Juillet 2010

normal tu as laisse zonemembres sur ta seconde zone ... !!! enfin dans ton source c'est ainsi ...

Suggestion : regroupe tes script en haut comme sur az (ca sera plus lisible ensuite dans ton code)

Crash84 · 18 Juillet 2010

Si je change zonemembres par zonecomment plus rien ne fonctionne.

Zecat · 18 Juillet 2010

Crash84 a dit:
Si je change zonemembres par zonecomment plus rien ne fonctionne.

He ho faudrait voir a te creuser les meninges un peu ...

1 - commence par regrouper tes scripts en haut de page qu'on y voit clair (la sur ton sources y a encore deux fois le meme zonemebres)
2 - vérifie bien que ensuite tu changes bien tout ce qu'il faut sur la deuxieme zone (le onclick et le div).

Et laisse le source en l'état si ca marche pas ... si tu veux qu'on t'aide ... parce que debugguer sur les bases de ce que tu avais mis mais pas laissé :roll: :roll: :roll:

Crash84 · 18 Juillet 2010

Merci beaucoup

==> http://www.arles-avignon.com/TEST-h21.htm

C'est correct ?

Zecat · 18 Juillet 2010

Crash84 a dit:
Merci beaucoup

==> http://www.arles-avignon.com/TEST-h21.htm

C'est correct ?

Ca a l'air .. tu vois c'est pas complqiué ... bon te reste plus qu'a renommer en zoneclub et zonesupporter pour y voir plus clair et que ca soit plus cohérent.

Mais bon tu as ta soluce :wink: maintenant a toi d'optimiser :wink:

Tu pourrais aussi changer la var hide commune au deux zones et mettre hide1 dans l'une et hide2 dans la seconde ...

Crash84 · 18 Juillet 2010

Les images sont plus rapides ?

Par contre, est-ce possible de faire quelque chose, car apparemment il faut cliquer 2 fois pour ouvrir le deuxième onglet une fois que le premier est ouvert.

Zecat · 18 Juillet 2010

Crash84 a dit:
Les images sont plus rapides ?

Par contre, est-ce possible de faire quelque chose, car apparemment il faut cliquer 2 fois pour ouvrir le deuxième onglet une fois que le premier est ouvert.

les var hide ... identiques ... :mrgreen: allez au boulot (cf plus haut)

Crash84 · 18 Juillet 2010

Code:

<script>

var hide1 = true;
function zonemembres()
{

   if (hide1)
      {
         document.getElementById("zonemembres").style.display='block';
         hide1 = false;

      }
      else
      {
         document.getElementById("zonemembres").style.display='none';
         hide1 = true;

      }   
}

</script>

<script>

var hide2 = true;
function showmembres()
{

   if (hide2)
      {
         document.getElementById("showmembres").style.display='block';
         hide2 = false;

      }
      else
      {
         document.getElementById("showmembres").style.display='none';
         hide2 = true;

      }   
}

</script>

YoyoS · 18 Juillet 2010

Quand je pense qu'il existe une commande minuscule pour gérer le show/hide d'un item avec jQuery

Code:

$('#zonemembres').toggle();

Zecat · 18 Juillet 2010

YoyoS a dit:
Quand je pense qu'il existe une commande minuscule pour gérer le show/hide d'un item avec jQuery

Code:

$('#zonemembres').toggle();

Ben vi mais que fais tu du plaisir de coder, d'oublier un ; de se prendre une volée d'injure, d'oublier une { et de se reprendre une autre bordée d'insultes :mrgreen:

Blogueur · 18 Juillet 2010

c'est bon maintenant, chez moi ça fonctionne au poil.
[je troll un peu]Par contre je préférais comme c'était avant, sur une page interne ça passe mais sur la home...histoire de gout