CSS Q involving javascript iframe autoresizing..

hi everyone

im trying out something i read here, about the right way to autoresize an iframe to fit content hosted on the different server: http: //css-tricks. com/cross-domain-iframe-resizing/

the following is my test internet page, it’s a wp internet site: http: //winninghealthsolutions. com/test-iframe-autoresize/

(I employ css-tricks. com’s example with the page inside the particular iframe – it’s really a bit jerky, what i really want in there probably will not constantly changing size on a regular basis, it will merely change size with new page load)

since you can see (im exploring on ff) that containing box doesn’t offer the iframe when the idea resizes. because it is a wp theme i sourced its more difficult for me to work what the solution may very well be (ive struggled having similar on static sites even)

can someone direct me to some resource or something to show me/give me a clue how to make that content box support the iframe properly

Gives thanks v much

Is it possible to describe why that you’re using an iframe Perhaps the information you
increasingly becoming from the " various other server" might be something in an RSS feed

Ethics can be in question as soon as " web scraping" written content from other web sites occurs.
Whether you not you could have permission to do so. If you decide to do have permission, the particular other
site owner would most likely provide the information in the form of an XML document (feed),
or an API that you could use.


It’s all in a single line in your current FrameManager class that you just copied over:

resizeTimerId: null,

Change this particular to…

resizeTimerId: " do_not_resize"; /* or anything rather than null */

mlseim: although this is simply not really to do with this thread or my personal question, ill answer in case it helps in some manner – the website included in the iframe is my own, so no ethics/web scraping or perhaps anything like that should be considered, and not any, we could definitely not get that subject material in an rss. the iframe stays on, for more explanations than just my own , personal – it is a project im taking care of with other men and women who’ve also manufactured this decision.

theGAME: I don’t wish to stop the iframe resizing – this really is just a experiment page. my question was
" since you can see (im exploring on ff) that containing box doesn’t offer the iframe when the idea resizes" – that white box which you see on your link i placed, the one surrounding the iframe plus holding the contents belonging to the page – it does not resize when that iframe resizes. i want it to resize so to speak, so as to carry the iframe, even when the particular iframe does resize – it’s probably simply a css change i want to do, to have the main content common box still " wrap" the particular iframe when them resizes. for ref, my business is looking on ff THREE OR MORE. 6, and here’s the link again: http: //winninghealthsolutions. com/test-iframe-autoresize/
or have i confusing your answer

unless my q has been completely unclear, ive reworded this here:
http: //forums. digitalpoint. com/showthread. phpt=2181048

You won’t be capable to wrap any belonging to the text, because ones page (coding) provides no idea what
is confined in the iframe… it only knows that it’s an iframe, next to nothing about its content material.

When you load your internet page, you can establish the iframe size (where the subject material will appear),
although if that content material changes size, for a second time, I don’t imagine your coding will really know what is happening
into the iframe.

What happens if you made that containing box bigger than what exactly is needs to be
To ensure that if the iframe adjustments (zooms larger), it will still be visible in the containing box.


Hence, " the iframe stays"…

That is certainly really too harmful. I say that because but if your wordpress script could read the other
home’s content (instead involving using an iframe), you’d probably then have control with the content,
as you no longer would be utilizing an iframe.

Although now, you’re while using the iframe, and your current wordpress script provides no idea precisely what the
iframe contains. If the iframe content material enlarges, or should an image slideshow, or
includes some flash content material… your wordpress script has ugh to recognize precisely what is
happening within the iframe.

Hence, I would should say " it can not be done".

When I’m wrong, I would certainly plan to learn myself how maybe it’s done. Anyone


Also. I thought you desired to stop it by resizing completely considering that effect is really annoying and doesn’t find a way to serve a beneficial purpose.

You’d probably should want to do something like this inside resizeFrames function (not sure what actually will work without playing with it):

var iframe = insurance coverage. getElementById(FrameManager. currentFrameId. toString());
var frameContainer = insurance coverage. getElementById(" main" );

when (iframe == null) give back;

iframe. style. elevation = FrameManager. currentFrameHeight. toString() + " px";
frameContainer. type. height = FrameManager. currentFrameHeight + whatever_the_height_of_the_rest_of_the_div_is_and_that_is_going_to_be_tricky_to_figure_out + " px";

Thanks guys to get clarifying – get what both of you are saying today

can i ask why this can be tricky figure out if i simply just add say.. 100px generally there, there’d be often 100px space below the iframe correct, so that is cool

If your iframe is the one thing in your div, yes. But that was not necessarily going to be the case. When you have text and/or other elements, that helps make your calculation trickier.

The only thing to be in the div is what’s inside div at the moment – the iframe, and also a sort of very little sidebar which wouldn’t change height. Nothing else upon that page has dimensions or elements that could change at most, so I can simply take the div’s recent height, note the distance in pixels with the bottom edge belonging to the iframe to the end

This entry was posted in Web Design and tagged , , , , , , , , , , , , , , , , . Bookmark the permalink.

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *