Skip to content

Commit

Permalink
Add support for interfaces with invisible scrollbars
Browse files Browse the repository at this point in the history
  • Loading branch information
@scudco
scudco committed Nov 26, 2012
1 parent 11f4810 commit 72ae837
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 28 deletions.
23 changes: 12 additions & 11 deletions index.html
View file
Expand Up @@ -22,7 +22,7 @@
.widthOnly {height:580px;}
.widthOnly h2 span{display:none;}
.widthOnly iframe{height:500px;}
</style>
</style>
</head>
<body id="container">
<div id="url">
Expand All @@ -31,7 +31,8 @@
<input type="submit" value="submit">
<div id="options">
<label for="normal"><input id="normal" type="radio" name="option" value="1" checked>Width only</label><br />
<label for="accurate"><input id="accurate" type="radio" name="option" value="2">Device sizes</label>
<label for="accurate"><input id="accurate" type="radio" name="option" value="2">Device sizes</label><br />
<label for="scrollbar"><input id="scrollbar" type="checkbox" name="scrollbar" value="1" checked>Visible Scrollbars</label>
</div>
</form>
</div>
Expand All @@ -40,17 +41,17 @@
<div id="f1" class="frame">
<h2>240<span> x 320</span> <span class="small">(small phone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="255" height="320"></iframe>
</div>
<div id="f2" class="frame">
<h2>320<span> x 480</span> <span class="small">(iPhone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
</div>
<div id="f2" class="frame">
<h2>320<span> x 480</span> <span class="small">(iPhone)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="335" height="480"></iframe>
</div>
<div id="f3" class="frame">
<h2>480<span> x 640</span> <span class="small">(small tablet)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
</div>
<div id="f3" class="frame">
<h2>480<span> x 640</span> <span class="small">(small tablet)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="495" height="640"></iframe>
</div>
<div id="f4" class="frame">
<h2>768<span> x 1024</span> <span class="small">(iPad - Portrait)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
</div>
<div id="f4" class="frame">
<h2>768<span> x 1024</span> <span class="small">(iPad - Portrait)</span> <img src="http://mattkersley.com/wp-content/themes/mattkersley/images/loader_large.gif" /></h2>
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless width="783" height="1024"></iframe>
</div>
<div id="f5" class="frame">
Expand Down
49 changes: 32 additions & 17 deletions responsive.js
View file
Expand Up @@ -9,7 +9,7 @@ function showLoader(id) {
function hideLoader(id) {
$('#' + id + ' img').fadeOut('slow');
}

//function to check load state of each frame
function allLoaded(){
var results = [];
Expand All @@ -29,55 +29,70 @@ function loadPage($frame, url) {
$('iframe').not($frame).attr('src', url);
}

$('.frame').each(function(){showLoader($(this).attr('id'))});
$('.frame').each(function(){showLoader($(this).attr('id'))});


//when document loads
$(document).ready(function(){

loadPage('', defaultURL);

//query string
var qsArray = window.location.href.split('?');
var qs = qsArray[qsArray.length-1];
if(qs != '' && qsArray.length > 1){

if(qs != '' && qsArray.length > 1){
$('#url input[type=text]').val(qs);
loadPage('', qs);
}

//set slidable div width
$('#frames #inner').css('width', function(){
var width = 0;
$('.frame').each(function(){width += $(this).outerWidth() + 20});
return width;
});

//add event handlers for options radio buttons
$('input[type=radio]').change(function(){
$frames = $('#frames');
$inputs = $('input[type=radio]:checked').val();

if($inputs == '1'){
$frames.addClass('widthOnly');
} else {
$frames.removeClass('widthOnly');
}
});


//add event handlers for scrollbars checkbox
$('input[type=checkbox]').change(function(){
var scrollBarWidth = 15;
$frames = $('#frames');
$inputs = $('#scrollbar:checked');

if( $inputs.length == 0 ){
scrollBarWidth = -15;
}

$frames.find('iframe').each(function(i,el) {
$(el).attr('width', parseInt($(el).attr('width')) + scrollBarWidth);
});
});

//when the url textbox is used
$('form').submit(function(){
loadPage('' , $('#url input[type=text]').val());
return false;
});

//when frame loads
$('iframe').load(function(){

var $this = $(this);
var url = '';
var error = false;

try{
url = $this.contents().get(0).location.href;
} catch(e) {
Expand All @@ -88,7 +103,7 @@ $(document).ready(function(){
url = defaultURL;
}
}

//load other pages with the same URL
if(allLoaded()){
if(error){
Expand All @@ -98,13 +113,13 @@ $(document).ready(function(){
loadPage($this, url);
}
}

//when frame loads, hide loader graphic
else{
error = false;
hideLoader($(this).parent().attr('id'));
$(this).data('loaded',true);
}
});
});

});

0 comments on commit 72ae837

Please sign in to comment.