#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    232
    Rep Power
    15

    Question jQuery Window Width Conditional (Resize) Issue


    I'm trying to use a resize function in jQuery (based on the window width) to create different jQuery functionality for links in a list. I need hover functionality only above 768px and click functionality only below 768px -- but it's not working correctly. What am I missing? Am I supposed to be canceling out functions? Thank you for your help.
    Code:
    jQuery(document).ready(function() {
        function checkWidth() {
            if (jQuery(window).width() >= 768) {
                // HOVER FUNCTIONALITY ONLY FOR SCREENS 768 AND OVER
                jQuery(".projectList li a").hover(function() {
                    var href = jQuery(this).attr('href');
                    jQuery(href).show();
                }, function() {
                    var href = jQuery(this).attr('href');
                    jQuery(href).hide();
                });
                jQuery(".projectList li a").click(function(e) {
                    e.preventDefault();
                });
            } else {
                // CLICK FUNCTIONALITY ONLY FOR SCREENS UNDER 768
                jQuery(".projectList li a").click(function(e) {
                    alert("small");
                    e.preventDefault();
                });
            }
        }
        checkWidth();
        jQuery(window).resize(checkWidth);
    });
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,884
    Rep Power
    9646
    It's true, you are adding tons of event handlers when the window gets resized.

    Instead of conditionally adding the handlers, add them regardless. The width check should be inside them to decide whether they act.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2004
    Posts
    232
    Rep Power
    15
    And keep the handlers in the checkWidth() function like it is now?

    Code:
    function checkWidth() {
    	jQuery(".projectList li a").hover(function() {
    		if (jQuery(window).width() >= 768) {
    			var href = jQuery(this).attr('href');
    			jQuery(href).show();
    		}
    	}, function() {
    		if (jQuery(window).width() >= 768) {
    			var href = jQuery(this).attr('href');
    			jQuery(href).hide();
    		}
    	});
    	jQuery(".projectList li a").click(function(e) {
    		if (jQuery(window).width() >= 768) {
    			e.preventDefault();
    		} else {
    			jQuery(".projectList li a").removeClass("active");
    			jQuery(".projectList li .project").appendTo(".projectDetail");
    			jQuery(this).addClass("active");
    			var href = jQuery(this).attr('href');
    			jQuery(href).appendTo(jQuery(this).parent());
    			e.preventDefault();
    		}
    	});
    }
    Last edited by msmith29063; July 13th, 2018 at 02:31 AM.
  6. #4
  7. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,884
    Rep Power
    9646
    Does it work? If not, how is it not working correctly?

IMN logo majestic logo threadwatch logo seochat tools logo