How can you output HTML depending on the width of browser windows?

Question

I made this javascript and tried but never works.
It has to show advertising banner.
If I put this iframe on out side of javascript tag, it works fine but I did put inside of javascript tag because iframe will be decided depending one the width of browser window.

How can I make this work????

<head>

<script type="text/javascript">
    width = jQuery(".pagenator").width();
    if (width > 730) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442?'>
        </iframe>
    } else if (width > 470) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='468' height='60' src='http://foofoofoofootest.com/adspot.aspx?id=21443?'>
        </iframe>
    } else if (width > 255) {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='250' height='250' src='http://foofoofoofootest.com/adspot.aspx?id=21444?'>
        </iframe>
    } else {
        <iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='200' height='200' src='http://foofoofoofootest.com/adspot.aspx?id=21445?'>
        </iframe>
    }       
</script>   


<head>

<body>



</body>

</html>

UPDATE

<body>

<script type="text/javascript">
    var TheHTML = "";
    width = jQuery(".pagenator").width();
    if (width > 730) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442'></iframe>";
    } else if (width > 470) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='468' height='60' src='http://foofoofoofootest.com/adspot.aspx?id=21443'></iframe>";
    } else if (width > 255) {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='250' height='250' src='http://foofoofoofootest.com/adspot.aspx?id=21444'></iframe>";
    } else {
        TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='200' height='200' src='http://foofoofoofootest.com/adspot.aspx?id=21445'></iframe>";
    }
    $("#frameHolder").html(TheHTML);        
</script>           


<div id="frameHolder"></div>


</body>

why don't you just use media queries and display: none; and then display: block;. You don't need to use JS for something that can be done with CSS — Andy Holmes
– Andy Holmes, Commented Jul 21, 2014 at 15:09
do a console.log() on your width variable and see what is in there, I would guess that it returns a string. — Stevo Perisic
– Stevo Perisic, Commented Jul 21, 2014 at 15:09
I think you need to push be pushing this logic into the iframe's source rather than the holder for the content. Then use media quieries — Michael
– Michael, Commented Jul 21, 2014 at 15:48

frenchie · Accepted Answer · 2014-07-21 15:14:24Z

3

You need to add the HTML to the DOM; like this:

var TheHTML = "";
var width = jQuery(".pagenator").width(); // add a var, otherwise you're creating a global
if (width > 730) {
     TheHTML = "<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id=21442?'></iframe>";
} else if (width > 470) { ....

$('ContainerOfTheIframe').html(TheHTML);

This should work. Also make sure you have jQuery available when the script runs (ie. put the reference for the jquery.js file above your script).

answered Jul 21, 2014 at 15:14

frenchie

52.3k117 gold badges321 silver badges530 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

MKK Over a year ago

Thanks. Can you outout the result of TheHTML to right before </body>? If so, how?

MKK Over a year ago

It seems your code output the result to the element that has name 'ContainerOfTheIframe' as ID?

frenchie Over a year ago

You need to put the iframe into something. I would go to the DOM and add an empty div where you want the iframe to go, and give this div an ID. Then put this ID in place of $('ContainerOfTheIframe')

eg_dac Over a year ago

probably better to use a div there.

frenchie Over a year ago

If you want to add the iframe before the closing </body> then just add this: <div id="TheIframe"></div></body> to the DOM and then in the javascript just change this: $('#TheIframe').html(TheHTML); Note that you can also use .append() but I prefer adding an empty div so that a person working with the HTML source will see the empty tag in the HTML.

|

eg_dac · Accepted Answer · 2014-07-21 15:42:46Z

1

check out this fiddle

This should help you figure out what you need to do.

edited Jul 21, 2014 at 15:42

answered Jul 21, 2014 at 15:27

eg_dac

6994 silver badges14 bronze badges

1 Comment

MKK Over a year ago

Thanks that was it!!! I had <div> part below the javascript!! You made me noticed thanks!!!

Johansrk · Accepted Answer · 2014-07-21 15:30:46Z

Try this

var pagewidth = jQuery(".pagenator").width(),
pageId = 0;
  if (pagewidth > 730) {
  pageId = 21442;
} 
else if (pagewidth > 470) {
  pageId = 21443;
}
else if (pagewidth > 255) {
  pageId = 21444;
}
else {
  pageId = 21445;
}    
$('body').html("<iframe frameborder='0' allowtransparency='true' marginheight='0' marginwidth='0' scrolling='no' width='728' height='90' src='http://foofoofoofootest.com/adspot.aspx?id='" + pageId + "'?'></iframe>");

Collectives™ on Stack Overflow

How can you output HTML depending on the width of browser windows?

3 Answers 3

12 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

1 Comment

Comments

Related