Develop Reference

Trigger a full height container when a minimum window width is reached

I am trying to implement a full height slideshow on my website. However, I would like the slideshow to be full height if the browser width is more than 767px.
This is my code so far:
if( $(window).width() > 767) {
$(window).resize(function() {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
});
$(window).trigger('resize');
}
It kinda works if I the browser starts on a width greater than 767. However. If if the browser starts on a width less than 767 and I start resizing more than 767, the script does not starts.
Any ideas how I could fix this?

The resize event handler is bound when your browser starts up only when width > 767, try removing the if condition and it should work fine
EDIT:
To make it apply only when it's width is > 767, the condition should be inside the resize event
$(window).resize(function() {
if($(window).width() > 767) {
var winHeight = $(window).height();
var headerHeight = $(".navbar").height();
$('.slideshow, .slideshow li').height(winHeight);
} else {
$('.slideshow, .slideshow li').height(400); //initial height
}
});
$(window).trigger('resize');

You should be able to do this much more easily in css with a media query.
#media (min-width:500px){
.slideshow{
height:100%;
}
}

How can I show a fixed after scroll but hide it if the screen is smaller than

I am trying to add a fixed div on the top after the user scrolls down but how can I hide that same div if the resized window is smaller than 768px and show it back again if the window is bigger than 769px?
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$('.js-quick-navbar').show();
} else if($(this).width() < 768) {
$('.js-quick-navbar').hide();
}
});
jsFiddle

If it's just a matter of showing or hiding a div based on the window width, then you could use Media queries.
#media (max-width:768px){
.quick-navbar {
display:none;
}
}
}
http://jsfiddle.net/daveSalomon/qefoLdwa/7/
However, if you need to support browsers which don't support CSS media queries (yuck!), then you could use jQuery, and listen on window.resize.
It's worth looking into throttling, and also optimising the following. For example, .show() will be called regardless of whether or not it is necessary. It'll also fire an event for every px the window is resized - you really want to batch them together and action it every x seconds. (Great post: http://benalman.com/projects/jquery-throttle-debounce-plugin/)
$(window).resize(function(){
var w = $(this).width();
if(w > 768){
$('.quick-navbar').show();
} else {
$('.quick-navbar').hide();
}
});
http://jsfiddle.net/daveSalomon/qefoLdwa/8/
Missed the scroll part - apologies.
$(window).scroll(function(){ ... });
if(w > 768 && $(window).scrollTop() > 200){ ... }
http://jsfiddle.net/daveSalomon/qefoLdwa/9/

CSS
.hidden {
display: hidden;
}
.visible {
display: block;
}
#media (max-width:768px){
.js-quick-navbar {
display:none !important; // Added important since we may have the .visible class attached to it at times
}
}
}
JS
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 400) {
$('.js-quick-navbar').addClass('visible');
} else if($(this).width() < 768) {
$('.js-quick-navbar').addClass('hidden');
}
});

add a responsive condition to a scroll function

I use a simple script for a sticky nav header but I Wonder to know how can I add a condition for smaller screen. So here is the script:
$(document).ready(function() {
var aboveHeight = $('#top_menu').outerHeight();
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('.menu').addClass('fixed').css('top','0').next().css('padding-top','100px');
}
else {
$('.menu').removeClass('fixed').next().css('padding-top','30px');
}
});
});
I'd like to change the value of the addClass padding-top (on the 5th line) from 100px to 30px for screen smaller then 600px width. Something like:
if (window.width <= 600)
Hope you understand my request caus my English is not very good :p Thank you all in advance for any help.

You can store and set the padding-top value based on the window.innerWidth value like below:
$(document).ready(function() {
var aboveHeight = $('#top_menu').outerHeight(),
windowWidth = window.innerWidth,
menuPaddingTop = '100px';
// Add additional statements to this if needed
if (windowWidth <= 600) {
menuPaddingTop = '30px';
}
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('.menu').addClass('fixed').css('top','0').next().css('padding-top', menuPaddingTop);
}
else {
$('.menu').removeClass('fixed').next().css('padding-top','30px');
}
});
});

jquery body css overflow-x not work

I want make a screen width judge, when screen width is bigger than 1024px, the body scroll bar will hidden, else when screen width is smaller than 1024px the body scroll bar will show its scroll.
See code in
http://jsfiddle.net/xmJzU/ (overflow-x)
http://jsfiddle.net/xmJzU/1/ (overflowX)
And test in
http://jsfiddle.net/xmJzU/show
http://jsfiddle.net/xmJzU/1/show
However when I dragged my browser edge, adjuce screen width smaller than 1024px, there have no scroll bar appear. Thanks.

It works, you just need to also declare the width variable inside your resize handler as the global variable is not in its' scope.
jQuery(document).ready(function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
$(window).bind('resize', function() {
var width = $(window).width();
if (width < 1025) {
$('body').css('overflow-x', 'scroll');
} else {
$('body').css('overflow-x', 'hidden');
}
});
});
Example fiddle
An alternative method to using javascript for this is to use CSS3 Media Queries, but obviously this is dependant on the min-browser spec requirements you have.

Try using this css:
body {
width:100%;
min-width:200px;
overflow-x:hidden;
}

Scrollpane on the bottom, css is hacky, javascript is hard

I want to put a bar on the bottom of my page containing a varying number of pictures, which (if wider than the page) can be scrolled left and right.
The page width is varying, and I want the pane to be 100% in width.
I was trying to do a trick by letting the middle div overflow and animate it's position with jquery.animate().
Like this:
Here is a fiddle without the js: http://jsfiddle.net/SoonDead/DdPtv/7/
The problems are:
without declaring a large width to the items holder it will not overflow horizontally but vertically. Is this a good hack? (see the width: 9000px in the fiddle)
I only want to scroll the middle pane if it makes sense. For this I need to calculate the width of the overflowing items box (which should be the sum of the items' width inside), and the container of it with the overflow: hidden attribute. (this should be the width of the browser window minus the left and right buttons).
Is there a way to calculate the length of something in js without counting all of it's childrens length manually and sum it up?
Is there a way to get the width of the browser window? Is there a way to get a callback when the window is resized? I need to correct the panes position if the window suddenly widens (and the items are in a position that should not be allowed)
Since the window's width can vary I need to calculate on the fly if I can scroll left or right.
Can you help me with the javascript?
UPDATE: I have a followup question for this one: Scroll a div vertically to a desired position using jQuery Please help me solve that one too.

Use white-space:nowrap on the item container and display:inline or display:inline-block to prevent the items from wrapping and to not need to calculate or set an explicit width.
Edit:: Here's a live working demo: http://jsfiddle.net/vhvzq/2/
HTML
<div class="hscroll">
<ol>
<li>...</li>
<li>...</li>
</ol>
<button class="left"><</button>
<button class="right">></button>
</div>
CSS
.hscroll { white-space:nowrap; position:relative }
.hscroll ol { overflow:hidden; margin:0; padding:0 }
.hscroll li { list-style-type:none; display:inline-block; vertical-align:middle }
.hscroll button { position:absolute; height:100%; top:0; width:2em }
.hscroll .left { left:0 }
.hscroll .right { right:0 }
JavaScript (using jQuery)
$('.hscroll').each(function(){
var $this = $(this);
var scroller = $this.find('ol')[0];
var timer,offset=15;
function scrollLeft(){ scroller.scrollLeft -= offset; }
function scrollRight(){ scroller.scrollLeft += offset; }
function clearTimer(){ clearInterval(timer); }
$this.find('.left').click(scrollLeft).mousedown(function(){
timer = setInterval(scrollLeft,20);
}).mouseup(clearTimer);
$this.find('.right').click(scrollRight).mousedown(function(){
timer = setInterval(scrollRight,20);
}).mouseup(clearTimer);
});

Thanks Phrogz for this part -- give the image container the white-space: nowrap; and display: inline-block;.
You can calculate the width without having to calculate the width of the children every time but you will need to calculate the width of the children once.
//global variables
var currentWidth = 0;
var slideDistance = 0;
var totalSize = 0;
var dispWidth = (winWidth / 2); //this should get you the middle of the page -- see below
var spacing = 6; //padding or margins around the image element
$(Document).Ready(function() {
$("#Gallery li").each(function () {
totalSize = totalSize + parseFloat($(this).children().attr("width"));// my images are wrapped in a list so I parse each li and get it's child
});
totalSpacing = (($("#Gallery li").siblings().length - 1) * spacing); //handles the margins between pictures
currentWidth = (parseFloat($("#Gallery li.pictureSelected").children().attr("width")) + spacing);
maxLeftScroll = (dispWidth - (totalSize + totalSpacing)); //determines how far left you can scroll
});
function NextImage() {
currentWidth = currentWidth + (parseFloat($("#Gallery li.pictureSelected").next().children().attr("width")) + spacing); //gets the current width plus the width of the next image plus spacing.
slideDistance = (dispWidth - currentWidth)
$("#Gallery").animate({ left: slideDistance }, 700);
}
There is a way to get the browser window with in javascript (jQuery example).
and there is a way to catch the resize event.
var winWidth = $(window).width()
if (winWidth == null) {
winWidth = 50;
}
$(window).resize(function () {
var winNewWidth = $(window).width();
if (winWidth != winNewWidth) {
window.clearTimeout(timerID);
timerID = window.setInterval(function () { resizeWindow(false); }, 100);
}
winWidth = winNewWidth;
});
On my gallery there's actually quite a bit more but this should get you pointed in the right direction.

You need to change your #items from
#items
{
float: left;
background: yellow;
width: 9000px;
}
to
#items {
background: yellow;
}
Then calculate the width very easily with jQuery
// #items width is calculated as the number of child .item elements multiplied by their outerWidth (width+padding+border)
$("#items").width(
$(".item").length * $(".item").outerWidth()
);
and simply declare click events for the #left and #right elements
$("#left").click(function() {
$("#middle").animate({
scrollLeft: "-=50px"
}, 'fast');
});
$("#right").click(function() {
$("#middle").animate({
scrollLeft: "+=50px"
}, 'fast');
});
jsFiddle link here
EDIT
I overlooked that detail about the varying image widths. Here is the correct way to calculate the total width
var totalWidth = 0;
$(".item").each(function(index, value) {
totalWidth += $(value).outerWidth();
});
$("#items").width(totalWidth);