• 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

    • Microsoft confirms Windows Outlook breaks in many ways after major Calendar feature upgrade by Sayan Sen Microsoft has been trying to get more users onto New Outlook for Windows, and it is doing so not just by enforcing the newer app but also by making improvements along the way. In doing so, though, the company has caused the Classic Outlook app to bug out in the past. The classic app received a major Shared Calendar-related upgrade recently, with many " long-awaited improvements" as well as "small changes in form and function." As the name suggests, the Outlook Shared Calendar essentially allows multiple people to interact with and manage the calendar. With Shared Calendar improvements enabled, users will see the following changes: Instant sync and view of shared calendars Editing series end date does not reset the past Accepting meeting without having to send a response Last Modified By no longer shown in the meeting item Adding same calendar multiple times can't be done Duplicate calendars simultaneously selection Attachments addition not possible when responding to a meeting invitation Event drafts auto-save changes The "Download shared folders" setting is ignored Unfortunately, as with any major feature upgrade, there are bugs, and Microsoft has confirmed this is no different. The tech giant has shared official guidance for it so that users can work around the problems. According to the company, "Shared Calendar improvements are now enabled by default in the most recent versions of Outlook, in all update channels for Microsoft 365 Apps," and thus, the bugs are likely to affect many. Here are some of the bugs Microsoft is investigating, as well as their workarounds: Bug Workaround Meeting cancellation sent unexpectedly to some attendees in classic Outlook In a REST shared calendar, after adding or removing an attendee, or forwarding a meeting, a meeting cancellation may be sent unexpectedly to some attendees. Use the Outlook Web App or new Outlook when adding or removing an attendee or forwarding a meeting. Attendees do not get updates on attachment changes by Delegate When a delegate sends an update on a meeting that requires removing an attachment on an occurrence of a meeting series, the recipients may not get some or all of the attachment changes. In the delegate's Sync Issues folder, you'll see sync errors. Example: 17:23:26 Synchronizer Version 16.0.15313 17:23:26 Synchronizing Mailbox 'Delegate User' 17:23:26 Synchronizing local changes in folder 'Manager User' 17:23:27 Uploading to server 'https://outlook.office365.com/mapi/emsmdb/?xxxxxxxx-xx' 17:23:30 Error synchronizing folder 17:23:30 [0-320] There is no known workaround. It is recommended, whenever possible, to save attachments to SharePoint or to OneDrive and share with a link. After an attachment is deleted from an existing meeting, it may reappear after being deleted Please wait approximately one minute to give the sync time to complete. Additionally, it is advisable to save attachments to SharePoint or OneDrive whenever possible and share them using a link. A meeting created by a delegate with limited calendar access disappears and is unsent when a sensitivity label other than "Normal" is selected Three potential solutions to address this issue, each with their own implications for functionality: Manager can update delegate's permissions to allow viewing of private items. Delegate can change the sensitivity label of the meeting to "Normal". Delegate can disable Shared Calendar Improvements (not recommended). Aside from these, Microsoft has also fixed several other bugs, which you can find in the official support article here on the company's website.
    • I’ve just paid £290/$390 for a 4TB Samsung 990 Pro for my PS5 Pro so it’s not too far from the going rate. Microsoft should definitely copy Sony and let users buy their own SSD in their next consoles rather than this proprietary stuff. I paid £374/$505 for the 2TB Seagate card for my Series X a few years ago so it’s not exactly over priced. 4TB of NVMe storage ain’t cheap!
    • The EU regulations force companies to respect users privacy, choice and data. Something all tech companies have abused to the hilt and would continue to do so if it wasn’t for important legislation and laws the EU brought in, which have been adopted elsewhere around the world. The EU can be a nuisance, but they actually do more good than harm. Forcing Apple, Google, Microsoft etc to make changes hasn’t negatively impacted anyone apart from their financials as they aren’t free to pillage our data like they once were, unless they explicitly provide options to obtain consent.
    • Windows 10 Enterprise IoT LTSC will continue getting updates until January 2032. I would expect support from most programs to continue until then. Firefox still supports Windows 7 (until the end of August), which will be just over 16 years since release. Windows 10 will be of a very similar age in January 2032. I'm sure some things like games will move on earlier, but I imagine a Windows 10 machine will be safe and usable for a long time to come yet, despite the pressure and fearmongering from those who stand to gain from selling you a new PC.
    • Refined dock and bug fixes land in latest Elementary OS 8 updates by David Uzondu If you're running Elementary OS 8, there's a new round of updates available, bringing some neat enhancements, particularly to its signature Dock and the underlying window manager, Gala. If you are not familiar, Elementary OS positions itself as a polished alternative to Windows and macOS. It runs its own custom desktop environment called Pantheon, with Gala handling all the window management magic, like animations and how windows behave. In the new update, the Dock gets some notable new tricks, including the return of a couple of features that old-school Plank (the Dock's foundation) users might remember. For starters, the Dock now shows multiple indicator dots beneath an app icon if you have more than one window open for that application, which is useful for quickly seeing what is running. Plus, if you are dragging something and hover over an app icon in the Dock, it will cycle through that app's open windows, making it easier to drop your item into the right place. You can also now long-press an app icon to bring up its context menu, a nice touch for those who prefer that interaction. The elementary OS team also squashed some bugs related to hide modes and memory usage, keeping things running smoothly. Gala itself recently got a massive update, addressing around 20 reported issues and introducing a brand new Gesture Controller. This means users can now swipe up in the Multitasking View to close windows, a slick and intuitive gesture. App titles are now always shown in Multitasking View, a significant improvement for touchscreen users. Users also get notified when they take a screenshot with a keyboard shortcut, and this notification lets them jump straight to the image in Files. Some other welcome Gala improvements include saving window states on sleep and shutdown, and fixing an annoying bug where menus might only show once. For gamers, a fix for Lutris Flatpak installations causing Gala to crash with GE Proton setups will be a relief, and users of the Postman app will be happy to know that window captures for it are no longer partially rendered. Shifting back to Elementary OS 8, in System Settings, choosing light or dark mode properly snoozes your schedule instead of outright disabling it. The Reduce Motion setting has been expanded to cover a wider array of animations, which is a blessing for folks prone to motion sickness. Hotcorners got some fixes too, and there is a new option to keep them active even when an application is full screen. Other notable updates include added screen reader support for notifications and the shortcut overlay, fixes for Flatpak sandbox issues that affected apps like Steam, and the latest version of GNOME Web, which brought better performance and a redesigned bookmarks sidebar. You can download all these updates by opening System Settings, heading to System, and hitting "Update All."
  • Recent Achievements

    • Enthusiast
      Epaminombas went up a rank
      Enthusiast
    • Posting Machine
      Fiza Ali earned a badge
      Posting Machine
    • One Year In
      WaynesWorld earned a badge
      One Year In
    • First Post
      chriskinney317 earned a badge
      First Post
    • Week One Done
      Nullun earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      186
    2. 2
      snowy owl
      131
    3. 3
      ATLien_0
      129
    4. 4
      Xenon
      121
    5. 5
      +Edouard
      91
  • Tell a friend

    Love Neowin? Tell a friend!