• 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

    • This site is just old men ranting at clouds. Neowin knows its audience.
    • 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. one good example of the 'ge-proton' updates messing with a game in particular is the offline version of RDR2 1491.50 as I setup a specific version there and after removing the 'vulkan-1 (native)' entry in 'Wine configuration' on 'RDR2.exe' entry (if you don't remove this the game won't start up) is when the 'ge-proton' updates, it will restore that 'vulkan-1 (native)' entry and prevent the game from working. you can always remove the entry on the RDR2.exe in Wine configuration specifically after updates, but doing that everytime that updates will get old quickly. hence, keeping it on a specific GE Proton version stops me from having to mess with it as then you just adjust it once and you are done with it. also, when using 'bat' files to start a game (like Hitman: WoA for example using Peacock etc) I had some issues with GE Proton after '9-27', so I got the game locked to '9-27' (April 1st) instead of the newer ones (10-1 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.
    • Hey, sounds like it’s definitely time for an upgrade. The R7000 had an excellent run! If you want lots of wired ports and future-proofing, the Asus RT-BE88U is a killer choice. It’s got 2x 10GbE, 4x 2.5GbE, and handles WiFi 7 like a champ. Super fast, stable, and the ASUS firmware is solid with loads of features. The TP-Link BE900 is also great, sleek design, strong performance, and a combo 10G port (RJ45/SFP+), but it has fewer wired ports than the Asus. Netgear RS700S is powerful too, but the firmware isn’t as flexible and only has one 10G port. It might feel familiar from your R7000. If wired ports are a big deal, maybe adding a 2.5G or 10G switch later gives you more options. My vote is RT-BE88U all the way.
  • Recent Achievements

    • First Post
      nothin earned a badge
      First Post
    • 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
  • Popular Contributors

    1. 1
      +primortal
      186
    2. 2
      ATLien_0
      130
    3. 3
      snowy owl
      129
    4. 4
      Xenon
      119
    5. 5
      +FloatingFatMan
      97
  • Tell a friend

    Love Neowin? Tell a friend!