Hiding iFrame until link is clicked, Clicking hyperlink loads iframe - I want to hide it prior to clicking Options

[rcanpolat]

I find myself coming back for more help so please forgive me, its all one big learning curve for me - Here goes...

I have my web page and i want to load up content within iFrames to stop the page reloading every time a hyperlink is clicked (there is probably an easier way of doing this but im only starting out on html, css & js so please bare with me)

So i have my link set up as (just one example of my 14 links that will load):

CODE

<li>
<a href="file:///Desktop/export%20testing/Site/Blank.html" target="Frame1"/>
<img src="images/6.jpg" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Contact Us</span>
<span class="sdt_descr">How to find us</span>
</span>
</a>
</li>

Which is targeted to open up within the iframe on my page which is using this code:

CODE

<div class="iframe123">
<center>
<iframe name="Frame1" scrolling="no" frameborder="0" width="900" height="600" src="frame.html" ></iframe>
</center>
</div>

Now what i found was that a blank empty iFrame was loading regardless of any link being clicked when the sites initial home page was opened so i figured that i had to do something about that so i used this css to hide my iFrame:

CODE

<style type="text/css">
.iframe123 { display:none; }
</style>

But now when i click the link the iFrame doesn't open up at all. No border is visible, no content is there just as if i never had it in there at all. You'll have to excuse me on my sloppy css & html because i've only started learning it in the last few weeks. So what am i doing wrong? How come when i click the link i can't get my iFrame to load when i use the css?

Thanks for reading,

Ross

EDIT: I was juggling my brain a few minutes after this post and i came up with the idea that i could aim the first iFrame that is loading automatically to a blank web page with a transparent background (######) - That would work wouldn't it? I'd still like to know though for future reference how to hide the iFrame

This post has been edited by rcanpolat: Aug 1 2010, 08:59 PM

[pandy]

You can use JavaScipt to manipulate CSS, that is unhide the iframe. But if you do you shouldn't hide the iframe with CSS to start with but rather do that onload with JS. That is that because if JS isn't available to the user but CSS is, the iframe will be hidden forever if you hide it with CSS.
http://www.google.com/search?q=javascript+css+show+hide

I wonder why you don't want to reload the page, or rather load a new page with the same menus and so on. If you think it will be slower, that isn't so. Not noticeably anyway. Images are cached and will load quickly from the users harddisk the next time they are used. Same goes for external CSS and JS. The only thing that will load afresh is text and text is so lightweight that it doesn't really matter.

Frames always introduce a slew of problems, both for you and for your visitors, so don't use them without a real need.

[rcanpolat]

You can use JavaScipt to manipulate CSS, that is unhide the iframe. But if you do you shouldn't hide the iframe with CSS to start with but rather do that onload with JS. That is that because if JS isn't available to the user but CSS is, the iframe will be hidden forever if you hide it with CSS.
http://www.google.com/search?q=javascript+css+show+hide

I wonder why you don't want to reload the page, or rather load a new page with the same menus and so on. If you think it will be slower, that isn't so. Not noticeably anyway. Images are cached and will load quickly from the users harddisk the next time they are used. Same goes for external CSS and JS. The only thing that will load afresh is text and text is so lightweight that it doesn't really matter.

Frames always introduce a slew of problems, both for you and for your visitors, so don't use them without a real need.

The majority of my text is in png format because it has shadows and is using a non web standard font. Same goes for the logo - I suppose i'll do a little testing when i completely finish the page to see whats the load time.

Anyway im going to check out that script - handy to know!

thanks pandy

[pandy]

Well, that's actually a larger problem than frames.