11521 sujets

JavaScript, DOM et API Web HTML5

Script pour appareils tactiles

Bonjour,

hormis placer un script sur une page et le faire fonctionner, je ne maîtrise pas le code JavaScript.

Ma question est la suivante :

Quand on a mis en place sur une page des liens menus au survol ou des effets "hover" de toutes sortes sur des images et que ceci fonctionne pas ou mal sur les appareils tactiles, est-il possible de simplement ajouter un script pour régler le problème ? Ou faut-il refaire tous les effets avec un plugin jQuery ou en JavaScript ? On trouve en effet sur le net toutes sortes d'effets, soit en css et html pur soit avec des scripts. J'aimerais bien ne pas tout recommencer et faire fonctionner ce qui est en place sur mon site.

Merci pour vos réponses.
Modérateur
Et l'eau,

Je passe en coup de vent.

Le hover sur un device tactile est pris comme un clic. À toi de gérer ça en conséquence avec les media queries.
Merci pour la réponse,

mais je voudrais toujours avoir la réponse à ma question initiale. Par exemple, le code suivant, (juste une partie), que j'avais installé :

/* FLIP */
#flip { perspective: 800px; }
#flip .info { transition: all 0.8s; opacity:1; transform-style: preserve-3d; }
#flip .info li { transform: rotateY(180deg); } /* Flip the text: Will be flipped back when animated */
#flip .pic { transition: all 0.8s; backface-visibility: hidden; z-index:999; transform-style: preserve-3d; }
#flip li:hover .info { transform: rotateY(180deg); }
#flip li:hover .pic { transform: rotateY(180deg); }


Je l'ai pris sur le net, avec le html qui va avec. Au survol de la souris, la photo se retourne et fait apparaître son recto. Et elle reste sur ce recto jusqu'au survol d'une autre photo de la galerie, et c'est la suivante qui bascule. Sur un tactile, tu verras que ça ne fonctionne pas du tout de la même façon. Et il en est de même pour d'autres effets. Par exemple, sur le site que je suis en train de monter, le code suivant :

#photo {
	max-width: 90%;
	margin-left:3%;
	padding: 2rem 0;
}
#galerie {
	display: flex;
	flex-direction: grow;
	flex-wrap: wrap;
	justify-content: center;
}
#galerie img {
	flex: 1 1 auto;
	width: auto;
	height: auto;
	max-width: 90px;
	max-height: 130px;
	margin: 0.5rem;
	object-fit: fill;
	border: 1px solid #28323B;
	border-radius: 5px;
	box-shadow: 2px 2px 2px #28323B;
	transform: scale(0.6);
	transition: transform 1s;
}
[#red]#galerie img:hover{[/#]
	transform-origin: 50% 50%;
	transform: scale(3);
	z-index: 999;
	border-radius: 5px;
	box-shadow: none;
}


au survol, l'image s'agrandit et quand on éloigne la souris, l'image revient. Sur un tactile, l'image ne revient pas, jusqu'à ce qu'on passe à la suivante. C'est un peu gênant. J'ai dû rajouter :"active" 

#galerie img:hover:active{


pour obtenir quelque chose d'exploitable avec un écran tactile.

Et je ne vois pas ce que les @media pourraient m'apporter de ce côté. Peux-tu préciser.
Merci.
ps :
Je voulais dire que pour le code "FLIP", sur un tactile, l'image ne reste pas sur le recto, elle revient tout de suite à sa position initiale. C'est la raison pour laquelle j'ai mis un "active". En glissant le doigt sur l'image, elle reste à sa place. Bidouillages Smiley smile , alors qu'une script résoudrait sans doute le problème élégamment.
Modifié par Bongota (26 May 2018 - 18:16)
Bonjour,

je crois qu'il ne faut pas chercher, un script qui ferait ce que je demande serait du bricolage. Je me suis résigné et j'ai opté pour un slider JavaScript assez étonnant. Il s'agit de :

www.idangero.us/swiper/

Il est gratuit et open-source (MIT Licensed), même pour une utilisation commerciale.

Ce n'est pas un plugin jQuery et il est très facile à configurer. Le dossier "demos" renferme pas moins de 40 effets, à ajouter au slider. Il suffit de recopier les quelques lignes JavaScript de chaque effet, avec pour certains quelques lignes de html en plus. Le fichier css est un peu lourd, mais on peut enlever toutes les lignes de code qui concernent les effets dont on a pas besoin. Pour ma part, je n'ai gardé que le "FLIP" comme effet.

Il est plein écran, bien sûr responsive, et adapté aux écrans tactiles. Particularité, il ne reconnaît pas <picture> avec srcset. Il propose à la place une fonction "preloader", qui ferait le même travail que srcset, d'après la documentation. Du coup, il ne demande qu'un format d'image, ce qui simplifie la préparation des images. C'est un peu nouveau pour moi et je dois encore lire la doc et expérimenter.

En attendant, je l'ai adopté sur le site (encore en construction, noindex, nofolow, presque tous les liens sont morts, encore des choses à régler avec grid et provisoirement chez free) :

http://barakiss.free.fr

(j'ai oublié, le slider est sur le premier lien du menu "Bagues - de 50€")
A plus.
Modifié par Bongota (28 May 2018 - 20:27)
Sujet clos
Aller à