Why doesnt this Jquery cod set ifram src?

Question

I am trying to change the iframe src based on window height but this code doesnt set the src to anything at all...

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>


    <script>

if( $(window).width() > 480){
  $('#cal').attr('src', "https://teamup.com/ks5fbef7146ebe1a4d?view=m&sidepanel=c&showLogo=0&showTitle=0");
}else {
  $('#cal').attr('src', "https://teamup.com/ks5fbef7146ebe1a4d?view=l&sidepanel=c&showLogo=0&showTitle=0");
}

</script>

<iframe id="cal" src="" frameborder="0" width="65%" height="600"></iframe>

What am i missing?

There's something fishy about the title. – Biffen Oct 13 '16 at 20:25 — Biffen, Oct 13 '16 at 20:25

score 1 · Accepted Answer · answered Oct 13 '16 at 20:26

If your code is in that order when the page loads, the javascript doesn't know about that iframe yet. I suggest wrapping the jQuery in a ready function, like this:

$(document).ready(function(){

   if( $(window).width() > 480){
      $('#cal').attr('src', "https://teamup.com/ks5fbef7146ebe1a4d?view=m&sidepanel=c&showLogo=0&showTitle=0");
    }else {
      $('#cal').attr('src', "https://teamup.com/ks5fbef7146ebe1a4d?view=l&sidepanel=c&showLogo=0&showTitle=0");
   }

});

Why doesnt this Jquery cod set ifram src?

1 Answers1