• 0

Javascript to auto scale webpage


Question

Recommended Posts

  • 0

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

  • 0

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

  • 0

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.

  • 0

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.

  • 0
  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+"%"
});
  • 0
  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.

  • 0
  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>
  • 0

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>
  • 0
  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

  • 0
  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

  • 0

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 ^^

  • 0
  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 :)

  • 0
  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+"%";
});
  • 0
  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

  • 0
  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.

  • 0
  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).

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • they should have just made the cans look like speaker drivers. these are kind of off putting
    • Sounds like a tool is needed to backup drivers from Win Update for older devices. Anyone got a rough idea besides doing a manual backup of driverstore?
    • Stylish Samsung Galaxy S25 Edge gets 20% discount sending it to lowest price by Paul Hill If you’re in the market for a powerful, stylish phone, then you may be interested in the Galaxy S25 Edge, which is now reduced to $969.99, down 20% from the $1,219.99 list price. This is the lowest price that the device has been at on Amazon. You can get the device at this price if you go for the Titanium Icyblue or Titanium Silver editions. These models are the top-end S25 Edge variants with 512GB of storage. While this Samsung device may be about as thick as a pencil, it’s constructed from titanium and uses Corning Gorilla Glass Ceramic 2 on the display. This should ensure durability, despite its thin design. The thickness of this phone is just 5.8mm, and it weighs 163g. Camera capabilities and AI enhancements The Galaxy S25 Edge's camera system is impressive. It has a 200MP main camera with optical image stabilization and a 2x optical quality zoom. This feature magnifies the image using optical mechanisms in the camera lens so that the zoomed image retains its original clarity, detail, and resolution of the scene. On the back, there is also a 12MP ultrawide camera with autofocus and on the front, there’s a 12MP camera. Like many phones coming out now, there are AI-powered camera features such as Night Video, Best Face for group shots, Portrait Selfie, and Gallery Search by description. Notably, there is no dedicated telephoto lens like in the S25+ and S25 Ultra. This is a tradeoff that the company decided to make to achieve its ultrathin design. Telephoto lenses are camera lenses that are designed to make distant objects appear closer and larger in your photos and videos. The absence of this telephoto lens may be a deal breaker for those looking to use this camera for professional shots; otherwise, it’s still very impressive, especially with that 200MP main camera. Performance, display, and integrated AI features The S25 Edge is powered by the Snapdragon 8 Elite chipset, specifically the 3-nanometer Qualcomm SM8750-AB. It has an octa-core CPU (2x4.47 GHz Oryon V Phoenix L + 6x3.53 GHz Oryon V2 Phoenix M) and an Adreno 830 GPU. This model's display is a 6.7-inch QHD+ Dynamic AMOLED 2X with a 120Hz adaptive refresh rate and high brightness. This device has plenty of other AI features too, outside of the camera, including Cross App Action, Audio Eraser for videos, Now Brief/Now Bar for personalized information, and of course, Google Gemini. With 12GB of RAM, the specs on this phone are really very good. It should be capable of doing most tasks you throw at it, including gaming. You may wonder if it will handle games well, given that the thin design means it could overheat. Samsung has already thought about this and included a reconfigured vapor chamber that helps to keep the phone cool. Battery life and charging speed: The main compromise Aside from the removal of the telephoto lens, this phone also has a drawback in terms of battery life. Its 3,900 mAh battery capacity means it’s smaller than many other devices, even compared to budget phones. Another disappointing aspect is the charging, where the wired charging speed is limited to 25W—that’s lower than what you find on very affordable Xiaomi POCO devices. This battery limitation might make this device a bad choice if you’re away from a charger for long periods. One affordable way to mitigate this downside is by carrying a portable charger, but still, it’s ironic that you buy a thin phone to be lighter and then end up carrying a brick-sized charger around with you. You could also just bring your charger and plug it into an outlet. Is the Galaxy S25 Edge the smart buy for you? If you’re someone who wants a sleek, lightweight phone that has a premium build and can easily slice through tasks you throw at it, then the Galaxy S25 Edge is very likely for you. It’s also great for anyone looking for a standout camera that doesn’t need a telephoto lens. However, if you need a device with all-day battery life because you’re going camping or to the middle of nowhere, then you could probably find a better fit with a longer battery life. If this device is for you, check out the links below. Samsung Galaxy S25 Edge (Titanium Icyblue): $969.99 (Amazon US) / MSRP $1,219.99 Samsung Galaxy S25 Edge (Titanium Silver): $969.99 (Amazon US) / MSRP $1,219.99 This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • I got too many apps I use actively. Theres been too often I completely blank on the name of the application and had to manually look through the list for it. Now I'm using Start11 and got my apps sorted in the Start menu by categories so that if I'm looking for Krita i can find it under "Art editors". If MS are going to change it, they should consider making automated categories. Seen some Linux distros do that. But if they do, theres probably gonna be a lot of wrongly categorized apps though, unfortunately.
  • Recent Achievements

    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
    • One Month Later
      gowtham07 earned a badge
      One Month Later
    • Collaborator
      lethalman went up a rank
      Collaborator
  • Popular Contributors

    1. 1
      +primortal
      675
    2. 2
      ATLien_0
      276
    3. 3
      Michael Scrip
      218
    4. 4
      +FloatingFatMan
      166
    5. 5
      Steven P.
      161
  • Tell a friend

    Love Neowin? Tell a friend!