jquery produce problemas de margen solo en Safari

2 minutos de lectura

avatar de usuario
jonathan garner

El uso de un caroufredsel receptivo funciona de maravilla en Chrome y Firefox, pero en Safari de repente produce márgenes superior e inferior de 800px, tirando todo por la borda.

Es un sitio receptivo y, curiosamente, el problema no ocurre cuando se ve influenciado por la consulta de medios para pantallas de 500 px de ancho o menos.

El sitio es una compilación personalizada de wordpress, que espera en un servidor para que se asigne el dominio cuando todo esté listo para funcionar.

página en vivo:

http://109.203.120.0/~wirebird/wordpress/the-guitars/

los versión html estática funciona bien, entonces, ¿es un problema de wordpress o el hecho de que aún no está usando un dominio verdadero?

jquery para disparar caroufredsel a continuación:

jQuery(document).ready(function() {

jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });   

});

function doSomething() {

jQuery('#guitars-gallery').trigger('destroy', true);
jQuery('#guitars-gallery').css({'text-align': '','float': '','position': '','top': '','right': '','bottom': '','left': '','width': '90%','height': '','margin': '1% auto'});

jQuery("#guitars-gallery").carouFredSel({
auto: false,
circular: false,
prev: '#prev',
next: '#next',
responsive : true,
height : 500,
scroll: 1,
items : { width : 370, height : 500, visible : { min : 1, max : 3 } } });

};

var resizeTimer;

jQuery(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(doSomething, 100);
});

Cualquier idea es bienvenida, ¡me está volviendo loco!

ACTUALIZACIÓN: he resuelto esto por ahora usando jquery para cambiar el estilo después de llamar al carrusel:

jQuery('.caroufredsel_wrapper').css({'margin-top': '0px', 'margin-bottom': '0px'});

Soluciona el problema, pero todavía no sé por qué estaba sucediendo 🙂

  • Pensé que el selector para jQuery era $no jQuery

    – Fuego azul

    24 de junio de 2012 a las 8:36

  • Uno de sus scripts no se puede cargar y hay muchos lugares donde usó “rem” como unidad.

    – SVS

    24 de junio de 2012 a las 8:47


  • @Bluefire Puedes usar ambos $** o **jQuery** como selector, a fin de evitar conflictos con otros frameworks. Esto dice el manual: **Por defecto, jQuery usa “$” como atajo para “jQuery”mira aquí: docs.jquery.com/Using_jQuery_with_Other_Libraries

    – insertar nombre de usuario aquí

    24 de junio de 2012 a las 9:34


  • Gracias por los comentarios chicos: @SVS Buen lugar en el aparente script que no se estaba cargando. Resulta que el error no era un script descargado, sino que se desencadenó por un error tipográfico de html que se ha corregido. Sin embargo, el principal problema sigue pendiente. Además, rem es una unidad válida que ayuda a evitar escribir reglas que seleccionen elementos anidados para restablecerlos a 1em (css-tricks.com/font-sizing-with-rem)

    –Jonathan Garner

    24 de junio de 2012 a las 10:01


  • no se pudo conectar al host

    – Sam

    10/10/2013 a las 16:56

Verificaría la hoja de estilo de su tema en wordpress para asegurarme de que no tenga estilos en conflicto.

¿Siempre estabas llamando? .caroufredsel_wrapper Opuesto a .wrapper ?

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad