• 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

    • how big is your HDD that only has 100gb left? I take it this the main drive.  Is this a pc or laptop? I ask because changing hdd in pcs are much easier. You sure a good clean/purge of data wouldn't clear up space - have you ran disk cleanup? Which is part of windows..  You can for sure move data to your external drive, install programs to it, etc - but using it to store updates?   
    • How to record screen as GIF in Windows 11 by Taras Buria The Snipping Tool app is already quite a capable program for screenshots and screen recordings. Still, there is always room for improvement, and many users agree that the app needs the ability to save screen recordings as GIFs. Microsoft heard those users, and recent updates introduced the long-requested feature, allowing you to record your screen as a GIF. Here is how to do it. Record screen as a GIF in Windows 11 Note: By the time of publishing this article, GIF support in Snipping Tool is only available to Windows Insiders. However, you can enable that feature on stable Windows 11 releases as well; here is how: Go to store.rg-adguard.net, select ProductID in the first drop-down, paste 9MZ95KL8MR0L into the search box, and select Fast in the last drop-down. Press the checkmark button. Find and download Microsoft.ScreenSketch_2022.2505.21.0_neutral_~_8wekyb3d8bbwe.msixbundle in the list of apps. The version number could be newer, just make sure you are downloading an msixbundle file. Note that the browser will warn you about downloading a potentially harmful file. Open the file and click Update. Download ViveTool from GitHub and unpack the files in a convenient and easy-to-find folder. Run Command Prompt as Administrator and navigate to the folder containing the ViveTool files with the CD command. For example, if you have placed ViveTool in C:\Vive, type CD C:\Vive. Type vivetool /enable /id:47081492 and press Enter. The steps above might seem a bit tedious, but that is the only way to get GIF support in Snipping Tool without enrolling your device in the Windows Insider program. We will update the article once the feature is publicly available, so there is no need to jump through all the hoops just to make it work. Tip: You can always roll back Snippint Tool to the latest version from the Microsoft Store by uninstalling it and downloading it again. Now, with GIF support enabled in Snipping Tool, here is how to save a screen recording as a GIF in Windows 11: Press Win + Shift + S, select screen recording mode and record whatever you want. After the recording is over, Snipping Tool will open your video so that you can view, trim, or save it. At this point, all you have to do is click the GIF button in the upper-right corner. On the next screen, select your GIF quality and click Export to save as a file or Copy to copy it to the clipboard. And that is how you save screen recordings as GIFs in Windows 11. Note that Snipping Tool can only save GIFs for up to 30 seconds. Anything beyond that will be cut off. You might think that Clipchamp, Windows 11's built-in video editor, is a good option when you want to save a screen recording as a GIF. However, it really sucks at that. The video duration is capped at just 15 seconds, which is even worse than the Snipping Tool, and the output resolution is hilariously low. The latter makes it impossible to distinguish any details, and all you get is a blurry, pixelated mess. No, Clipchamp is not a good option for that. If you want to create GIFs that are longer than 30 seconds, a good option is to go with apps like ShareX, which is extremely flexible and customizable (and also free, which makes it one of our favorite must-have apps for Windows 11). Alternatively, you can record a video using the Snipping Tool and then convert it to a GIF using web-based services like Ezgif, another great free utility. Keep in mind that the larger your video resolution and the longer its duration, the bigger the final GIF size. Depending on the settings, GIFs could reach hundreds of megabytes, so you have to set your expectations correctly (and so do the settings, too).
    • I'll give you an example of "the settings problem." As awful as the HP Smart app is, it's magnitudes more useful than Settings when I need to do some deep dive stuff on my HP Officejet.
    • I hate to defend Apple but this marketing and they are only "desperate" to move from #3 to #1 for biggest company in the world.
    • There's very granular stuff in the legacy Control Panel that will probably never be accessible from settings. But that stuff will still be there if you know where to look.
  • Recent Achievements

    • Week One Done
      habso earned a badge
      Week One Done
    • Week One Done
      DXB APPS earned a badge
      Week One Done
    • One Month Later
      DecaffKnight94 earned a badge
      One Month Later
    • Dedicated
      S.P earned a badge
      Dedicated
    • One Month Later
      adxnksd42031 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      661
    2. 2
      ATLien_0
      252
    3. 3
      Michael Scrip
      234
    4. 4
      Steven P.
      151
    5. 5
      +FloatingFatMan
      148
  • Tell a friend

    Love Neowin? Tell a friend!