Foros del Web » Programando para Internet » Jquery »

Menu Jquery se traba cuando el slider cambia de imagen

 Estas en el tema de Menu Jquery se traba cuando el slider cambia de imagen en el foro de Jquery en Foros del Web. Hola que tal tengo un problema urgente y necesito de su conocimiento, como lo mencione en el titulo tengo un slider fullscreen y un menu ...
  #1 (permalink)  
Antiguo 04/07/2014, 09:42
 
Fecha de Ingreso: julio-2014
Mensajes: 4
Antigüedad: 10 años, 4 meses
Puntos: 0
Pregunta Menu Jquery se traba cuando el slider cambia de imagen
Hola que tal tengo un problema urgente y necesito de su conocimiento, como lo mencione en el titulo tengo un slider fullscreen y un menu jquery que al momento que topa en la parte superior se convierte en flotante (position:fixed), y cuando el slider cambia de imagen y me encuentro haciendo hover a algun elemento del menu se traba hasta que termina la animacion del slider.

Espero haberme explicado bien ojala me pueda ayudar, les dejo mi codigo.

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html><!-- InstanceBegin template="/Templates/Plantilla Oficial.dwt" codeOutsideHTMLIsLocked="false" -->
  3. <head>
  4. <meta charset="utf-8">
  5. <!-- InstanceBeginEditable name="doctitle" -->
  6. <title></title>
  7. <!-- InstanceEndEditable -->
  8. <link rel="stylesheet" type="text/css" href="css/page-style.css" />
  9. <link rel="stylesheet" type="text/css" href="css/header/bgfull.css"/>
  10. <!-- InstanceBeginEditable name="head" -->
  11. <link rel="stylesheet" type="text/css" href="css/wrapper/style.css" />
  12. <!-- InstanceEndEditable -->
  13. </head>
  14. <body>
  15. <div id="slidersuperior">
  16.   <ul id="cbp-bislideshow" class="cbp-bislideshow">
  17.     <li> <img src="img/header/slider/1.jpg" class="imgfull"> </li>
  18.     <li> <img src="img/header/slider/2.jpg" class="imgfull"> </li>
  19.     <li> <img src="img/header/slider/3.jpg" class="imgfull"> </li>
  20.     <li> <img src="img/header/slider/4.jpg" class="imgfull"> </li>
  21.     <li> <img src="img/header/slider/5.jpg" class="imgfull"> </li>
  22.     <li> <img src="img/header/slider/6.jpg" class="imgfull"> </li>
  23.   </ul>
  24. </div>
  25. <header class="topnav">
  26.   <nav>
  27.     <ul>
  28.       <li><a href="">Indicadores</a></li>
  29.       <li><a href="">Directorio</a></li>
  30.       <li><a href="">Asesoria</a></li>
  31.       <li><a href="">Finanzas</a></li>
  32.       <li><a href="">Corporativo</a></li>
  33.       <li><a href="">Normatividad</a></li>
  34.     </ul>
  35.   </nav>
  36.   <a href="#" id="navbtn">Nav Menu</a><img id="logo" src="img/logo-cmc.png" />
  37. </header>
  38. <!-- InstanceBeginEditable name="Resumen" -->
  39. <section class="resumen">
  40.   <div id="resumen">
  41.     <p></p>
  42.   </div>
  43. </section>
  44. <section class="historia">
  45.   <div id="historia">
  46.     <p></p>
  47.   </div>
  48. </section>
  49. <!-- InstanceEndEditable -->
  50.  
  51.  
  52. <!-- LA PAGINA CARGA MAS RAPIDO CON JS AL FINAL -->
  53. <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
  54. <script src="js/header/modernizr.js"></script> 
  55. <script type="text/javascript" src="js/header/loader2.min.js"></script> 
  56. <script type="text/javascript" src="js/header/script.js"></script> 
  57. <script src="js/header/slideshow.js"></script> 
  58. <script>
  59.     $(function() {
  60.         cbpBGSlideshow.init();
  61.     });
  62. </script> 
  63. </body>
  64. <!-- InstanceEnd --></html>

ESTE ES EL CODIGO JAVASCRIPT QUE AFECTA AL MENU
Código Javascript: 
Ver original
  1. $(document).ready(function() {
  2.   var menu = $('header');
  3.   // Cada vez que se haga scroll en la página
  4.   // haremos un chequeo del estado del menú
  5.   // y lo vamos a alternar entre 'fixed' y 'static'.
  6.  
  7.   $(window).on('scroll', function() {
  8.      //alert($(window).scrollTop());
  9.     if($(window).scrollTop() >= 500)
  10.       menu.addClass('menu-fijo');
  11.     else 
  12.       menu.removeClass('menu-fijo');
  13.   });
  14. });
  15.  
  16. $(function(){
  17.   var nb = $('#navbtn');
  18.   var n = $('.topnav nav');
  19.   //Sirve para cuando se cambia de tamaño la pantalla muestre los menus
  20.   $(window).on('resize', function(){  
  21.     if($(this).width() < 500 && n.hasClass('keep-nav-closed')) {
  22.     // si el menú de navegación y el botón de navegación son visibles.
  23.     //volver a ocultar el menú de navegación y retire la clase oculta.
  24.       $('.topnav nav').hide().removeAttr('class');
  25.     }
  26.     if(nb.is(':hidden') && n.is(':hidden') && $(window).width() >= 500) {
  27.       // si el menú de navegación y el botón de navegación son tanto oculta,
  28.       //ejecuta cambios cuando la resolución de la pantalla es de 569px
  29.       $('.topnav nav').show().addClass('keep-nav-closed');
  30.     }
  31.   }); 
  32.   
  33.   $('#navbtn').on('click', function(e){
  34.     e.preventDefault();
  35.     $(".topnav nav").slideToggle(500);
  36.   });
  37.   
  38. });

Y ESTE OTRO AFECTA AL SLIDER

Código Javascript: 
Ver original
  1. // JavaScript Document
  2. var cbpBGSlideshow = (function() {
  3.  
  4. var $slideshow = $( '#cbp-bislideshow' ),
  5.     $items = $slideshow.children( 'li' ),
  6.     itemsCount = $items.length,
  7.     $controls = $( '#cbp-bicontrols' ),
  8.     navigation = {
  9.         $navPrev : $controls.find( 'span.cbp-biprev' ),
  10.         $navNext : $controls.find( 'span.cbp-binext' ),
  11.         $navPlayPause : $controls.find( 'span.cbp-bipause' )
  12.     },
  13.     // current item´s index
  14.     current = 0,
  15.     // timeout
  16.     slideshowtime,
  17.     // true if the slideshow is active
  18.     isSlideshowActive = true,
  19.     // it takes 3.5 seconds to change the background image
  20.     interval = 7000;
  21.  
  22. function init( config ) {
  23.  
  24.     // preload the images
  25.     $slideshow.imagesLoaded( function() {
  26.  
  27.         if( Modernizr.backgroundsize ) {
  28.             $items.each( function() {
  29.                 var $item = $( this );
  30.                 $item.css( 'background-image', 'url(' + $item.find( 'img' ).attr( 'src' ) + ')' );
  31.             } );
  32.         }
  33.         else {
  34.             $slideshow.find( 'img' ).show();
  35.             // for older browsers add fallback here (image size and centering)
  36.         }
  37.         // show first item
  38.         $items.eq( current ).css( 'opacity', 1 );
  39.         // start the slideshow
  40.         startSlideshow();
  41.  
  42.     } );
  43.  
  44. }
  45.  
  46. function navigate( direction ) {
  47.  
  48.     // current item
  49.     var $oldItem = $items.eq( current );
  50.  
  51.     if( direction === 'next' ) {
  52.         current = current < itemsCount - 1 ? ++current : 0;
  53.     }
  54.     else if( direction === 'prev' ) {
  55.         current = current > 0 ? --current : itemsCount - 1;
  56.     }
  57.  
  58.     // new item
  59.     var $newItem = $items.eq( current );
  60.     // show / hide items
  61.     $oldItem.css( 'opacity', 0 );
  62.     $newItem.css( 'opacity', 1 );
  63.  
  64. }
  65.  
  66. function startSlideshow() {
  67.  
  68.     isSlideshowActive = true;
  69.     clearTimeout( slideshowtime );
  70.     slideshowtime = setTimeout( function() {
  71.         navigate( 'next' );
  72.         startSlideshow();
  73.     }, interval );
  74.  
  75. }
  76.  
  77. function stopSlideshow() {
  78.     isSlideshowActive = false;
  79.     clearTimeout( slideshowtime );
  80. }
  81.  
  82. return { init : init };
  83.  
  84. })();

Etiquetas: html, javascript, js, slider, traba
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 07:07.