Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Added Local Environment Iframe Reload Button #5

Merged
merged 6 commits into from

2 participants

@christiannaths

In local environments cssrefresh is not an option, a user who reloads the page loses the bookmarklet frame. This adds a button (only visible in when working on local files) that will reload only the iframe containing the test website, thereby keeping the bookmarklet frame intact and improving iterative testing workflow. This reload also gets mapped to the F5 key and the R key.

To test this, step back 1 commit and use the bookmarklet on the index.html page, then open a local HTML file and apply the bookmarklet.

I'm already using this extensively in Chrome (I like to test responsive layout experiments with local files, just using sass --watch for css), and it works great. It also doesn't change the functionality at all when working on files in a server environment.

Any questions, just ask :)

@Victa
Owner

Awesome :) I'll take a look on this tomorrow. Thanks!

@Victa Victa merged commit 68818bd into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 17, 2012
  1. @christiannaths

    JS modifications

    christiannaths authored
    Added bookmarklet js file & minified version
  2. @christiannaths

    Updated CSS

    christiannaths authored
    Fixed miss matched quotes in bookmarklet link
  3. @christiannaths
  4. @christiannaths
  5. @christiannaths

    Removed a console.log from the app.js file. That's like a doctor forg…

    christiannaths authored
    …etting a sponge inside the patient :S
  6. @christiannaths

    updated app.min.js

    christiannaths authored
This page is out of date. Refresh to see the latest.
View
2  assets/css/app.css
1 addition, 1 deletion not shown
View
2  assets/css/web.css
@@ -1 +1 @@
-/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,html{height:100%;overflow:hidden}body{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;color:#fff;color:rgba(255,255,255,0.65);-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,0.3);background-color:#619ec2}img{max-width:100%;max-height:80%}h1,h2,h3,h4,h5,h6{font-weight:normal;color:#fff}a{color:#fff;text-decoration:none}p{color:rgba(255,255,255,0.8)}body>header{position:fixed;top:0;left:0;right:0;text-align:right;padding:0 2em;line-height:60px;height:60px;font-size:.9em}body>header i{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;font-family:Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;margin:21px 0 0 6px;font-size:.8em;font-weight:600;text-align:center;float:right;display:block;background:rgba(255,255,255,0.9);line-height:18px;width:18px;height:18px;color:rgba(0,0,0,0.75)}section{display:table;width:100%;height:100%;text-align:center;table-layout:fixed}section article{display:table-cell;width:100%;height:100%;padding:0 1em;vertical-align:middle}section article hgroup{margin:0 0 3em}section article hgroup h3,section article hgroup h1{margin:0}section article hgroup h1{margin-bottom:.24em}section+section{background:#FFF}footer{font-size:.8em;z-index:20;position:absolute;left:0;right:0;bottom:10px;padding:0 2em;font-weight:normal;z-index:20;text-align:center}footer iframe{position:absolute;bottom:24px;left:50%;margin-left:-50px;width:100px!important}#bookmarklet{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;font-size:1.25em;position:relative;cursor:move;color:#fff;text-decoration:none;background:rgba(0,0,0,0.25);padding:10px 20px 8px;margin:0 0 10px 0;display:inline-block}#bookmarklet ~ span{display:inline-block;margin:0 0 0 10px;font-size:.8em}#help{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:rgba(255,255,255,0.95);width:400px;height:320px;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-160px;z-index:40;display:none;color:rgba(0,0,0,0.75);text-shadow:0 1px 0 white}#help.active{display:block}#help h4,#help p{color:rgba(0,0,0,0.75)}#help a{color:rgba(0,0,0,0.25)}#help header{padding:1em 1.5em;border-bottom:1px solid rgba(0,0,0,0.1)}#help header h4{margin:0}#help header a{float:right;color:rgba(0,0,0,0.35);font-size:1.25em}#help article{padding:0 1.5em}#help article p,#help article li{font-size:.9em}#help ul{padding:0}#help li{margin:0 0 1em}#help li img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4);float:left;margin-right:10px}#help li p{margin:0;overflow:hidden;display:block}#help li span{padding-top:4px;display:block;font-size:.9em;color:rgba(0,0,0,0.5)}.dim.active{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.3);z-index:30}@media screen and (max-width: 640px){body{font-size:14px}#help{width:300px;margin-left:-150px}}
+/* normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}pre,code,kbd,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:75%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body,html{height:100%;overflow:hidden}body{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;font-family:"Gill Sans", "Gill Sans MT", Calibri, sans-serif;color:#fff;color:rgba(255,255,255,0.65);-webkit-font-smoothing:antialiased;text-shadow:0 1px 1px rgba(0,0,0,0.3);background-color:#619ec2}img{max-width:100%;max-height:80%}h1,h2,h3,h4,h5,h6{font-weight:normal;color:#fff}a{color:#fff;text-decoration:none}p{color:rgba(255,255,255,0.8)}body>header{position:fixed;top:0;left:0;right:0;text-align:right;padding:0 2em;line-height:60px;height:60px;font-size:.9em}body>header i{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;font-family:Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;margin:21px 0 0 6px;font-size:.8em;font-weight:600;text-align:center;float:right;display:block;background:rgba(255,255,255,0.9);line-height:18px;width:18px;height:18px;color:rgba(0,0,0,0.75)}section{display:table;width:100%;height:100%;text-align:center;table-layout:fixed}section article{display:table-cell;width:100%;height:100%;padding:0 1em;vertical-align:middle}section article hgroup{margin:0 0 3em}section article hgroup h3,section article hgroup h1{margin:0}section article hgroup h1{margin-bottom:.24em}section+section{background:#FFF}footer{font-size:.8em;z-index:20;position:absolute;left:0;right:0;bottom:10px;padding:0 2em;font-weight:normal;z-index:20;text-align:center}footer iframe{position:absolute;bottom:24px;left:50%;margin-left:-50px;width:100px!important}#bookmarklet{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;font-size:1.25em;position:relative;cursor:move;color:#fff;text-decoration:none;background:rgba(0,0,0,0.25);padding:10px 20px 8px;margin:0 0 10px 0;display:inline-block}#bookmarklet ~ span{display:inline-block;margin:0 0 0 10px;font-size:.8em}#help{-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:rgba(255,255,255,0.95);width:400px;position:fixed;top:50%;left:50%;margin-left:-200px;margin-top:-160px;z-index:40;display:none;color:rgba(0,0,0,0.75);text-shadow:0 1px 0 white}#help.active{display:block}#help h4,#help p{color:rgba(0,0,0,0.75)}#help a{color:rgba(0,0,0,0.25)}#help header{padding:1em 1.5em;border-bottom:1px solid rgba(0,0,0,0.1)}#help header h4{margin:0}#help header a{float:right;color:rgba(0,0,0,0.35);font-size:1.25em}#help article{padding:0 1.5em}#help article p,#help article li{font-size:.9em}#help ul{padding:0}#help li{margin:0 0 1em}#help li img{-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;border-radius:5px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.4);box-shadow:0 1px 3px rgba(0,0,0,0.4);float:left;margin-right:10px}#help li p{margin:0;overflow:hidden;display:block}#help li span{padding-top:4px;display:block;font-size:.9em;color:rgba(0,0,0,0.5)}.dim.active{position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.3);z-index:30}@media screen and (max-width: 640px){body{font-size:14px}#help{width:300px;margin-left:-150px}}
View
393 assets/js/app.js
@@ -1,215 +1,192 @@
-// Responsive Bookmarklet namespace
window.resbook = {};
-
-(function(rb) {
- // Private var & methods
- var d = document,
- w = window,
- url = d.URL,
- title = d.title,
- wrapper = null,
- devices = null,
- close = null,
- keyboard = null,
- refreshBtn = null,
- body = null,
- size = null,
- auto = true,
- isResized = false,
- isAnimated = false,
- sizes = {
- smartphonePortrait: [320, 480],
- smartphoneLandscape: [480, 320],
- tabletPortrait: [1024, 768],
- tabletLandscape: [768, 1024],
- auto: 'auto'
- },
- refreshCss = function(disable){
- var ifrm = d.querySelector('#wrapper iframe');
- ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
- var b = ifrm.document.querySelector('body');
- if(disable){
- var el = ifrm.document.getElementById('cssrefresh');
- if(el){
- el.parentNode.removeChild(el);
- b.classList.remove('cssrefresh');
- }
- } else {
-
- var t = ifrm.document.createTextNode("(function(){var script=document.createElement('script');script.setAttribute('src','http://responsive.victorcoulon.fr/assets/js/cssrefresh.js');script.setAttribute('id','cssrefresh');var head=document.getElementsByTagName('head');head[0].appendChild(script)})()"),
- s = ifrm.document.createElement("script");
- b.classList.add('cssrefresh');
- s.appendChild(t);
- ifrm.document.body.appendChild(s);
- }
- },
- resize = function(w,h,f) {
- w = w || wrapper.clientWidth;
- h = h || wrapper.clientHeight;
- size.innerHTML = w + 'x' + h;
- },
- setPosition = function(wh,t,cl){
- var width = (wh == 'auto') ? w.innerWidth : wh[0],
- height = (wh == 'auto') ? w.innerHeight : wh[1],
- style = 'width:'+width+'px;height:'+height+'px;margin-top:20px;';
-
- if (typeof(width) == 'undefined' || typeof(height) == 'undefined') return false;
-
- style += (wh === 'auto') ? 'margin-top:0;' : '';
- wrapper.setAttribute('style',style);
- wrapper.setAttribute('data-device',cl);
- body.setAttribute('style','min-height:'+height+'px;min-width:'+width+'px;');
- resize(width,height);
- if(wh === 'auto' && !t){
- isResized = false;
- setTimeout(function(){
- wrapper.setAttribute('style','');
- body.setAttribute('style','');
- isAnimated = false;
- }, 260);
- } else {
- isAnimated = false;
- }
- },
- readyElement = function(id,callback){
- var interval = setInterval(function(){
- if(d.getElementById(id)){
- callback(d.getElementById(id));
- clearInterval(interval);
- }
- },60);
- };
-
- // === Public methods ====
- /**
- * Change url and the document title with pushState method
- * @param {string} u url of the new page
- * @param {title} t title of the new page
- */
- rb.changeUrl = function (u,t){
- d.title = t + ' - Responsive test';
- if(history.pushState) {
- try {
- history.pushState({}, "New Page", u);
- }
- catch (e) {}
+(function (rb) {
+ var d = document,
+ w = window,
+ url = d.URL,
+ title = d.title,
+ wrapper = null,
+ devices = null,
+ close = null,
+ keyboard = null,
+ refreshBtn = null,
+ reloadBtn = null,
+ body = null,
+ size = null,
+ auto = true,
+ isResized = false,
+ isAnimated = false,
+ sizes = {
+ smartphonePortrait: [320, 480],
+ smartphoneLandscape: [480, 320],
+ tabletPortrait: [1024, 768],
+ tabletLandscape: [768, 1024],
+ auto: 'auto'
+ }, refreshCss = function (disable) {
+ var ifrm = d.querySelector('#wrapper iframe');
+ ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
+ var b = ifrm.document.querySelector('body');
+ if (disable) {
+ var el = ifrm.document.getElementById('cssrefresh');
+ if (el) {
+ el.parentNode.removeChild(el);
+ b.classList.remove('cssrefresh')
}
- if(refreshBtn.classList.contains('active')){
- refreshCss();
- } else {
- refreshCss(true);
+ } else {
+ var t = ifrm.document.createTextNode("(function(){var script=document.createElement('script');script.setAttribute('src','http://responsive.victorcoulon.fr/assets/js/cssrefresh.js');script.setAttribute('id','cssrefresh');var head=document.getElementsByTagName('head');head[0].appendChild(script)})()"),
+ s = ifrm.document.createElement("script");
+ b.classList.add('cssrefresh');
+ s.appendChild(t);
+ ifrm.document.body.appendChild(s)
+ }
+ }, reloadIframe = function(){
+ var ifrm = d.querySelector('#wrapper iframe');
+ ifrm.src += '';
+ }, resize = function (w, h, f) {
+ w = w || wrapper.clientWidth;
+ h = h || wrapper.clientHeight;
+ size.innerHTML = w + 'x' + h
+ }, setPosition = function (wh, t, cl) {
+ var width = (wh == 'auto') ? w.innerWidth : wh[0],
+ height = (wh == 'auto') ? w.innerHeight : wh[1],
+ style = 'width:' + width + 'px;height:' + height + 'px;margin-top:20px;';
+ if (typeof (width) == 'undefined' || typeof (height) == 'undefined') return false;
+ style += (wh === 'auto') ? 'margin-top:0;' : '';
+ wrapper.setAttribute('style', style);
+ wrapper.setAttribute('data-device', cl);
+ body.setAttribute('style', 'min-height:' + height + 'px;min-width:' + width + 'px;');
+ resize(width, height);
+ if (wh === 'auto' && !t) {
+ isResized = false;
+ setTimeout(function () {
+ wrapper.setAttribute('style', '');
+ body.setAttribute('style', '');
+ isAnimated = false
+ }, 260)
+ } else {
+ isAnimated = false
+ }
+ }, readyElement = function (id, callback) {
+ var interval = setInterval(function () {
+ if (d.getElementById(id)) {
+ callback(d.getElementById(id));
+ clearInterval(interval)
}
+ }, 60)
};
-
- // "document ready"
- readyElement('wrapper', function(){
-
- // Set var cache
- wrapper = d.getElementById('wrapper');
- devices = d.getElementById('devices');
- size = d.getElementById('size');
- close = d.querySelector('.close a');
- keyboard = d.querySelector('.keyboard a');
- refreshBtn = d.querySelector('.cssrefresh a');
- body = d.querySelector('body');
-
- // Detect webkit browser
- if(window.chrome || (window.getComputedStyle && !window.globalStorage && !window.opera)){
- //wrapper.setAttribute('scrolling','no');
- }
-
- // Disabled css refresh if we are not on server environment
- if(w.location.protocol !== 'http:'){
- refreshBtn.setAttribute('style','display:none');
- }
-
- // Events
- [].forEach.call(document.querySelectorAll('#devices a'), function(el) {
- el.addEventListener('click', function(e) {
-
- [].forEach.call(document.querySelectorAll('#devices a'), function(el) {
- el.classList.remove('active');
- });
-
- e.preventDefault();
- e.stopPropagation();
- var self = this;
-
- if((self.classList.contains('auto') && isResized === false) || isAnimated === true)
- return false;
-
- isAnimated = true;
- if(isResized === false){
- isResized = true;
- setPosition(sizes.auto,true);
- }
-
- setTimeout(function(){
- self.classList.add('active');
- if(self.classList.contains('smartphone-portrait')){
- setPosition(sizes.smartphonePortrait, false,'smartphonePortrait');
- } else if(self.classList.contains('smartphone-landscape')){
- setPosition(sizes.smartphoneLandscape, false, 'smartphoneLandscape');
- } else if(self.classList.contains('tablet-portrait')){
- setPosition(sizes.tabletPortrait, false, 'tabletPortrait');
- } else if(self.classList.contains('tablet-landscape')){
- setPosition(sizes.tabletLandscape, false, 'tabletLandscape');
- } else if(self.classList.contains('auto')){
- setPosition(sizes.auto, false, 'auto');
- }
- }, 10);
-
- });
+ rb.changeUrl = function (u, t) {
+ d.title = t + ' - Responsive test';
+ if (history.pushState) {
+ try {
+ history.pushState({}, "New Page", u)
+ } catch (e) {}
+ }
+ if (refreshBtn.classList.contains('active')) {
+ refreshCss()
+ } else {
+ refreshCss(true)
+ }
+ };
+ readyElement('wrapper', function () {
+ wrapper = d.getElementById('wrapper');
+ devices = d.getElementById('devices');
+ size = d.getElementById('size');
+ close = d.querySelector('.close a');
+ keyboard = d.querySelector('.keyboard a');
+ refreshBtn = d.querySelector('.cssrefresh a');
+ reloadBtn = d.querySelector('.reloadiframe a');
+ body = d.querySelector('body');
+ if (window.chrome || (window.getComputedStyle && !window.globalStorage && !window.opera)) {}
+ if (w.location.protocol !== 'http:') {
+ refreshBtn.setAttribute('style', 'display:none')
+ } else {
+ reloadBtn.setAttribute('style', 'display:none')
+ }[].forEach.call(document.querySelectorAll('#devices a'), function (el) {
+ el.addEventListener('click', function (e) {
+ [].forEach.call(document.querySelectorAll('#devices a'), function (el) {
+ el.classList.remove('active')
});
-
- close.addEventListener('click', function(e){
- e.preventDefault();
- e.stopPropagation();
- w.location = d.URL;
- }, false);
-
- keyboard.addEventListener('click', function(e){
- e.preventDefault();
- e.stopPropagation();
- keyboard.classList.toggle('active');
- wrapper.classList.toggle('keyboard');
- }, false);
-
- refreshBtn.addEventListener('click', function(e){
- e.preventDefault();
- e.stopPropagation();
- refreshBtn.classList.toggle('active');
- if(refreshBtn.classList.contains('active')){
- refreshCss();
- } else {
- refreshCss(true);
- }
- }, false);
-
- w.addEventListener('resize', function(){
- resize();
- }, false);
-
- w.addEventListener('keyup', function(e){
- var key = e.keyCode ? e.keyCode : e.charCode,
- keys = {
- 49: 'tabletPortrait',
- 50: 'tabletLandscape',
- 51: 'smartphonePortrait',
- 52: 'smartphoneLandscape',
- 53: 'auto'
- };
-
- // Quit now if the key isn't in our object map
- if (typeof(keys[key]) == 'undefined') return false;
-
- setPosition(sizes[keys[key]], false, keys[key]);
-
- }, false);
-
- resize();
- size.style.minWidth = 0;
-
+ e.preventDefault();
+ e.stopPropagation();
+ var self = this;
+ if ((self.classList.contains('auto') && isResized === false) || isAnimated === true) return false;
+ isAnimated = true;
+ if (isResized === false) {
+ isResized = true;
+ setPosition(sizes.auto, true)
+ }
+ setTimeout(function () {
+ self.classList.add('active');
+ if (self.classList.contains('smartphone-portrait')) {
+ setPosition(sizes.smartphonePortrait, false, 'smartphonePortrait')
+ } else if (self.classList.contains('smartphone-landscape')) {
+ setPosition(sizes.smartphoneLandscape, false, 'smartphoneLandscape')
+ } else if (self.classList.contains('tablet-portrait')) {
+ setPosition(sizes.tabletPortrait, false, 'tabletPortrait')
+ } else if (self.classList.contains('tablet-landscape')) {
+ setPosition(sizes.tabletLandscape, false, 'tabletLandscape')
+ } else if (self.classList.contains('auto')) {
+ setPosition(sizes.auto, false, 'auto')
+ }
+ }, 10)
+ })
});
-
+ close.addEventListener('click', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ w.location = d.URL
+ }, false);
+ keyboard.addEventListener('click', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ keyboard.classList.toggle('active');
+ wrapper.classList.toggle('keyboard')
+ }, false);
+ refreshBtn.addEventListener('click', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ refreshBtn.classList.toggle('active');
+ if (refreshBtn.classList.contains('active')) {
+ refreshCss()
+ } else {
+ refreshCss(true)
+ }
+ }, false);
+ reloadBtn.addEventListener('click', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ reloadIframe();
+ }, false);
+ w.addEventListener('resize', function () {
+ resize()
+ }, false);
+ w.addEventListener('keyup', function (e) {
+ var key = e.keyCode ? e.keyCode : e.charCode,
+ keys = {
+ 49: 'tabletPortrait',
+ 50: 'tabletLandscape',
+ 51: 'smartphonePortrait',
+ 52: 'smartphoneLandscape',
+ 53: 'auto',
+ 116: 'reloadIframe',
+ 82: 'reloadIframe'
+ };
+ if (typeof (keys[key]) == 'undefined'){
+ return false;
+ } else if (e.metaKey && keys[key] == 'reloadIframe'){
+ e.preventDefault();
+ e.stopPropagation();
+ reloadIframe();
+ return false
+ } else if (keys[key] == 'reloadIframe') {
+ e.preventDefault();
+ e.stopPropagation();
+ reloadIframe();
+ return false
+ } else {
+ setPosition(sizes[keys[key]], false, keys[key])
+ }
+ }, false);
+ resize();
+ size.style.minWidth = 0;
+ })
})(resbook);
View
2  assets/js/app.min.js
@@ -1 +1 @@
-window.resbook={};(function(rb){var d=document,w=window,url=d.URL,title=d.title,wrapper=null,devices=null,close=null,keyboard=null,refreshBtn=null,body=null,size=null,auto=true,isResized=false,isAnimated=false,sizes={smartphonePortrait:[320,480],smartphoneLandscape:[480,320],tabletPortrait:[1024,768],tabletLandscape:[768,1024],auto:'auto'},refreshCss=function(disable){var ifrm=d.querySelector('#wrapper iframe');ifrm=(ifrm.contentWindow)?ifrm.contentWindow:(ifrm.contentDocument.document)?ifrm.contentDocument.document:ifrm.contentDocument;var b=ifrm.document.querySelector('body');if(disable){var el=ifrm.document.getElementById('cssrefresh');if(el){el.parentNode.removeChild(el);b.classList.remove('cssrefresh')}}else{var t=ifrm.document.createTextNode("(function(){var script=document.createElement('script');script.setAttribute('src','http://responsive.victorcoulon.fr/assets/js/cssrefresh.js');script.setAttribute('id','cssrefresh');var head=document.getElementsByTagName('head');head[0].appendChild(script)})()"),s=ifrm.document.createElement("script");b.classList.add('cssrefresh');s.appendChild(t);ifrm.document.body.appendChild(s)}},resize=function(w,h,f){w=w||wrapper.clientWidth;h=h||wrapper.clientHeight;size.innerHTML=w+'x'+h},setPosition=function(wh,t,cl){var width=(wh=='auto')?w.innerWidth:wh[0],height=(wh=='auto')?w.innerHeight:wh[1],style='width:'+width+'px;height:'+height+'px;margin-top:20px;';if(typeof(width)=='undefined'||typeof(height)=='undefined')return false;style+=(wh==='auto')?'margin-top:0;':'';wrapper.setAttribute('style',style);wrapper.setAttribute('data-device',cl);body.setAttribute('style','min-height:'+height+'px;min-width:'+width+'px;');resize(width,height);if(wh==='auto'&&!t){isResized=false;setTimeout(function(){wrapper.setAttribute('style','');body.setAttribute('style','');isAnimated=false},260)}else{isAnimated=false}},readyElement=function(id,callback){var interval=setInterval(function(){if(d.getElementById(id)){callback(d.getElementById(id));clearInterval(interval)}},60)};rb.changeUrl=function(u,t){d.title=t+' - Responsive test';if(history.pushState){try{history.pushState({},"New Page",u)}catch(e){}}if(refreshBtn.classList.contains('active')){refreshCss()}else{refreshCss(true)}};readyElement('wrapper',function(){wrapper=d.getElementById('wrapper');devices=d.getElementById('devices');size=d.getElementById('size');close=d.querySelector('.close a');keyboard=d.querySelector('.keyboard a');refreshBtn=d.querySelector('.cssrefresh a');body=d.querySelector('body');if(window.chrome||(window.getComputedStyle&&!window.globalStorage&&!window.opera)){}if(w.location.protocol!=='http:'){refreshBtn.setAttribute('style','display:none')}[].forEach.call(document.querySelectorAll('#devices a'),function(el){el.addEventListener('click',function(e){[].forEach.call(document.querySelectorAll('#devices a'),function(el){el.classList.remove('active')});e.preventDefault();e.stopPropagation();var self=this;if((self.classList.contains('auto')&&isResized===false)||isAnimated===true)return false;isAnimated=true;if(isResized===false){isResized=true;setPosition(sizes.auto,true)}setTimeout(function(){self.classList.add('active');if(self.classList.contains('smartphone-portrait')){setPosition(sizes.smartphonePortrait,false,'smartphonePortrait')}else if(self.classList.contains('smartphone-landscape')){setPosition(sizes.smartphoneLandscape,false,'smartphoneLandscape')}else if(self.classList.contains('tablet-portrait')){setPosition(sizes.tabletPortrait,false,'tabletPortrait')}else if(self.classList.contains('tablet-landscape')){setPosition(sizes.tabletLandscape,false,'tabletLandscape')}else if(self.classList.contains('auto')){setPosition(sizes.auto,false,'auto')}},10)})});close.addEventListener('click',function(e){e.preventDefault();e.stopPropagation();w.location=d.URL},false);keyboard.addEventListener('click',function(e){e.preventDefault();e.stopPropagation();keyboard.classList.toggle('active');wrapper.classList.toggle('keyboard')},false);refreshBtn.addEventListener('click',function(e){e.preventDefault();e.stopPropagation();refreshBtn.classList.toggle('active');if(refreshBtn.classList.contains('active')){refreshCss()}else{refreshCss(true)}},false);w.addEventListener('resize',function(){resize()},false);w.addEventListener('keyup',function(e){var key=e.keyCode?e.keyCode:e.charCode,keys={49:'tabletPortrait',50:'tabletLandscape',51:'smartphonePortrait',52:'smartphoneLandscape',53:'auto'};if(typeof(keys[key])=='undefined')return false;setPosition(sizes[keys[key]],false,keys[key])},false);resize();size.style.minWidth=0})})(resbook);
+window.resbook={};(function(p){var t=document,j=window,e=t.URL,x=t.title,f=null,l=null,m=null,c=null,q=null,h=null,k=null,n=null,g=true,r=false,o=false,a={smartphonePortrait:[320,480],smartphoneLandscape:[480,320],tabletPortrait:[1024,768],tabletLandscape:[768,1024],auto:"auto"},s=function(y){var w=t.querySelector("#wrapper iframe");w=(w.contentWindow)?w.contentWindow:(w.contentDocument.document)?w.contentDocument.document:w.contentDocument;var d=w.document.querySelector("body");if(y){var B=w.document.getElementById("cssrefresh");if(B){B.parentNode.removeChild(B);d.classList.remove("cssrefresh")}}else{var z=w.document.createTextNode("(function(){var script=document.createElement('script');script.setAttribute('src','http://responsive.victorcoulon.fr/assets/js/cssrefresh.js');script.setAttribute('id','cssrefresh');var head=document.getElementsByTagName('head');head[0].appendChild(script)})()"),A=w.document.createElement("script");d.classList.add("cssrefresh");A.appendChild(z);w.document.body.appendChild(A)}},i=function(){var d=t.querySelector("#wrapper iframe");d.src+=""},v=function(d,y,z){d=d||f.clientWidth;y=y||f.clientHeight;n.innerHTML=d+"x"+y},b=function(y,z,w){var B=(y=="auto")?j.innerWidth:y[0],d=(y=="auto")?j.innerHeight:y[1],A="width:"+B+"px;height:"+d+"px;margin-top:20px;";if(typeof(B)=="undefined"||typeof(d)=="undefined"){return false}A+=(y==="auto")?"margin-top:0;":"";f.setAttribute("style",A);f.setAttribute("data-device",w);k.setAttribute("style","min-height:"+d+"px;min-width:"+B+"px;");v(B,d);if(y==="auto"&&!z){r=false;setTimeout(function(){f.setAttribute("style","");k.setAttribute("style","");o=false},260)}else{o=false}},u=function(y,w){var d=setInterval(function(){if(t.getElementById(y)){w(t.getElementById(y));clearInterval(d)}},60)};p.changeUrl=function(d,w){t.title=w+" - Responsive test";if(history.pushState){try{history.pushState({},"New Page",d)}catch(y){}}if(q.classList.contains("active")){s()}else{s(true)}};u("wrapper",function(){f=t.getElementById("wrapper");l=t.getElementById("devices");n=t.getElementById("size");m=t.querySelector(".close a");c=t.querySelector(".keyboard a");q=t.querySelector(".cssrefresh a");h=t.querySelector(".reloadiframe a");k=t.querySelector("body");if(window.chrome||(window.getComputedStyle&&!window.globalStorage&&!window.opera)){}if(j.location.protocol!=="http:"){q.setAttribute("style","display:none")}else{h.setAttribute("style","display:none")}[].forEach.call(document.querySelectorAll("#devices a"),function(d){d.addEventListener("click",function(y){[].forEach.call(document.querySelectorAll("#devices a"),function(z){z.classList.remove("active")});y.preventDefault();y.stopPropagation();var w=this;if((w.classList.contains("auto")&&r===false)||o===true){return false}o=true;if(r===false){r=true;b(a.auto,true)}setTimeout(function(){w.classList.add("active");if(w.classList.contains("smartphone-portrait")){b(a.smartphonePortrait,false,"smartphonePortrait")}else{if(w.classList.contains("smartphone-landscape")){b(a.smartphoneLandscape,false,"smartphoneLandscape")}else{if(w.classList.contains("tablet-portrait")){b(a.tabletPortrait,false,"tabletPortrait")}else{if(w.classList.contains("tablet-landscape")){b(a.tabletLandscape,false,"tabletLandscape")}else{if(w.classList.contains("auto")){b(a.auto,false,"auto")}}}}}},10)})});m.addEventListener("click",function(d){d.preventDefault();d.stopPropagation();j.location=t.URL},false);c.addEventListener("click",function(d){d.preventDefault();d.stopPropagation();c.classList.toggle("active");f.classList.toggle("keyboard")},false);q.addEventListener("click",function(d){d.preventDefault();d.stopPropagation();q.classList.toggle("active");if(q.classList.contains("active")){s()}else{s(true)}},false);h.addEventListener("click",function(d){d.preventDefault();d.stopPropagation();i()},false);j.addEventListener("resize",function(){v()},false);j.addEventListener("keyup",function(y){var d=y.keyCode?y.keyCode:y.charCode,w={49:"tabletPortrait",50:"tabletLandscape",51:"smartphonePortrait",52:"smartphoneLandscape",53:"auto",116:"reloadIframe",82:"reloadIframe"};if(typeof(w[d])=="undefined"){return false}else{if(y.metaKey&&w[d]=="reloadIframe"){y.preventDefault();y.stopPropagation();i();return false}else{if(w[d]=="reloadIframe"){y.preventDefault();y.stopPropagation();i();return false}else{b(a[w[d]],false,w[d])}}}},false);v();n.style.minWidth=0})})(resbook);
View
54 assets/js/bookmarklet.js
@@ -0,0 +1,54 @@
+((function () {
+ var d = document;
+ d.write(
+ '<!DOCTYPE html>' +
+ '<html>' +
+ '<head>' +
+ '<meta charset="UTF-8">' +
+ '<title>'+d.title+' - Responsive test </title>' +
+ '<link rel="stylesheet" href="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/css/app.css">' +
+ '<script src="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/js/app.js"></script>' +
+ '</head>' +
+ '<body>' +
+ '<header>' +
+ '<div class="close">' +
+ '<a href="#">×</a>' +
+ '</div>' +
+ '<div id="size"></div>' +
+ '<div class="keyboard">' +
+ '<a href="#">I</a>' +
+ '</div>' +
+ '<div class="cssrefresh">' +
+ '<a href="#">I</a>' +
+ '</div>' +
+ '<div class="reloadiframe">' +
+ '<a href="#">I</a>' +
+ '</div>' +
+ '<div id="devices">' +
+ '<a href="#" class="tablet-portrait">' +
+ '<span>Tablet Portrait</span>' +
+ '</a>' +
+ '<a href="#" class="tablet-landscape">' +
+ '<span>Tablet Landscape</span>' +
+ '</a>' +
+ '<a href="#" class="smartphone-landscape">' +
+ '<span>iPhone Landscape</span>' +
+ '</a>' +
+ '<a href="#" class="smartphone-portrait">' +
+ '<span>iPhone Portrait</span>' +
+ '</a>' +
+ '<a href="#" class="auto active">' +
+ '<span>Auto</span>' +
+ '</a>' +
+ '</div>' +
+ '</header>' +
+ '<section>' +
+ '<div id="wrapper">' +
+ '<iframe src="'+d.URL+'" onLoad="resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);"></iframe>' +
+ '<span class="keyboard-bg"></span>' +
+ '</div>' +
+ '</section>' +
+ '</body>' +
+ '</html>'
+ );
+})());
View
1  assets/js/bookmarklet.min.js
@@ -0,0 +1 @@
+((function(){var a=document;a.write('<!DOCTYPE html><html><head><meta charset="UTF-8"><title>'+a.title+' - Responsive test </title><link rel="stylesheet" href="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/css/app.css"><script src="https://raw.github.com/christiannaths/responsive-bookmarklet/master/assets/js/app.min.js"></script></head><body><header><div class="close"><a href="#">×</a></div><div id="size"></div><div class="keyboard"><a href="#">I</a></div><div class="cssrefresh"><a href="#">I</a></div><div class="reloadiframe"><a href="#">I</a></div><div id="devices"><a href="#" class="tablet-portrait"><span>Tablet Portrait</span></a><a href="#" class="tablet-landscape"><span>Tablet Landscape</span></a><a href="#" class="smartphone-landscape"><span>iPhone Landscape</span></a><a href="#" class="smartphone-portrait"><span>iPhone Portrait</span></a><a href="#" class="auto active"><span>Auto</span></a></div></header><section><div id="wrapper"><iframe src="'+a.URL+'" onLoad="resbook.changeUrl(this.contentWindow.location,this.contentDocument.title);"></iframe><span class="keyboard-bg"></span></div></section></body></html>')})());
View
20 assets/sass/app.scss
@@ -24,7 +24,7 @@ a{color:white}
#wrapper {
@include transition(height $transition-duration ease, width $transition-duration ease, margin $transition-duration ease);
@include box-shadow(0 0 12px 1px black);
-
+
-webkit-transform:translate3d(0,0,0);
iframe::-webkit-scrollbar { display: none; }
@@ -41,7 +41,7 @@ a{color:white}
height: 100%;
}
&.noTransitions{
- @include transition(0);
+ @include transition(0);
}
.keyboard-bg{
@include translateY(-20px);
@@ -63,7 +63,7 @@ a{color:white}
opacity:1;
}
}
-
+
&[data-device="smartphonePortrait"].keyboard {
padding-bottom:260px;
.keyboard-bg{background:inline-image('iphone-portrait.png');}
@@ -126,7 +126,7 @@ body>section{
}
}
-header .keyboard, .cssrefresh, .close{
+header .keyboard, .cssrefresh, .reloadiframe, .close{
@include border-radius(4px);
color:#EEE;
@@ -138,7 +138,7 @@ header .keyboard, .cssrefresh, .close{
a{
@include background(linear-gradient(rgba(#343434,1), rgba(#242424,1)));
@include box-shadow(inset 0 1px 0 #3c3c3c);
- @include border-radius(4px);
+ @include border-radius(4px);
text-decoration:none;
border:1px solid #040404;
@@ -155,7 +155,7 @@ header .keyboard, .cssrefresh, .close{
@include background(linear-gradient(rgba(#313131,1), rgba(#242424,1)));
}
}
-
+
a.active,a:active{
@include background(linear-gradient(rgba(#1C1C1C,1), rgba(#242424,1)));
@include box-shadow(inset 0 1px 0 #242424);
@@ -168,7 +168,7 @@ header .keyboard, .cssrefresh, .close{
.close{display:none;}
}
-header .keyboard, header .cssrefresh{
+header .keyboard, header .cssrefresh, header .reloadiframe{
right:auto;
position:relative;
top:auto;
@@ -183,8 +183,8 @@ header .keyboard, header .cssrefresh{
top:0;left:0;right:0;bottom:0;
background:inline-image('icon-keyboard.png') 50% 50% no-repeat;
}
- &.cssrefresh a:after{
- background:inline-image('icon-cssrefresh.png') 50% 50% no-repeat;
+ &.cssrefresh a:after, &.reloadiframe a:after{
+ background:inline-image('icon-cssrefresh.png') 50% 50% no-repeat;
}
}
@@ -221,7 +221,7 @@ header .keyboard, header .cssrefresh{
@include background(linear-gradient(rgba(#2c2c2c,1), rgba(#242424,1)));
}
}
-
+
a.active,a:active{
@include background(linear-gradient(rgba(#1C1C1C,1), rgba(#242424,1)));
@include box-shadow(inset 0 1px 0 #242424);
View
5 assets/sass/web.scss
@@ -522,7 +522,7 @@ body{
text-shadow:0 1px 1px rgba(0, 0, 0, .3);
background-color: #619ec2;
-
+
}
img{
@@ -588,7 +588,7 @@ section{
h3,h1{margin:0;}
h1{margin-bottom:.24em;}
margin:0 0 3em;
- }
+ }
}
&+section{
background:#FFF;
@@ -637,7 +637,6 @@ footer{
@include border-radius(4px);
background:rgba(#fff,.95);
width:400px;
- height:320px;
position:fixed;
top:50%;left:50%;
margin-left:-200px;
View
10 index.html
@@ -17,7 +17,7 @@
})();
</script>
</head>
-<body>
+<body>
<div id="help">
@@ -41,6 +41,8 @@
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>
@@ -57,7 +59,7 @@
<a href="#help" class="dim"></a>
<header>
- <a href="#help">How it works <i>i</i></a>
+ <a href="#help">How it works <i>i</i></a>
</header>
<section>
@@ -66,7 +68,7 @@
<h1>Responsive Design Bookmarklet</h1>
<h3>a handy tool for responsive design testing</h3>
</hgroup>
- <a id="bookmarklet" href="javascript:void((function(){var d=document;d.write('&#60;!DOCTYPE html>&#60;html>&#60;head>&#60;meta charset=&#34;UTF-8&#34;>&#60;title>'+d.title+' - Responsive test&#60;/title>&#60;link rel=&#34;stylesheet&#34; href=&#34;http://responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;http://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 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;'+d.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>
+ <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;http://responsive.victorcoulon.fr/assets/css/app.css&#34;>&#60;script src=&#34;http://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>
@@ -92,4 +94,4 @@
});
</script>
</body>
-</html>
+</html>
Something went wrong with that request. Please try again.