Discussion :

[al3xzo]

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 :

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
<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

[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 html :

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

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

Code js :

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

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

[SaynRauliee]

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

Code :

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

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.

[al3xzo]

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 :

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
<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 :

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
 
<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>

[vermine]

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.
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.

[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).