Skip to content

Instantly share code, notes, and snippets.

@rutger1140
Created July 6, 2012 14:19
Show Gist options
  • Save rutger1140/3060429 to your computer and use it in GitHub Desktop.
Save rutger1140/3060429 to your computer and use it in GitHub Desktop.
Viewport bookmarklet
<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>
@roelven
Copy link

roelven commented Jan 23, 2013

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.

@roelven
Copy link

roelven commented Jan 27, 2013

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 $.

@rutger1140
Copy link
Author

@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