Develop Reference

Using CSS-Element-Queries Library to simulate CSS's media queries

I used this seemingly fancy CSS-Element-Queries tool for some basic element manipulations that will be started every time a window is resized.
Briefly, I wanted to change the value of an element's attribute based on current window width i.e. every time when the window is somehow resized I want to check its width and subsequently do something with a certain element.
I did everything like it is in the tutorial but something must be wrong since it is not working at all. Here is the code:
<script src="css-element-queries/src/ResizeSensor.js"></script>
<script src="css-element-queries/src/ElementQueries.js"></script>
<script>
new ResizeSensor(jQuery(window), function(){
var a = $(window).width();
if (a < 1024 && a > 768) {
$(".slideshow").attr("data-cycle-carousel-visible", 4);
}
if (a <= 768 && a > 480) {
$(".slideshow").attr("data-cycle-carousel-visible", 3);
}
if ((a <= 480) && (a > 320)) {
$(".slideshow").attr("data-cycle-carousel-visible", 2);
}
if (a <= 320) {
$(".slideshow").attr("data-cycle-carousel-visible", 1);
}
});
</script>

You need to be watching for the window resize, and then call your resizer function on resize.
//watch for resize
$( window ).resize(function() {
//call function each time window is resized
resizr();
});
var resizr = new ResizeSensor(jQuery(window), function(){
var a = $(window).width();
if (a < 1024 && a > 768) {
$(".slideshow").attr("data-cycle-carousel-visible", 4);
}
if (a <= 768 && a > 480) {
$(".slideshow").attr("data-cycle-carousel-visible", 3);
}
if ((a <= 480) && (a > 320)) {
$(".slideshow").attr("data-cycle-carousel-visible", 2);
}
if (a <= 320) {
$(".slideshow").attr("data-cycle-carousel-visible", 1);
}
});

Only execute JS if the screen size is more than 1024px?

I have a sidebar that becomes position:fixed when the bottom of the div is visible (followed this tutorial). My problem is I only need the JS to work if the screen size is more than or equal to 1025px.
I know I need something along the lines of if($(window).width() > 1025), but I can't figure out where that needs to be. I'm not great with JS so any help would be appreciated.
Demo
JS
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 100;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, add the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top',footerTop-height-y-gap+'px');
}
else
{
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top','315px');
}
});
}
}

This should work:
var flag = false;
// This will keep on checking for window size while you are scrolling.
$(window).on("scroll", function() {
if (flag){
// Do whatever you want here
alert("hey");
}
});
$(window).on("resize", function() {
if ($(window).width() >= 1025){
flag = true;
} else {
flag = false;
}
})

From my comment: Just put that if($(window).width() > 1025) inside the function provided to the scroll event.
e.g.
$(window).scroll(function (event) {
if ($(window).width() > 1024) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y + winHeight >= top + height + gap && y + winHeight <= footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight - height - gap + 'px');
} else if (y + winHeight > footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop - height - y - gap + 'px');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/3w5dt/31/
Notes:
not that 1 PX matters, but you did say > 1024px, hence changing 1025 to 1024 :)

First of all you should have a look at the jQuery documentation. The $.browser function was removed in jQuery 1.9. This can end up in serious problems in your code.
Just add something like the follwing code in the first if condition:
if (!msie6 && $('.leftsidebar').offset()!=null && $(window).width() > 1025 ) {
...
}
That should be all. If you want, that javascript should react on window resize just add something like the following
$(window).on('resize', function( event ) { /* code here */ }).trigger('resize');

if(screen.width >= 1024)
{
$(window).scroll(function (event) {
//Write your function code here
});
}
I hope it will help you.

jQuery function on resize and on load without copy/pasting

I have the following piece of jQuery that checks the width of the browser on load, and runs accordingly. But to make sure the div keeps the right size when the browser-width is changed, I have placed the same piece of code in $(window).resize(function() {..});.
This seems very weird and unnecessary, so I'm wondering how I can place the code only once and have it run on both .resize and on load.
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
});

You can trigger the event after binding the event:
$(window).resize(function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}).resize();//resize to trigger on load
Working Demo

Just store the function in a variable and execute it everytime you want to:
$(window).load(function() {
wFunc();
});
$(window).resize(function() {
wFunc();
});
var wFunc = function() {
var windowWidth = $(window).width();
if(windowWidth > 768 && windowWidth < 1223){
$('.banner_image').show();
$('.banner_image').height($('.banner .span3').height());
$('.banner .span12 img').hide();
}
else {
$('.banner_image').hide();
$('.banner .span12 img').show();
}
}

Menu-bar in responsive design disappears

I am working on a responsive design template where the horizontal menu-bar will convert into an icon to save space. Basically I have created 3 media queries, i.e. > 800px, betweeen 500 to 800px and less than 500px.
.
It is working fine, but when the windowWidth of the screen reaches the range of 484px to 500px, the menu-bar just disappears! You can go to the link to view the test page : http://www.acetraining.com.sg/responsive1/
// JavaScript Document
var windowSize = "";
var windowWidth = 0;
var actualSize = 0;
$(document).ready(function (e) {
checkBrowserSize();
setInterval("checkBrowserSize()", 100);
$("a.mobile_menu").on("click", function () {
var navHeight = $("nav").height();//finding current height of navigation
var newNavHeight = $("nav div").height();
//mobile screen
if (navHeight == 0) {
$("nav").animate({"height": newNavHeight + "px"}, 500);
$(this).addClass("selected");
}
//retract back to 0
else {
$("nav").animate({"height": "0px"}, 500);
$(this).removeClass("selected");
}
});
});
function checkBrowserSize() {
windowWidth = window.outerWidth;
var contentWidth = $("body").width();
var sizeDiff = windowWidth - contentWidth;//size of scrollbar
actualSize = windowWidth - sizeDiff;
if (actualSize > 800) {
newWindowSize = "large";
}
if (actualSize <= 800 && actualSize > 500) {
newWindowSize = "medium";
}
if (actualSize <= 500) {
newWindowSize = "small";
}
//display out
$("h1").html(windowWidth + "(" + contentWidth + "(contentWidth) + " + sizeDiff + "(sizeDiff)) is " + newWindowSize);
if (windowSize != newWindowSize) {
windowSize = newWindowSize;
//invoke changeNav
changeNav();
}
else {
//append the word no change
$("h1").append("--no change--");
}
}//end of checkBrowserSize()
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}//end of changeNav()
I suspect the problem lies in my javascript file. I have attached the codes for your perusal:
I am hoping there is a way to show the menus between these ranges.

The media query in screen_layout_large.css css file is hiding the mobile menu. Either edit the media query to give a min-width or show the mobile menu as follows in changeNav function.
function changeNav() {
if (windowSize == "large") {
$("nav").css("height", "auto");
}
else if (windowSize == "medium") {
$("nav").css("height", "auto");
}
else if (windowSize == "small") {
$("nav").css("height", "0px");
$("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile menu when you resize to small
}
}

JQuery/Javascript and the use of && operators

I'm trying to get a simple conditional statement to work, and running into problems. The failing code:
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth > 321) && (wwidth < 481) {
alert("I am between 320 and 480 pixels wide")
}
});
If I remove the else if part of the code, I get the alert. If I try to use && or || operators it will fail. I've Googled, I can't find a reason why it's not working. I've also tried:
((wwidth > 321 && wwidth < 481))
along with other ways, just in case it's some odd syntax thing.
Any help would be greatly appreciated. Thanks :)

((wwidth > 321) && (wwidth < 481))
This is the condition you need (http://jsfiddle.net/malet/wLrpt/).
I would also consider making your conditions clearer like so:
if (wwidth <= 320) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if ((wwidth > 320) && (wwidth <= 480)) {
alert("I am between 320 and 480 pixels wide")
}

if (wwidth > 321 && wwidth < 481) {
//do something
}

There are two issues. The first has already been answered, the second is "wwidth > 320" which should be "wwidth>=320". What if the window is larger than 480?
you can also implement "between" as follows:
Number.prototype.between = function(a, b) {
return this >= a && this <= b
}
$(document).ready(function(){
var wwidth = $(window).width();
if (wwidth < 321) {
alert("I am 320 pixels wide, or less");
window.scrollTo(0,0);
} else if (wwidth.between(321,481))
alert("I am between 320 and 480 pixels wide")
else alert("I am greater than 480 pixels wide.");
});