Javascript to auto scale webpage

12,517 · March 22, 2014

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?

2,726 · March 22, 2014

You want fit to width kind of thing?

If you can convert back this bookmarklet present in mozillazine thread:

http://forums.mozillazine.org/viewtopic.php?f=7&t=1980839

Main thread: http://forums.mozillazine.org/viewtopic.php?f=8&t=1939895

12,517 · March 22, 2014

Looks like that is a client-side add-on though? I need something that will basically detect the users resolution/browser window size, and fit the content specifically to that width, a server side script I can put into the HTML.

2,726 · March 22, 2014

Yeah its more like client side... Might be someone more capable like seahorsepip or snaphat arrive to help you out...

1,433 · March 22, 2014

What about CSS3 responsive web design?

No JavaScript required, just uses CSS

Add

<meta name="viewport" content="width=device-width, initial-scale=1">

to the header, and then in the CSS file,

@media screen and (max-width: 320px) {

}

Or can always use Bootstrap 3.0, which uses responsive web design as well

19,560 · March 22, 2014

Yup, use CSS... That's what I use on my sites... like ncc50446 said.

2,549 · March 22, 2014

CSS3 responsive is not what he needs in this case I think he wants it to work like a img element that gets bigger and smaller proportionally :p

$(document).ready(function(){
	zoom = $(window).width()/$("body").width()*100;
	document.body.style.zoom = zoom+"%"
}

This might work, crazy code though.

12,517 · March 22, 2014

So, like example not my site here, but similar issue - http://www.ci.mcminnville.or.us/

That site, if you are on a widescreen monitor, it's a fixed width size. If you press CTRL+ x 4 in your browser (I am on 2560x1440) it is then full screen, without as much empty space on each of the sides.

I'd like something like this to happen automatically depending on the users browser window size. without losing the formatting of the content.

body { zoom: 1.5; }

kind of works, in the HTML, but not in the CSS file, and I don't want to apply it to each and every html file.

2,549 · March 22, 2014

On 22/03/2014 at 20:10, xendrome said:
So, like example not my site here, but similar issue - http://www.ci.mcminnville.or.us/

That site, if you are on a widescreen monitor, it's a fixed width size. If you press CTRL+ x 4 in your browser (I am on 2560x1440) it is then full screen, without as much empty space on each of the sides.

I'd like something like this to happen automatically depending on the users browser window size. without losing the formatting of the content.
body { zoom: 1.5; }
kind of works, in the HTML, but not in the CSS file, and I don't want to apply it to each and every html file.

Tried my code?

I tested following code myself on that site and it works:

$(document).ready(function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
}
$(window).on('resize', function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
});

12,517 · March 22, 2014

On 22/03/2014 at 20:12, Seahorsepip said:

Tried my code?

I tested following code myself on that site and it works:

$(document).ready(function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
}
$(window).on('resize', function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
});

Where do I apply that into? Does that fall between <script></script> tags in the html?

BTW I did try

html {
    zoom: 0.8; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

But that actually cut off like 20% of the top and I couldn't scroll up.

2,549 · March 22, 2014

On 22/03/2014 at 20:19, xendrome said:
Where do I apply that into?

BTW I did try
html {
    zoom: 0.8; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}
But that actually cut off like 20% of the top and I couldn't scroll up.

Make sure that you use the correct element in the code I gave, it could be body but also #wrapper depending on what is the fixed width css element container.

Just put it in a file called something.js

and add these 2 lines to your header in html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="something.js" type="text/javascript"></script>

12,517 · March 22, 2014

Hmm not seeing any change in the formatting. I have

zoom.js in /scripts

$(document).ready(function(){
	zoom = $(window).width()/$("#body").width()*100;
	document.body.style.zoom = zoom+"%"
}
$(window).on('resize', function(){
	zoom = $(window).width()/$("#body").width()*100;
	document.body.style.zoom = zoom+"%"
});

And in index.html in the <head> section

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/zoom.js" type="text/javascript"></script>

12,517 · March 22, 2014

The first part of <body> and lines after it that specify the width

<body bgcolor="#89895d">
<div align="center"> <br/>
	<table width="748" border="0" cellspacing="0" cellpadding="0">
		<tr>
			<td style="width: 240px">

2,549 · March 22, 2014

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

Hmm not seeing any change in the formatting. I have

zoom.js in /scripts

$(document).ready(function(){
	zoom = $(window).width()/$("#body").width()*100;
	document.body.style.zoom = zoom+"%"
}
$(window).on('resize', function(){
	zoom = $(window).width()/$("#body").width()*100;
	document.body.style.zoom = zoom+"%"
});

And in index.html in the <head> section

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/zoom.js" type="text/javascript"></script>

Try just body instead of #body

12,517 · March 22, 2014

On 22/03/2014 at 20:54, Seahorsepip said:
Try just body instead of #body

No go, I do see this when I F12 and look at resources - https://dl.dropboxusercontent.com/u/111413/error.png

2,549 · March 22, 2014

On 22/03/2014 at 21:02, xendrome said:
No go, I do see this when I F12 and look at resourced - https://dl.dropboxusercontent.com/u/111413/error.png

weird that's very odd lemme check

12,517 · March 22, 2014

On 22/03/2014 at 21:06, Seahorsepip said:
weird that's very odd lemme check

k if you need any more code, or want to view the site via a PM just let me know.

2,549 · March 22, 2014

Seems I typed } instead of }); for document ready... try:

$(document).ready(function(){
	zoom = $(window).width()/$("body").width()*100;
	document.body.style.zoom = zoom+"%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body").width()*100;
	document.body.style.zoom = zoom+"%";
});

Tell me if it worked ^^

12,517 · March 22, 2014

On 22/03/2014 at 21:09, Seahorsepip said:

Seems I typed } instead of }); for document ready... try:

$(document).ready(function(){
	zoom = $(window).width()/$("body").width()*100;
	document.body.style.zoom = zoom+"%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body").width()*100;
	document.body.style.zoom = zoom+"%";
});

Same result. Check your PM also :)

2,549 · March 22, 2014

On 22/03/2014 at 21:11, xendrome said:
Same result. Check your PM also :)

Don't see any pm yet :P

12,517 · March 22, 2014

On 22/03/2014 at 21:12, Seahorsepip said:
Don't see any pm yet :p

Check now.

And for those interested, if we find a solution in PM I will post it here also. :)

2,549 · March 22, 2014

On 22/03/2014 at 21:11, xendrome said:
Same result. Check your PM also :)

You made a mistake with jquery in <head>

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

should be:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

// means for http://

And js in your case:

$(document).ready(function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
});

12,517 · March 22, 2014

On 22/03/2014 at 21:15, Seahorsepip said:
You made a mistake with jquery in <head>
<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
should be:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
// means for http://

I downloaded it locally, the version - jquery-1.11.0.min.js and pointed to it in the <head> if that will work ok? also put that in PM just FYI

12,517 · March 22, 2014

On 22/03/2014 at 21:15, Seahorsepip said:

And js in your case:

$(document).ready(function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
});

Ok this is working, Chrome, it's edge to edge, but can you load the live site now in IE 11, it's pushing the content to the far right. And BTW I just scaled it down to *75 instead of *100

Edit: Also IE8 same issue.

2,549 · March 22, 2014

On 22/03/2014 at 21:21, xendrome said:
Ok this is working, Chrome, it's edge to edge, but can you load the live site now in IE 11, it's pushing the content to the far right. And BTW I just scaled it down to *75 instead of *100

Yeah IE is a acting like a bad boy again...

Fix:

css:

body {
	overflow-x: hidden;
}

additional js file called iefix.js

function detectIE() {
	var ua = window.navigator.userAgent;
	var msie = ua.indexOf('MSIE ');
	var trident = ua.indexOf('Trident/');
	if (msie > 0) {
		return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
	}
	if (trident > 0) {
		var rv = ua.indexOf('rv:');
		return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
	}
}
$(document).ready(function(){
	if(detectIE()){
		fix = $(window).width()/$("body table tbody").width()*75/2;
		$("body").css("margin-left","-"+fix+"%");
	}
});
$(window).on('resize', function(){
	if(detectIE()){
		fix = $(window).width()/$("body table tbody").width()*75/2;
		$("body").css("margin-left","-"+fix+"%");
	}
});

Let's see if that works

Edit: Changed px to % in code

Edit2: added "-"+

Edit3: changed ,, to , just a typo

Should work now(just tested).

9,965 · March 22, 2014

I don't understand what you're trying to do here or why you're applying a crazy hack like that in IE (especially on IE 11!). Clearly you're doing something wrong if you think that is necessary...

Sign In

Javascript to auto scale webpage

Question

xendrome

Link to comment

Share on other sites

60 answers to this question

Recommended Posts

+Zlip792 MVC

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

+Zlip792 MVC

Link to comment

Share on other sites

ncc50446

Link to comment

Share on other sites

TAZMINATOR

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

xendrome

Link to comment

Share on other sites

Seahorsepip Veteran

Link to comment

Share on other sites