Created
July 6, 2012 14:19
-
-
Save rutger1140/3060429 to your computer and use it in GitHub Desktop.
Viewport bookmarklet
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<body> | |
<h1>Viewport bookmarklet</h1> | |
<p> | |
Show tiny counter in top left corner of viewport, with current window size.<br> | |
<em>Uses jQuery</em> | |
</p> | |
<h2>Usage</h2> | |
<ol> | |
<li>Drag to bookmark bar</li> | |
<li>Hit to add viewport element to window</li> | |
</ol> | |
<p> | |
<a href="javascript:var%20s=document.createElement('script');s.setAttribute('src',%20'//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);$('body').append('<div style=\'position:fixed;top:2px;left:2px;font-family:courier,monospace;font-size:16px;border:2px solid #fa3232;background:#eeeeee;padding:4px;\' id=\'viewportwidth\'></div>');$(window).resize(function(){$('#viewportwidth').html($(window).width());});$(window).resize();void(s);">Check viewport</a> | |
</p> | |
<hr> | |
By <a href="http://twitter.com/lekkerduidelijk">@lekkerduidelijk</a>. | |
</body> | |
</html> |
Scrap that. I rewrote the whole thing and made it into a seperate project: http://roelvanderven.com/viewportmarklet/
It'll now only execute the code when jQuery is loaded, using jQuery in a different namespace than $.
@roelven Your fork looks good dude! A bit too lengthy if you ask me, but I am sure it works better than mine.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The javascript used in your bookmarklet causes issues in combination with other js libraries. I forked your Gist and added a noConflict handler to prevent this.