Retour à Forum de programmation

jQuery - fonction à Pop

  • robert475
  • Born
  • Born
  • No Avatar
  • Inscription: Avr 28, 2011
  • Messages: 1
  • Status: Offline

Message Avril 28th, 2011, 1:40 am

Salut, j'ai suivi un tutoriel et a réussi à obtenir cet effet popout sur mon site en utilisant jQuery.

l'impact des produits. co. uk / category.asp? cat = Sound

Lorsque vous survolez une marque, il apparaît avec un fond blanc carré, lorsque vous passez au large, il retourne à son état normal.

Maintenant, chaque icône de liens vers une autre page qui est grand, mais le pépin que j'ai est que quand vous revenez (en utilisant les boutons de la fenêtre du navigateur) à la page originale sur l'icône qui a été cliqué est encore déclenché. Je veux quand l'utilisateur le renvoie à cette page de l'icône qui a été enfoncée dans un premier temps de revenir à son état normal. J'ai seulement remarqué ce qui se passe dans firefox à ce jour, dans IE c'est ok.

Voici le code à l'aide im:
Code: [ Select ]
<script type="text/javascript">
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
        .animate({
            marginTop: '-60px',
            marginLeft: '-80px',
            top: '50%',
            left: '50%',
            width: '150px',
            height: '118px',
            padding: '0'
        }, 200);
    
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '70px',
            height: '55px',
            padding: '0'
        }, 400);
        return false;
});


$(".thumb li img").click(function(){
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '70px',
            height: '55px',
            padding: '0'
        }, 400);
});
});
</script>
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  4. //Larger thumbnail preview
  6. $("ul.thumb li").hover(function() {
  7.     $(this).css({'z-index' : '10'});
  8.     $(this).find('img').addClass("hover").stop()
  9.         .animate({
  10.             marginTop: '-60px',
  11.             marginLeft: '-80px',
  12.             top: '50%',
  13.             left: '50%',
  14.             width: '150px',
  15.             height: '118px',
  16.             padding: '0'
  17.         }, 200);
  18.     
  19.     } , function() {
  20.     $(this).css({'z-index' : '0'});
  21.     $(this).find('img').removeClass("hover").stop()
  22.         .animate({
  23.             marginTop: '0',
  24.             marginLeft: '0',
  25.             top: '0',
  26.             left: '0',
  27.             width: '70px',
  28.             height: '55px',
  29.             padding: '0'
  30.         }, 400);
  31.         return false;
  32. });
  35. $(".thumb li img").click(function(){
  36.     $(this).css({'z-index' : '0'});
  37.     $(this).find('img').removeClass("hover").stop()
  38.         .animate({
  39.             marginTop: '0',
  40.             marginLeft: '0',
  41.             top: '0',
  42.             left: '0',
  43.             width: '70px',
  44.             height: '55px',
  45.             padding: '0'
  46.         }, 400);
  47. });
  48. });
  49. </script>


J'espère im donner un sens à ce qui Im essayant de dire! Tous les conseils et suggestions seront grandement appréciés, merci.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Avril 28th, 2011, 1:40 am

  • owenconti
  • Born
  • Born
  • No Avatar
  • Inscription: Mai 26, 2011
  • Messages: 1
  • Loc: Calgary, AB
  • Status: Offline

Message Mai 26th, 2011, 10:10 am

Ce n'est probablement pas la bonne réponse, mais vous pouvez toujours avoir une fausse déclaration sur ces liens et window.location = la valeur d'usage HREF

quelque chose comme

Code: [ Select ]
$(".thumb li img").click(function(){
  var windowLocation = $(this).parent().attr('href');
  $(this).css({'z-index' : '0'});
  $(this).find('img').removeClass("hover").stop()
    .animate({
      marginTop: '0',
      marginLeft: '0',
      top: '0',
      left: '0',
      width: '70px',
      height: '55px',
      padding: '0'
    }, 400);
  window.location(windowLocation);
  return false;
});
  1. $(".thumb li img").click(function(){
  2.   var windowLocation = $(this).parent().attr('href');
  3.   $(this).css({'z-index' : '0'});
  4.   $(this).find('img').removeClass("hover").stop()
  5.     .animate({
  6.       marginTop: '0',
  7.       marginLeft: '0',
  8.       top: '0',
  9.       left: '0',
  10.       width: '70px',
  11.       height: '55px',
  12.       padding: '0'
  13.     }, 400);
  14.   window.location(windowLocation);
  15.   return false;
  16. });



Quelque chose comme ça. Je n'ai pas tester la cause Im au travail. Faites-moi savoir si cela fonctionne pour vous.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mai 27th, 2011, 9:26 am

Juste après cette ligne:

Code: [ Select ]
$(document).ready(function(){


et avant cette ligne:

Code: [ Select ]
$("ul.thumb li").hover(function() {


Je voudrais mettre quelque chose là-dedans pour réinitialiser tous les Etats de la valeur par défaut que vous souhaitez. La fonction de prêt se déclenche dès que le document est chargé, ce qui a vraisemblablement lorsque vous appuyez sur le bouton arrière qui se déclenche immédiatement (puisque tout est plus susceptible de chargement de cache). Donc le code que vous mettre là où je l'ai mentionné peut être utilisé pour réinitialiser tout. Votre vol stationnaire et cliquez sur la fonction que du feu lorsque ces événements se produisent, mais si vous mettez un peu de code en dehors de ces fonctions, il serait le feu une fois que le navigateur charge, et une seule fois.

Ainsi, vous pouvez simplement mettre cela, il:

Code: [ Select ]
$('ul.thumb li').each(function(index) {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .css({
        marginTop: '0',
        marginLeft: '0',
        top: '0',
        left: '0',
        width: '70px',
        height: '55px',
        padding: '0'
        });
});
  1. $('ul.thumb li').each(function(index) {
  2.     $(this).css({'z-index' : '0'});
  3.     $(this).find('img').removeClass("hover").stop()
  4.         .css({
  5.         marginTop: '0',
  6.         marginLeft: '0',
  7.         top: '0',
  8.         left: '0',
  9.         width: '70px',
  10.         height: '55px',
  11.         padding: '0'
  12.         });
  13. });


J'ai changé d'animer css pour le faire passer instantanément ainsi.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mai 27th, 2011, 9:49 am

En fait, à bien y réfléchir ce qui pourrait fonctionner mieux est d'utiliser le décharger de fonction, en vous assurant de passer en revue chaque lien:

Code: [ Select ]
$(window).unload(function() {
    $('ul.thumb li').each(function(index) {
        $(this).css({'z-index' : '0'});
        $(this).find('img').removeClass("hover").stop()
            .css({
            marginTop: '0',
            marginLeft: '0',
            top: '0',
            left: '0',
            width: '70px',
            height: '55px',
            padding: '0'
            });
    });
});
  1. $(window).unload(function() {
  2.     $('ul.thumb li').each(function(index) {
  3.         $(this).css({'z-index' : '0'});
  4.         $(this).find('img').removeClass("hover").stop()
  5.             .css({
  6.             marginTop: '0',
  7.             marginLeft: '0',
  8.             top: '0',
  9.             left: '0',
  10.             width: '70px',
  11.             height: '55px',
  12.             padding: '0'
  13.             });
  14.     });
  15. });


Donc, ce sera le feu une fois la page essaie de changer, ce qui se produit juste après que quelqu'un clique sur un de ces liens.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mai 27th, 2011, 10:13 am

Après d'autres recherches pour lesquelles ce problème a été produit même, de son dû au fait que la majorité des navigateurs ne déclenche pas l'événement onload quand vous frappez la touche retour navigateurs, sauf pour IE.

Donc, avec cela dit tout ce que vous avez à faire pour forcer l'événement onload de se produire dans tous les navigateurs est d'ajouter ce morceau de code jQuery:

Code: [ Select ]
  $(window).unload(function() {
        //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  });
  1.   $(window).unload(function() {
  2.         //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  3.   });


Pour ceux qui n'utilisent pas jQuery, vous pouvez aussi le faire avec juste régulière Javascript & #058;

JAVASCRIPT Code: [ Select ]
<script type="text/javascript">
    window.onload = function(){
      //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
};
</script>
  1. <script type="text/javascript">
  2.     window.onload = function(){
  3.       //nothing here, this is just a hack that forces the browser to trigger the onload event when you hit the back button
  4. };
  5. </script>



Alors que le code ne fait vraiment rien faire, le navigateur suppose que la page est cachable si elle a un gestionnaire onunload. Ainsi, lorsque vous cliquez sur le bouton arrière, il est obligé de recharger la page qui sera de nouveau déclencher l'événement onload. Je l'ai testé avec votre code HTML et ce petit morceau de code ci-dessus semble également régler votre problème.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 sur 1

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 157 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC