Forums Développement Multimédia

Aller au contenu

Infinite scroll et rollover

CODE Ajax JQuery EaseJs

17 réponses à ce sujet

#1 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 20 July 2012 - 11:54 AM

J’ai un site pratiquement finalisé mais je n’arrive pas à résoudre deux problèmes en javascript et n’ayant pas acquis assez de compétences dans ce langage (avant de me mettre au html5, css et jquery, je faisais essentiellement du flash) , c’est pourquoi je sollicite votre aide.

Mon site se compose d’un index et de pages externes, et à l’intérieur de ces pages des« box images ». Les pages externes se trouvent dans un dossier nommé pages, mes images dans un dossier images et l’index se trouve à la racine du site.

http://gillesn.perso...mash/index.html

Via le script jquery isotope infinite scroll, les box des pages externes se chargent dans mon index et ce, dans un container. Tout fonctionne très bien sauf sous safari mobile ou les images de mes box ne s’affichent pas.
J’ai bien essayé dans les pages externes de changer le chemin source de mes images :
../images/img_xl.jpg au lieu de images/img_xl.jpg
Mais lorsque je change ce chemin, ça marche en effet dans safari mais plus dans les navigateurs desktop !

Et de toute façon, la logique voudrait que le chemin soit images/img_xl.jpg puisque les box sont chargées dans l’index.
A moins de mettre toutes mes pages externes à la racine du site, je n’ai pas de solution

Ci-dessous le code javascript :

   <script>
        $(function(){

          var $container = $('#container_box');

          $container.isotope({
                itemSelector : '.box_s,.box_m,.box_l,.box_xl',
transformsEnabled: false
          });

          $container.infinitescroll({
                navSelector  : '#page_nav',     // selector for the paged navigation
                nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
                itemSelector : '.box_s,.box_m,.box_l,.box_xl',   // selector for all items you'll retrieve
                loading: {
                        finishedMsg: '',
                        img: 'images/loader.gif'
                  }
                },
                // call Isotope as a callback
                function( newElements ) {
                  $container.isotope( 'appended', $( newElements ) );
                }
          );


        });
  </script>
 


Mon second problème, c'est l’animation rollover sur mes box. J’utilise un script qui fonctionne très bien sur les box présentes dans mon index mais ne fonctionne pas sur les box chargées depuis les pages externes.
Le script est chargé depuis un lien externe mais même en plaçant ce script à l’intérieur même de mon index, j’ai le même résultat.

Le code javascript :


$(document).ready(function() {

//*** Rollover effect box xl ***//


$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_xl').hover(function() {

$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);

},
function() {

$(this).children('.overlay_xl').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);

});


});


$(document).ready(function() {

//*** Rollover effect box xl ***//


$('#container_box #box_picture_l').append('<div class="overlay_l"></div>');
$('#container_box #box_picture_l').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_l').hover(function() {

$(this).children('.overlay_l').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);

},
function() {

$(this).children('.overlay_l').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);

});


});


$(document).ready(function() {

//*** Rollover effect box xl ***//


$('#container_box #box_picture_m').append('<div class="overlay_m"></div>');
$('#container_box #box_picture_m').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_m').hover(function() {

$(this).children('.overlay_m').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);

},
function() {

$(this).children('.overlay_m').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);

});


});



$(document).ready(function() {

//*** Rollover effect box xl ***//


$('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
$('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_s').hover(function() {

$(this).children('.overlay_s').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);

},
function() {

$(this).children('.overlay_s').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);

});


});
 

Merci d'avance pour votre aide car je suis vraiment bloqué !

#2 eKimiya

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 423 messages

Posté 20 July 2012 - 13:29 PM

Hello,

j'ai pas tellement le temps de regarder ça en détails, mais c'est assez logique que ça ne fonctionne pas car comme tu rajoute dynamiquement des box au fur et à mesure, donc code pour les rollovers ne s'applique qu'aux box présentes au chargement de la page.

Regarde du côté du live de jQuery, je pense que c'est ce qu'il te faut : http://api.jquery.com/live/ ;)

#3 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 20 July 2012 - 14:36 PM

Voir le messageeKimiya, le 20 July 2012 - 13:29 PM, dit :

Hello,

j'ai pas tellement le temps de regarder ça en détails, mais c'est assez logique que ça ne fonctionne pas car comme tu rajoute dynamiquement des box au fur et à mesure, donc code pour les rollovers ne s'applique qu'aux box présentes au chargement de la page.

Regarde du côté du live de jQuery, je pense que c'est ce qu'il te faut : http://api.jquery.com/live/ ;)

Merci pour cette réponse eKmiya mais n'étant pas du tout un expert en javascript, je ne sais pas ou modifier mon code...je n'ai vraiment pas d'expérience dans ce domaine...

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 20 July 2012 - 17:15 PM

Voir le messageeKimiya, le 20 July 2012 - 13:29 PM, dit :

j'ai pas tellement le temps de regarder ça en détails, mais c'est assez logique que ça ne fonctionne pas car comme tu rajoute dynamiquement des box au fur et à mesure, donc code pour les rollovers ne s'applique qu'aux box présentes au chargement de la page.

Regarde du côté du live de jQuery, je pense que c'est ce qu'il te faut : http://api.jquery.com/live/ ;)

Je n'ai peut-être pas bien saisi le problème, mais il me semble que le soucis n'est pas là (même si effectivement les rollover sur les éléments ajoutés dynamiquement ne fonctionnent pas pour la raison que tu évoques)

Citation

sous safari mobile ou les images de mes box ne s’affichent pas

Si j'ai bien saisi, c'est un soucis de chemin vers les images, soit tu arrives à ce que ça fonctionne partout sauf sur iOS ou alors que sur iOS, c'est ça ?

note pour le soucis du rollover, il faut que tu touches aux instructions avec le mot "hover", mais je t'invite à plutôt regarder du côté de la fonction on( ), live ( ) est déprécié
http://api.jquery.co...ory/deprecated/

edit : je viens de tester sur un ipad, ça fonctionne ?!? c'est uniquement sur un iPhone ?
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 eKimiya

    Ceinture Noire

  • Members
  • PipPipPipPipPipPipPip
  • 423 messages

Posté 20 July 2012 - 21:34 PM

Haha ! En effet je n'ai répondu que pour sa deuxième question ^_^'
Et en effet, je n'avais pas vu que live était dépréciée !! J'avais pris l'habitude c'est pour ça je regardais plus la doc...

Sinon, chez moi ça fonctionne sur iPhone...

#6 Gilles_73

  • Guests

Posté 21 July 2012 - 11:26 AM

Merci pour votre aide.....je viens à nouveau de tester sur mon iphone et impossible d'afficher les images des pages externes sous safari. Sauf si je remplace le chemin de mes images : ../images/img_xl.jpg
Un problème de version OS ? Ekimiya, c'est la dernière version de l'OS que tu as ?

Pour l'histoire du rollover, que dois-je remplacer par l'instruction on() ? Ou dois-je l'ajouter en plus ?
En fait, je débute totalement en javascript et je suis loin d'avoir acquis la logique de ce langage.

Merci encore pour votre aide

#7 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 21 July 2012 - 19:42 PM

Salut,

Pour ce qui est du survol des images, voici une explication/proposition en images-qui-bougent ;-)

note : il ne s'agit pas là de javascript mais uniquement de jQuery, qui est une librairie, certes puissante et pratique, mais qui ne reste qu'une librairie.

edit : question bête, mais tu as bien vidé le cache du navigateur sous iOS ?


"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#8 Gilles_73

  • Guests

Posté 22 July 2012 - 20:29 PM

Salut,

Dans un premier temps, merci d'avoir pris le temps de faire ce mini tuto, vraiment très cool de ta part.

Sinon, j'ai codé à l'identique mais sans succès.
SI j'ai bien compris, j'avais le choix entre le code ci-dessous :




<script type="text/javascript">

jQuery(document).ready(function($){


$('#container_box')

.on('mouseenter', "#box_picture_xl", function() {
$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
})

.on('mouseleave', "#box_picture_xl", function() {
$(this).children('.overlay_xl').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);

});

});
</script>




et le code suivant :





  <script type="text/javascript">

jQuery(document).ready(function($) {


$('#container_box #box_picture_xl').hover(
function() {
console.log($(this).children('.overlay_xl'));
$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {

$(this).children('.overlay_xl').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
}

};[img]G:\TRANSITION[/img]


</script>

 


Pour le premier code, pas d'erreur de syntaxe mais ne fonctionne pas :
http://gillesn.perso...suels/code1.jpg

et pour le second, dreamweaver m'indique une faute de syntaxe..conflit avec les autres script de la page ? :

http://gillesn.perso...suels/code2.jpg

Pourtant j'ai codé dans mon index et non en lien externe js....d'ailleurs puis je mettre le bon code dan un fichier js externe ou faut-il absolument l'intégrer dans l'index ?

Et pour L'OS mobile de l'iphone, toujours ce problème avec les images, celles dans l'index se chargent mais celles des pages externes, non...... et oui, je vide bien le cache :

http://gillesn.perso...uels/iphone.jpg


Merci encore pour ton aide dcz.switcher.

#9 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 23 July 2012 - 09:12 AM

Petite erreur sur le code2 :



  <script type="text/javascript">

jQuery(document).ready(function($) {


$('#container_box #box_picture_xl').hover(
function() {
console.log($(this).children('.overlay_xl'));
$(this).children('.overlay_xl').stop().fadeTo(200,0.6);
$(this).children('.overlayPicto').stop().fadeTo(200,1);
},
function() {

$(this).children('.overlay_xl').stop().fadeTo(200,0);
$(this).children('.overlayPicto').stop().fadeTo(200,0);
}

};


</script>

 


#10 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 24 July 2012 - 12:03 PM

J'aurais dû en effet préciser où intervenir.

Il faut que tu corriges le script js/rollover.js (qui n'est pas terrible niveau optimisation ... mais c'est un autre débat)

exemple, tu as au début de ce dernier ce morceau de code :

$(document).ready(function() {
//*** Rollover effect box xl ***//

$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');
$('#container_box #box_picture_xl').hover(function() {
 
  $(this).children('.overlay_xl').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1);
 
},
function() {
 
  $(this).children('.overlay_xl').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);
 
});
});
 

il faut que tu changes la manière dont est géré l'effet au survol (hover) par le code de la vidéo, c'est à dire cette partie là

$('#container_box #box_picture_xl').hover(function() {

  $(this).children('.overlay_xl').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1);

},
function() {

  $(this).children('.overlay_xl').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);

});
 

qui devient

$('#container_box')
    .on("mouseenter", "#box_picture_xl",  function() { ... } )
    .on("mouseleave", "#box_picture_xl",  function() { ... } );
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#11 Gilles_73

    Ceinture Jaune

  • Members
  • PipPip
  • 22 messages

Posté 24 July 2012 - 16:35 PM

Bonjour,
Merci encore une fois pour ton explication, j'ai bien mis à jour le code, ça fonctionne très bien sur les box internes de la page index mais le problème persiste toujours sur les box externes....j'ai même essayé de placer le code dans la page index....rien n'y fait.




$(document).ready(function() {
//*** Rollover effect box xl ***//

$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');


$('#container_box')
    .on("mouseenter", "#box_picture_xl",  function() {  $(this).children('.overlay_xl').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1); } )
    .on("mouseleave", "#box_picture_xl",  function() {  $(this).children('.overlay_xl').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );

});

 


http://gillesn.perso...mash/index.html

#12 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 24 July 2012 - 17:54 PM

Hum ... je vois, on veut résister <_< ...

Bon, est-ce que tu peux vérifier un truc ?

ajoute cette ligne :


console.log('mouse enter') ;
 

Dans le script de survol des images XL


$('#container_box')
    .on("mouseenter", "#box_picture_xl",  function() {
    console.log('mouse enter') ; //  ICI !
    $(this).children('.overlay_xl').stop().fadeTo(200,0.6);
    $(this).children('.overlayPicto').stop().fadeTo(200,1);
    } )
    .on("mouseleave", "#box_picture_xl",  function() {  $(this).children('.overlay_xl').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );
});
 

Ensuite, tu ouvres la console de ton navigateur (évite internet explorer), normalement, lorsque tu survoles une images XL, tu devrais avoir le message

Est-ce que tu l'as pour les nouvelles images ?

Tentes ensuite d'utiliser l'autre méthode live( ), il ne faudrait pas, mais ça permet de voir


$('#container_box #box_picture_l')
    .live('mouseenter', function() {
         $(this).children('.overlay_l').stop().fadeTo(200,0.6);
         $(this).children('.overlayPicto').stop().fadeTo(200,1);
    })
    .live("mouseleave", function() {
           $(this).children('.overlay_l').stop().fadeTo(200,0);
           $(this).children('.overlayPicto').stop().fadeTo(200,0);
    });
 

A tout de suite.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#13 Gilles_73

  • Guests

Posté 24 July 2012 - 20:38 PM

Alors résultat des tests.........(pour simplifier, je n'ai laissé que le code pour les vignettes XL)
Avec le test console.log, en rollover, j'ai bien un message "mouse enter" sur chaque vignette XL y compris celles des pages externes.

http://gillesn.perso..._log/index.html

Avec le test live, rien ne se passe...pas de message.

http://gillesn.perso...live/index.html

Tests effectués dans Chrome.

#14 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 25 July 2012 - 08:07 AM

Avec ce résultat, c'est plus clair, il y a un soucis de ciblage des éléments dans les nouvelles images

Un rapide tour dans le source explique le problème, voici le code HTML des images affichées au départ

<div id="box_picture_xl">
<img src="images/img_xl.jpg" width="292" height="372" alt="">
<a href="http://www.google.fr" target="_blank"></a>
<div class="overlay_xl" style="opacity: 0; display: block; "></div><div class="overlayPicto" style="opacity: 0; display: block; "></div></div>
 

et celui d'une image ajoutée après


<div id="box_picture_xl">
<img src="images/img_xl.jpg" width="292" height="372" alt="">
<a href="http://www.google.fr" target="_blank"></a>
</div>
 

Tu l'auras remarqué, il manque tout simplement l'image de la loupe ainsi que le fond noir transparent

<div class="overlay_xl" style="opacity: 0; display: block; "></div><div class="overlayPicto" style="opacity: 0; display: block; "></div></div>
 

Dans mon code, ça fonctionnait puisque je clonais l'image, elle avait donc exactement la même structure.

J'aurais dû percuter plus vite, les balises qui manquent sont ajoutées une seule fois, lorsque le DOM est prêt, alors qu'elles devraient l'être à chaque fois que des nouvelles images sont chargées, je regarde ça ...
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#15 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 25 July 2012 - 08:37 AM

Bon, je pense avoir trouvé.

Dans le script d'initialisation du plugin infinityScroll, tu as une fonction qui est appelée une fois le nouveau contenu effectivement chargé.

Extrait de la doc :

Citation

,function(arrayOfNewElems){

// optional callback when new content is successfully loaded in.

// keyword `this` will refer to the new DOM content that was just added.
// as of 1.5, `this` matches the element you called the plugin on (e.g. #content)
// all the new elements that were found are passed in as an array

}

C'est à ce moment là qu'il faut ajouter les éléments nécessaires à la visualisation de l'effet "mouseenter"

Dans le script de la page HTML (avant la fermeture du BODY, je te propose de tester ces 2 méthodes ... et si ça ne fonctionne pas, il faudrait que tu utilises la 3eme instruction et poste ici les résultats


// call Isotope as a callback    
         function( newElements ) {             
          $container.isotope( 'appended', $( newElements ) );  
       
          //test première méthode
          $( newElements + ' #box_picture_xl').append('<div class="overlay_xl"></div>');
          $( newElements + ' #box_picture_xl').append('<div class="overlayPicto"></div>');     
       
          //test seconde méthode (à dé-commenter après avoir commenté la première)
          //$( newElements ).find('#box_picture_xl').append('<div class="overlay_xl"></div>');
          //$( newElements ).find('#box_picture_xl').append('<div class="overlayPicto"></div>');       
       
         //troisieme instruction à dé-commenter si rien ne fonctionne
         //console.log( newElements ) ;
         //console.log( this ) ;
         }
 

L'objectif est de rajouter les balises manquantes uniquement sur les nouveaux éléments, si on appelle le script du départ, on va cumuler les balises à chaque nouveau chargement.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#16 Gilles_73

  • Guests

Posté 25 July 2012 - 14:50 PM

Salut,
..............oui, enfin ça marche !!!
Avec la première méthode, les box externes ne se chargent pas.
Avec la deuxième, c'est nickel, elles se chargent et la fonction hover fonctionne très bien.

http://gillesn.perso...good/index.html

Par contre toujours ce problème de chargement sous ios iphone, les images ne se chargent pas.
J'ai trouvé une solution, je mets mes pages à la racine et là, ça fonctionne !

http://gillesn.perso...hone/index.html

Par contre, je n'ai pas encore testé sur tablette mais sur mon iphone, je dois appuyer deux fois sur une box pour aller sur un lien externe...
Si tu as une idée d'ou ça peut venir, je ne suis pas contre....mais déjà, tu m'as rendu un grand service, merci à toi d'avoir pris le temps pour m'aider.






Pour rappel, voici le script infinite scroll utilisé :



<script>
        $(function(){

          var $container = $('#container_box');
       
          $container.isotope({
                itemSelector : '.box_s,.box_m,.box_l,.box_xl',
transformsEnabled: false
          });
         
          $container.infinitescroll({
                navSelector  : '#page_nav',     // selector for the paged navigation
                nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
                itemSelector : '.box_s,.box_m,.box_l,.box_xl',   // selector for all items you'll retrieve
                loading: {
                        finishedMsg: '',
                        img: 'images/loader.gif'
                  }
                },
                // call Isotope as a callback
                function( newElements ) {
                  $container.isotope( 'appended', $( newElements ) );
$( newElements ).find('#box_picture_xl').append('<div class="overlay_xl"></div>');
                  $( newElements ).find('#box_picture_xl').append('<div class="overlayPicto"></div>');

$( newElements ).find('#box_picture_l').append('<div class="overlay_l"></div>');
                  $( newElements ).find('#box_picture_l').append('<div class="overlayPicto"></div>');


$( newElements ).find('#box_picture_m').append('<div class="overlay_m"></div>');
                  $( newElements ).find('#box_picture_m').append('<div class="overlayPicto"></div>');


$( newElements ).find('#box_picture_s').append('<div class="overlay_s"></div>');
                  $( newElements ).find('#box_picture_s').append('<div class="overlayPicto"></div>');
                }
          );
         
       
        });
  </script>

Et voici le script de mon fichier rollover :



$(document).ready(function() {
//*** Rollover effect box xl ***//

$('#container_box #box_picture_xl').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl').append('<div class="overlayPicto"></div>');


$('#container_box')
        .on("mouseenter", "#box_picture_xl",  function() {  $(this).children('.overlay_xl').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1); } )
        .on("mouseleave", "#box_picture_xl",  function() {  $(this).children('.overlay_xl').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );

});



$(document).ready(function() {
//*** Rollover effect box l ***//

$('#container_box #box_picture_l').append('<div class="overlay_l"></div>');
$('#container_box #box_picture_l').append('<div class="overlayPicto"></div>');


$('#container_box')
        .on("mouseenter", "#box_picture_l",  function() {  $(this).children('.overlay_l').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1); } )
        .on("mouseleave", "#box_picture_l",  function() {  $(this).children('.overlay_l').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );

});



$(document).ready(function() {
//*** Rollover effect box m ***//

$('#container_box #box_picture_m').append('<div class="overlay_m"></div>');
$('#container_box #box_picture_m').append('<div class="overlayPicto"></div>');


$('#container_box')
        .on("mouseenter", "#box_picture_m",  function() {  $(this).children('.overlay_m').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1); } )
        .on("mouseleave", "#box_picture_m",  function() {  $(this).children('.overlay_m').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );

});


$(document).ready(function() {
//*** Rollover effect box s ***//

$('#container_box #box_picture_s').append('<div class="overlay_s"></div>');
$('#container_box #box_picture_s').append('<div class="overlayPicto"></div>');


$('#container_box')
        .on("mouseenter", "#box_picture_s",  function() {  $(this).children('.overlay_s').stop().fadeTo(200,0.6);
  $(this).children('.overlayPicto').stop().fadeTo(200,1); } )
        .on("mouseleave", "#box_picture_s",  function() {  $(this).children('.overlay_s').stop().fadeTo(200,0);
  $(this).children('.overlayPicto').stop().fadeTo(200,0);} );

});


#17 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2533 messages

Posté 25 July 2012 - 17:46 PM

C'est une bonne chose de faite, pour le soucis du "double tap" sur iOS, peut-être est-ce dû au fait que la balise <a> n'encadre aucun élément ?

As-tu essayé en la plaçant de manière à encadrer par exemple les 2 DIV ajoutées ?


<div id="box_picture_xl">
<img src="images/img_xl.jpg" width="292" height="372" alt="">
    <a href="http://www.google.fr" target="_blank">
        <div class="overlay_xl" style="opacity: 0; display: block; "></div>
        <div class="overlayPicto" style="opacity: 0; display: block; "></div>
    </a>
</div>

 

Bien entendu, si ça fonctionne, il faudra légèrement modifier la manière dont les balises sont ajoutées dans la page
Quelque chose dans ce goût là :


$('#container_box #box_picture_xl a').append('<div class="overlay_xl"></div>');
$('#container_box #box_picture_xl a').append('<div class="overlayPicto"></div>');
 

Enfin, ça n'est qu'une idée comme ça, le soucis ne vient peut-être pas de là.
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#18 Gilles_73

  • Guests

Posté 25 July 2012 - 20:44 PM

Je vais essayer.........en tout cas, merci encore pour ton aide.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)