iframes with width/height matching content
Moderator: General Moderators
iframes with width/height matching content
anyone know of a way to make an iframe have the width/height matching its content?
I can't imagine it - most certainly not cross-browser. I remember when layers where "the thing" trying to get a propper text-scrolling in layers working (length of content is, of course, the key).
You face numerous problems:
1) you can only have an guess about the length given a fixed font-size
2) different browers will interpret it differently - it'll do your head in. You'll have to have customized versions of the script, one-size-fits-all most certainly won't exist.
3) Different users have different settings, i.e. different display fonts and fontsizes for their browsers = different content-height.
3) Not all browsers (apart from Mozilla and IE 4.+) have a dynamic DOM. Thus, you won't be able to create an iframe on the fly or resize it.
On a somewhat more positive note: for IE, look at "textrange" and "InsertIFrame" - but note: it's IE only.
Generally: can you elabourate a bit more on what the problem is, so it's easier to think of a workaround?
You face numerous problems:
1) you can only have an guess about the length given a fixed font-size
2) different browers will interpret it differently - it'll do your head in. You'll have to have customized versions of the script, one-size-fits-all most certainly won't exist.
3) Different users have different settings, i.e. different display fonts and fontsizes for their browsers = different content-height.
3) Not all browsers (apart from Mozilla and IE 4.+) have a dynamic DOM. Thus, you won't be able to create an iframe on the fly or resize it.
On a somewhat more positive note: for IE, look at "textrange" and "InsertIFrame" - but note: it's IE only.
Generally: can you elabourate a bit more on what the problem is, so it's easier to think of a workaround?
Well, this script will let you take information from one page, and write it inside a DIV on another... basically, it acts the same way as using an iframe, but the information comes inline with the new page.
It uses DOM techniques, so no NS4. You'll have to test for other variations.
http://skyzyx.freehomepage.com/wpi/_docload2.js
Usage:
1.) Use placeScreen() to place it on the screen. The first parameter, "zId3" is the ID that you want to use to reference the DIV. The second parameter, "zStyles" is for inline CSS you may want to add.
2.) Use loadScreen() to load the data into the DIV container. The first parameter, "zDoc" is the URL of the document to load. The second parameter, "zId" is the same name as your reference used in placeScreen(). The third parameter, "zTimeMod" is time (in milliseconds) to wait for your page to draw to the screen before trying to load the other page into the DIV container. Lighter pages can use 750-1000, while heavier pages may need more.
3.) Don't worry about loadDelay(). It's only called by another script for compatibility with Gecko browsers (NS6+, Moz, Chimera, etc.)
Hope this helps!
It uses DOM techniques, so no NS4. You'll have to test for other variations.
http://skyzyx.freehomepage.com/wpi/_docload2.js
Usage:
1.) Use placeScreen() to place it on the screen. The first parameter, "zId3" is the ID that you want to use to reference the DIV. The second parameter, "zStyles" is for inline CSS you may want to add.
2.) Use loadScreen() to load the data into the DIV container. The first parameter, "zDoc" is the URL of the document to load. The second parameter, "zId" is the same name as your reference used in placeScreen(). The third parameter, "zTimeMod" is time (in milliseconds) to wait for your page to draw to the screen before trying to load the other page into the DIV container. Lighter pages can use 750-1000, while heavier pages may need more.
3.) Don't worry about loadDelay(). It's only called by another script for compatibility with Gecko browsers (NS6+, Moz, Chimera, etc.)
Hope this helps!