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

[vermine]

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 :

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

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>

[al3xzo]

Bonjour,

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

Donc mon problème est bien dedans :

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>

Mais où ?

Je suppose que c'est

Code :

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

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

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

Je crois avoir tout essayé =/

[vermine]

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

Code :

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

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(){
 
//... ?

[al3xzo]

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

Merci

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

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

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 :

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

1
2
3
4
5
6
var tab_div = element.getParents('div');
tab_div[0].addEvent ...
//ou bien
tab_div[1].addEvent ...
//etc...

[al3xzo]

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

Code :

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

<div class="hebergementtitleprix">

Merci

[vermine]

Alors il me semble que ceci devrait vous satisfaire:

Code :

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

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

[al3xzo]

Cela ne marche pas

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

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

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

[vermine]

Que donne ceci ?

Code :

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

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

[al3xzo]

J'ai peut être une piste :

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').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'); 
        }
    });
});

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