Advanced Search

View RSS Feed

Nile

Document Resizer

Rate this Entry
10 Comments
by
Nile
, 10-31-2009 at 11:50 PM (44081 Views)
Just a little script I made to make the document size bigger.
Quote Originally Posted by Nile View Post
Ok:
Code:
<html>
<head>
<title>Javascript Document Resizer</title>
<script type="text/javascript">
// Made by Nile
//UnlinkThis.net
//This credit tag must not be removed!
var size = new Array("XSmall", "Small", "Medium", "Lage", "XLarge", "XXLarge");
var reSize = function(size){
document.body.style.zoom = screen.width/size;
};  
</script>
</head>
<body>
<img src="http://puppywar.com/images/cards/31309.jpg" /><img src="http://www.classact.ca/RubberStamps/Dogs/D06B_B_Large%20Dog%20Paw.jpg" /><br />
<h1>HTML Ipsum Presents</h1>
	       
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
	       
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>

<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>

<pre><code>
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}
</code></pre>
<div id="zoomer">
<input type="button" value="Small" onclick="reSize(screen.width+100)"/><input type="button" value="Medium" onclick="reSize(screen.width)"/><input type="button" value="Large"  onclick="reSize(1100)"/><input type="button" value="XLarge"  onclick="reSize(1000)"/>
</div>
The highlighted are the parts you need. Place the first highlighted text into the <head> part of your document, and the second highlighted text in any part of the <body> tag in your document you want.

Submit "Document Resizer" to del.icio.us Submit "Document Resizer" to StumbleUpon Submit "Document Resizer" to Google Submit "Document Resizer" to Digg

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments

  1. jscheuer1's Avatar
    A zoom and/or text resizing option is included in virtually every browser. So there is no need to code one. In fact, doing so discourages users from learning the rudiments of their browser(s). Not all browsers will activate (in fact many will not) anything on invocation of the zoom style property. And in IE, this style property often has undesirable results.

    The code itself (as of this writing) is sloppy, introducing both meaningless and utilized variables in the global scope where neither are required. This in itself could mess up your page.

    In short - I would highly recommend against doing this.
    Updated 11-09-2009 at 04:20 PM by jscheuer1 (accuracy)
  2. molendijk's Avatar
    This seems to work on any browser except Chrome.
    Updated 11-01-2009 at 08:11 PM by molendijk (Correction)
  3. Nile's Avatar
    @jscheuer: The only code that isn't being used is:
    Code:
    var size = new Array("XSmall", "Small", "Medium", "Lage", "XLarge", "XXLarge");
    I made this array myself, and did not take it from anywhere. I was going to use it, but then realized that it wasn't reasonable, and then forgot to remove it. It seems to work in Google Chrome too, but I haven't checked Firefox yet.
  4. molendijk's Avatar
    Nile, I didn't mean to say that your script works on any browser except Chrome, but that the script on the page produced by the LINK in my post ('This') works everywhere except on Chrome.

    Your script (almost) gives the opposite result: it works in IE and Chrome, but fails on any other browser.

    Arie.
  5. Nile's Avatar
    I was responding to jscheuer, but thats interesting... probably a bunch of stupid arguments between the browsers.
  6. muqtada123's Avatar
    I just copied it for my future references, thanks for the script.
  7. jscheuer1's Avatar
    The zoom style property is supported in IE (not real well where positioned, padded, or floated elements are involved), Safari, and Chrome. However, not in Opera or Firefox. By extension, I would assume (though untested) that would mean not Flock, Netsacape, nor any other Mozilla based browser, probably others.

    These sort of scripts (document resizing) shouldn't be used though, the browser itself performs this function. Also, when so many browsers do not support a script, this is another reason not to use it.

    Further, zoom is invalid style according to the W3C css validator.
    Updated 11-09-2009 at 04:23 PM by jscheuer1 (accuracy)
  8. Nile's Avatar
    Ok, thank you. (I wasn't planning on using it anyways. )
  9. jscheuer1's Avatar
    Quote Originally Posted by Nile
    Ok, thank you. (I wasn't planning on using it anyways. )
    Oh really now?

    In that case, why did you blog such drivel in the first place?
    Updated 11-09-2009 at 02:25 AM by jscheuer1 (add specificity)
  10. Nile's Avatar
    Why not?