• 0

Javascript to auto scale webpage


Question

Recommended Posts

  • 0
  On 22/03/2014 at 21:36, Seahorsepip said:

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

 

Better in IE, but seems to still cause a bit of an issue when re-sizing the browser window, relative to where the window is located on the screen.

 

Be back in a bit BTW, time to cut the lawn.

  • 0
  On 22/03/2014 at 21:44, Brandon Live said:

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

If it only happens on IE it's clearly a IE fault as far as I can guess and yeah the hack didn't work I just noticed :/

  On 22/03/2014 at 21:46, xendrome said:

Better in IE, but seems to still cause a bit of an issue when re-sizing the browser window, relative to where the window is located on the screen.

Just noticed too yeah.

could you remove the code so I can try making some other code instead?

  • 0
  On 22/03/2014 at 21:46, Seahorsepip said:

If it only happens on IE it's clearly a IE fault as far as I can guess and yeah the hack didn't work I just noticed :/

Just noticed too yeah.

could you remove the code so I can try making some other code instead?

 

Removed iefix.js for now.

  • 0

This might work:

css:

body {
	width: 748px;
        overflow-x: hidden;
}

js to use instead of current js:

$(document).ready(function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
	document.documentElement.style.zoom = "75%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body table tbody").width()*100;
	document.body.style.zoom = zoom+"%";
	document.documentElement.style.zoom = "75%";
});
  • 0
  On 22/03/2014 at 21:46, Seahorsepip said:

If it only happens on IE it's clearly a IE fault as far as I can guess and yeah the hack didn't work I just noticed :/

 

That's simply not true. Just because something works in one browser doesn't mean it's correct.

 

Depending on your goal, a scale transform may work better (on newer browsers like IE9+ anyway). You can set that via CSS (if you just want a fixed scale) or JS if you want to calculate the ratio dynamically. For example, something roughly like:

 

body {

    -ms-transform: scale(1.5) translateX(-25vw);

    -ms-transform-origin: top left;

    -webkit-transform: scale(1.5) translateX(-25vw);

    -webkit-transform-origin: top left;

    -moz-transform: scale(1.5) translateX(-25vw);

    -moz-transform-origin: top left;

    transform: scale(1.5) translateX(-25vw);

    transform-origin: top left;

}

 

Of course for RTL, you'd want to scale from top right and translate a positive number.

 

However, depending on your goal, you might be better off with viewport settings and just using a fixed viewport size. Then the browser will automatically calculate how to make it fit.

 

I'm wary of the notion of trying to use the window vs body size as you did. For example, IE sets a default zoom of 125% or 150% on higher DPI screens, which may throw off some of your calculations. I think that's why the jquery docs basically say not to do that with .width() on "window". But maybe it's not a problem.

 

I don't know why you need jquery for that though, you'd probably be better off just using window.innerWidth and document.body.clientWidth directly.

  • 0
  On 22/03/2014 at 22:13, Brandon Live said:

That's simply not true. Just because something works in one browser doesn't mean it's correct.

 

Depending on your goal, a scale transform may work better (on newer browsers like IE9+ anyway). You can set that via CSS (if you just want a fixed scale) or JS if you want to calculate the ratio dynamically. For example, something roughly like:

 

body {

    -ms-transform: scale(1.5) translateX(-25vw);

    -ms-transform-origin: top left;

    -webkit-transform: scale(1.5) translateX(-25vw);

    -webkit-transform-origin: top left;

    -moz-transform: scale(1.5) translateX(-25vw);

    -moz-transform-origin: top left;

    transform: scale(1.5) translateX(-25vw);

    transform-origin: top left;

}

 

Of course for RTL, you'd want to scale from top right and translate a positive number.

 

However, depending on your goal, you might be better off with viewport settings and just using a fixed viewport size. Then the browser will automatically calculate how to make it fit.

 

I'm wary of the notion of trying to use the window vs body size as you did. For example, IE sets a default zoom of 125% or 150% on higher DPI screens, which may throw off some of your calculations. I think that's why the jquery docs basically say not to do that with .width() on "window". But maybe it's not a problem.

 

I don't know why you need jquery for that though, you'd probably be better off just using window.innerWidth and document.body.clientWidth directly.

I just used jQuery because I'm lazy and your method doesn't fix the centering issue.

 

And you can better use the css zoom property then transform for compatibility.

  • 0

Can't find so quickly a method to solve your zoom problem when you want to use 75% instead of 100% :/

Gotta go now, maybe someone else finds a solution in the meantime while I'm gone else I'll see if I can find a fix tomorrow ;)

  • 0
  On 22/03/2014 at 22:15, Seahorsepip said:

I just used jQuery because I'm lazy and your method doesn't fix the centering issue.

Umm what centering issue?

 

  Quote

And you can better use the css zoom property then transform for compatibility.

CSS zoom is non-standard and has a lot of obscure side effects. That's why sites like CSS-Tricks say not to use it on production sites.

  • 0

Ok so currently I have

 

zoom.js

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

and the CSS

body {
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
margin: 0;
width: 755px;
overflow-x: hidden;
padding: 0
}

And the ONLY issue is it is aligning the site to the left in both IE and Chrome.

 

EDIT: Ok so changing the: width: 755px; to 1024px seems to have fixed it in IE and Chrome

Seahorsepip, whenever you get a moment, please check it on your end also and see if you find any weird layout issues :)

 

I will post back here if I find any myself.

  • 0
  On 22/03/2014 at 22:38, Brandon Live said:

Umm what centering issue?

CSS zoom is non-standard and has a lot of obscure side effects. That's why sites like CSS-Tricks say not to use it on production sites.

The content is left aligned and margin auto won't work correctly because of the transform :/

And I know zoom isn't a good fix but so is css3 transform, the best fix would be mediaqueries and making it responsive. But I guess he has a reason why he wanted it to work like this :P

  • 0
  On 23/03/2014 at 00:42, Seahorsepip said:

The content is left aligned and margin auto won't work correctly because of the transform :/

I don't understand why that would be the case. Just adjust the math for where you want to put it?

  Quote

And I know zoom isn't a good fix but so is css3 transform, the best fix would be mediaqueries and making it responsive. But I guess he has a reason why he wanted it to work like this :p

At least transform is standardized and works in most browsers. You can even do it in IE8 with the filter stuff, though I don't know if that has any limitations which would apply here.

And yeah, the whole idea of zooming a fixed layout is not a good solution for most situations. Maybe for a game or something? I know some people like to do that for Win8 games and use WinJS's ViewBox control to handle scaling it. That just does the same thing I mentioned (sets scale + translate transforms in JS after calculating the right values). It doesn't seem to have any alignment issues...

  • 0
  On 23/03/2014 at 00:35, Seahorsepip said:

Use the *100 with "body" in the js which I first posted and set body css width: 748px; and padding: 0 80px; that might work.

 

Yeah no go on that, shifts the whole page over 80px on Chrome/ IE11, so it cuts off the right side.

  On 23/03/2014 at 00:51, Brandon Live said:

I don't understand why that would be the case. Just adjust the math for where you want to put it?

 

Hey Brandon, if you'd like to take a stab at it, I can give you the URL in PM. The goal is, to have it adjust larger automatically because on high-res screens the site is very small-fixed width and makes it hard to read.

  • 0
  On 23/03/2014 at 00:57, xendrome said:

Hey Brandon, if you'd like to take a stab at it, I can give you the URL in PM. The goal is, to have it adjust larger automatically because on high-res screens the site is very small-fixed width and makes it hard to read.

Isn't that why high DPI systems default to a higher scale in the browser? (I know IE on Win7 / Win8 does this, and I think Macs do something similar at least on Retina displays)

  • 0

This idea seems flawed to me, if the site content is so small then simply zooming in probably won't have the desired effect, everything will be huge and you'll end up seeing less of the page since the content will be pushed off the bottom of the screen (Say it's a fixed 640 width viewed on a 1920x1080 screen, everything will be blown up to 3 times it's normal size, 16px body text would become 48px, etc.)

 

  On 22/03/2014 at 22:13, Brandon Live said:

...

I'm wary of the notion of trying to use the window vs body size as you did. For example, IE sets a default zoom of 125% or 150% on higher DPI screens, which may throw off some of your calculations. I think that's why the jquery docs basically say not to do that with .width() on "window". But maybe it's not a problem.

...

Yeah, it shouldn't be a problem because the browser should be returning those values in CSS pixels instead of device pixels, so they should scale with the display density (Which is also why the page should look the same between a "96dpi" screen and a "192dpi" screen, the browser/OS scales all drawing)

  • 0

We're doing quite bad practise here but whatever here's the code that should work:

 

js:

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

css:

body {
	width: 748px;
	overflow-x: hidden;
	padding: 0 80px; /* Change 80px to increase/decrease zoom size */
}
  • 0
  On 23/03/2014 at 11:10, The_Decryptor said:

"zoom" is an old IE only thing, it won't work in Firefox/Chrome/Safari/Opera/etc.

zoom: value;

Works fine on webkit browsers, ie uses -ie-zoom: value;

It should work on opera now too but it fails to work on firefox :/

 

I'll give css transforms another try even though it works not as I want right now.

  • 0

Here's a method using transforms then:

 

js for all modern browsers and IE9:

$(document).ready(function(){
	zoom = $(window).width()/$("body").outerWidth();
	$("body").css("transform","scale("+zoom+")");
        $("body").css("-ms-transform","scale("+zoom+")");
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body").outerWidth();
	$("body").css("transform","scale("+zoom+")");
        $("body").css("-ms-transform","scale("+zoom+")");
});

css:

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;
}

and js for IE8 and older:

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

IE8 js code should be put in a conditional tag like this:

<head>
<!--[if lt IE 8 ]>
<script type="text/javascript">
$(document).ready(function(){
	zoom = $(window).width()/$("body").outerWidth()*100;
	document.body.style.zoom = zoom+"%";
});
$(window).on('resize', function(){
	zoom = $(window).width()/$("body").outerWidth()*100;
	document.body.style.zoom = zoom+"%";
});
</script>
<![endif]-->
</head>

This should be the correct code then I suppose, though the whole scaling idea isn't great lol

  • 0
  On 23/03/2014 at 11:49, Seahorsepip said:

zoom: value;

Works fine on webkit browsers, ie uses -ie-zoom: value;

It should work on opera now too but it fails to work on firefox :/

 

I'll give css transforms another try even though it works not as I want right now.

Well that's a shame, although with the state of WebKit it's honestly not that surprising.

  • 0
  On 23/03/2014 at 12:00, Seahorsepip said:
This should be the correct code then I suppose, though the whole scaling idea isn't great lol

 

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.

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

    • No registered users viewing this page.
  • Posts

    • LibreOffice 25.2.4 by Razvan Serea LibreOffice is the free power-packed Open Source personal productivity suite for Windows, Macintosh and Linux, that gives you six feature-rich applications for all your document production and data processing needs: Writer, Calc, Impress, Draw, Math and Base. Support and documentation is free from our large, dedicated community of users, contributors and developers. You, too, can also get involved! Choosing Between LibreOffice Still and LibreOffice Fresh: LibreOffice Still is a good choice if you value stability, a longer support cycle, and a more conservative approach to software updates. It's suitable for businesses and organizations where reliability and compatibility are crucial. LibreOffice Fresh is ideal if you're an enthusiast or an early adopter who wants to stay on the cutting edge of LibreOffice development and is willing to accept more frequent updates and occasional minor issues. Features: Writer is the word processor inside LibreOffice. Use it for everything, from dashing off a quick letter to producing an entire book with tables of contents, embedded illustrations, bibliographies and diagrams. The while-you-type auto-completion, auto-formatting and automatic spelling checking make difficult tasks easy (but are easy to disable if you prefer). Writer is powerful enough to tackle desktop publishing tasks such as creating multi-column newsletters and brochures. The only limit is your imagination. Calc tames your numbers and helps with difficult decisions when you're weighing the alternatives. Analyze your data with Calc and then use it to present your final output. Charts and analysis tools help bring transparency to your conclusions. A fully-integrated help system makes easier work of entering complex formulas. Add data from external databases such as SQL or Oracle, then sort and filter them to produce statistical analyses. Use the graphing functions to display large number of 2D and 3D graphics from 13 categories, including line, area, bar, pie, X-Y, and net - with the dozens of variations available, you're sure to find one that suits your project. Impress is the fastest and easiest way to create effective multimedia presentations. Stunning animation and sensational special effects help you convince your audience. Create presentations that look even more professional than the standard presentations you commonly see at work. Get your collegues' and bosses' attention by creating something a little bit different. Draw lets you build diagrams and sketches from scratch. A picture is worth a thousand words, so why not try something simple with box and line diagrams? Or else go further and easily build dynamic 3D illustrations and special effects. It's as simple or as powerful as you want it to be. Base is the database front-end of the LibreOffice suite. With Base, you can seamlessly integrate into your existing database structures. Based on imported and linked tables and queries from MySQL, PostgreSQL or Microsoft Access and many other data sources, you can build powerful databases containing forms, reports, views and queries. Full integration is possible with the in-built HSQL database. Math is a simple equation editor that lets you lay-out and display your mathematical, chemical, electrical or scientific equations quickly in standard written notation. Even the most-complex calculations can be understandable when displayed correctly. E=mc2. LibreOffice also comes configured with a PDF file creator, meaning you can distribute documents that you're sure can be opened and read by users of almost any computing device or operating system. LibreOffice also comes configured with a PDF file creator, meaning you can distribute documents that you're sure can be opened and read by users of almost any computing device or operating system. Download: LibreOffice 64-bit | LibreOffice 32-bit ~300.0 MB (Open Source) View: LibreOffice Website | Screenshot | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • I'm not sure why, but for some reason I think that if they are deciding to use the year for the version history they should use the whole year (i.e. iOS 2026).
    • Here's why it makes sense to name it iOS 26 and why it doesn't by Aditya Tiwari It has been almost 18 years since Apple launched the first version of its popular mobile operating system alongside the original iPhone. Recent reports and rumors circulating on the web suggest that the company is all set to unveil a major overhaul for iOS 19 at this year's WWDC keynote. There is something that baffled many when they found that the Cupertino giant is reportedly planning to rename iOS 19 to iOS 26. Yes, a company like Apple skipping eight versions for iOS is enough to leave users with a "why?" expression on their face. However, even if Apple pulls it off, there are two sides to the coin. Why it makes sense to call it iOS 26 There are several reasons why calling it iOS 26 instead of iOS 19 isn't as weird as it sounds. To begin with, it's something that has been done in the past. Samsung is a well-known example when we think about renaming device lineups and skipping version numbers. Samsung launched the Galaxy S20 series in 2020. But what was its predecessor? Galaxy S19? No, it was the Galaxy S10. The South Korean giant renamed its device lineup and aligned it with the year of launch, jumping ten versions in the process. So, someone viewing a Galaxy S23 can easily determine that the device was launched in 2023. It also gives them a feeling that they are using the 'latest and greatest' product. On the flip side, a device from the previous year may feel outdated, potentially motivating them to upgrade. Skipping version numbers isn't fun and games for everyone. Microsoft became the butt of jokes when it skipped Windows 9 and announced that Windows 8.1 will be upgraded to Windows 10 (that too in 2015). Windows 10 was thought to be "the last version of Windows", but things turned out differently. Apple's case would be a bit different, where the iOS version number is one year ahead. So, iOS 26 will release in 2025, iOS 27 in 2026, and so on. This approach is similar to how game companies like Electronic Arts name their gaming titles. Although it may seem off track, the naming scheme aligns with Apple's development schedule. The company typically announces new iOS versions at WWDC in June and rolls them out to the public in the fall season. After that, it continues to push incremental updates through the following year. In other words, a particular iOS version lives on your iPhone for a quarter of the launch year and about nine to ten months in the following year. Meanwhile, Samsung releases new Galaxy S devices at the start of the year, so it makes more sense to align their name with the current year. Not just iOS 26, reports said that Apple will streamline its confusing software naming system by renaming almost all of its operating systems to a single version. So, there will be iPadOS 26, macOS 26, tvOS 26, and watchOS 26 instead of iPadOS 19, macOS 16, tvOS 12, and so on. While the big move will make things easier for users, it will also highlight the work Apple has been doing to unify its software experience across devices. iOS and iPadOS have been related to each other from the beginning, but macOS gained ARM support in 2020 and began incorporating iOS-like UI elements. Apple has already developed a suite of Continuity features that enable different Apple devices to work together. macOS 14 Sonoma further bridged the gap between iPhone and Mac in 2023 with a revamped widgets picker UI, which allows access to and syncing with widgets stored on your iPhone. New widgets introduced in macOS 14 are interactive, similar to those on iPhone. They let you do stuff like checking off reminders, playing or pausing media, accessing smart home controls, and more. Apple's iOS 26/iOS 19 would be the second major naming shake-up in the history of iOS. The first one was when Apple renamed the operating system from iPhone OS to iOS in June 2010. iOS 26 is expected to be the biggest update in years, reportedly featuring a 'dramatic' glass-like UI overhaul, a revamped Camera app, live translation for AirPods, a new gaming app, and a new set of accessibility features. The glass-like design, first introduced on Apple's Vision Pro headset, is expected to make its way to tvOS and watchOS. Why doesn't it make sense to call it iOS 26 It already feels a bit awkward when you realize that the iPhone 16 runs iOS 18, for whatever reason, when the first iterations of both iPhone and iOS arrived in the same year. Adding eight more digits to the iOS version number will make it sound even weirder. The 19th generation of iPhone's operating system will be called iOS 26. Imagine buying an iPhone 17 later this year, and it runs iOS 26 out of the box. However, there are a couple of things Apple can do to tone down the awkwardness. Perhaps Apple can rename the iPhone series and start calling it iPhone 26 to match its software counterpart. A far-fetched and even more unlikely option is to drop version numbers from the iPhone's name entirely. Apple is already doing it for its tablets (iPad, iPad Pro, and iPad Air) and its Mac computers. Therefore, it won't be an issue once the users absorb the initial shock of the announcement. But we can't ignore that not having a version number tied to a product has its downsides. These are all speculations anyway. Whatever happens, Apple fans will get over it and learn to live with it, like they are living with the hopes of an upgraded Siri and AirPower to charge their Apple devices together.
    • I'd prefer the disclaimer being more transparent by putting it above the article.
    • dBpoweramp Music Converter 2025-06-05 by Razvan Serea Audio conversion perfected, effortlessly convert between formats. dBpoweramp contains a multitude of audio tools in one: CD Ripper, Music Converter, Batch Converter, ID Tag Editor and Windows audio shell enhancements. Preloaded with essential codecs (mp3, wave, FLAC, m4a, Apple Lossless, AIFF), additional codecs can be installed from [Codec Central], as well as Utility Codecs which perform actions on audio files. After 21 days the trial will end, reverting to dBpoweramp Free edition (learn the difference between Reference and dBpoweramp Free, here). dBpoweramp is compatible with Windows 10, 8, 7, Vista, both 32 and 64 bit. dBpoweramp Music Converter features: Convert audio files with elegant simplicity. mp3, mp4, m4a (iTunes / iPod), Windows Media Audio (WMA), Ogg Vorbis, AAC, Monkeys Audio, FLAC, Apple Lossless (ALAC) to name a few! Multi CPU Encoding Support Rip digitally record audio CDs (with CD Ripper) Batch Convert large numbers of files with 1 click Windows Integration popup info tips, audio properties, columns, edit ID-Tags DSP Effects such as Volume Normalize, or Graphic EQ [Power Pack Option] Command Line Encoding: invoke the encoder from the command line DSP Effects - process the audio with Volume Normalize, or Sample / Bit Rate Conversion, with over 30 effects dBpoweramp is a fully featured mp3 Converter dBpoweramp integrates into Windows Explorer, an mp3 converter that is as simple as right clicking on the source file >> Convert To. Popup info tips, Edit ID-Tags are all provided. dBpoweramp Music Converter 2025.06.05 changelog: Darkmode added Core Converter Debug log dumps ID Tags written VST Effect Folders dialog fixed missing InitCommonControls would not show correctly FLAC/Ogg/Opus/etc - allows editing of CDTOC ID Tag CD Ripper secure ripping log where shows TOC was not showing CD Extra correctly CD Ripper was incorrectly setting data track length on main display (for certain drives) CD Ripper internally better handling of corrupt TOCs CD TOC to Tag was incorrectly adding 150 to CD Extra disc CD Ripper shows "AccurateRip Unconfigured" in rip status rather than "not in accuraterip" if unconfigured CD Ripper art paste accepts https CueSheet added as standard - log file written to same folder as cue and folder.jpg AIFF internal code merge (macos >> windows) Download: dBpoweramp Music Converter R2025.06.05 | 82.2 MB (Shareware) View: dBpowerAMP Music Converter Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      255
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      227
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!