Zeuthenjr Zeuthenjr - 3 months ago 8
CSS Question

A way to determind the window size and turn javascript/jquery code on if true and off if not true

I have been looking around, trying to figure out a way to turn on jquery code like media in css where it's based on the screen size.


I have seen several solutions/questions where they are asking for how to just one-time fire off, this is something I want to turn on as in normal, like make the jquery code available and used above 1024px and not just one time which

if ( $( window ).width() > 1024 )


will do, but I need it to like the media in css.

css example for what I'm thinking of but i would like it for javascript/jquery:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px)" href="style.css" />


I have this jquery code running and I want it to only be activated/turned on and works when the window size is above 1024px and turned off when the window size is below 1024px.


There's nothing wrong with the jquery code I'm just trying to explain my situation, as I can't figure out the keywords, and can't seem to find other questions with an answer.

EDIT:

As answers have been on, is this you want me to use, but it's only firing once it's resized, that's not what I am thinking of as it would be just duplicate.


But I want it to run like normally run, not one-time fire/call each time it's resized.


If i remove the resize and if statement, it's running as it should but i want it to only do that, once the screen size is above 1024px and keep running, is it possible? like with the hasclass("resize") on a certain div, i tried to put it on body, but it didn't quite work out.

$( window ).resize( function ()
{
if ( $( window ).width() > 1024)
{
$( "#main-nav-box" ).click( function ()
{
$( "#main-nav-box" ).removeClass( "in" );
$( "#main-nav-box" ).addClass( "clicked" );
$( "#main-nav-box" ).removeClass( "scrolled" );
$( "#main-nav-box-menu" ).removeClass( "in" );
$( "#main-nav-box-menu" ).addClass( "open" );
$( "#main-nav-box-menu" ).removeClass( "closed" );
$( "#main-nav-box-menu-overlay" ).removeClass( "closed" );
$( "#main-nav-box-menu-overlay" ).removeClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "open" );
setTimeout( function ()
{
$( "#main-nav-box" ).addClass( "in" );
$( "#main-nav-box-menu" ).addClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "in" );
}, 250 );
} );
$( "#main-nav-box-menu-overlay" ).click( function ()
{
if ( $( window ).scrollTop() === 0 )
{
$( "#main-nav" ).removeClass( "in" );
$( "#main-nav" ).removeClass( "scrolled" );
$( "#main-nav" ).addClass( "scrolledtop" );
$( "#main-nav-box" ).removeClass( "in" );
$( "#main-nav-box" ).removeClass( "scrolled" );
$( "#main-nav-box" ).addClass( "scrolledtop" );
$( "#main-nav-box" ).removeClass( "clicked" );
$( "#main-nav-box-menu" ).removeClass( "open" );
$( "#main-nav-box-menu" ).removeClass( "in" );
$( "#main-nav-box-menu" ).addClass( "closed" );
$( "#main-nav-box-menu" ).addClass( "in" );
$( "#main-nav-box-menu-overlay" ).removeClass( "open" );
$( "#main-nav-box-menu-overlay" ).removeClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "closed" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#main-nav-box-menu" ).addClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "in" );
}, 250 );
} else if ( $( window ).scrollTop() > 0 && $( window ).scrollTop() > $( ".jumbotron" ).height() )
{
if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
{
$( "#main-nav" ).removeClass( "in" );
}
if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
{
$( "#main-nav-box" ).removeClass( "in" );
}
if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
{
$( "#scrolltop" ).removeClass( "in" );
}
$( "#main-nav" ).addClass( "scrolled" );
$( "#main-nav" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).addClass( "scrolled" );
$( "#main-nav-box" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).removeClass( "clicked" );
$( "#main-nav-box-menu" ).removeClass( "open" );
$( "#main-nav-box-menu" ).removeClass( "in" );
$( "#main-nav-box-menu" ).addClass( "closed" );
$( "#main-nav-box-menu-overlay" ).removeClass( "open" );
$( "#main-nav-box-menu-overlay" ).removeClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "closed" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#main-nav-box-menu" ).addClass( "in" );
$( "#main-nav-box-menu-overlay" ).addClass( "in" );
}, 250 );
}
} );


if ( $( window ).scrollTop() === 0 || $( window ).scrollTop() < $( ".jumbotron" ).height() )
{
if ( !$( "#main-nav" ).hasClass( "scrolledtop" ) )
{
$( "#main-nav" ).removeClass( "in" );
$( "#main-nav" ).removeClass( "scrolled" );
$( "#main-nav" ).addClass( "scrolledtop" );
}
$( "#main-nav-box" ).removeClass( "in" );
$( "#main-nav-box" ).removeClass( "scrolled" );
$( "#main-nav-box" ).addClass( "scrolledtop" );
$( "#scrolltop" ).removeClass( "in" );
$( "#scrolltop" ).removeClass( "scrolled" );
$( "#scrolltop" ).addClass( "scrolledtop" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#scrolltop" ).addClass( "in" );
}, 250 );
} else if ( $( window ).scrollTop() > 0 && $( window ).scrollTop() > $( ".jumbotron" ).height() )
{
if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
{
$( "#main-nav" ).removeClass( "in" );
}
if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
{
$( "#main-nav-box" ).removeClass( "in" );
}
if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
{
$( "#scrolltop" ).removeClass( "in" );
}
$( "#main-nav" ).addClass( "scrolled" );
$( "#main-nav" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).addClass( "scrolled" );
$( "#main-nav-box" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).removeClass( "clicked" );
$( "#scrolltop" ).addClass( "scrolled" );
$( "#scrolltop" ).removeClass( "scrolledtop" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#scrolltop" ).addClass( "in" );
}, 250 );
}

$( window ).scroll( function ()
{
if ( !$( "#main-nav-box" ).hasClass( "clicked" ) )
{
if ( $( window ).scrollTop() === 0 )
{
if ( !$( "#main-nav" ).hasClass( "scrolledtop" ) )
{
$( "#main-nav" ).removeClass( "in" );
$( "#main-nav" ).removeClass( "scrolled" );
$( "#main-nav" ).addClass( "scrolledtop" );
}
$( "#main-nav-box" ).removeClass( "in" );
$( "#main-nav-box" ).removeClass( "scrolled" );
$( "#main-nav-box" ).addClass( "scrolledtop" );
$( "#scrolltop" ).removeClass( "in" );
$( "#scrolltop" ).removeClass( "scrolled" );
$( "#scrolltop" ).addClass( "scrolledtop" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#scrolltop" ).addClass( "in" );
}, 250 );
} else if ( $( window ).scrollTop() > 0 && $( window ).scrollTop() > $( ".jumbotron" ).height() )
{
if ( !$( "#main-nav" ).hasClass( "scrolled" ) )
{
$( "#main-nav" ).removeClass( "in" );
}
if ( !$( "#main-nav-box" ).hasClass( "scrolled" ) )
{
$( "#main-nav-box" ).removeClass( "in" );
}
if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
{
$( "#scrolltop" ).removeClass( "in" );
}
$( "#main-nav" ).addClass( "scrolled" );
$( "#main-nav" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).addClass( "scrolled" );
$( "#main-nav-box" ).removeClass( "scrolledtop" );
$( "#main-nav-box" ).removeClass( "clicked" );
$( "#scrolltop" ).addClass( "scrolled" );
$( "#scrolltop" ).removeClass( "scrolledtop" );
setTimeout( function ()
{
$( "#main-nav" ).addClass( "in" );
$( "#main-nav-box" ).addClass( "in" );
$( "#scrolltop" ).addClass( "in" );
}, 250 );
}
}
if ( $( window ).scrollTop() === 0 )
{
$( "#scrolltop" ).removeClass( "in" );
$( "#scrolltop" ).removeClass( "scrolled" );
$( "#scrolltop" ).addClass( "scrolledtop" );
setTimeout( function ()
{
$( "#scrolltop" ).addClass( "in" );
}, 250 );
} else if ( $( window ).scrollTop() > 0 && $( window ).scrollTop() > $( ".jumbotron" ).height() )
{
if ( !$( "#scrolltop" ).hasClass( "scrolled" ) )
{
$( "#scrolltop" ).removeClass( "in" );
}
$( "#scrolltop" ).addClass( "scrolled" );
$( "#scrolltop" ).removeClass( "scrolledtop" );
setTimeout( function ()
{
$( "#scrolltop" ).addClass( "in" );
}, 250 );
}
} );
}
} );


EDIT2:

Maybe this would help to understand it better
JSFIDDLE

Answer

Did You tried jQuery $(window).resize(handler) event?

JS Fiddle as example of .resize() here.