Home : Forums : Authoring and Programming : iframe background

iframe background

You are currently not logged in. You can view the forums, but cannot post messages.

10-Dec-09 22:07

Delete

Edit

JohnnyA

Bronze

Posts: 30

From: Denver, CO, USA

I am linking to a web page and targeting an iframe on the same page as the link (a kind of pop-up). The iframe is designed to display over content on the original page, so I need the iframe to be invisible prior to the link being "clicked". With no src value set in the iframe, this is the case in all browsers except (take a guess) IE, which shows a white box in the iframe position. Is there a background setting that will make IE not show the iframe prior to filling it?
Thanks,
John

11-Dec-09 03:40

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Hi John,

You could use CSS and JavaScript to hide the iframe element completely, then show it when it's clicked:

CSS:


iframe.hide { display: none; }

HTML:


<iframe id="my-iframe" class="hide"> </iframe>

<a href="#" onclick="document.getElementById('my-iframe').className = ''">Show iframe</a>

(Not tested!)

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

11-Dec-09 08:29

Delete

Edit

JohnnyA

Bronze

Posts: 30

From: Denver, CO, USA

Matt,
Wow! That worked on the first try! I have never used javascript, its next on my to do list. I thought the onclick="document.getElementById('my-iframe').className = ''" command might replace the target attribute which is also "my-frame" (or equivalent), but I guess I need both. I look forward to understanding this better. Thanks for the very successful preview.
John

13-Dec-09 21:35

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Great stuff! Yes, you'll still need to add the "href" and "target" attributes to your "a" tag. The "onclick" attribute merely contains a snippet of JavaScript to change the iframe's CSS class from "hide" to "" (no class), effectively "un-hiding" the iframe. This is known as an event handler in JavaScript:

http://www.elated.com/articles/events-and-event-handlers/

Thinking about it, it would be better to have no class on the iframe in the HTML, then set the class to "hide" with a bit of JavaScript when the page loads:


<body onload="document.getElementById('my-iframe').className = 'hide'">
...
<iframe id="my-iframe"> </iframe>

Otherwise if a visitor happens to have JavaScript turned off in their browser then they'll never see the iframe.

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

21-Dec-09 15:08

Delete

Edit

JohnnyA

Bronze

Posts: 30

From: Denver, CO, USA

I thought I had this figured out, but this goes blank when links are clicked in IE. I was using the first suggestion given in this discussion. http://www.dotnetdon.com/john/fam_tree/famtree.htm
Any thoughts,
thanks again for all your help
John

21-Dec-09 18:18

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

Hi John,

I believe your problem is down to the fact that you've wrapped links around your block-level elements (which is invalid HTML). I mentioned this here:

http://www.elated.com/forums/topic/4828/

Most browsers don't seem to care, but IE doesn't like it. So when you click one of your images, the onclick event is firing (un-hiding the iframe) but then the destination page isn't being loaded into the iframe (because IE doesn't follow the link).

You might need to put individual links inside your block-level elements in order to make your markup validate and keep IE happy.

An alternative (if somewhat hacky) approach would be to use JavaScript to force IE to load the target page into the iframe:


<a href="theframes/sammea.htm" target="inset" onclick="document.getElementById('inset').className = ''; document.getElementById('inset').src='theframes/sammea.htm'">

In general, you might want to go through the markup and fix the validation issues, which would probably help to make everything work correctly across different browsers:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.dotnetdon.com%2Fjohn%2Ffam_tree%2Ffamtree.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Cheers!
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

22-Dec-09 07:35

Delete

Edit

JohnnyA

Bronze

Posts: 30

From: Denver, CO, USA

Matt,
your "hacky" approach worked. Thanks. In dealing with VALIDATOR I find that he/she/it doesn't like my line breaks, my opening and closing <body> tags and my link to my css page? I don't see the problem with these.

Regarding my nested tables:
I need the tables to make the text within center vertically. I want the entire area of the page covered by the background (hover-style from tutorial) to be active as a link. So I guess I'm looking for the I completely different technique. Should I create a big image map? Put an <object> instead of a <div> inside the <table>?

Will any solution help with my general iframe/ IE issue?

thanks again,
John

22-Dec-09 17:41

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

John,

You can't use XHTML-style self-closing tags (< ... />) with HTML 4.01 FRAMESET. That's why your <br/> and <link/> tags are invalid.

You also can't have a <body> element within an HTML 4.01 FRAMESET document. I don't think you should be using FRAMESET for this page. Try XHTML 1.0 Transitional or HTML 4.01 Strict instead.

Nested tables: Personally I would scrap the tables and use an "a" (link) element with "display: table-cell", and live with the fact that IE6 and IE7 will display the content at the top rather than in the vertical centre. IE8 should work fine as it understands "display: table-cell". Not that I've tried it, but that would be the approach I would try first!

Cheers,
Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

22-Dec-09 21:42

Delete

Edit

JohnnyA

Bronze

Posts: 30

From: Denver, CO, USA

Matt,
I have it down to the 13 nested errors. I will deal with them after the holiday. Merry Christmas! and thanks for all your help!
Gratefully,
John

22-Dec-09 22:28

Delete

Edit

matt

Gold

Posts: 3118

From: Southern Highlands, NSW, Australia

No problem John - Merry Christmas to you too

Matt

--
Matt Doyle, Elated
Second Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/