jQuery Window Resize while having a .bind click function

Question

I'm repurposing a smooth scrolling to anchor script, and my site is attempting to practice responsive web design. I find myself needing to have the click event only function while the browser width is greater than 900px.

$(function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            stuffHappens;
        });
    }
});

I've also tried using the window .resize function but the results are quite buggy. The final result needs to work on load, and check on browser resize (in case it needs to enable or disable). Suggestions?

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

Duplicate of this answer: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load — Conner, Jul 03 '12 at 02:50
So you want the click event to work only if the window size > 900? — Arun P Johny, Jul 03 '12 at 03:09

score 0 · Answer 1 · answered Jul 03 '12 at 03:39

I think what you are looking for is

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
    </head>
    <body>
        <div class="clickme">Click Me</div>
    </body>
    <script>
        $(document).ready(function(){
            var handler = function(){
                console.log("clicked");
            };
            var $window = $(window);

            var setClickHandler = function(){
                if($window.width() > 900){
                    var registered = false;
                    var events = $(".clickme").data("events");
                    if(events){
                        var handlers = $(".clickme").data("events").click;
                        if(handlers){
                            $.each(handlers, function(index, e){
                                if(e.handler == handler){
                                    registered = true;
                                }
                            });
                        }
                    }
                    if(!registered){
                        $(".clickme").on("click", handler );
                    }
                } else {
                    $(".clickme").off("click", handler );
                }
            };

            setClickHandler();
            $window.on("resize", setClickHandler);
        });
    </script>
</html>

It looks little complicated but this is the best I could come up with.
Here we registers and unregister the handler based on the window width.

Another simple solution is to check the condition within the handler

            $(document).ready(function(){
            var handler = function(){
                if($window.width() > 900){
                    console.log("clicked");
                }
            };
            var $window = $(window);

            $(".clickme").on("click", handler );
        });

Sorry Arun I couldn't get that script to work. But I did find a solution posted by Conner above and placed the full answer I used here. I really appreciate your time in trying to help me solve this though! — Gaiety, Jul 06 '12 at 02:21

score 0 · Answer 2 · edited May 23 '17 at 12:27

Thank you so much @Conner for the link to jQuery resize function doesn't work on page load

Using that code, I was able to whip up this script for smooth scrolling to any article element when clicked but only if the width of the window is greater than 900! Perfect.

onResize = function() {
    if($(window).width() > 900){
        $('article').bind('click',function(event){
            var $myPos = $(this);

            $('html, body').stop().animate({
                scrollLeft: $($myPos).offset().left -0
            }, 500, 'easeInOutExpo');
            event.preventDefault();
        });
    }
    else{
        $('article').unbind('click');
    }
}

jQuery Window Resize while having a .bind click function

2 Answers2