CODEWITHSUNDEEP
jqueryiframeresponsive-design
Jules
Jules

Reputation: 14520

Changing iframe source depending on viewport width

I'm trying to get an iframe to change its source - from a full-sized version of a document to a mobile version - when the viewport width changes, using jQuery. Here's my current code:

<head>
    <script type="text/javascript">
        $(document).ready(function() {
            // on full-sized viewports
            if((document).width >= 1000) {
                // this line should change the src attribute
                $("#myIframe").attr('src', 'http://www.fullsize.url');

                // this just resizes the iframe
                $("#myIframe").width = 1000;
                $("#myIframe").height = 1200;
            }

            // on mobile viewports
            else {
                $("#myIframe").attr('src', 'http://www.mobilesize.url');
                $("#myIframe").width = 640;
                $("#myIframe").height = 800;
            }
        });
    </script>
</head>
<body>
    <iframe id="myIframe" src="http://www.fullsize.url">
</body>

The issue I'm having is that the new src, width, and height attributes don't actually update -- and I'm not sure why.

Is something like this even possible using jQuery, considering that this would require loading a new iframe? Do I need to do a workaround using Ajax to avoid having to reload the page?

Upvotes: 0

Views: 412

Answers (1)

Michel
Michel

Reputation: 28349

Use $("#myIframe").width(value) and $("#myIframe").height(value)

Edit : and replace (document).width with $(window).width()

Upvotes: 2

Related Questions