[JS/JQUERY] Problème de "redirection de clic"

[KFR Tepec Fett]

Bonjour !

Je me présente brièvement : je suis KFR Tepec Fett, l'un des administrateurs du forum communautaire Halo Création (mais pas le fondateur), forum qui a pour but d'encourager le partage et l'échange de créations autour des jeux vidéo Halo.

Depuis un moment déjà, notre "petit chez nous" a vécu un essor considérable (si bien que forumactif nous a offert notre nom de domaine (superbe) ), à tel point que nous ressentons à présent le besoin de développer une page d'accueil plus proche de la forme classique d'un site que d'un forum.

Pour cela, encore une fois, forumactif nous propose des fonctionnalités remarquables avec le portail et l'affichage d'une section du forum en blog qui, combinés ensembles, répondent complètement à nos besoins !

Enfin, "complètement", à un détail près !

En effet, suite à l'établissement du cahier des charges pour ce portail-site, nous avons réalisé une maquette à l'adresse suivante : http://testhcrea.trodlabal.com/ et nous sommes finalement rendu compte qu'un tout petit détail de rien du tout pouvait manquer.
Ce détail est de prime abord simple : en cliquant sur le titre d'une news (ou sur la news elle-même) , l'utilisateur devrait être redirigé vers la news intégrale (comme s'il cliquait sur "lecture complète") .
Si mes propos ne sont pas très clairs, je les illustre : nous souhaiterions, dans un souci d'ergonomie, que, lorsque l'utilisateur clique sur une news (en vert sur l'image ci-dessous), il soit redirigé de la même façon que s'il avait cliqué sur "lecture complète" (en rouge sur l'image ci-dessous) :

Hors, après moultes et pourtant vaines tentatives je m'en remets à votre savoir !
J'ai tenté d'intégrer -d'abord la bibliothèque JQuery, puis- un script JQuery qui me permettrait simplement d'effectuer cette redirection, en vain ... Voici le code en question :

Code:

$(document).ready( function() {

$('html#min-width body#phpbb div.conteneur_minwidth_IE div.conteneur_layout_IE div.conteneur_container_IE div#wrap div#page-body div#emptyidcc.no-left div#outer-wrapper div#wrapper div#container div#content div#main div#main-content table.portal tbody tr td.column div.module').click(function() {

$this('html#min-width body#phpbb div.conteneur_minwidth_IE div.conteneur_layout_IE div.conteneur_container_IE div#wrap div#page-body div#emptyidcc.no-left div#outer-wrapper div#wrapper div#container div#content div#main div#main-content table.portal tbody tr td.column div.module div.inner div.h3').click();

});

});

(mon chemin CSS peut vous paraître étrange, mais je le copie directement depuis notre fidèle compagnon Firebug, et après différents tests il fonctionne très bien sur différents navigateurs, donc autant ne pas se faire trop de mal pour rien !)
Manifestement, mon premier click fonctionne correctement (un petit "alert('coucou');" à la place de la redirection de clic permet de s'en rendre compte), mais le problème semble venir -même pas du "$this" en lui-même, sachant que je n'ai pas réussi à retrouver la syntaxe correcte avec certitude- du second ".click()" puisque je n'arrive à faire cliquer sur rien, même pas un lien autre que celui qui m'intéresse et qui serait unique (du genre le logo ou autre).

Je me retrouve donc un petit peu perdu ... Quelqu'un saurait-il éclairer mon chemin dans les méandres des scripts douteux ?

Merci d'avance !


Cordialement,

Tepec

[Ea]

Bonjour,

J'ai tenté d'intégrer -d'abord la bibliothèque JQuery

Elle est déjà inclue sur tout les forums.

Sinon pour votre problème ajouter dans le CSS :

Code:

.mod_news { cursor: pointer; }

Et mettre ce script sur le portail :

Code:

$(function() {
  $(".mod_news").click(function() {
    var a = $(this).find(".content a:last");
    if(a.text()) {
      document.location.href = a.attr("href")
    }
  })
});

Devrait suffire ^^

[KFR Tepec Fett]

Bonjour !

Merci pour ta réponse claire et surtout fonctionnelle !

Cependant, je me permets d'abuser de ta gentillesse pour te demander une petite "précision" : serait-il possible d'effectuer la "redirection" non plus en cliquant sur tout l'élément, mais seulement sur le titre ?
(Désolé, je suis indécis ..!)
J'ai essayé rapidement, mais il me semble que le .find() va chercher dans le $(this), et que si je précise $(".mod_news .h3").click(function{blablabla , ça ne saura pas trouver le a qui m'intéresse vu qu'il ne se trouve pas dans le l'élément de classe h3 mais bien dans l'élément de classe mod_news ...

Merci encore, je passerai le topic en "résolu" très bientôt, réponse de ta part ou non (puisque ma question originelle a bel et bien été résolue) !

Tepec

[Ea]

Il suffit de remonter avec une méthode comme closest par exemple :

Code:

$(function() {
  $(".mod_news .h3").click(function() {
    var a = $(this).closest(".inner").find(".content a:last");
    if(a.text()) {
      document.location.href = a.attr("href")
    }
  })
});

Et le CSS il faudra remplacer par :

Code:

.mod_news .h3 { cursor: pointer; }

Pour avoir le curseur de "lien" sur le titre seulement.

[KFR Tepec Fett]

Ahah c'est merveilleux !

Encore une fois merci pour ton aide claire et rapide.
(Je passe le topic en "résolu")