Javascript to auto scale webpage

[xendrome]

So, I am looking for some type of Javascript that I can put into an HTML site, which will zoom/stretch the page to take up the full width of the browser window, without losing the fixed width formatting.

 

Any suggestions?

[Seahorsepip Veteran]

  On 23/03/2014 at 14:08, xendrome said:

So if I do this, which I currently have active, it seems like I have to increase the padding to like 800 to get it zoomed out enough, and as I increase the padding, it shifts the whole site over. Seahorsepip, if you can, look at the live site, I have it enabled now.

Remove legacy-browse.js

That code is already in the conditional comment, also make sure to just use 80px padding

[xendrome]

  On 23/03/2014 at 14:25, Seahorsepip said:

Remove legacy-browse.js

That code is already in the conditional comment, also make sure to just use 80px padding

 

Ok take a look now, zoom looks ok, but it's cutting off the left side in Chrome, IE11 looks good.

[Seahorsepip Veteran]

  On 23/03/2014 at 14:31, xendrome said:

Ok take a look now, zoom looks ok, but it's cutting off the left side in Chrome, IE11 looks good.

change:

body {
	width: 748px;
	overflow-x: hidden;
	padding: 0 80px; /* Change 80px to increase/decrease zoom size */
	transform-origin: top left;
        -ms-transform-origin: top left;
}

to:

body {
	width: 748px;
	overflow-x: hidden;
	padding: 0 80px; /* Change 80px to increase/decrease zoom size */
	transform-origin: top left;
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
}

[xendrome]

  On 23/03/2014 at 14:45, Seahorsepip said:

 

change:

 

 

Ok done, IE11 and Chrome look good.. IE8 seems to be uneffected and looks normal. :) Making progress.

And BTW I changed the padding to 300 for now, looks decent and doesn't mess up any font spacing

[Seahorsepip Veteran]

  On 23/03/2014 at 15:08, xendrome said:

Ok done, IE11 and Chrome look good.. IE8 seems to be uneffected and looks normal. :) Making progress.

My bad change lt IE 8 to lt IE9 in that header snippet.

[xendrome]

  On 23/03/2014 at 15:19, Seahorsepip said:

My bad change lt IE 8 to lt IE9 in that header snippet.

<!--[if lt IE 9 ]>

?, I just tried that, no change.

[Seahorsepip Veteran]

  On 23/03/2014 at 15:23, xendrome said:

<!--[if lt IE 9 ]>

?, I just tried that, no change.

 

Weird, try: lte IE8

[xendrome]

I figured it out, I wasn't loading jquery first prior to the IE 9 script.

 

But it does appear to shifting too far right in IE8, if you have IE8 take a look.

 

Also, in IE11, the "Select Department" dropdown at the top left, scales properly, but on Chrome it does not, any ideas on what might fix that, if even possible.

[Seahorsepip Veteran]

  On 23/03/2014 at 20:28, xendrome said:

I figured it out, I wasn't loading jquery first prior to the IE 9 script.

 

But it does appear to shifting too far right in IE8, if you have IE8 take a look.

 

Also, in IE11, the "Select Department" dropdown at the top left, scales properly, but on Chrome it does not, any ideas on what might fix that, if even possible.

In the IE fallback script you can try changing the variable zoom to zoomie this might fix the issue.

[xendrome]

  On 24/03/2014 at 15:59, Seahorsepip said:

In the IE fallback script you can try changing the variable zoom to zoomie this might fix the issue.

 

I think I am just going to display an "upgrade browser" bar across the top once every 24 hours to users that have IE8 or less.

 

Any suggestion on the "Select Department" dropdown at the top left of the homepage? It doesn't scale the dropdown box up in Chrome, but does in IE.