• 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

    • Firefox, for privacy, wide range of plugins without having to suffer the latest Google manifest restrictions and when used on Android for the mobile browser plugins like an ad-blocker, sadly that option isn't available to me now I've swapped to iOS as outside of the EU Firefox mobile is just a reskin of Safari
    • Ok will give that a shot soon as wake up in morning.     Hopefully does restore it working right  
    • Try doing a reset/repair on the Windows store: To reset the Microsoft Store on Windows 11, press the Windows key + I to open Settings, go to Apps & features, find Microsoft Store, click on it, select Advanced options, and then click the Reset button. This will clear the cache and restore the app to its default state, which can help resolve issues.
    • Microsoft's new Exchange Message Trace: What admins need to know before September by Paul Hill Microsoft has just announced the general availability of the new Message Trace in the Exchange admin center (EAC) in Exchange Online for its worldwide (WW) customers. The Redmond giant said that it’ll begin rolling it out in mid-June and complete the rollout in July. Message Trace in the Exchange Admin Center for Exchange Online is a tool that lets admins trace which path emails took as they traveled through the Microsoft 365 organization. It lets admins see if emails were received, rejected, or deferred. It is helpful for troubleshooting mail flow issues and validating policy changes. To get started with the new Message Trace, admins can access it by going to the Exchange admin center > Mail flow > Message Trace. While the Windows-maker has received positive feedback during the Public Preview, you can still provide your thoughts through Exchange admin center > Give Feedback. In addition, Microsoft will continue to maintain the old Message Trace user experience in Exchange admin center and cmdlets for several months to ease the transition, however, they will be deprecated for WW customers starting from September 1. The Reporting Webservice support for Message Trace data will also begin deprecating on this date. A side note to mention here is that this timeline only applies to the WW environment and doesn’t affect GCC, GCC-High, DOD, or other sovereign clouds. More information about the switch over for those will be provided in the second half of the year. Who it affects, and how These changes need to be noted by Exchange Online administrators and IT professionals as those are the people who will be directly affected. Specifically, it will affect anyone managing mail flow and troubleshooting email delivery in Exchange Online. Those who are affected will have to get switched over to the new Message Trace before Microsoft starts deprecating features in several months time. Admins will want to act promptly to avoid any unforeseen issues that could arise. Another detail that admins should be aware of is that scripts that rely on the older “Get-MessageTrace” or “Get-MessageTraceDetail” cmdlets will break on September 1. To address this, admins will need to update their scripts to use the new “Get-MessageTraceV2” and the “Get-MessageTraceDetailV2” cmdlets. Finally, any admins out there using the Reporting Webservice for Message Trace data will also need to make a change. They will need to shift to the new Message Trace PowerShell cmdlets. Why it’s happening Microsoft has been working on a new Message Trace experience, incorporating feedback from the Public Preview phase, to improve its design and performance. The switch gives Microsoft the opportunity to standardize and modernize admin interfaces and the underlying technologies. What to watch for While September 1 may seem like a long way away, fixing any issues, such as scripts due to deprecations, could take some time. Any admins managing the affected items need to ensure they deal with affected components in a timely manner. In terms of documentation, Microsoft has so far only released the Public Preview document which highlights the changes between the old and new versions. Microsoft says that it will publish cmdlet documentation for the new Message Trace cmdlets by the time of the general availability, so admins should look out for that.
    • Microsoft PC Manager 3.17.2.0 (Offline Installer) by Razvan Serea With Microsoft PC Manager, users can easily perform basic computer maintenance and enhance the speed of their devices with just one click. This app offers a range of features, including disk cleanup, startup app management, virus scanning, Windows Update checks, process monitoring, and storage management. Microsoft PC Manager key features: Storage Manager- easily uninstall infrequently used apps, manage large files, perform a cleanup, and set up Storage Sense to automatically clear temporary files. Health Checkup feature -scans for potential problems, viruses, and startup programs to turn off. It helps you identify unnecessary items to remove, optimizing your system's performance. Pop-up Management - block pop-up windows from appearing in apps. Windows Update - scans your system for any pending updates. Startup Apps - enable or disable startup apps on your PC, allowing you to optimize your system's startup performance. Browser Protection - rest assured that harmful programs cannot alter your default browser. Also enables you to change your default browser. Process Management - allows you to conveniently terminate any active process, ensuring optimal system performance and resource utilization. Anti-virus protection - Fully integrated with Windows Security. Safeguard your PC anytime. Quick Steps: Download Microsoft PC Manager Offline Installer (APPX/MSIX) with Adguard Adguard serves as a third-party online service, offering a user-friendly method for directly downloading appx, appxbundle, and msixbundle files from the Microsoft Store. Official download links will be generated for both the app's various versions and its dependency packages. How to download Microsoft PC Manager Offline Installer (APPX/MSIX) 1. Initially, you must find the app URL within the Microsoft Store. Access the Microsoft Store via your browser and search for "Microsoft PC Manager". Once located, copy the app URL, which includes the product ID, either from the address bar or from the provided link below. https://apps.microsoft.com/detail/9PM860492SZD 2. Now paste the app URL into the designated area, then click the check mark button to produce a direct download link. 3. To download, right-click the relevant link and select “Save link as…” from your browser's menu. Occasionally, Microsoft Edge may flag the download as insecure. In such cases, consider utilizing alternative browsers such as Google Chrome or Firefox to successfully complete the download. Microsoft PC Manager is a completely free tool optimized exclusively for use on Windows 10 (version 1809 or newer) and Windows 11. Download: Microsoft PC Manager 3.17.2.0 | from Microsoft Store View: Microsoft PC Manager Home Page Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      Leonard grant earned a badge
      Week One Done
    • One Month Later
      portacnb1 earned a badge
      One Month Later
    • Week One Done
      portacnb1 earned a badge
      Week One Done
    • First Post
      m10d earned a badge
      First Post
    • Conversation Starter
      DarkShrunken earned a badge
      Conversation Starter
  • Popular Contributors

    1. 1
      +primortal
      261
    2. 2
      snowy owl
      158
    3. 3
      +FloatingFatMan
      145
    4. 4
      ATLien_0
      140
    5. 5
      Xenon
      131
  • Tell a friend

    Love Neowin? Tell a friend!