Plugin: Iframed

Vaska A / 2007-07-21 11:32:03   

Plugin: Iframed

This plugin will take your input url and display it in the Exhibit area. Like a blog or a Flickr page...etc...

Installation:

Download the 'plugin.ndxz_iframed.php.zip' file to your desktop and unzip. Upload the 'plugin.ndxz_iframed.php' file to your site/ndxz-studio/site/plugin folder.

On the page you wish to display your news, insert this code into the text area:

<div><plug:ndxz_iframed url='the_url' /></div>

'url' is obviously for the page you wish to display in the exhibit area.

The divs are highly recommended - they allow this to work both with and without processing. When in doubt, just use them.

You can not display any exhibit images with this plugin.

Vaska A / 2007-07-21 11:37:22   

Note: when you use this, be sure that you do not create any additional returns or breaks on the page before or after the plugin code.

danielpagan / 2007-08-01 00:37:02   

I've got scroll bars in my iFrame. Is this written into the PHP file that drives the plugin? How can I eliminate these scroll bars?

Link to iFrame with scroll bar:
http://www.danielpagans.com/contact

Link to content - no scroll bars:
http://contact.danielpagans.com

Thanks!

Vaska A / 2007-08-01 07:45:13   

Well, the page in question has a table (with no width)...no doctype...I would start there.

The scroll bars are likely happening because the page you are viewing in the iframe is causing them. It's not being caused by Indexhibit or the plugin.

danielpagan / 2007-08-01 15:18:50   

Thanks for the quick response Vaska. I've managed to get rid of the horizontal scroll bar but only by adding an overflow command to the original plug-in script (not ideal). Going to have a look at your suggestion - the page in question.

serviceforthepeople / 2007-08-07 11:12:42   

vaska,
where can i find the link to the iFrame plugin ?

much thanks

Vaska A / 2007-08-07 11:46:20   

Ah yeah...that would be useful too. ;)

Go throug the downloads page...

http://www.indexhibit.org/app/download/

vantazy / 2007-08-12 23:07:37   

Is there a way to have a link in the loaded iframe open an exhibit page - but NOT in the iframe. - like if you had clicked on that exhibit's link in the main nav.

Thanks!

(Just getting things going in my own indexhibit! Great tool!)

Vaska A / 2007-08-12 23:27:50   

Nope, that's not possible. These are iframes...not frames.

vantazy / 2007-08-12 23:49:17   

I just figured out a way to do it (in my case anyway).
I added this line of code to the header of the html being placed in the iframe:

Worked for me! Thanks.

vantazy / 2007-08-12 23:50:20   

woops, code got stripped out sorry...

< base target="_top">

remove space before base.

mejo / 2007-09-06 12:31:40   

Hello Forum,

Im using the iFrame plugin and having the same troubles with width and scroll bars. Ive tried altering the css of the loaded content but still no luck - if anyone would be so kind as to have a look and see if they can spot anything that would be great, many thanks,

Will

http://willdocherty.com

mejo / 2007-09-06 12:33:08   

sorry the link is actually:

http://willdocherty.com/journal

Vaska A / 2007-09-06 21:36:39   

Mejo...this is a tough one. I'm not sure where the problem lies here. The iframed plugin is something I consider experimental...it's not perfect.

In your css I noticed that you've changed the width of the menu...and then left some extra margin for the content container. That 10px could be the problem here - perhaps that's what is triggering the scrollbar as it and that's all the difference in the world.

mejo / 2007-09-07 09:27:14   

Vaska,

thanks for this - I had a tinker with the css but couldn't figure which width it was, although I tried every width and margin!

Instead I reverted back to a duplicate of the sample template and made the changes there.

Vaska A / 2007-09-07 11:50:22   

Hey! So it works!

It's good to know that it does seem to be solid. My assessment is right then...if you adjust the width of your Index (#menu) you need to be sure you adjust the margin on the #content div to the be the same.

mejo / 2007-09-07 21:13:09   

How do,

Yea, its easy to overlook as well. Just to remember to alter both accordingly I guess.

Vaska A / 2007-09-07 23:10:48   

And...you also have to make similar adjustments in the ie.css file too.

mejo / 2007-09-07 23:20:36   

!! is that specific to internet explorer? hence ie.css.

Vaska A / 2007-09-07 23:35:21   

Yep.

zerog / 2008-04-28 11:29:31   

Where can I actually download this plugin? cant seem to find a link. cheers

Vaska A / 2008-04-28 11:33:06   

Sorry, we're about to roll out a new download mechanism so it is a bit messy right now. ;)

http://indexhibit.org/downloads/

zerog / 2008-04-28 14:05:06   

Thanks!!

paucc A / 2009-02-02 17:57:21   

Very interesting plugin!
I had some problems when the plugin reads the height of the menu to make the height of the iframe because my menu if shorter than the full page, and I wanted the iframe to be the whole page. Right now I've just look for a solution for the height so that's what I did:
In the plugin I removed the "apply the height" line of code and I've created a #iframed css style that specifies a height of 80%. Now this works for the page I'm looking now, but I don't know when I would like to iframe other pages.
Vaska, what problems may I expect by deleting this line?
concrete page: (just testing, there's no real content anywhere except this old content I'm adapting)
http://pau.cc/viajes/polonia/

(the indexhibit homepage is http://www.pau.cc/index.php )

Thanks for the big support you are doing all those years to the growing comunity ...

pau

Vaska A / 2009-02-02 18:35:20   

You can't style #menu and #content with additional margins or paddings. You deal with those via #menu .container and #content .container. It's complicated, but if you change them incorrectly you get chaos. There are a bunch of posts on the site about this too...it's a common issue.

jublin / 2009-04-06 22:14:51   

I know this issue has come up a million times and i'm trying to find a solution, but with little luck.

I've got the scrollbars as well. I'm almost positive I've moved all of my margins and paddings to the .containers, but I remember you mentioning that if you change the width of your #content .container, then you need to make another adjustment somewhere so the iFrame fits properly. Is that right?

www.jublin.com/news

Thanks for all your help! I'm really happy with indexhibit and all of the things I have been learning since I first installed it.

Vaska A / 2009-04-06 22:26:25   

I see a bunch of things in your css that aren't right...your margins for #menu and #container aren't aligned...your styles for #menu .container are messed up...and probably some other things.

jublin / 2009-04-06 22:29:45   

well that's a start i guess. i'll just play around with firebug some more and see what happens. thanks.

jublin / 2009-04-07 03:55:14   

oh man i feel like i'm getting real close. (or maybe not haha) but i did my best to clean up a lot of the CSS and fix some stuff and now instead of having two scroll bars, I just have one in the middle.

jublin / 2009-04-07 04:10:36   

yes! figured it out i think. After all of that i still had a fixed width parameter that i thought i needed in my #content. Erased that and it's all good.

alright! time for a victory beer.

kdewitt / 2009-05-31 14:12:30   

Hi -- I haven't been able to download this plugin -- the link leads to a black page, no download. Can I find the plugin elsewhere?

K

kdewitt / 2009-05-31 14:14:08   

Ack, ignore me. On the downloads page, obvis.

gorociao / 2009-07-07 05:39:18   

Hi - oof, I've played with a lot of CSS, but can't get rid of the bars.

http://gorociao.com/dev/index.php?/about/just-for-fun-blog/

I have a feeling I'm doing something totally backwards.
Sorry! I'm pretty new to this all. Really loving index exhibit - learning a lot so fast. Incredible product you've made.

anyway, if you could lend a hand... that would be wonderful.

(the site is super WIP, like I said, just figuring everything out as I go).

arsondpi / 2009-07-07 08:16:59   

I thought I only use words like WIP and pronounce it as whip...
Here's a way to do it...

ivo_valadares / 2010-04-20 08:07:05   

Good morning morning.

plugin not working... pfffffffff

MRPW / 2010-07-04 16:30:31   

I am currently having the same problem as paucc was .

This is my site:
www.philwilson.ca

this is the problem:
I had some problems when the plugin reads the height of the menu to make the height of the iframe because my menu if shorter than the full page, and I wanted the iframe to be the whole page. Right now I've just look for a solution for the height so that's what I did:
In the plugin I removed the "apply the height" line of code and I've created a #iframed css style that specifies a height of 80%. Now this works for the page I'm looking now, but I don't know when I would like to iframe other pages.

how can I fix this if I don't want my menu to go the length of the page.
can I just detach the menu from the iframe so its height is not determined by it?
im relatively new to all of this so go easy on me haha.

I know how to edit the index.php, style.css, and index.php files.. but im not sure what I would need to add, delete or change to the index php. to make this change.

MRPW / 2010-07-05 01:03:42   

!!!

arsondpi / 2010-07-05 07:18:00   

change the height of #menu back to 100%
change the margin of #content back to margin:0 0 0 250px;

Now the iframe will work fine.
To apply the styles you want you have to add/change css rules for:

#menu .container & #content .container

If you want to know why please search the web about the box model...

MRPW / 2010-07-05 14:32:33   

thankyou very much!!!

MRPW / 2010-07-05 15:09:17   

argh.

im not sure if I read your input wrong...

but what I did was make the menus height 100%, change contents margins to 0 0 0 250px and then added:

#menu .container & #content .container {
height: 60%;
}

now my site is messed. the iframe is right against the left side.. as opposed to starting after the menu..., and the menu is not too long.

I basically want the menu to NOT go the length and the frame to GO THE LENGTH of the page.

weird.

I backed up my css before I changed it but I'll leave it so you can check it out:
www.philwilson.ca

MRPW / 2010-07-05 15:09:20   

argh.

im not sure if I read your input wrong...

but what I did was make the menus height 100%, change contents margins to 0 0 0 250px and then added:

#menu .container & #content .container {
height: 60%;
}

now my site is messed. the iframe is right against the left side.. as opposed to starting after the menu..., and the menu is not too long.

I basically want the menu to NOT go the length and the frame to GO THE LENGTH of the page.

weird.

I backed up my css before I changed it but I'll leave it so you can check it out:
www.philwilson.ca

Vaska A / 2010-07-05 15:47:24   

You really don't want to mess with the height of #menu and #content. You are dramatically breaking things on your site they way you are doing this...you should read the red link in Usefull Threads about styling padding and margin on menu and content.

What I would do is style the #menu .container...and probably add another div in there too...then make that the height you need instead of breaking everything at the same time.

MRPW / 2010-07-06 00:31:34   

I'm pretty new to all of this...

But it doesn't seem very efficient to have the iframe rely on something else to define its height. I don't see why the height of the menu and the height of the frame cannot be separate..

but like i said.
I have no clue what I'm talking about haha.

I'll try your suggestion though. thank you very much.
you always reply so quickly.

Rodchenko / 2010-11-16 18:54:02   

Since I couldn't get rid of the scrollbars, no matter what I tried, I devised a little hack that might be useful for one or the other user here. Basically, what it does is to write the content from an invisible iframe (the one in the plug-in) to a div layer within your index.php file, thereby getting rid of any ugly frame/scrollbar issues.

Here is a (hopefully complete) step-by-step instruction:

1) Open 'plugin.ndxz-studio.iframed.php' in a text-editor and delete all the code within the function and replace it with the following one (spaces before and after HTML-brackets need to be taken out – only in here so the sample will render)

function ndxz_iframed($url=false) {
    $iframe =
EOH;
        
return $iframe;
}

Note: in my case the frame is called 'buffer'. You can use any other id.

2) Open your sites 'index.php' file (usually in 'http://your_url/ndxz-studio/site/sample/' and create a new DIV where the content from your iframe will be loaded into and which you can style via CSS. I called mine 'blog' as I wanted to load a posterous blog into my exhibit. I used the same CSS-styling for it as the one for 'content'. Leave the block element empty, since all of its content will be replaced.

< div id="blog" >< /div >

3) In the header of 'index.php' place the following Javascript somewhere, which will take the content of your iframe and pour it into your DIV object once the iframe has loaded.

< script type="text/javascript" >
    function displayExternal() {
        var lyr = document.getElementById ? document.getElementById('blog') : null;
        lyr.innerHTML = window.frames['buffer'].document.body.innerHTML;
    }
< /script >

4) Now load your iFramed exhibit (usually by clicking on the link in the menu) et voila! Nice and clean content without ugly scroll bars.

Note: didn't test this on IE

Rodchenko / 2010-11-16 18:55:00   

Since I couldn't get rid of the scrollbars, no matter what I tried, I devised a little hack that might be useful for one or the other user here. Basically, what it does is to write the content from an invisible iframe (the one in the plug-in) to a div layer within your index.php file, thereby getting rid of any ugly frame/scrollbar issues.

Here is a (hopefully complete) step-by-step instruction:

1) Open 'plugin.ndxz-studio.iframed.php' in a text-editor and delete all the code within the function and replace it with the following one (spaces before and after HTML-brackets need to be taken out – only in here so the sample will render)

function ndxz_iframed($url=false) {
    $iframe =
EOH;
        
return $iframe;
}

Note: in my case the frame is called 'buffer'. You can use any other id.

2) Open your sites 'index.php' file (usually in 'http://your_url/ndxz-studio/site/sample/' and create a new DIV where the content from your iframe will be loaded into and which you can style via CSS. I called mine 'blog' as I wanted to load a posterous blog into my exhibit. I used the same CSS-styling for it as the one for 'content'. Leave the block element empty, since all of its content will be replaced.

< div id="blog" >< /div >

3) In the header of 'index.php' place the following Javascript somewhere, which will take the content of your iframe and pour it into your DIV object once the iframe has loaded.

< script type="text/javascript" >
    function displayExternal() {
        var lyr = document.getElementById ? document.getElementById('blog') : null;
        lyr.innerHTML = window.frames['buffer'].document.body.innerHTML;
    }
< /script >

4) Now load your iFramed exhibit (usually by clicking on the link in the menu) et voila! Nice and clean content without ugly scroll bars.

Note: didn't test this on IE

Rodchenko / 2010-11-16 19:02:59   

Ok, Sorry for the double post. Site told me, the thread doesn't exist anymore. It also stripped my iframe code in Step 1, so here it is again, just replace the proper html brackets where it says '[' or ']'

  1. function ndxz_iframed($url=false) {
  2. ¬†¬†¬†¬†$iframe = <<< EOH
  3. ¬†¬†¬†¬†[iframe id="buffer" width="0" height="0" name="buffer" src='$url' onload="displayExternal()" style="visibility: hidden;"][/iframe]
  4. EOH;
  5.         
  6. ¬†¬†¬†¬†return $iframe;
  7. }
kapodaki / 2010-12-06 09:49:25   

What is the difference betwin Iframed plugin

and this tag:

  1. <iframe name="frame" src=""></iframe>?
kapodaki / 2010-12-06 09:49:54   

What is the difference betwin Iframed plugin

and this tag:

  1. <iframe name="frame" src=""></iframe>?
Archiblog / 2010-12-07 14:18:56   

You can use iframe tags to embed Visual LightBox galleries.

For example:

...

The bit in the middle is the html code Visual LightBox generates that you upload to a designated folder on your site - ie from to .

You can view my example in full, including the page source, here:

File 038: Galerie, Montreal : EXHIBITS

arsondpi / 2010-12-07 14:20:45   

...or you can build a plugin that does just that! ;-)

This thread has been closed, thank you.