• 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

    • No mention of the new Apple TV 8K?
    • I really hate it that I can't access the historical changes in my notes and if I accidentally delete large portions of the text which happens more often than not, sometimes, there's no recovering. There should always be a way to go backwards in time, simply because we have iCloud. And why is there no normal export capability? There should be a historical-change-back up and export capability.
    • SeaMonkey 2.53.21 by Razvan Serea The SeaMonkey project is a community effort to develop the SeaMonkey all-in-one internet application suite. Such a software suite was previously made popular by Netscape and Mozilla, and the SeaMonkey project continues to develop and deliver high-quality updates to this concept. Containing an Internet browser, email & newsgroup client with an included web feed reader, HTML editor, IRC chat and web development tools, SeaMonkey is sure to appeal to advanced users, web developers and corporate users. Under the hood, SeaMonkey uses much of the same Mozilla source code which powers such successful siblings as Firefox, Thunderbird, Camino, Sunbird and Miro. Legal backing is provided by the Mozilla Foundation. SeaMonkey 2.53.21 changelog: Unable to load JSON Bookmarks file, Open/Cancel do the same thing bug 1940204. Move replaceVars helper into menu-manager.js for cZ bug 1937379. Remove dumpObject helper from utils.js in cZ bug 1937380. Remove toOpenWindowByType helper from utils.js in cZ bug 1937382. Fix makeLogName helper to not encode twice in prefs.js in cZ bug 1937387. Remove use of escapeFileName helper and tidy up pref_mungeName helper in cZ bug 1937395. Add helper to file-utils.js for ensuring an nsIFile is returned in cZ bug 1937397. Remove unused http.js file from cZ bug 1937890. Remove unused IRC tests from static.js in cZ bug 1937896. Switch from deprecated escape/unescape in cZ bug 1938933. Tidy up use of prefBranch outside of pref-manager in cZ bug 1938935. Make use of pref fallbacks in pref-manager in cZ bug 1938937. Remove unused edit context menu from cZ bug 1939929. Use XPCOMUtils.generateQI in connection-xpcom in cZ bug 1939930. Merge menus.xul, popups.xul and scripts.xul into chatzilla.xul bug 1939958. Make use of toSOutputStream and toSInputStream helpers in DCC code in cZ bug 1939965. Stop hard-coding commandkey for reloadui in cZ bug 1939968. Use suite's FillInHTMLTooltip helper instead of having own version in cZ bug 1939969. Split custom-away from other away/back commands in cZ bug 1942655. Remove ChatZilla Homepage link from Help menu and about command in cZ bug 1942916. Re-arrange toolbar menus in cZ bug 1943783. Remove ChatZilla Homepage link from about and prefs dialogs in cZ bug 1943844. Use custom controller for userlist and tidy up some controller use in cZ bug 1945325. Make use of observes for show/hide elements in cZ bug 1945378. Don't dynamically create focus-input key element in cZ bug 1947028. Remove unused toolbar creation code in cZ bug 1947030. Remove unused updateMenus code from cZ bug 1947031. Clean up whitespaces in cZ package manifest bug 1947040. Remove unused uninstallKeys code from cZ bug 1950002. Use node.remove(), especially instead of node.parentNode.removeChild(node) in cZ bug 1951250. Remove __cz_condition from cZ bug 1951253. Remove outputWindowURL pref from cZ bug 1951256. Remove unused JS tests in cZ bug 1951297. Use includes, startsWith and endsWith instead of indexOf and substr in cZ bug 1951302. Use {} and [] instead of new Object() and new Array() in cZ bug 1951303. Fixup function naming for lint in cZ bug 1955141. Fixup method naming for lint in cZ bug 1955767. Remove old Mozilla 1.0 code from updateAppMotif in cZ bug 1955771. Use throw Components.Exception in cZ bug 1955774. Migrate output-window from HTML to XHTML to make localisation more standard in cZ bug 1955825. Merge munger.js into mungers.js in cZ bug 1956373. Remove unused tagName from mungers.js in cZ bug 1956374. Flatten directory structure in cZ bug 1956375. Tidy up about dialog page in cZ bug 1956376. Add helper to commands.js for sending CTCP commands in cZ bug 1956377. Migrate to standard menus for menu toolbar in cZ bug 1957763. Install plugin dialog broken in cZ bug 1961599. cZ change nick menu not working bug 1962112. Away status isn't reflected correctly in all channels in cZ bug 1962234. Fix dark motif userlist in cZ bug 1967072. SeaMonkey Composer adds moz-do-not-send attribute for links and images bug 1827146. Use menu_Toolbars overlay for navigatorOverlay and console bug 1945335. Remove defunct 2.53 prerelease builds from debugQA extension bug 1947043. Handling of MOZ_LANGPACK_CONTRIBUTORS in defines.inc files should be less custom bug 1951101. Control + U shortcut for underlined text is not working bug 1872514. Context menu search (with default search engine) does not work in the content area of a message compose or SM-Composer window bug 1062092. The following bugs were fixed in our branch of the Gecko source code only: on FreeBSD sqlite3 fails to link for missing math functions bug 1944954. Expand init.configure to use version_package.txt to set MOZ_PKG_VERSION bug 1952757. Change supported msvc Compilers for SeaMonkey 2.53 bug 1954176. SeaMonkey 2.53.21 contains (among other changes) the following major changes relative to SeaMonkey 2.49.5: The Bookmarks Manager has switched its name to Library, and now also includes the History list. When History is invoked, the Library will be shown with the History list selected. The extensive modifications were needed because of Mozilla Gecko platform API changes. Download Manager has been migrated to a new API. Although it looks pretty much the same as before, the search option is missing and some other minor details work differently. The previous downloads history is removed during the upgrade. The layout panel was added to the CSS Grid tools. TLS 1.3 is the default SSL version now. Support for all NPAPI plugins like Flash, Java and Silverlight has been removed. For displaying pdf files in the browser you can use pdf.js-seamonkey from Isaac Schemm. SeaMonkey now uses a new api for formatting regional data like time and date. Default is to use the application locale of the current SeaMonkey build. If you use a language pack or a different OS formatting this is usually not desired. You can change the formatting from the application locale to the regional settings locale (OS) in the preferences dialog under "Appearance". SeaMonkey 2.53.21 uses the same backend as Firefox and contains the relevant Firefox 60.8 security fixes. Download: SeaMonkey 64-bit | Portable SeaMonkey 64-bit ~60.0 MB (Freeware) Download: SeaMonkey 32-bit | Portable SeaMonkey 32-bit View: SeaMonkey Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • It doesn't work for the view, but the music gets me every time:  
  • Recent Achievements

    • First Post
      Uranus_enjoyer earned a badge
      First Post
    • Week One Done
      Uranus_enjoyer earned a badge
      Week One Done
    • Week One Done
      jfam earned a badge
      Week One Done
    • First Post
      survivor303 earned a badge
      First Post
    • Week One Done
      CHUNWEI earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      428
    2. 2
      +FloatingFatMan
      207
    3. 3
      snowy owl
      194
    4. 4
      ATLien_0
      191
    5. 5
      Xenon
      141
  • Tell a friend

    Love Neowin? Tell a friend!