• 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

    • PicView 3.1.4 by Razvan Serea PicView is a fast, free and fully customizable image viewer for Windows 10 and 11. It supports a vast range of image file types, including WEBP, GIF, SVG, PNG, JXL, HEIC, PSD and many others. Additional features includes viewing EXIF metadata, image compression, batch resizing, viewing images within archives and comic books, image effects, image galleries, and more. Available in portable and installable versions. PicView 3.1.4 changelog: What's new Mouse Side Buttons Customization: You can now change how the mouse side buttons work. Choose to navigate file history or switch between directories. Find this setting under the Mouse tab in the settings window (#199). Improvements Directory Navigation: Improved navigation between directories. If Search subdirectories is enabled, PicView moves to the next directory in the list; if off (or if there are no directories in the list), it navigates as before. PicView now remembers your startup directory (including subdirectories) and restores it on the next launch. Performance: Preloader has been fine-tuned for better performance and lower memory usage. Bug Fixes Fixed incorrect saved settings path when saving in portable mode (#213). Corrected cases where keybindings and file history were not saved when there was no write permission. Restoring the window from a maximized state now correctly keeps its position when auto-fit is enabled. Fixed start-up menu text alignment and missing text issues. Translations Hebrew translation by @Y-PLONI (#212) Hungarian translation by @JohnFowler58 (#209) Japanese update by @coolvitto (#214) Miscellaneous Updated to Avalonia 11.3.1. Now using ZLinq and ZLinq.FileSystem to reduce memory allocation and possibly improve performance. Future versions managed via Scoop will now preserve configuration files (#15555). Experimental settings (not yet available in the UI—edit UserSettings.json directly): Disable the file watcher (not recommended, untested). Choose preload amount and direction (forward/backward). Download: PicView 3.1.4 | Portable ~50.0 MB (Open Source) Download: PicView ARM64 | Portable ARM64 Links: PicView Home Page | Github Project Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • The design looks good on their phones, but I can't say that I like the look of these.
    • AMD preps Ryzen 9600X3D for those who want a taste of the fastest gaming CPU for cheap by Sayan Sen AMD desktop processors are available across two platforms: socket AM4 and socket AM5. Both of these sockets are still going pretty strong, and the company is offering deals and discounts for both as it continues to release new SKUs for its older platform. For example, the company launched an affordable X3D processor for AM4 this month with the new 5500X3D. These gaming CPUs from AMD have been a massive success, as both AM4 and AM5 X3D chips are quite popular among gamers, and for good reason, too. They are fast, very fast. The massive chunk of vertical 3D stacked last-level cache (LLC) Level 3 cache helps these processors a ton in scenarios such as gaming. In our Ryzen 9 9950X3D review, we saw that 300+ frames per second are possible depending on the game title. While we did not review the 8-core 9800X3D, it has been found to be even slightly faster than the 9950X3D and is currently the most powerful gaming CPU on the planet. The Ryzen 9 9800X3D is selling these days for around $440-$500, and that may still be out of budget for many users. As such, similar to the 5600X3D, which is a 6-core 5000X3D processor cut down from the 8-core 5800X3D, AMD is planning to launch a hexacore Ryzen 5 9600X3D that will have two cores disabled compared to the 9800X3D. The information has been uncovered from the recent system integrator (SI) graphics driver for the recently launched Radeon AI PRO R9700 discrete GPU. The driver (Windows SI Driver for Radeon AI PRO R9700, Version 25.10.13.01) confirms the existence of 9600X3D as well as a 9600 non-X SKU and several other Ryzen PRO 9000 CPUs. The full list of upcoming CPUs is given below: Ryzen 5 9600X3D Ryzen 5 9600 AMD Ryzen 9 PRO 9945 Ryzen 7 PRO 9745 Ryzen 5 PRO 9645 Ryzen 5 PRO 9400 In terms of specs, the core configuration of the 9600X3D will be identical to the Ryzen 9600X and 9600, barring things like clock speeds. However, the six-core X3D will have a lot more L3 cache at 96 MB vs 32 MB on the 9600X and 9600. There is no information on pricing at the moment. Source: AMD (spotted by Mellodic Warrior on X)
    • With the dwindling number of TV license payers the BBC has to look for alternative avenues for income.
  • Recent Achievements

    • 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
    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      681
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      221
    4. 4
      +FloatingFatMan
      170
    5. 5
      Steven P.
      164
  • Tell a friend

    Love Neowin? Tell a friend!