jquery $(window).height() not working as expected

HI

I am trying to create some jquery that will resize an image  to almost full screen, regardless of the window size... but I am having a little trouble...

in my css I have the image set to 100% width, and when the screen is resized, the image is resized correctly and with proportions maintained.. that is until you take it to a screen size where it is taller than the image, which is when I see a gap at the bottom, so in this circumstance I need to stop the heigh changing and make the width change so that less of the image is being shown (I hope this makes sense)


this cannot be done with css alone, so i turned to jquery to assist...

I figure that if I can capture the height of the browser window, and then check if the image height is less than or equal to that, then make the width of the image widen.


eg:

var $minHeight = 500;


 $( window ).resize(function() {
	
		$w = $(window).outerWidth(true);
		$h = $(window).outerHeight(true);
		
		if ($h <= $minHeight) {

                   //some code to adjust the width of the image by x pixels
                }
			
	});

Open in new window



but it turns out that the $(window).height(); function is just returning the height of my image (there is a header and footer fixed to the top and bottom of the page)

so all I am getting is the image height not the window height.... any ideas how I can get around this?

or has anyone got any code that does the function I require?
cycledudeAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kyle HamiltonData ScientistCommented:
$(window).height(); returns the height of the window. $(document).height(); returns the height of your document, and could potentially return the height of your image if your document is as tall as your image.

Hence, are you sure you are reading your code output correctly?

Please post a link to your page so people can trouble shoot.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Posting a sample page with minimal content will allow us to better help you.  There are also js/jquery projects such as supersized http://buildinternet.com/project/supersized/ that have t his figured out.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cycledudeAuthor Commented:
Hi

OK, I have put a sample page up, the structure is pretty much what I am working on

http://your-website.co.uk/ee/jquery-window-height-problem/
0
Introduction to Web Design

Develop a strong foundation and understanding of web design by learning HTML, CSS, and additional tools to help you develop your own website.

cycledudeAuthor Commented:
the windows height is being dictated by the height of the wrap, i think...
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Thank you.  I will come back to this later today.
0
Kyle HamiltonData ScientistCommented:
you can always use:

$h = window.innerHeight

though this may return slightly different values in different browsers, so you may need some additional code to normalize it. It seems there is a bug in the jquery version
0
Kyle HamiltonData ScientistCommented:
the way the above plugin does it is by injecting an element, and measuring that element to get the window dimensions:

#supersized { position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }

they don't use $(window).height(), so that tells you something.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
In chrome for mac, the image looks good as I adjust the browser width.
0
Kyle HamiltonData ScientistCommented:
@padas, He's not manipulating the image at all in this example. the image is only shrinking via CSS. If you resize your browser to a small enough height the window height property is not correct, as  cycledude said.
0
cycledudeAuthor Commented:
i did not get a resolution to this...
0
cycledudeAuthor Commented:
I've requested that this question be closed as follows:

Accepted answer: 0 points for cycledude's comment #a39643878

for the following reason:

problem not solved
0
Kyle HamiltonData ScientistCommented:
This is a working solution:

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28271432.html#a39586121

And this post explains how the plugin that was given as an example does it.

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28271432.html#a39586124

So the problem was solved, the author just didn't like the solution, or wasn't able to implement it, that's a different thing.
0
cycledudeAuthor Commented:
you cant post a` link after i close the question then claim that i had ignored it ?
0
Kyle HamiltonData ScientistCommented:
its not a link. its a reference to a prior post.
0
cycledudeAuthor Commented:
this is a solution to getting a full sized background image, however for my purposes it was not usable due to client requirements.

thanks
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.