11496 sujets

JavaScript, DOM et API Web HTML5

Un peu perdu, conflit de comportement PC VS appareils tactile

Bonjour à tous,

A la base je suis webdesigner et je ne connais pas grand chose au jQuery du coup je suis un peu perdu. J'ai écrit quelques scripts jQuery pour la gestion de boutons mais ils ne se comportent pas comme je voudrais sur PC et sur les appareils tactile.

J'ai deux familles de boutons à gérer. Des boutons "images" (roll-over) et des boutons "CSS" (changement de la couleur du fond).

Je souhaiterais désactiver l'effet "hover" sur tactile car c'est mal géré mais garder le clique sur tactile ET PC. Mais tout le drame est là.

Voici une maquette de ce que j'ai crée : Maquette

Voici le cafouillis que j'ai écrit :


// Rollover on image
$(function() {
	$('img.rollover').on('mouseenter', function(){
	$(this).css("cursor", "pointer");
		this.src = this.src.replace("-normal","-hover");
	});

	$('img.rollover').on('mouseleave', function(){
		this.src = this.src.replace("-hover","-normal");
	});
});

// Toggles forms
$(function() {
	$("#form-contact").hide();
	$("#form-devis").hide();

	  $("#btn-contact").click(function(){
		$(this).toggleClass("btn-form-hover");	  
		$("#form-contact").fadeToggle(500, "linear");
		$("#form-devis").hide();
		$("#btn-devis").removeClass("btn-form-hover");
  });
  
    $("#btn-devis").click(function(){
		$(this).toggleClass("btn-form-hover");
		$("#form-devis").fadeToggle(500, "linear");
		$("#form-contact").hide();
		$("#btn-contact").removeClass("btn-form-hover");
  });
});

// Toggle client area
$(function() {
	$("#div-client-area").hide();
	
		$("#btn-clients").click(function(){ 
		$("#div-home").toggle(500,"linear");
		$("#div-client-area").toggle(500,"linear");
  });
});

Modifié par draklane (14 Dec 2013 - 18:18)
Bonjour,

Je ne connais pas plus que toi le langage JQuery... mais j'aurai tendance à mettre une règle qui dit qui que lorsque tu passes dans un type de média les hover ne sont pas mis en place.. .

Pour la syntaxe je ne pourrais pas t'aider Smiley ohwell


surement avec des "If" les média sont égal à, alors.. .

sinon "Else" les actions se passent différemment Smiley murf
Bonjour.

Je ne trouve pas ça très très beau les hover en javascript (jQuery), je les ferais tout simplement en css.

Et pour "désactiver" les hover sur tactile, et après détection de l'appareil, je changerais juste une classe sur le body par exemple. Ensuite par héritage je ne fais les hover que sur desktop :

.btn {
  [propriétés au repos]
}
.pc .btn:hover {
  [propriétés au hover]
}
Hello Smiley smile

Merci pour vos réponses !

blond1n, je vais essayer d'aller dans ce sens mais c'est pas évident quand on essaie de manipuler un langage que l'on connait peu.

SolidSnake, je vois, du coup comment tu gérerais le fait qu'un bouton doit rester d'une certaine couleur quand on clique dessus ? Et tu gérerais aussi l'hover d'un boutons "image" en CSS toi ?
blond1n a écrit :
Pour les boutons qui restent en couleur apres le clique je crois que c'est avec :visited.. .

Oui, mais c'est particulier, vu que à force de cliquer, tous les boutons seront en visited.
draklane a écrit :
... du coup comment tu gérerais le fait qu'un bouton doit rester d'une certaine couleur quand on clique dessus ?

J'utiliserais de toute façon le javascript, pour détecter le clic sur le bouton, et j'ajouterais une classe sur ce bouton (i.e. "active"), que je gérerais ensuite en CSS.
draklane a écrit :
Et tu gérerais aussi l'hover d'un boutons "image" en CSS toi ?

Cela dépend de la complexité du bouton, des besoins de compatibilité si CSS3...
Sujet clos
Aller à