Resize or Responsive Contents Problem

[Jon_King]

I am trying to take a static iframe product offering and make it responsive or at least change its contents if a user changes the window size.

When I display products from my suppliers affiliate interface all is static. I call the cols, rows, width and height to output an iframe of a set amount of products.

The individual products are always 250px wide and 300px height. So as you can see the below gives me a 750 x 1200px iframe with 12 products:

<div id="products">
<script type="text/javascript" src="http://www.mysupplier.com/aff_interface.php?cols=3&rows=4&w=750&h=1200"></script>
</div>

I have tried numerous ways, with no success to get the product frame to dynamically change the size of the inside product grid ... I can get the new values into cols, rows, w and h based on the resize() of the div "products" but I cannot get the scr in the script to reload with the changed values.

I've got no idea if I am going about this correctly. Your help is greatly appreciated.

[Fotiman]

What probably happens is this:
You have a container div with id "products". Inside that div, you're including a script, which probably does something like:

document.write("<iframe src='...'></iframe>");

So your DOM ends up like

<div id="products">
  <script type="text/javascript" src="http://www.mysupplier.com/aff_interface.php?cols=3&rows=4&w=750&h=1200"></script>
  <iframe src="..."></iframe>
</div>

I don't think there's a good solution to this problem, as you can't call document.write after the page has finished loading (or it will replace your ENTIRE document).

[Jon_King]

That is really bad news ... Mobile search is dependent upon this ability.

[Fotiman]

On a positive note, mobile browsers don't generally "resize" the window, so if you pass in the correct size initially, then mobile users should still see something that fits their viewport. You just won't be able to resize on desktop browsers and have it dynamically change the number of rows/cols.

[Jon_King]

Good point.