Quiero que me cargue un código en función del tamaño de la ventana php/jquery

Estoy teniendo problemas con un sticky menu o menu pegajoso, estoy haciendo una web responsive y quiero que ese menu se aplique en todas las medidas salvo en la más pequeña que es la de 400px de ancho.
El tema es que el menu pegajoso es un plugin que llamo mediante una llamada típica de javascript

<script src="<?php bloginfo('template_url') ?>/js/styckyMenu/jquery.headtacular.js"></script>

he estado dándole muchas vueltas y pienso que la solución más factible es poner una condición, que si la ventana es menor de 400px que se cargue la llamada.

Tengo algo así

$(document).ready(
function()
{ 
$(window).resize(
function()
{
if($(this).width<400)
{
$('head').text('<script src="<?php bloginfo('template_url') ?>/js/styckyMenu/jquery.headtacular.js"></script>') 
}
})
})

Esta es la opcion que me parece mas factible, pero no me funciona, si se os ocurre alguna otra posibilidad estoy abierto a mas opciones.

Probablemente haya algun plugin para wordpress que te lo haga todo(es una plantilla de wordpress) pero me gustaria no usar plugins de wordpress(que no quiere decir que pueda usar plugins jquery, como es el caso con el plugin headtacular), prefiero no saturarlo y utilizar simplemente los plugins imprescindibles.

Alguna idea

1 respuesta

Respuesta

Vaya lio tienes, primero comentas que quieres que NO se vea en pantallas menores de 400px, pero luego en el código indicas lo contrario, que se muestre solo en pantallas de MENOS de 400px.

¿En qué quedamos?

Mis soluciones. Olvidate de Jquery, contrólalo por CSS y listo.

Si es para pantallas MAYORES de 400px

@media screen and (max-width:400px) {
.header{display:none !important}
}

Si es para pantallas MENORES de 400px

@media screen and (min-width:400px) {
.header{display:none !important}
}

Pruebalo a ver.
He cogido la clase .header en base al plugin.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas