• 0

Javascript to auto scale webpage


Question

Recommended Posts

  • 0

You want fit to width kind of thing?

If you can convert back this bookmarklet present in mozillazine thread:

http://forums.mozillazine.org/viewtopic.php?f=7&t=1980839

 

Main thread: http://forums.mozillazine.org/viewtopic.php?f=8&t=1939895

  • 0

What about CSS3 responsive web design?

No JavaScript required, just uses CSS

 

Add

<meta name="viewport" content="width=device-width, initial-scale=1">

to the header, and then in the CSS file,

@media screen and (max-width: 320px) {

}

Or can always use Bootstrap 3.0, which uses responsive web design as well

  • 0

CSS3 responsive is not what he needs in this case I think he wants it to work like a img element that gets bigger and smaller proportionally   :p

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

This might work, crazy code though.

  • 0

So, like example not my site here, but similar issue - http://www.ci.mcminnville.or.us/

 

That site, if you are on a widescreen monitor, it's a fixed width size. If you press CTRL+ x 4 in your browser (I am on 2560x1440) it is then full screen, without as much empty space on each of the sides.

 

I'd like something like this to happen automatically depending on the users browser window size. without losing the formatting of the content.

body { zoom: 1.5; }

kind of works, in the HTML, but not in the CSS file, and I don't want to apply it to each and every html file.

  • 0
  On 22/03/2014 at 20:10, xendrome said:

So, like example not my site here, but similar issue - http://www.ci.mcminnville.or.us/

 

That site, if you are on a widescreen monitor, it's a fixed width size. If you press CTRL+ x 4 in your browser (I am on 2560x1440) it is then full screen, without as much empty space on each of the sides.

 

I'd like something like this to happen automatically depending on the users browser window size. without losing the formatting of the content.

body { zoom: 1.5; }

kind of works, in the HTML, but not in the CSS file, and I don't want to apply it to each and every html file.

Tried my code?

 

I tested following code myself on that site and it works:

$(document).ready(function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
}
$(window).on('resize', function(){
	zoom = $(window).width()/$("#wrapper").width()*100;
	document.body.style.zoom = zoom+"%"
});
  • 0
  On 22/03/2014 at 20:12, Seahorsepip said:

 

Tried my code?

 

I tested following code myself on that site and it works:

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

 

Where do I apply that into? Does that fall between <script></script> tags in the html?

 

BTW I did try 

html {
    zoom: 0.8; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

But that actually cut off like 20% of the top and I couldn't scroll up.

  • 0
  On 22/03/2014 at 20:19, xendrome said:

Where do I apply that into?

 

BTW I did try 

html {
    zoom: 0.8; /* Old IE only */
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

But that actually cut off like 20% of the top and I couldn't scroll up.

Make sure that you use the correct element in the code I gave, it could be body but also #wrapper depending on what is the fixed width css element container.

 

Just put it in a file called something.js

and add these 2 lines to your header in html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="something.js" type="text/javascript"></script>
  • 0

Hmm not seeing any change in the formatting. I have

 

zoom.js in /scripts

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

And in index.html in the <head> section

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/zoom.js" type="text/javascript"></script>
  • 0
  On 22/03/2014 at 20:28, xendrome said:

 

Hmm not seeing any change in the formatting. I have

 

zoom.js in /scripts

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

And in index.html in the <head> section

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/scripts/zoom.js" type="text/javascript"></script>

Try just body instead of #body

  • 0
  On 22/03/2014 at 21:02, xendrome said:

No go, I do see this when I F12 and look at resourced - https://dl.dropboxusercontent.com/u/111413/error.png

weird that's very odd lemme check

  • 0

Seems I typed } instead of }); for document ready...    try:

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

Tell me if it worked ^^

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

 

Seems I typed } instead of }); for document ready...    try:

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

Same result. Check your PM also :)

  • 0
  On 22/03/2014 at 21:11, xendrome said:

Same result. Check your PM also :)

You made a mistake with jquery in <head>

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

should be:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

// means for http://

 

And js in your case:

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

You made a mistake with jquery in <head>

<script src="/ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

should be:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

// means for http://

 

I downloaded it locally, the version - jquery-1.11.0.min.js and pointed to it in the <head> if that will work ok? also put that in PM just FYI

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

And js in your case:

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

 

Ok this is working, Chrome, it's edge to edge, but can you load the live site now in IE 11, it's pushing the content to the far right. And BTW I just scaled it down to *75 instead of *100

 

Edit: Also IE8 same issue.

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

Ok this is working, Chrome, it's edge to edge, but can you load the live site now in IE 11, it's pushing the content to the far right. And BTW I just scaled it down to *75 instead of *100

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

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

    • No registered users viewing this page.
  • Posts

    • Well, that's good to hear. No one here wants MAGAs to breed.
    • OpenAI announces significant updates to Codex and voice agent tools by Pradeep Viswanathan Apart from serving the ChatGPT experience to hundreds of millions of users everyday, OpenAI is also engaged in providing its platform for developers creating AI applications. OpenAI is popular among developers not just for its cutting-edge models, but also because of its strong tooling and support for developers. Today, OpenAI announced two significant updates for developers. The first is about Codex, OpenAI’s software engineering agent. OpenAI is now making Codex available to ChatGPT Plus users. For a limited time, ChatGPT Plus users will be able to enjoy generous usage limits, but OpenAI will rate-limit them during high-demand periods. Codex can now connect to the internet to install dependencies, upgrade packages, run tests that need external resources, and more. OpenAI specified that internet access is off by default, but users can enable it for specific environments. Users can also control the specific domains which Codex can access and more. This Codex Internet access capability is available for ChatGPT Plus, Pro, and Teams users, and it is coming soon to Enterprise users. With today’s update, Codex users can now update existing pull requests when following up on a task. Finally, users can now dictate tasks to Codex. Apart from the above and bug fixes, OpenAI has made the following improvements to Codex: Added support for binary files: When applying patches, all file operations are supported. When using PRs, only deleting or renaming binary files is supported for now. Improved error messages for setup scripts. Increased the limit on task diffs from 1 MB to 5 MB. Increased the limit for setup script duration from 5 to 10 minutes. Polished GitHub connection flow. Re-enabled Live Activities on iOS after resolving an issue with missed notifications. Removed the mandatory two-factor authentication requirement for users using SSO or social logins. The second major update from OpenAI today is about voice agents. OpenAI’s Agents SDK is now available in TypeScript and it comes with support for handoffs, guardrails, tracing, MCP, and other core agent primitives. This SDK also includes new support for human-in-the-loop approvals, allowing developers to pause tool execution, serialize and store the agent state, approve or reject specific calls, and resume the agent run. OpenAI also released an updated speech-to-speech model with improvements in instruction-following reliability, tool-calling consistency, and interruption behavior. Also, developers can now customize how fast the voice speaks during each session. Developers can now access the updated model via gpt-4o-realtime-preview-2025-06-03 in the Realtime API and gpt-4o-audio-preview-2025-06-03 in the Chat Completions API. Finally, the Traces dashboard now supports Realtime API sessions, allowing developers to easily visualize voice agent runs, including audio input/output, tool invocations, and interruptions.
    • VirtualBox 7.1.10 by Razvan Serea VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Targeted at server, desktop and embedded use, it is now the only professional-quality virtualization solution that is also Open Source Software. Presently, VirtualBox runs on Windows, Linux, macOS, and Solaris hosts and supports a large number of guest operating systems including but not limited to Windows (NT 4.0, 2000, XP, Server 2003, Vista, 7, 8, Windows 10 and Windows 11), DOS/Windows 3.x, Linux (2.4, 2.6, 3.x, 4.x, 5.x and 6.x), Solaris and OpenSolaris, OS/2, OpenBSD, NetBSD and FreeBSD. Some of the features of VirtualBox are: Modularity. VirtualBox has an extremely modular design with well-defined internal programming interfaces and a client/server design. This makes it easy to control it from several interfaces at once: for example, you can start a virtual machine in a typical virtual machine GUI and then control that machine from the command line, or possibly remotely. VirtualBox also comes with a full Software Development Kit: even though it is Open Source Software, you don't have to hack the source to write a new interface for VirtualBox. Virtual machine descriptions in XML. The configuration settings of virtual machines are stored entirely in XML and are independent of the local machines. Virtual machine definitions can therefore easily be ported to other computers. VirtualBox 7.1.10 changelog: VBoxManage: Fixed a crash when running 'guestcontrol run' on Windows hosts (bug #22175) Audio: Fixed device switching on Windows hosts (bug #22267) Windows host installer: Fixed multiple installation entries in the 'Add or remove programs' dialog and upgrade issues Linux host: Fixed issue which caused VM Selector process crash due to missing libdl.so and libpthread.so libraries (bug #22193) Linux host: Removed libIDL as a build time dependency when building VirtualBox from source code (bug #21169) Linux guest and host: Added initial support for kernel 6.15 (bug #22420) Linux guest: Added initial support for kernel 6.16-RC0 Linux guest and host: Fixed issue with building modules for UEK8 kernel on Oracle Linux 9 distribution RDP: Fixed issue when it was not possible to paste clipboard buffer into a guest over RDP remote session Download: VirtualBox 7.1.10 | 119.0 MB (Open Source) Download: VirtualBox 7.1.10 Extension Pack | 21.9 MB View: VirtualBox Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • I think the reason is, it is cross platform.
  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      236
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      139
    4. 4
      Xenon
      131
    5. 5
      +FloatingFatMan
      128
  • Tell a friend

    Love Neowin? Tell a friend!