• 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

    • Elon Musk's robotaxi will have a human driver for 'safety' reasons by David Uzondu Image via Depositphotos.com A few days ago, we reported that Tesla was gearing up for its robotaxi launch, set to kick off in Austin, Texas, and now the details of the service are trickling out. Electrek says that some popular pro-Tesla influencers on X have gotten invitations to the launch. These invitations came with a list of rules, and the most glaring one was the presence of what Tesla called a "Safety Monitor" in the front passenger seat. This is basically a human supervising driver whose entire job is to watch the car and make sure it does not drive itself into a ditch. This might feel a little strange, especially given Musk's claims of "no driver" testing in the past. The safety monitor is one of the employees with access to buttons that can stop the car, much like the ones available to Waymo passengers in their fully autonomous rides. The service will operate within a geofenced area from 6 AM to 12 AM and will not run during bad weather. Other requirements include a credit card on file and an agreement that you will not be a jerk. Participants must also agree to a bunch of other rules, and one of the most interesting ones is that their access can be terminated if they share content on social media that shows the vehicle being misused. On top of that, they're not allowed to reverse engineer the technology in any way. At least the passenger gets a bit of a break. So, unlike the Tesla Full-Self Driving Beta, which requires the owner's constant attention, the supervising driver is expected to pay attention. At the same time, you, the passenger, can relax and enjoy the ride. According to Electrek's Fred Lambert, the robotaxi launch seems like an optics thing, designed to let Elon Musk say he met his June deadline for launching a robotaxi network.
    • I don't get why you care how thin your phone is. Most people slap a giant case on it anyway, so it doesn't mean much in the long run.
    • Yay it finally made it to openSUSE Tumbleweed. Installed on the rest of my PCs/laptops and also working just fine. Was also available before for KDE Neon and Fedora. And I hear Arch also already has it.
    • Yeah basically family safety is tied to your sons acc and your be the manager of it right and can see what they view and can control it. However open edge and you can actually signin to another account while on the windows account you are monitoring and bypass the restrictions. It was different to this on Windows 7 all the stuff was local not in cloud, so didn't matter if you signed out the browser. Chrome can usually still be installed even when blocked, my son used to use other acc in browser and download chrome and then use that freely and install apps and stuff as webapps. None of the tracking stuff would work. I originally ended up blocking downloads via group policy, microsoft store, winget, and loads of other stuff via group policy. But yeah as i said he just got to the point he reset the pc. I stopped that with bios password but he yanked the cmos battery (restores bios and removes password) and reinstalled windows. Other than physically locking the case away and watching him like a hawk its gameover now. It was kinda self inflicted, i did teach my son some cybersecurity stuff and i used to encourage him to try get past my blocking (so he learnt some skills for the future), he can actually lockpick interesting how you bring that up lol (another thing i got him into) I agree with the parenting thing locking stuff down is not the only solution.
  • Recent Achievements

    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
    • One Month Later
      gowtham07 earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      662
    2. 2
      ATLien_0
      269
    3. 3
      Michael Scrip
      223
    4. 4
      Steven P.
      167
    5. 5
      +FloatingFatMan
      162
  • Tell a friend

    Love Neowin? Tell a friend!