How to apply jquery on wider screen resolution only.Please help thanks.

Hi Faisal,

Without knowing exactly what you are trying to do, I would recommend looking into the ".width()" property used on the "window" object.

You can use it to check the dimensions of the screen, eg:

if ( $( window ).width() > 768 ) {

}

Often you will use it with a "resize" function that detects when the viewport has been changed.

$( window ).resize( function() {
  if( $( window ).width() > 768) {

  }
});

There are other ones such as "innerWidth" and "outerWidth". I'd recommend looking them up in the jQuery docs.

Hope this helps.

Rayen, Thank you so much in responding to my query.

What I want to achieve is that I have created an overlay for my images on my site, but I want the overlay to work only in browser width 768px and up, not for smaller resolutions. Now I have tried using your first example and added all the jquery code inside it, but it didn't work.

Now below is my jquery code and it's been added to the js file and jquery in the Dom. How do I make sure that the below code only gets applied on 768px and up.

Thank you very much.

var $overlay = $("<div id='overlay'></div>"); var $image = $("<img>"); var $caption = $("<p></p>");

$overlay.append($image); $overlay.append($caption);

$("body").append($overlay);

$(".photo-gallery a").click(function(){ event.preventDefault();

var imagelocation = $(this).attr("href");

$image.attr("src", imagelocation);

var captionText = $(this).children("img").attr("alt"); $caption.text(captionText);

$overlay.show(); });

$overlay.click(function(){

$(this).hide(); });

Hi Faisal,

I find that these min and max window widths can be tricky to get working. I was working on something similar a while ago that was dependent on the window widths and it took a lot of trial and error to get things running smoothly. It can produce some bizarre behaviour when used incorrectly, especially with display toggling and animations.

A good place to start is by focusing on where the actions or events that trigger the overlay are. You can build the actual overlay outside of the window width condition, but just use the condition to check whether you want certain things to happen or not.

So basically the logic would be:

click on image --> is window.width > 768? --> if yes, then show overlay, if no, then don't show overlay.

The following code should do what you want. I'm not sure what you want to happen if the window is less than 768px, but I've included an else statement that essentially causes nothing to happen when clicking on an image. You can remove that and put in whatever you need.

var $overlay = $("<div id='overlay'></div>");
var $image = $("<img>");
var $caption = $("<p></p>");

$overlay.append($image);
$overlay.append($caption);

$("body").append($overlay);

$(".photo-gallery a").click(function(){ 
    if ( $(window).width() > 768 ) {
        event.preventDefault();

        var imagelocation = $(this).attr("href");
        $image.attr("src", imagelocation);

        var captionText = $(this).children("img").attr("alt");
        $caption.text(captionText);

        $overlay.show();
    } else {
        event.preventDefault();
    }
});

$overlay.click(function(){
    $(this).hide();
});

Hopefully this helps.

Hi Ryan, Thank you so much for your effort and kind reply, I have already launched my site it's live online and that's before I had your reply but I shall take a note for future and try it out, however I made sure that the overlay work in the mobile screen resolution too so was all good at the end.

Would really appreciate your feedback if you have time in having a brief view of my website my first real project and advice if I'm any good in applying for Junior front-end web development or if you suggest I should improve more before diving in that route. I know am asking a bit to much here but I really don't know anyone in this field to ask their opinion. I live in London and my site is www.faisalrahimi.com

In any case thank you for everything.