0

I have a functioning jQuery code which which I need to run only on devices with viewport larger than 1000px. I am a beginner. I put up this code to run only on the homepage but I can't get it to run for the said viewport. I should probably also mention that I'm using this inside WordPress. I have added the php code inside my functions.php and works as it's supposed except for this bit. If someone could help, thanks.

The code is as follows: jQuery(document).ready(function($){ $(window).on('scroll', function(){

var y = $(window).scrollTop(); if(window.location.pathname == '/'){ if( y > 0 ){ $('#top').fadeIn(); $('#header-space').fadeIn(); } else { $('#top').fadeOut(); $('#header-space').fadeOut(); } } else {} }); });

I made this attempt together with CSS but I failed:

$(document).ready(function() { // run test on initial page load checkSize(); // run test on resize of the window $(window).resize(checkSize); }); //Function to the css rule function checkSize(){ if ($(".sampleClass").css("float") == "none" ){ if(window.location.pathname == '/'){ if( y > 0 ){ $('#top').fadeIn(); $('#header-space').fadeIn(); } else { $('#top').fadeOut(); $('#header-space').fadeOut(); } } else {} } }

MyCSS looks like this: Please don't mind my random class names for now.

.sampleClass {float:left;} @media only screen and (min-width: 1000px){ .sampleClass {float:none;} }

I'm completely stuck now.

Improve this question
1

1 Answer 1

Reset to default
0

Get the width of the window:

 var width = $(window).width();

Then you can play around like:

if (width > 1000) { // dosomething big } else { // stay low }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Hi, I tried this but it's not working unfortunately. jQuery(document).ready(function($){ $(window).on('scroll', function(){ var y = $(window).scrollTop(); var width = $(window).width(); if(window.location.pathname == '/'){ if( width > 1000 && y > 0 ){ $('#top').fadeIn(); $('#header-space').fadeIn(); } else { $('#top').fadeOut(); $('#header-space').fadeOut(); } } else {} }); });