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%;
}
}

window.resize for calculating a box

I have this js code:
$(window).resize(function() {
var formHeight = $(".box-demo").outerHeight() + 40;
$(".box-demo").css("top",-formHeight+"px");
});
When you resize the window. The box-demo is recalculating the height of the form. But now i have a problem with this on mobile devices.
Only when the change width. Then this function must be performed. Now it happened when the document changing the height and width. How can i make this. That is only performed when i changed the width of the document.
Thanks for helping!

There's possibly a better way of doing this, but you could base it on a preset window width value. Only if the width changes should the resizing occur:
var windowWidth;
$(document).ready(function() {
windowWidth = $(window).width();
})
$(window).resize(function() {
if($(this).width() != windowWidth)
{
var formHeight = $(".box-demo").outerHeight() + 40;
$(".box-demo").css("top",-formHeight+"px");
windowWidth = $(this).width();
}
});
Edit: You can also avoid having to append the "px" by using:
$(".box-demo").css({top: -formHeight});
Edit 2: If you want to make it change when only the width has changed, you could also add a height check as well:
var windowHeight;
...
if($(this).width() != windowWidth && $(this).height) == windowHeight)

Extract the the method, and bind it on document ready too.

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;
}

Continuously check page (client) height and change footer height according to that value

At my website, I try to accomplish (with javascript) that the footer height changes if the page height is larger then a specific value (907 pixels, the body height). It also needs to change if the page height changes (so if the viewer changes his client height).
I use jQuery to get the page height, but I need it's continuously checked, and not only when the page loads.
This is the snippet I use:
$(document).ready(function(){
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
Thanks for your help.

I suggest attaching to the resize event of the window using jQuery:
$(document).ready(function(){
$(window).resize(function() {
var windowheight = $(window).height();
if(windowheight >= "907") {
var extrafooterheight = windowheight - 907;
$('#footer').height(40 + extrafooterheight);
$('body').height(907 + extrafooterheight);
}
});
});
Take a look at the jQuery resize() docs.

Dynamic Image Resizing

I have an image on a webpage that needs to be stretched to fit the available space in the window whilst maintaining its proportion. Here's what I've got:
http://www.lammypictures.com/test/
I would like the large image to proportionally stretch to match the height and widths of the browser, minus the size of the divs to the left and bottom.
So the problem is 2 fold really; first i need to get the max height and width minus the link and image bars, secondly i need to resize the image on a browser resize whilst maintaining proportions.
Any help would be much appreciated.
Cheers
CIP

You could try using jQuery ui scaling effect:
$(document).ready(function () {
resizeImage(); // initialize
$(window).resize(function () {
resizeImage(); // initialize again when the window changes
});
function resizeImage() {
var windowHeight = $(window).height() - $('#nav').height(),
windowWidth = $(window).width(),
percentage = 0;
if (windowHeight >= windowWidth) {
percentage = (windowWidth / $('#image').width() ) * 100;
}
else {
percentage = ( windowHeight / $('#image').height() ) * 100;
}
$('#image').effect('scale', { percent : percentage }, 1);
};
});
Tested and works great, however, a few tweaks maybe needed to get it just the way you like it.

You may just not setup the image element width and height attributes, and write next styles:
.hentry img { max-width: 100%; }
And it will shrink relative to the minimum side.
P.S. But not in position: absolute; block which not have any size. Set up the parent block to relative positioning.