• 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

    • Weekend PC Game Deals: Rhythm bundles, fishing festivals, and DRM-free summer sales by Pulasthi Ariyasinghe Weekend PC Game Deals is where the hottest gaming deals from all over the internet are gathered into one place every week for your consumption. So kick back, relax, and hold on to your wallets. The Humble Store introduced the June Tunes collection this week. Coming in with music and rhythm titles, the bundle begins with Wanderson, Everhood, and Onde in the first tier for $5. Going up a tier by paying $8 gets you three more games: Rhythm Fighter, One Btn Bosses, and Oddada. Lastly, Trombone Champ, DJMAX RESPECT V, and Ragnarock lead the final tier, which are yours for $10. Just yesterday, Humble also brought out the Serenity Forge Storyteller's Bundle. This carries 12 indie games inside it, including LISA the Joyful and LISA the Painful, Neversong, Death's Gambit, Smile for Me, Long Gone Days, and more, all split into three tiers of prices. Replacing Two Point Hospital, The Operator landed as the latest freebie on the Epic Games Store earlier this week. The 2024-released indie title has you taking the role of a new hire at the Federal Department of Intelligence (FDI). Here you have to analyze evidence, fact-check, and try to solve a streak of mysterious crimes using the agency's advanced investigative software. However, as the story progresses, a conspiracy is revealed that paints the FDI in a different light. The Operator giveaway on the Epic Games Store is slated to last until June 26. On the same day, Sable will become the next freebie in the promotion. Free Events If you're looking to try out some games over the weekend without opening your wallet, there are three games having free weekend offers right now. Starting off, Paradox is offering its grand strategy experience, Victoria 3, to try out. The title has a much higher focus on state management than war and roleplaying compared to the company's other games. If that's too much of a tough start, Len's Island is temporarily free-to-play now too. This is a top-down perspective survival game with support for up to eight players in co-op, with combat, farming, dungeon diving, and other elements being included. Lastly, Dead by Daylight should be the most familiar to most. The multiplayer four-versus-one asymmetric survival horror game has you assuming the roles of survivors or the killer to see who can come out on top. Big Deals With the Steam Summer Sale only being days away, most publishers and developers are laying low to prepare for the big event. Still, we found quite a few games having some attractive discounts. Here's our hand-picked big deals list for this weekend: Red Dead Redemption – $29.99 on Steam Mount & Blade II: Bannerlord – $24.99 on Steam Timberborn – $24.49 on Steam BERSERK and the Band of the Hawk – $23.99 on Steam Wo Long: Fallen Dynasty – $23.99 on Steam Disney Epic Mickey: Rebrushed – $23.99 on Steam Jagged Alliance 3 – $22.49 on Steam [NINJA GAIDEN: Master Collection] NINJA GAIDEN Σ2 – $19.99 on Steam Alone in the Dark – $19.99 on Steam Last Train Home – $19.99 on Steam Len's Island – $19.49 on Steam Nightingale – $17.99 on Steam DYNASTY WARRIORS 8: Xtreme Legends Complete Edition – $16.99 on Steam Mortal Kombat 1 – $16.49 on Steam SOMA – $14.99 on Steam Victoria 3 – $14.99 on Steam Trepang2 – $14.99 on Steam Blasphemous 2 – $14.99 on Steam Wreckfest – $14.99 on Steam Expeditions: Rome – $14.84 on Steam EA SPORTS FC 25 – $13.99 on Steam STAR WARS Jedi: Survivor – $13.99 on Steam DRAGON BALL Z: KAKAROT – $12.99 on Gamesplanet Amnesia: The Bunker – $12.49 on Steam DREDGE – $12.49 on Steam Dead Space – $11.99 on Steam DAVE THE DIVER – $11.99 on Steam WILD HEARTS – $10.49 on Steam It Takes Two – $9.99 on Steam Dragon Age Inquisition – $9.99 on Steam Haven – $9.99 on Steam Hellboy Web of Wyrd – $9.99 on Steam Nova Lands – $9.99 on Steam BIOMUTANT – $9.99 on Steam Destroy All Humans! 2 - Reprobed – $9.99 on Steam Ghostrunner 2 – $9.99 on Steam Need for Speed Unbound – $9.79 on Steam Call of the Wild: The Angler – $8.99 on Steam DEAD OR ALIVE 6 – $8.99 on Steam Operation: Tango – $8.99 on Steam Katana ZERO – $8.99 on Steam Dead by Daylight – $7.99 on Steam Killer Frequency – $7.49 on Steam Nioh: Complete Edition – $7.49 on Steam Overcooked! 2 – $6.24 on Steam A Way Out – $5.99 on Steam Mass Effect Legendary Edition – $5.99 on Steam Darksiders Genesis – $5.99 on Steam Mortal Kombat 11 – $4.99 on Steam Titanfall 2 – $4.49 on Steam Golf With Your Friends – $4.49 on Steam STAR WARS Battlefront II – $3.99 on Steam Yoku's Island Express – $3.99 on Steam theHunter: Call of the Wild – $3.99 on Steam RoboCop: Rogue City – $3.74 on Fanatical Battlefield 2042 – $2.99 on Steam Road Redemption – $2.99 on Steam Shadow Warrior 2 – $2.99 on Steam Battlefield V – $2.49 on Steam Ultimate Fishing Simulator – $1.99 on Steam DRM-free Specials The GOG store has already kicked off its own summer sale, putting thousands of DRM-free games on sale. Here are some highlights: Cyberpunk 2077 - $23.99 on GOG God of War - $19.99 on GOG Fallout 4: Game of the Year Edition - $15.99 on GOG Fallout 4: Game of the Year Edition - $15.99 on GOG Dino Crisis Bundle - $15.29 on GOG Devil May Cry HD Collection & 4SE Bundle - $14.84 on GOG The Witcher 3: Wild Hunt - Complete Edition - $9.99 on GOG Vampire: The Masquerade - Bloodlines - $9.99 on GOG SPORE Collection - $7.49 on GOG Papers, Please - $4.99 on GOG Terraria - $4.99 on GOG SWAT 4: Gold Edition - $4.99 on GOG DOOM (2016) - $3.99 on GOG DOOM 3 - $3.99 on GOG CrossCode - $3.99 on GOG Mad Max - $2.99 on GOG Heroes of Might and Magic 3: Complete - $2.49 on GOG Heroes of Might and Magic 4: Complete - $2.49 on GOG World in Conflict: Complete Edition - $2.49 on GOG Alan Wake - $1.49 on GOG Mortal Kombat 1+2+3 - $1.49 on GOG RollerCoaster Tycoon Deluxe - $1.19 on GOG Keep in mind that availability and pricing for some deals could vary depending on the region. That's it for our pick of this weekend's PC game deals, and hopefully, some of you have enough self-restraint not to keep adding to your ever-growing backlogs. As always, there are an enormous number of other deals ready and waiting all over the interwebs, as well as on services you may already subscribe to if you comb through them, so keep your eyes open for those, and have a great weekend.
    • Is there a 'recovery' settings option in Settings? The one where we can rollback to a previous restore point. I find it very useful if there is some issue and I have to rollback to the last stable point.
    • Google brings Gemini to all Workspace for Education subscribers by David Uzondu Google has announced that its Gemini app is now accessible to all Google Workspace for Education users, regardless of age. This brings the company's generative AI directly into the suite of tools used by millions of students and teachers. The Workspace for Education platform, if you did not know, already provides a massive suite of tools like Classroom, Docs, and Drive, which are designed to work together in a school setting. Naturally, the first question on any administrator's mind is what the company plans to do with student data. Google states that Gemini usage for these accounts falls under the Workspace for Education Terms of Service. This agreement includes "enterprise-grade data protections" and a promise that user data is not reviewed by anyone or used to train the company's AI models. It also maintains compliance with regulations like FERPA and COPPA, which are fundamental requirements for any technology operating in United States schools. The experience is not one-size-fits-all, particularly for younger students. Users under the age of 18 will get a more restricted version of the app, with stricter content filters to prevent inappropriate responses and a dedicated onboarding process to teach AI literacy. To reduce the likelihood of hallucinations, the first time a younger user asks a fact-based question, a double-check feature that validates the answer using Google Search runs automatically. For educators and older students, the AI can be used to brainstorm ideas, create lesson plans, and get feedback on work. The entire service is powered by what Google calls LearnLM, a family of its AI models supposedly fine-tuned for educational purposes. Access is not mandatory, as administrators can still control which users or groups can use the Gemini app through their admin console. This rollout applies to institutions using the free Education Fundamentals, the security-focused Standard, and the feature-rich Plus editions, making it widely available immediately.
  • Recent Achievements

    • Contributor
      GravityDead went up a rank
      Contributor
    • Week One Done
      BlakeBringer earned a badge
      Week One Done
    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      662
    2. 2
      ATLien_0
      269
    3. 3
      Michael Scrip
      236
    4. 4
      Steven P.
      164
    5. 5
      +FloatingFatMan
      155
  • Tell a friend

    Love Neowin? Tell a friend!