Discussion :

[Gilles_73]

Bonjour � tous,

Designer graphiste dans la vie, je viens de finaliser une nouvelle version de mon site internet pour pr�senter une s�lection de mes travaux.

www.gillesnolorgues.com

Mais je rencontre deux probl�mes que je n'arrive pas du tout � r�soudre.
Le premier est au niveau de mes animations CSS.

Pour les transitions CSS fade de mes pages, j'utilise le plug Animsition et pour les effets CSS Fadeup sur mes images, j'utilise le plug Wow et la biblioth�que Animate CSS.

Mon souci, c'est lorsque la page se charge pour la premi�re fois, mes animations Fadeup sur les images se sont d�j� d�clench�es.
Par contre, une fois ces m�mes pages dans le cache, cela marche nickel.
Cela doit �tre un probl�me javascript ?

Mon second probl�me est sur IOS, c'est le fait d'avoir � effectuer un double Touch sur les images (situ�es sur la homepage) pour d�clencher le lien....Dois-je ajouter un script JS ? Modifier mes CSS ?

Merci d'avance � tous pour votre aide.

[01001111]

Bonjour Gilles,

� priori il faut travailler sur des �v�nements onload en javascript pour �viter ce genre de probl�me.
soit window.onload, soit $(document).ready en jquery, ou �quivalent dans d'autre librairies, soit des �v�nements onload pour chaque image en v�rifiant bien que chacune est charg�e avant de lancer l'animation.

ceci dit je ne vois pas ce probl�me maintenant au premier visionnage sur chrome, sur quel navigateur ce probl�me a-t-il lieu?
ha, iOS safari le fait entre autre, je viens de le voir.
pour iOS, comment ces changements dans le site sont ils programm�s?
un bout de code js � voir?

dans jquery.animsition.js je vois ceci:

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
          $(options.linkElement).on('click.' + namespace, function(event) {
            event.preventDefault();
            var $self = $(this);
            var url = $self.attr('href');
 
            // middle mouse button issue #24
            // if(middle mouse button || command key || shift key || win control key)
            if (event.which === 2 || event.metaKey || event.shiftKey || navigator.platform.toUpperCase().indexOf('WIN') !== -1 && event.ctrlKey) {
              window.open(url, '_blank');
            } else {
              methods.pageOut.call(_this,$self,url);
            }
 
          });

ce code fait s�rement conflit avec un onmouseover quelquepart, ce qui am�ne iOS � ex�cuter d'abord le mouseover puis le click,
seule solution dans ce cas, faire une r�gle alternative qui d�sactive le mouseover si safari iOS
Mais j'opterai pour �tendre cette annulation de comportement � tout p�riph�rique tactile.
Donc pour d�tection de tactile:

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
 
function is_touch_device() { 
        try { 
              document.createEvent("TouchEvent"); 
              return true; 
        } catch (e) {
              return false; 
        } 
}

Enfin petite note:
la t�ti�re est en chevauchement avec le corps de la page quand on scrolle, �a engendre des probl�mes de lisibilit�.