change src in iframe which depend on viewport size

Question

I'm quite new in website area

I'm trying to change src in my iframe which the src content is a table along with the width and height which make it not responsive

I'm trying to change the src which depend on the size of the viewport

here is my code

 <iframe width="100%" height="410" scrolling="yes" frameborder="0" scrolling="no" allowtransparency="true" src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"></iframe> <div id="fxempire_link" style="width:500px;font-size: 11px;"> The Free Charts are Powered by <a rel="nofollow" style="text-decoration: underline;" target="_blank" href="http://www.fxempire.com">FXEmpire.com</a> - Your Leading Financial Portal</div>

I'm trying to change the following width inside the src automatically

src="http://tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width=375&height=410&text_color=333&text_hover_color=082F60"

but i don't get any idea to do it

is there a way to do it??what I found in internet is all using either link or button to change the src

Answer 1

well because of the Access-Control-Allow-Origin you can not do it with ajax, you could do it with php, but i dont know legal/illegal this would be.

By using iframe it works this way, but only really sluggish cause the iframe needs a lot time to load...:

$(window).bind('load resize',function(){
    var windowH = $(window).height(),
        windowW = $(window).width();

    $('#iframe').attr('src','//tools.fxempire.com/sidebar-quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');
    $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'});    
})

http://jsfiddle.net/ebjsd8xx/3/

EDIT: I changed the code a little bit for better performance but, well - the graph still loads freaking slow, but it's the same on their preview..

var resizeTimer;

$(window).load(function(){
   $(window).trigger('resize');
});

$(window).resize(function(e){
    var windowH = $(window).height(),
        windowW = $(window).width();

    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
       $('#iframe').attr('src','http://tools.fxempire.com/sidebar- quotes.php?instruments=5,10,1,2,4,3&width='+windowW+'&height='+windowH+'&text_color=333&text_hover_color=082F60');

       $('#iframe').css({'height':windowH+'px', 'width':windowW+'px'}); 

     }, 250);


})

http://jsfiddle.net/ebjsd8xx/7/

Answer 2

Maybe like this?

jQuery(document).ready(function(){
    var iframe=jQuery('iframe'),/** target iFrame */
        src=iframe.attr('src'); /** src of iFrame */

    /** check viewport size */
    if (window.innerWidth<945){

        /** remove width value from src */
        src=src.replace(/(&width=[0-9]+)/,'');

        /** add new width */
        src+='&width=275';

        /** PROFIT */
        iframe.attr('src',src);
    }
});

On jsfiddle

Answer 3

For me the simplest way to select a src given the viewport size was with a small script, where your iframe has the id="vid"

<script>
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  
  if (w.matches) {
    vid.src = "media/test_1.mp4";
  } else {
    vid.src = "media/test_2.mp4";
  }

</script>

That will pick the source when you load the page the first time, but wouldn't change it if you resize the viewport later, foor that you need to listen to resize event ( this might help ).