CODEWITHSUNDEEP
jqueryiframe
webmonkey237
webmonkey237

Reputation: 379

jQuery iFrame frame size code needs a refresh option

I have some code for a demo site to show the user the website width in a tablet and mobile option.

HTML

<a class="widthOne widthBtn"><img src="files/images/graphics/ico_mobile.png" title="View at mobile size" alt="View at mobile size" /></a>
<a class="widthTwo widthBtn"><img src="files/images/graphics/ico_tablet.png" title="View at tablet size" alt="View at tablet size" /></a>

<iframe class="sizeFrame" src="http://www.website.com/" style="width:340px;" frameborder="0"></iframe>

jQuery

// CHANGE WIDTH
$( ".widthOne" ).click(function() { $('.sizeFrame').css('width', '340px'); });
$( ".widthTwo" ).click(function() { $('.sizeFrame').css('width', '1024px'); });

// MAKE THE IFRAME 100% HEIGHT
jQuery(document).ready(function(){var height = $(window).height();
         $('iframe').css('height', height)
});

This code works fine, what my problem is, is when the site changes size it breaks the CSS navigation so I need the page or frame to refresh after each click on the button. I did find:

location.reload();

But when I clicked the link to change the frame size it refreshes but looses the width which makes sense, any body got an idea of how I can replace the width and keep the width.

Thanks

Upvotes: 0

Views: 96

Answers (1)

Rich
Rich

Reputation: 56

If you're trying to get the just the iframe to reload on click of the links, you could try something like this:

http://jsfiddle.net/rsmclaug/5VcX7/

// CHANGE WIDTH
$( ".widthOne" ).click(function() { 
    $('.sizeFrame').css('width', '340px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});
$( ".widthTwo" ).click(function() {
    $('.sizeFrame').css('width', '1024px'); 
    $('.sizeFrame')[0].contentWindow.location.reload();
});

// MAKE THE IFRAME 100% HEIGHT
jQuery(document).ready(function(){var height = $(window).height();
    $('iframe').css('height', height)
});

Not quite sure what you mean by "CSS navigation"...

Upvotes: 1

Related Questions