• 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

    • That's nice and all. but I generally just stick with Lutris paired with 'ge-proton' (which gets updated fairly often (June 1st was last update) as the 'ge-proton' entry in Lutris uses stuff here... https://github.com/GloriousEggroll/proton-ge-custom/releases ) and the like to play my games. p.s. if a person wants to stick with a specific version from that link you can download a specific version and extract it to "~/.local/share/lutris/runners/proton/". then select it in Lutris options on game shortcut is the basic idea. because by default the standard 'ge-proton' entry will automatically get updated which can occasionally cause issues even though it's usually fine. but manually setting it on a specific version will prevent the standard updates on 'ge-proton' from messing with it on a particular game you may have issues with if that gets updated etc.
    • Sam Altman says AI could soon help with discovering new knowledge by Hamid Ganji OpenAI is currently at the forefront of developing powerful AI models, while its ChatGPT product is rewriting our traditional way of looking for new information. The company's CEO, Sam Altman, now says AI could even help humans discover new knowledge. He also described AI agents as junior employees. Speaking at the Snowflake Summit 2025, Altman boasted that AI agents can act like junior employees, saying, "You hear people that talk about their job now is to assign work to a bunch of agents, look at the quality, figure out how it fits together, give feedback, and it sounds a lot like how they work with a team of still relatively junior employees." OpenAI CEO also added AI agents could help humans discover new knowledge in "limited cases" or "figure out solutions to business problems that are kind of very non-trivial." While the use of AI for scientific discovery is still viewed with skepticism, the technology has proven its capabilities for new discoveries in several cases. For example, the Microsoft Discovery platform, designed for accelerating scientific research and development by AI agents, was recently able to discover a new chemical for cooling data centers in just 200 hours, a process that normally takes years to research and complete by humans. AI firms are also shifting their focus toward developing AI agents capable of performing various tasks. OpenAI recently unveiled Codex, which contains AI agents for helping programmers write and debug code. According to Altman, OpenAI engineers are already using Codex. As AI agents become more intelligent, more employees should be concerned about losing their jobs. Companies have already started replacing some specific roles with AI. For example, Duolingo has replaced its contract workers with AI, while Shopify managers need to provide reasons why AI cannot handle a job before seeking approval for new hires. Via: Business Insider
    • I personally don't think there will be many survivors past the ESU date, but I can be wrong🙂 >Firefox still supports Windows 7 (until the end of August), which will be just over 16 years since release. Well, yes, but it's an ESR version, which kind of doesn't count as fresh for me. So the last mainline version of Firefox with W7 support was 115, which was released in 2023, exactly around the W7 ESU expiration.
    • WhatsApp beta users can now craft their own AI chatbots - here's why you might want one by Paul Hill Since the end of 2022, tech companies, and even non-tech companies, have been clamoring to pile AI into their services. Despite what many people say about not liking AI, plenty of people are still using it every day, making it a key offering. Not only that, but for public companies like Meta, the inclusion of AI does very well with investors, so that’s another reason it’s being added. While the most common chatbot people talk about is ChatGPT, which is pretty faceless, there is demand for AI chatbots with a face, this is why people use tools like Character.ai and Replika. One of the only big tech firms that has gone down this route is Meta, which lets you create and share AI characters. To date, some of Meta’s apps, like Messenger, allow you to chat with these AI personas but you can’t do that yet in the stable version of WhatsApp. The company is now testing it with the Android Beta and when it’s ready, it should make a more seamless experience across Meta’s applications. Many of the popular bots that people use including ChatGPT, Gemini, and DeepSeek are faceless and offer the same tone out of the box. To be fair to Gemini, it does allow all users to create Gems now, and they actually offer a bit more flexibility than just creating characters to talk to like in Messenger. The chatbots in Messenger have the benefit of being in the Messenger app, which most people use and giving them a personality and making them feel like an “AI person” fits better in Messenger. Whether we really need these AI bots in Messenger is still up for debate. It’s quite a new feature and some people may find some good uses for them, but as mentioned, they don’t seem as flexible, or provide as detailed responses as custom bots made on Poe or Gemini Gems. They are definitely for having casual conversations with. WhatsApp's new AI chatbot creator We’ve known that the chatbot feature was coming to WhatsApp for a long time already. WhatsApp beta for Android 2.25.1.26, released in January, included the feature for some beta testers. With the latest WhatsApp beta for Android 2.25.18.4, it seems like WhatsApp is trialing the feature with members of the public, suggesting its release is imminent. Screenshots of the app, obtained by WABetaInfo show that you can describe your AI, select its personality, its traits, its image and more. The process seems to be the same as the process already available in Messenger. One of the nice things that Meta provides when creating these AI bots is templates and suggestions such as the attitude of the bot or the instructions for the bot. This is the same as in Messenger and allows you to get started chatting with your custom bots faster. In terms of sharing, you have the option to make the bots private, share them with friends (at least in the case of Messenger and presumably WhatsApp), or share them publicly. If you make something specific for your needs then the private option would be best, while bots with mass appeal could be set to public. Creating bots in WhatsApp is straightforward once you have access to the AI Studio. During the creation process you’ll need to name your AI, define its personality, choose a tone, design an avatar (some will be made for you with Meta’s AI), and create a catchy tagline to attract users if you ever set it to public. Much of the information will be pre-filled based on the initial details you provide about the AI’s role and personality. Some ideas for bots that you can create include a motivational coach, a travel recommendation AI, or a daily planner. While setting up these AI bots is easy to do, users may find their actual benefits limited. Besides the nagging feeling that you’re socializing with a clever bit of code, Meta seems to truncate the answers of these bots so they don’t rattle on, but depending on what you want them to do, you may need them to give a lengthy response, but they won’t. What personalized AI chatbots could offer If you are looking for an AI that chats to you conversationally like real people do, then this could be the feature you’re looking for. The fact that you can personalize bots with specific traits is something you can’t do as easily in apps like ChatGPT and Gemini and the fact that they have an avatar makes them more connectable too. Two of the defining features of Meta’s AI implementation is the ability to create custom AIs with a unique personality and to share them publicly. If you are having difficulty thinking of what a bot could be instructed to do, you can easily find community bots and interact with those instead and may find they provide some value. While these bots could be interesting for some people, they do carry the same risks as other AIs and that is that they can hallucinate. There was also a case in the UK where a man had been encouraged by his Replika to break into Buckingham Palace with a crossbow to kill the then head of state. Similar issues to this could result from Meta’s AI chatbots in time. Potential pitfalls While the feature is pretty interesting there are some things to be aware of. Firstly, the feature is still in beta on WhatsApp so you may run into issues and things could change once it’s finally released. Meta also states that it uses your interactions to improve its AI services, for this reason it is essential not to share personal information as Meta could read it. While Meta does limit the creation of bots that go against its standards, the company also warns that bots can output harmful content, so this could be dangerous for impressionable people who end up acting on what an AI has said with negative outcomes. What to watch for next It’s not clear when these AI chatbots will be available in the stable channel but given that a wider rollout is underway among beta users perhaps we are not too far off. For most people, this is not going to be a must-have feature, just a nice to have. We’ve been using WhatsApp to chat with friends for years, so clearly the app is just fine without the inclusion of AI, but when it’s available, people may be able to get more value out of the app. When the feature launches for all users, bots should be discoverable in the same way they are on Messenger where they’re categorized by category allowing users to begin chats easily. It remains to be seen how users will interact with this feature in the long-run. Last year, we reported that Meta was looking to give bots profiles on its social networks and this was met by somebacklash in our comments section.
    • 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.
  • 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
      130
    3. 3
      ATLien_0
      129
    4. 4
      Xenon
      119
    5. 5
      +FloatingFatMan
      93
  • Tell a friend

    Love Neowin? Tell a friend!