Running script based on screen size

Question

I am trying to run a script only when the screen size is greater than 750px, if it's not then the script does not run. I've tried writing some code to do this, but it only works on page refresh. For example, my script makes my side panel (.link-panel) stop when it reaches the (.footer). When I put my screen size code, it works when I resize the screen down to 750px, but when I resize back up the script does not work properly and requires page refresh to work again.

jQuery (1st solution)

if ($(window).width() >= 750) {
    var windw = this;
    $.fn.followTo = function(elem) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top + -40,
            thisHeight = $this.outerHeight(),
            setPosition = function() {
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 60
                    });
                }
            };
        $window.resize(function() {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };

    $('.cover').followTo('.footer');

}

jQuery second solution

if ($(".link-panel").css("float") == "left") {
    var windw = this;
    $.fn.followTo = function(elem) {
        var $this = this,
            $window = $(windw),
            $bumper = $(elem),
            bumperPos = $bumper.offset().top + -40,
            thisHeight = $this.outerHeight(),
            setPosition = function() {
                if ($window.scrollTop() > (bumperPos - thisHeight)) {
                    $this.css({
                        position: 'absolute',
                        top: (bumperPos - thisHeight)
                    });
                } else {
                    $this.css({
                        position: 'fixed',
                        top: 60
                    });
                }
            };
        $window.resize(function() {
            bumperPos = pos.offset().top;
            thisHeight = $this.outerHeight();
            setPosition();
        });
        $window.scroll(setPosition);
        setPosition();
    };

    $('.cover').followTo('.footer');

}

My second solution only runs the script when my float property on .link-panel is left. My float: left property is removed in a media query when the page is 750px. This solution works only on page refreshes just like the last solution. How can I make it so that if the user resizes from <= 750px to > 750px they don't need to refresh the page in order for the script to work properly?

Action Coding · Accepted Answer · 2016-11-04 01:53:28Z

1

For the second option put the if statement that checks the css property inside the window resize event like:

$(window).resize(function(){    
    if($(".link-panel").css("float") == "left"){
        -- Rest of code here --
    }else{
        -- Other option if check is false --
    }
});

This is (in my opinion) the best way to do what you are trying to do as css media queries can be made very specific when working on a responsive site.

answered Nov 4, 2016 at 1:53

Action Coding

8106 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2896120 Over a year ago

With the resize function, the script only works if the window is resized. If it's not resized, then the script will not run.

Action Coding Over a year ago

Yes it must be run initially. The code I provided is to check on resize. I am answering this part of your question "How can I make it so that if the user resizes from <= 750px to > 750px they don't need to refresh the page in order for the script to work properly?"

user2896120 Over a year ago

How do I make it so that it runs initially? I've tried $(document).ready and inserting some if/else statements in there, but it seems like it only works when you refresh the page

Action Coding Over a year ago

$(function(){ if($(".link-panel").css("float") == "left"){ -- Rest of code here -- }else{ -- Other option if check is false -- } });

mmativ · Accepted Answer · 2016-11-04 01:55:56Z

0

Wrap your code into function and call twice, via $(document).ready() and $( window ).resize(), call your function twice, you need to re check every time window resize event.

i add sample below, check it, try to resize the screen. using full page and back to normal, you can see the width are updating. because your code runs only 1 time.

function mydocwidth(){
  console.log($(document).width());
  //put your code here
}

$(document).ready(function(){
  mydocwidth();
});

$(window).resize(function(){
  mydocwidth();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

edited Nov 4, 2016 at 1:55

answered Nov 4, 2016 at 1:48

mmativ

1,41415 silver badges26 bronze badges

3 Comments

user2896120 Over a year ago

I don't understand what you mean, can you please explain in more detail?

mmativ Over a year ago

check the console output below.

mmativ Over a year ago

by the way, this is for first solution.

Collectives™ on Stack Overflow

Running script based on screen size

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related