Discussion :

[arriflex]

Bonsoir,

Pour le site d'une association que je réalise en ce moment, je rencontre un problème que mes maigrissimes connaissances en javascript me me permettent pas de résoudre.

Afin de rendre le site compatible tablettes, j'utilise la propriété .addClass après un click pour faire apparaître un lien (et remplacer le comportement :hover du css en navigation desktop).

En gros, le but recherché est le même comportement que sur les vignettes de ce site: http://www.chronicart.com/

le html:

Code html :

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

1
2
3
<li class="survol">
	<a href="monurl.html"></a>
</li>

le javascript

Code :

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

1
2
3
4
5
6
$(document).ready(function()	{
	$(".survol").click(function () {
		$(".survol").removeClass("modif"); 
		$(this).addClass("modif");return false;
		});
	}

le css
Le code est long mais en gros l'ajout de la class .modif ramène le lien dans la partie visible du li et en occupe tout l'espace.


Problème: le lien, une fois affiché (et donc cliquable), ne renvoi jamais à l'url du href.
C'est le comportement .click du javascript qui prédomine.

J'ai passé plusieurs jours sur ce problème et fait de nombreux tests en vains.

Y aurait-il quelqu'un avec une solution ou une piste (soit pour résoudre ce problème soit pour trouver une meilleurs alternative au comportement souhaité?).

Merci beaucoup!

[arriflex]

Bon, je me réponds:
j'ai finalement opté pour ajouter

Code :

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

onClick="window.open(this.href,'_self')

sur les liens ce qui a pour effet de prendre la prédominance javascript sur le .addClass / .removeClass et provoque le comportement souhaité.

Je ne suis pas sûr que ça soit bien joli joli comme solution mais à défaut de mieux...

[SpaceFrog]

on return false dans once() serait peut être plus "propre"...

[arriflex]

Bonjour SpaceFrog et merci beaucoup pour cette réponse !

Je débute en javascript/jQuery et du coup je ne comprends pas tellement le conseil...

Est-ce qu'il s'applique au code ?

Code :

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

onClick="window.open(this.href,'_self')

Est-ce lui qui n'est pas propre?

[SpaceFrog]

supprime le onclick dans ta balise

http://jsfiddle.net/7mNcA/1/

Code :

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

1
2
3
4
5
6
7
8
 
$("#link").one('click', function (e) {
    e.preventDefault();
    $(this).on('click', function (e) {
    e.preventDefault();
    window.open($(this).attr('href'));
    })
})

[arriflex]

Merci beaucoup SpaceFrog pour ta réponse!