• 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

    • Apple warns Australia against joining EU in mandating iPhone app sideloading by David Uzondu Apple has issued a warning to Australia, essentially telling the country not to follow the European Union's lead in making iPhone app sideloading a requirement. This communication comes as the Australian federal government considers new rules that could force Apple to open up its iOS ecosystem, much like what happened in Europe with recent legislation. Since iOS 17.4 and iPadOS 18, users in the EU have been able to get apps from outside the official App Store, a direct consequence of the DMA designating Apple as a "gatekeeper". The Australian government floated a proposal in a paper released late last year. The paper suggested "designating" digital platforms like Apple's App Store. Being designated this way means these platforms would have to follow new rules intended to keep them from limiting competition. The government pointed to Apple's in-app payment system, which usually comes with a commission, and the lack of sideloading as likely targets for regulation. Right now, apps like Netflix and Spotify can't let users subscribe through their iOS apps without giving Apple a big cut, and they're not even allowed to tell users where to find a better deal. Apple, in its response to this Australian paper, stated that Australia should not use the EU's Digital Markets Act "as a blueprint". The company's core argument is that the changes mandated by the EU's DMA, which came into full effect in March 2024, introduce serious security and privacy risks for users. Apple claims that allowing sideloading and alternative app stores effectively opens the door for malware, fraud, scams, and other harmful content. The tech company also highlighted specific concerns from its European experience, alleging that its compliance there has led to users being able to install pornography apps and apps that facilitate copyright infringement, things its curated App Store aims to prevent. Apple maintains that its current review process is vital for user protection, and that its often criticized 30% commission applies mainly to the highest earning apps, with most developers paying a lower 15% rate or nothing. It is worth noting that Apple's implementation of DMA requirements in the EU, which includes a "Core Technology Fee" for apps distributed outside its store, has already drawn scrutiny from European Commission officials who question if these measures truly comply with the DMA's idea of keeping the market fair. The Australian government has not yet detailed its next steps in this process, and the Treasury still needs to publish the full submissions to its proposal paper, including Apple's complete arguments. Source: The Guardian
    • Oh the Chinese crybabies who couldn't accept the fact that they lost GOTY to Astro Bot? Not interested
    • Download this SQL Essentials For Dummies eBook (worth $10) for free by Steven Parker FOR DUMMIES is a trademark of John Wiley & Sons, Inc. A right-to-the-point guide on all the key topics of SQL programming SQL Essentials For Dummies is your quick reference to all the core concepts of SQL—a valuable common standard language used in relational databases. This useful guide is straightforward—with no excess review, wordy explanations, or fluff—so you get what you need, fast. Great for a brush-up on the basics or as an everyday desk reference, this book is one you can rely on. Strengthen your understanding of the basics of SQL Review what you've already learned or pick up key skills Use SQL to create, manipulate, and control relational databases Jog your memory on the essentials as you work and get clear answers to your questions Perfect for supplementing classroom learning, reviewing for a certification, and staying knowledgeable on the job, SQL Essentials For Dummies is the convenient, direct, and digestible reference you've been looking for. Claim your complimentary eBook worth $10 for free, before the offer ends on June 17. How to get it Please ensure you read the terms and conditions to claim this offer. Complete and verifiable information is required in order to receive this free offer. If you have previously made use of these free offers, you will not need to re-register. While supplies last! Download the SQL Essentials For Dummies eBook (worth $10) for free Offered by Wiley, view other free resources The below offers are also available for free for a limited time: Winxvideo AI V3.0 Lifetime License for PC ($69.95 Value) FREE – Expires 6/8 Aiarty Image Enhancer for PC/Mac ($85 Value) FREE – Expires 6/8 Solutions Architect's Handbook, Third Edition ($42.99 Value) FREE – Expires 6/10 AI and Innovation ($21 Value) FREE – Expires 6/11 Unruly: Fighting Back when Politics, AI, and Law Upend [...] ($18 Value) FREE - Expires 6/17 SQL Essentials For Dummies ($10 Value) FREE – Expires 6/17 Continuous Testing, Quality, Security, and Feedback ($27.99 Value) FREE – Expires 6/18 VideoProc Converter AI v7.5 for FREE (worth $78.90) – Expires 6/18 Macxvideo AI ($39.95 Value) Free for a Limited Time – Expires 6/22 The Ultimate Linux Newbie Guide – Featured Free content Python Notes for Professionals – Featured Free content Learn Linux in 5 Days – Featured Free content Quick Reference Guide for Cybersecurity – Featured Free content We post these because we earn commission on each lead so as not to rely solely on advertising, which many of our readers block. It all helps toward paying staff reporters, servers and hosting costs. Other ways to support Neowin The above deal not doing it for you, but still want to help? Check out the links below. Check out our partner software in the Neowin Store Buy a T-shirt at Neowin's Threadsquad Subscribe to Neowin - for $14 a year, or $28 a year for an ad-free experience Disclosure: An account at Neowin Deals is required to participate in any deals powered by our affiliate, StackCommerce. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through the branded deals site.
    • No one is surprised. It goes both ways. Warhammer remake is not on the PS5, but Xbox/PC and Game Pass day 1 and it is NOT a Microsoft owned game (Sega). 100% Microsoft money deal. Timed of course. Sega wins because they get the Microsoft money now then when the deal ends they get the much larger PS audience to make money from. As far as Black Myth is concerned, the Chinese gaming platform market is very much PC then PS then everything else. Consoles were banned in China for years, then allowed and the PS is the console of choice. The release of Black Myth actually saw a PS5 console sale spike because of Chinese gamer's buying PS5's just to play this game. With the ever shrinking Xbox console market I can see a point where 3rd party games try to get Sony exclusive money because the ROI for Xbox console versions of those games is a shrinking endeavor.
  • Recent Achievements

    • One Month Later
      MoyaM earned a badge
      One Month Later
    • One Month Later
      qology earned a badge
      One Month Later
    • One Year In
      Frinco90 earned a badge
      One Year In
    • Apprentice
      Frinco90 went up a rank
      Apprentice
    • Week One Done
      theevergreentree earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      448
    2. 2
      +FloatingFatMan
      247
    3. 3
      snowy owl
      232
    4. 4
      ATLien_0
      202
    5. 5
      Xenon
      146
  • Tell a friend

    Love Neowin? Tell a friend!