Skip to content
Find file
Fetching contributors…
Cannot retrieve contributors at this time
98 lines (88 sloc) 5.39 KB
<html>
<head>
<meta charset="UTF-8">
<title>Responsive Design Bookmarklet</title>
<meta author="Victor Coulon">
<meta description="a powerful and easy to use responsive design test bookmarklet">
<link rel="stylesheet" href="assets/css/web.css">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22043471-5']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="help">
<header>
<a href="#help">×</a>
<h4>How it works</h4>
</header>
<article>
<p>There are some options when you run the bookmarklet. Here is some explanations.</p>
<ul>
<li>
<img src="assets/img/web/keyboard.png" alt="">
<p>
Toggle a fake keyboard
<span>So, you can see how much space is visible when users are entering data in forms.</span>
</p>
</li>
<li>
<img src="assets/img/web/cssrefresh.png" alt="">
<p>
Toggle CSS Refresh
<span>As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser. It only works in a server environment.<br>
Powered by <a href="http://cssrefresh.frebsite.nl/">CSS Refresh</a></span>
<br/>
<span>In local environments this button will reload just the iframe your test page is in, saving you from having to re-apply the bookmarklet each time - mapped to the F5 and R keys.</span>
</p>
</li>
<li>
<img src="assets/img/web/close.png" alt="">
<p>
Close the bookmarklet
<span>Close the bookmarklet and return to the current page</span>
</p>
</li>
</ul>
</article>
</div>
<a href="#help" class="dim"></a>
<header>
<a href="#help">How it works <i>i</i></a>
</header>
<section>
<article>
<hgroup>
<h1>Responsive Design Bookmarklet</h1>
<h3>a handy tool for responsive design testing</h3>
</hgroup>
<a id="bookmarklet" href="javascript:void((function(){var a=document;a.write('&#60;!DOCTYPE html>&#60;html>&#60;head>&#60;meta charset=&#34;UTF-8&#34;>&#60;title>'+a.title+' - Responsive test &#60;/title>&#60;link rel=&#34;stylesheet&#34; href=&#34;//responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;//responsive.victorcoulon.fr/assets/js/app.min.js&#34;>&#60;/script>&#60;/head>&#60;body>&#60;header>&#60;div class=&#34;close&#34;>&#60;a href=&#34;#&#34;>&times;&#60;/a>&#60;/div>&#60;div id=&#34;size&#34;>&#60;/div>&#60;div class=&#34;keyboard&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;cssrefresh&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div class=&#34;reloadiframe&#34;>&#60;a href=&#34;#&#34;>I&#60;/a>&#60;/div>&#60;div id=&#34;devices&#34;>&#60;a href=&#34;#&#34; class=&#34;tablet-portrait&#34;>&#60;span>Tablet Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;tablet-landscape&#34;>&#60;span>Tablet Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-landscape&#34;>&#60;span>iPhone Landscape&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;smartphone-portrait&#34;>&#60;span>iPhone Portrait&#60;/span>&#60;/a>&#60;a href=&#34;#&#34; class=&#34;auto active&#34;>&#60;span>Auto&#60;/span>&#60;/a>&#60;/div>&#60;/header>&#60;section>&#60;div id=&#34;wrapper&#34;>&#60;iframe src=&#34;'+a.URL+'&#34; onLoad=&#34;resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);&#34;>&#60;/iframe>&#60;span class=&#34;keyboard-bg&#34;>&#60;/span>&#60;/div>&#60;/section>&#60;/body>&#60;/html>')})());">RWD Bookmarklet</a><br>
<span>Drag the link above into your bookmarks bar</span>
</article>
</section>
<footer>
An after dinner project by <a href="http://twitter.com/_victa">Victor Coulon</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="_victa">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</footer>
<script>
document.addEventListener("DOMContentLoaded", function() {
var helpBox = document.getElementById('help'),
dim = document.querySelector('.dim');
[].forEach.call(document.querySelectorAll('[href="#help"]'), function(el) {
el.addEventListener("click", function(e) {
e.preventDefault();
helpBox.classList.toggle('active');
dim.classList.toggle('active');
});
});
});
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.