Volver al Programación / Codificación foro

jQuery - característica de Pop

  • robert475
  • Born
  • Born
  • No Avatar
  • Registrado: Abr 28, 2011
  • Mensajes: 1
  • Status: Offline

Nota Abril 28th, 2011, 1:40 am

Hola he seguido un tutorial y logró conseguir este efecto popout en mi sitio web usando jQuery.

impacto de los subproductos. co. Reino Unido / category.asp? cat = sonido

Al pasar sobre una marca que aparece con un fondo cuadrado blanco, cuando se pasa fuera, vuelve a su estado normal.

Ahora, cada icono de enlaces a una página diferente que es grande, pero tiene el problema técnico i es que cuando vuelva (con los botones de ventana del navegador) a la página original en el icono que se ha hecho clic es todavía falló con un globo. Quiero que cuando el usuario vuelve de nuevo a esta página para el icono que se ha presionado en la primera instancia para volver a su estado normal. Sólo he dado cuenta que esto ocurra en Firefox hasta el momento, en el IE de su bien.

Esta es la im código utilizando:
Código: [ 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>


Espero que estoy haciendo el sentido de lo que estoy tratando de decir! Cualquier consejo o sugerencia será muy apreciada, gracias.
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Abril 28th, 2011, 1:40 am

  • owenconti
  • Born
  • Born
  • No Avatar
  • Registrado: May 26, 2011
  • Mensajes: 1
  • Loc: Calgary, AB
  • Status: Offline

Nota Mayo 26th, 2011, 10:10 am

Esto probablemente no es la respuesta correcta, pero siempre podría haber una declaración falsa sobre los enlaces y utilizar el valor window.location = hrefs

algo como

Código: [ 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. });



Algo por el estilo. No he probado que la causa Im en el trabajo. Déjame saber si funciona para ti.
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Mayo 27th, 2011, 9:26 am

Inmediatamente después de esta línea:

Código: [ Select ]
$(document).ready(function(){


y antes de esta línea:

Código: [ Select ]
$("ul.thumb li").hover(function() {


Me gustaría poner algo allí para restablecer todos los estados en el valor predeterminado que desee. La función de lista se activará tan pronto como se carga el documento, que muy probablemente cuando se pulse el botón "Atrás" que se activará de inmediato (ya que todo es más probable que la carga de la memoria caché). Así que cualquier código que poner donde menciona podrían utilizarse para restablecer todo. Su vuelo estacionario y haga clic en única función fuego cuando los eventos suceden, pero si pones algo de código fuera de las funciones que se incendio una vez que el navegador carga, y sólo una vez.

Por lo que sólo puede poner esto existe:

Código: [ 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. });


He cambiado de animar a la CSS para conseguir que suceda al instante también.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Mayo 27th, 2011, 9:49 am

En realidad, pensándolo bien lo que podría funcionar mejor es utilizar la función de descarga, asegurándose de que pase a través de cada enlace:

Código: [ 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. });


Así que esta se activará una vez que la página trata de cambiar, que se produce justo después de que alguien hace clic en uno de esos enlaces.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de Usuario
  • Registrado: Dic 20, 2002
  • Mensajes: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Nota Mayo 27th, 2011, 10:13 am

Después de más investigación sobre por qué este problema era aún sucediendo, le corresponde al hecho de que la mayoría de los navegadores no activan el proceso de carga cuando se pulse el botón "atrás" los navegadores, excepto IE.

Así que con eso dijo todo lo que tienes que hacer para forzar el proceso de carga a pasar en todos los navegadores es añadir esta pieza de código jQuery:

Código: [ 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.   });


Para aquellos que no utilizan jQuery también puede hacerlo con sólo regulares y Javascript #058;

JAVASCRIPT Código: [ 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>



Aunque el código no realmente realmente hacer nada, el navegador asume la página es no almacenable en caché si tiene un controlador de onunload. Así que cuando se pulsa el botón de retroceso que se ve obligado a cargar la página que a su vez hará que el evento onload. He probado con el código HTML y este pequeño trozo de código anterior parece solucionar también el problema.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 283 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC