Rendre une div cliquable

Version imprimable

Bonjour,

Je suis débutant en javascript et après avoir manipulé un peu Jquery, je suis passé à MooTools qui est quasi-obligatoire d'utiliser avec le CMS Joomla.

Sur le site que je suis entrain de concevoir, j'ai plusieurs div que j'aimerais rendre entièrement cliquable et appliquer un style cursor:pointer.

J'ai donc essayé de m'en sortir seul en suivant plusieurs exemple sur le net mais rien à faire...

voici où j'en suis :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script type="text/javascript"> window.addEvent('domready', function(){ $('div.eachpost').addEvents({ mouseenter: function(){ this.setStyle('cursor','pointer'); }, mouseleave: function(){ this.setStyle('cursor','default'); } }); var link = $('div.eachpost a'); link.each(function(element) { element.getParent().addEvent('click', function(){ window.location = element.get('href'); }); }); }); </script>
Comme vous l'aurez compris mes div que je veux rendre cliquable sont <div class="eachpost"></div> qui contiennent toutes un lien.

Merci pour vos conseils :)

29/04/2010, 18h02
vermine
Bonjour,

Pourrions-nous avoir plus de code car là je ne sais pas si vous avez donné un exemple incomplet ou bien si vous vous basez réellement sur la classe au lieu de l'id:
Code:

1 2 <div id="id_div" class="eachpost"></div>
Code:

1 2 $('id_div').addEvents({

Parcourir la liste des div ayant pour classe "eachpost", ca se fait par ca :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
window.addEvent('domready', function() {
 
$$('div.eachpost').each(
  function(mondivamoi) {
    mondivamoi.style.background='red';//tu fais ton traitement ici sur le div en cours, en l'occurence changer le pointeur si j'ai bien compris.
    mondivamoi.addEvent('click', 
	function() {
	   alert("j'ai cliqué :)");
	}
     );
  }
);
});

non?
Sayn.
ps: J'ai 6 heures d'experiences sur mootools, alors soyez clément :p.

Merci pour vos réponse.

Je me base bien sur la class de la div et non sur l'id.
Du coup j'ai réctifié un peu mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.addEvent('domready', function(){
    $$('div.eachpost').addEvents({
        mouseenter: function(){
            this.setStyle('cursor','pointer');    
		},
        mouseleave: function(){
            this.setStyle('cursor','default'); 
        }
    });
    var link = $$('div.eachpost a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
        });
    });
});
</script>

Cela marche presque, quand je passe la souris sur une div j'ai bien le cursor pointer mais maintenant il faudrait que ça prenne le lien "a".

Exemple de mon code html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<div class="eachpost">
<div class="hebergementcategory">
<div class="browseProductImageContainer">
<?php echo ps_product::image_tag( $product_thumb_image, 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ) ?>
</div>
<div class="hebergementtitleprix">
<h3><a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>">
<?php echo $product_name ?></a>
</h3>
<?php echo $product_price ?>
<div class="browseProductDescription">
<?php echo $product_s_desc ?>
</div> 
</div>
<div class="browseRatingContainer">
<?php echo $product_rating ?>
</div>
</div>
</div>

30/04/2010, 07h52
vermine

Citation:

Envoyé par al3xzo

Cela marche presque, quand je passe la souris sur une div j'ai bien le cursor pointer mais maintenant il faudrait que ça prenne le lien "a".

Je ne comprends pas ce que vous cherchez. :oops:
Vous avez redéfinit le click sur le <div> qui contient le <a>, c'est à dire "hebergementtitleprix". Et ça fonctionne très bien. J'ai mis un href vers une page quelconque présente sur mon post et il m'y amène. Votre href est bien correcte ? Maintenant, ce n'est peut-être pas ça que vous espériez.
30/04/2010, 10h32
al3xzo

En gros je voudrais que tout ma div soit cliquable :p

J'ai déjà réussi à faire cela avec Jquery, mais avec mootools je galère...

Actuellement lorsque je passe ma souris sur ma div, j'ai bien le cursor pointer mais ce n'est toujours pas cliquable. Lorsque je clique sur ma div, je ne suis pas redirigé vers le lien du href (sauf si je clique sur le lien en lui même bien entendu).

Faites bien attention. Avec votre code, le parent du <a> est cliquable. C'est le <h3>. Ce n'est donc pas la <div> qui les englobe.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
     <div class="hebergementtitleprix">
        <h3>
           <a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>">
          <?php echo $product_name ?>
          </a>
        </h3>
     <?php echo $product_price ?>
        <div class="browseProductDescription">
        <?php echo $product_s_desc ?>
        </div> 
     </div>

Bonjour,

Désolé pour cette absence beaucoup (trop) de projets parallèles.

Donc mon problème est bien dedans :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.addEvent('domready', function(){
    $$('div.eachpost').addEvents({
        mouseenter: function(){
            this.setStyle('cursor','pointer');    
		},
        mouseleave: function(){
            this.setStyle('cursor','default'); 
        }
    });
    var link = $$('div.eachpost a');
    link.each(function(element) {
        element.getParent().addEvent('click', function(){
            window.location = element.get('href');
        });
    });
});
</script>

Mais où ?

Je suppose que c'est

Code:

var link = $$('div.eachpost a');

qu'il faut modifier.
Mais par quoi ? 'div.eachpost', 'a', 'div.eachpost h3 a' ?

Je crois avoir tout essayé =/

Que voulez-vous exactement comme zone cliquable qui effectuerait la redirection ?

Code:

1
2
3
4
5
6
7
8
9
10
11
 
//Le <a> ?
element.addEvent('click', function(){
 
//Le <a> et le <h3> ?
element.getParent().addEvent('click', function(){
 
//Le <a> et le <h3> et le <div class="hebergementtitleprix"> ?
element.getParent().getParent().addEvent('click', function(){
 
//... ?

18/05/2010, 00h06
al3xzo

Toute la div qui serait cliquable et redirigerait en fonction du href qu'elle contient.

Merci
18/05/2010, 07h41
vermine
D'accord, mais quelle div car il y a trois niveaux d'imbrication de div et dans le dernier niveau, il y a plusieurs div. Essayez avec les getParent() comme dans mes exemples jusqu'à ce que ça vous convienne. ;)

Si vous désirez récupérer le premier parent du <a> qui soit une <div>, vous pouvez utiliser ceci:
Code:

1 2 element.getParent('div').addEvent ...
Il ne tiendra pas compte du <h3>.
Si par contre vous voulez retrouver toutes les imbrication de <div> et peu importe si il y a des <h3> dans l'arborescence, vous utiliserez cette méthode:
Code:

1 2 3 4 5 6 var tab_div = element.getParents('div'); tab_div[0].addEvent ... //ou bien tab_div[1].addEvent ... //etc...
19/05/2010, 11h23
al3xzo

Oups j'ai oublié de préciser, je parle bien de la div

Code:

<div class="hebergementtitleprix">

Merci :)
19/05/2010, 11h36
vermine

Alors il me semble que ceci devrait vous satisfaire:

Code:

element.getParent('div').addEvent...

Cela ne marche pas :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
window.addEvent('domready', function(){
    $$('div.eachpost').addEvents({
        mouseenter: function(){
            this.setStyle('cursor','pointer');    
		},
        mouseleave: function(){
            this.setStyle('cursor','default'); 
        }
    });
    var link = $$('div.eachpost a');
    link.each(function(element) {
        element.getParent('div').addEvent('click', function(){
            window.location = element.get('href');
        });
    });
});
</script>

C'est bizarre, j'avais réussi à faire l'équivalent en Jquery sans trop me casser la tête :

Code:

1
2
3
4
5
6
7
<script type="text/javascript">
//<![CDATA[
$(function(){
$("div.eachpost").mouseover(function(){$(this).css("cursor","pointer").find("a").css("text-decoration","underline");}).mouseout(function(){$(this).find("a").css("text-decoration","none");}).click(function(e){document.location.href = $(this).find("a").attr("href");e.preventDefault();});
});
//]]>
</script>

Merci pour votre aide

19/05/2010, 20h09
vermine

Que donne ceci ?

Code:

alert(element.getParent('div').class);

J'ai peut être une piste :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
window.addEvent('domready', function(){
    $$('div.eachpost').addEvents({
        mouseenter: function(){
        this.setStyle('cursor','pointer');
	this.getParent('div').addEvent('click', function(){
            window.location = this.find('a').get('href');
        });
	},
        mouseleave: function(){
        this.setStyle('cursor','default'); 
        }
    });
});

23/05/2010, 10h53
vermine

Sauf que là vous mettez le onclick sur le parent du div eachpost. :? C'est-à-dire trois niveau trois haut. Que donne l'alert proposé dans mon post précédent ?