Media Only Query Not Functioning as Intended

Question

I am trying to write some jQuery that responds at the same time as my CSS media only queries.

I have objects that slide onto the web page at a specific scroll point. But in order to keep the objects responsive, I need to change the scroll point using media queries.

Heres the code:

jQuery(window).scroll(function () {

            //media query scroll point @ min 768, max 995

            if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
                if (jQuery(this).scrollTop() > 400) {
                    if (jQuery('.rightSlideB').hasClass('visible') == false) {
                        jQuery('.rightSlideB').stop().animate({
                            right: '0px'
                        }, function () {
                            jQuery('.rightSlideB').addClass('visible')
                        });
                    }
                }
            } //end media query

            //default scroll point

            if (jQuery(this).scrollTop() > 250) {
                if (jQuery('.rightSlideB').hasClass('visible') == false) {
                    jQuery('.rightSlideB').stop().animate({
                        right: '0px'
                    }, function () {
                        jQuery('.rightSlideB').addClass('visible')
                    });
                }
            } //end default scroll point
        }); //end function

The media only screen that my content responds to is this:

@media only screen and (min-width: 768px) and (max-width: 995px) {}

Not only is the jQuery not creating the desired effect, but my code is incredibly inefficient and the main block of:

if (jQuery('.rightSlideB').hasClass('visible') == false) {
                        jQuery('.rightSlideB').stop().animate({
                            right: '0px'
                        }, function () {
                            jQuery('.rightSlideB').addClass('visible')
                        });
                    }

is being repeated. How can I trim that section down because it is being recycled in every media query any way.

EDIT: Should I be placing that repeating block into a function and then call it every time?

What am I missing here? Thank you.

Answer 1

Perhaps you should put the default block to the top (if it fits most situations) to give it a priority. And add an if condition to the default block too that is the opposite of what you do in the media query. Lastly Join them with an if else conditional:

  
 
  
  
 
   
 
    
jQuery(window).scroll(function () {
	if (document.documentElement.clientWidth > 995) {
		if (jQuery(this).scrollTop() > 250) {
			if (jQuery('.rightSlideB').hasClass('visible') === false) {
				jQuery('.rightSlideB').stop().animate({
					right: '0px'
				}, function () {
					jQuery('.rightSlideB').addClass('visible');
				});
			}
		}
	} else if (document.documentElement.clientWidth <= 995 && document.documentElement.clientWidth >= 768) {
		if (jQuery(this).scrollTop() > 400) {
			if (jQuery('.rightSlideB').hasClass('visible') === false) {
				jQuery('.rightSlideB').stop().animate({
					right: '0px'
				}, function () {
					jQuery('.rightSlideB').addClass('visible');
				});
			}
		}
	}
});
 
   
 
  

Answer 2

So here is my final solution.

First I turned that repeating block of code into a function:

$.fn.fromRight = function () {
            if (jQuery('.rightSlideB').hasClass('visible') === false) {
                jQuery('.rightSlideB').stop().animate({
                    right: '0px'
                }, function () {
                    jQuery('.rightSlideB').addClass('visible');
                });
            }
        };

Next, I set up new media queries (according to the most popular mobile devices) and then called the function each time the scroll height needed to be checked:

jQuery(window).scroll(function () {
            if (document.documentElement.clientWidth > 1440) {
                if (jQuery(this).scrollTop() > 250) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1440 && document.documentElement.clientWidth > 1366) {
                if (jQuery(this).scrollTop() > 275) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1366 && document.documentElement.clientWidth > 1280) {
                if (jQuery(this).scrollTop() > 325) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 1280 && document.documentElement.clientWidth > 800) {
                if (jQuery(this).scrollTop() > 400) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 800 && document.documentElement.clientWidth > 768) {
                if (jQuery(this).scrollTop() > 475) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 768 && document.documentElement.clientWidth > 600) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 600 && document.documentElement.clientWidth > 567) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 567 && document.documentElement.clientWidth > 414) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 414 && document.documentElement.clientWidth > 384) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 384 && document.documentElement.clientWidth > 375) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 375 && document.documentElement.clientWidth > 360) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 360 && document.documentElement.clientWidth > 320) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            } else if (document.documentElement.clientWidth <= 320) {
                if (jQuery(this).scrollTop() > 425) {
                    $.fn.fromRight();
                }
            }

        });

Now I just need to scrap my old CSS media queries and follow these new ones. There you have it, responsive web design is so much fun isn't it? ;)