# Client Browser DIV height change



## vipernet (Aug 23, 2007)

I'm looking for the best solution to change a css height Value according to the clients Resolution. I would like to avoid this with javascript incase someone has it turned off with their browser. Although I wasn't able to find any other solutions. This is what I have been playing with

If the browser height os 800X600 than change DIV Content =height: 195px
If the browser height os 1024X768 than change DIV Content =height: 345px
If the browser height os 1280X800 than change DIV Content =height: 370px
If the browser height os 1280X1024 than change DIV Content =height: 590px
If the browser height os 1680X1050 or higher than change DIV Content =height: 600px

I have this but I think I'm missing something with my script giving errors.

CSS: 

```
#content {height: 600px;}
```
Java script:

```

```
any direction or help would be great

Thanks in advance


----------



## SNewman (Feb 26, 2006)

See http://www.javascriptkit.com/howto/newtech3.shtml. Should help you out some


----------



## tomdkat (May 6, 2006)

vipernet said:


> any direction or help would be great


You could investigate using CSS3 media queries as I mentioned in this thread. 

Other than that, you'll need a script to run somewhere to make the adjustment. JavaScript will run in the local browser. You could possibly use a server side script to generate the DIV height based on the browser window size but you'll need to get that info from the browser in your server-side script, somehow. JavaScript could be used to get that info but then you're back to using JavaScript again. 

CSS3 media queries might be your best bet.

Peace...


----------



## caraewilton (Nov 7, 2007)

Why do you want to adjust the div height? Maybe if you can explain what you are trying to achieve, I can think of a css solution.


----------



## tomdkat (May 6, 2006)

caraewilton said:


> Why do you want to adjust the div height? Maybe if you can explain what you are trying to achieve, I can think of a css solution.


You should read the thread I linked to. We explored the need to adjust the DIV height there. 

Peace...


----------



## caraewilton (Nov 7, 2007)

ahhhh


----------



## tomdkat (May 6, 2006)

If you have any other ideas to solve the problem, please post them since I would like to know another way to do it as well. 

Peace...


----------



## caraewilton (Nov 7, 2007)

something to ponder in my spare time ... it is rather ambitious cause he will need a sticky footer and left bar and a fixed header ......


----------



## vipernet (Aug 23, 2007)

This is the solution I'm going with for now. Seems to works ok for now. Used jQuery to change the DIV height according to client resolutions. I still would like to add something to redirect to a different site if they don't have javascript enables. Also Want to redirect to a new css style if it's a handheld.

*Css*

```
#content {overflow: auto;height: 540px;padding: 11px 0 0 10px;}

#content.smartphones {overflow: auto;height: 290px;padding: 11px 0 0 10px;}

#content.over1024 {overflow: auto;height: 600px;padding: 11px 0 0 10px;}

#content.under699 {overflow: auto;height: 390px;padding: 11px 0 0 10px;}

#content.over600 {overflow: auto;height: 280px;padding: 11px 0 0 10px;}
```
*JavaScript* 
This is a alteration version of :
_ tested with jQuery v1.3+
©2009 CSSLab.cl
free for any use, of course... 
instructions: http://www.csslab.cl/2009/07/22/jquery-browsersizr/_


```
var resizeTimer = null;

jQuery.fn.browserSizr = function(options){
	// default plugin settings
	settings = jQuery.extend({
		containerDiv: '#content',		// value: any HTML tag of #id, default to #container
		debug: 'off', 					// value: on | off, default to 'off'
		smartphones: 'on',				// value: on | off, default to 'off'
		over1024: 'on',				// value: on | off, default to 'on'
		over700: 'on',					// value: on | off, default to 'on'
		under699: 'on',					// value: on | off, default to 'on'
		over600: 'on'					// value: on | off, default to 'off'
	}, options);

	// do you want to debug the browser height?
	var debug = settings.debug;

	$(function(){
		// let's draw the debug window
		if(settings.debug=='on') {
			$('body').append('[SIZE=1]The current browser height is:[/SIZE]
[SIZE=7][/SIZE]
[SIZE=1]The current container class is:[/SIZE]
[SIZE=7][/SIZE]')
		}
	});

	$(window).bind('resize load', function(e) {
		// get browser height
		var browserHeight = $('body').height();

		// search for the layout's container to inject the class'es
		var containerDiv = settings.containerDiv;

		// get de current class of the container an insert it to the debug window
		var containerClass = $(settings.containerDiv).attr('class');

		// filling the debug window with the current browser's height
		if(settings.debug=='on') {
			$('#debug #currentHeight').text(browserHeight+'px');
			if(containerClass == "") {
				$('#debug #currentClass').text('-');
			} else {
				$('#debug #currentClass').text(containerClass);
			};
		};

		// if statements for each resolution
		if(settings.over1024=='on'){
			if(browserHeight>=800) {
				$(containerDiv).removeClass();
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(over1024, 10);
			};
		} else if(settings.over1024=='off') {
			if(browserHeight>=1024) {
				$(containerDiv).removeClass();
			};
		};
		if(settings.smartphones=='on'){
			if(browserHeight<389) {
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(smartphones, 10);
			};
		};
		if(settings.over700=='on'){	
			if(browserHeight>=700 && browserHeight<=799 || browserHeight==799) {
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(over700, 10);
			};
		} else if(settings.over700=='off') {
			if(browserHeight>=700 && browserHeight<=799 || browserHeight==799) {
				$(containerDiv).removeClass();
			};
		};
		
				if(settings.under699=='on'){	
			if(browserHeight>=550 && browserHeight<=699 || browserHeight==699) {
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(under699, 10);
			};
		} else if(settings.over768=='off') {
			if(browserHeight>=550 && browserHeight<=699 || browserHeight==699) {
				$(containerDiv).removeClass();
			};
		};

		

		if(settings.over600=='on'){	
			if(browserHeight>=390 && browserHeight<=549  || browserHeight==549) {
				if (resizeTimer) clearTimeout(resizeTimer);
				resizeTimer = setTimeout(over600, 10);
			};
		};

		function over1024() {
			$(containerDiv).removeClass().addClass('over1024');
		};
		function smartphones() {
			$(containerDiv).removeClass().addClass('smartphones');
		};
		function over700() {
			$(containerDiv).removeClass().addClass('over700');
		};
		function under699() {
			$(containerDiv).removeClass().addClass('under699');
		};		
		function over600() {
			$(containerDiv).removeClass().addClass('over600');
		};

	});

};
```
Default.asp

```

```
Guess I'm still looking to change the Javascript to redirect to a different CSS file if client height = function smartphones. I will post once I figure that part out.

Thanks for all the help so far everyone.


----------



## tomdkat (May 6, 2006)

vipernet said:


> This is the solution I'm going with for now. Seems to works ok for now. Used jQuery to change the DIV height according to client resolutions.


Does this work if scripting is disabled in the browser?



> Guess I'm still looking to change the Javascript to redirect to a different CSS file if client height = function smartphones. I will post once I figure that part out.


JavaScript isn't needed for this, actually. I recently dealt with this situation on a site I worked on and found one of the techniques at A List Apart to work wonderfully! No JavaScript required.

I used the @import technique described there, not the server-side Rewrite rule, which also looks interesting.

I haven't had a chance to try it on many mobile devices (since I only had access to an iPod Touch) but it worked beautifully with the limited testing I was able to do! 

Good luck!

Peace...


----------



## vipernet (Aug 23, 2007)

Oh cool, knew you could do that with printing but not handheld. Thanks bud.

If java script is turned off it won't work, So I will need something to re direct to a default plan look if its turned off.


----------



## tomdkat (May 6, 2006)

There are many CSS2.1 media types and the CSS3 media queries allow for more flexibility.

Peace...


----------



## vipernet (Aug 23, 2007)

Doesnt seem to take effect when I view the page on my blackberry (9700 bold).

I have this:

```
/includes/css/dt08-handheld" rel="stylesheet" type="text/css" media="handheld" />
/includes/css/dt08-print.css" rel="stylesheet" type="text/css" media="print" />
/includes/css/dt08.css" rel="stylesheet" type="text/css" media="screen" />
```


----------



## tomdkat (May 6, 2006)

Use your Blackberry to visit this site:

http://www.htmldog.com/test/handheld.html

That should tell you if the Blackberry supports "@import" and/or inclusion of stylesheets based on the "handheld" media type.

Peace...


----------



## vipernet (Aug 23, 2007)

Cool thanks man,.

It reads :

screen
<link media="screen"... applied.

<style media="screen"...applied.

@import url("whatever.css") screen; applied.

@media screen {... applied.

handheld
<link media="handheld"... not applied.

<style media="handheld"... not applied.

@import url("whatever.css") handheld; not applied.

@media handheld {... not applied.


----------



## tomdkat (May 6, 2006)

Are you using the "built-in" browser on the Blackberry?

Peace...


----------



## vipernet (Aug 23, 2007)

tried to use this page to test it.

http://iphonetester.com/

Doesnt seem to have handheld support


----------



## vipernet (Aug 23, 2007)

Think its just IE


----------



## vipernet (Aug 23, 2007)

tomdkat said:


> Are you using the "built-in" browser on the Blackberry?
> 
> Peace...


I am yes.


----------



## tomdkat (May 6, 2006)

vipernet said:


> tried to use this page to test it.
> 
> http://iphonetester.com/
> 
> Doesnt seem to have handheld support


Yep, but the iPhone DOES support the "screen" media type. I have no idea why the mobile device manufacturers are so diverse in which CSS media types they support or don't.

In my case, even though the "media=handheld" type didn't work on the iPod Touch I tested, the @import technique described in that article at A List Apart still worked, and I'm thinking because of this CSS3 media query rule, which apparently IS supported by Safari on the iOS-based devices:


```
@import url("antiscreen.css") only screen and
(max-device-width:480px);
```
In my case, I needed to use a different font on mobile devices and using the "core.css" file (which imported the other stylesheets) worked beautifully.

Since the default browser on the Blackberry appears to be a poor browser (based on comments I've been reading online), you might want to investigate a server-side solution to serve up a Blackberry centric CSS file if a Blackberry user-agent is received by the server. I believe Opera runs on the Blackberry so those using Opera as their browser on that device will get "media=handheld" support and you can load that stylesheet that way.

Peace...


----------

