Changing iFrame Source

Using JQuery to change iframe source. RESPONSIVE

by dshilkret

HTML

<p><a href="http://applications.3d4medical.com" target="someFrame">Charlie 1</a></p>
<p><a href="http://www.3d4medical.com" target="someFrame">Charlie 2</a></p>
<p><a href="http://uidesignbits.com" target="someFrame">Charlie 3</a></p>

<div class="iframeContainer">
<iframe name="someFrame" id="someFrame" src="http://www.microsoft.com/" frameborder="0" scrolling="no">
     Your browser doesn't support iframes.
  
</iframe>
</div>

CSS

html, body { height:100%; }

.iframeContainer {
    width:90%;
    height:100%;
    overflow:hidden;
}
#someFrame {
    width:100%;
    height:100%;
}

JavaScript

$(document).ready(function(){
    $("a").click(function(e) {
    //alert(location.href);
        e.preventDefault();
 
        $("#someFrame").attr("src", $(this).attr("href"));
        getLocation();
    })
    
});
function getLocation(){
console.log("test");
}

//let's make it responsive
//$(document).ready(function() {
  //$('#someFrame').width($('.iframeContainer').width());
//});
//$(document).ready(function() {
  //$('#someFrame').height($('.iframeContainer').height());
//});