Hi,<br />
<br />
I need to create a page with some tabs so that when I press a certain tab, the content for that tab appears immediately without flickering. I've been told that it is posible to do with preloaded frames making all but one invisible, or hide and show content with css.<br />
<br />
Can anybody give a small example of how to do that (preferably with CSS)? <br />
<br />
thanks in advance<!--content-->Preload images by putting them on a previous page and using the css display:none; property.<br />
<br />
e.g<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="" height="" style="display:none"><br />
<br />
That means they don't display, but are Download <!--more-->ed to the cache. They will then display quickly when they are next called.<!--content-->I didn't mean images but rather the whole page or a frame.<br />
Can I do the following<br />
<br />
<div class="c1">...</div><br />
<div class="c2">...</div><br />
<div class="c3">...</div><br />
<br />
and manipulate display property to show only one of them at a certain time?<br />
If only one is displayed at a time, is it going to always be displayed at one place, that is if I only show "c3" it's not going to show up way down as if I was showing all three of them, right?<br />
<br />
thanks<!--content-->You can put that style="display:none;" in any tag you like. However, text Download <!--more-->s almost instantly, so you really only need it for images.<!--content-->Regards the second part of your q (missed it the first time I read it)<br />
<br />
an iframe is the best way to do it. Otherwise you are probably going to use javascript, and that makes your site inaccessible to 13% of users. Just put the content of the other iframe pages at the bottom of each page.<br />
<br />
Maybe you could use javascript to control the Download <!--more--> order?<!--content-->Thing is, nobody is going to access these pages over the web. They are configuration pages for a browser, so the Download <!--more--> time is a fraction of a second, but there is still a flicker every time I go to another url.<br />
That's why I wanted to have everything preloaded and just hide/show things.<br />
I can use javascript if necessary (plenty of it already on those pages).<br />
<br />
Could you explain how to do it with iframes?<br />
<br />
thanks in advance<!--content-->If it's coming directly off a hard drive there won't be much of a difference between preloaded or not. Maybe you'd be better adding a page transition??<br />
<br />
Anyway<br />
<br />
iframes<br />
<br />
<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"framecontent1.htm" frameborder="0" style="width:XXpx; height:XXpx;"><a href="framecontent1.htm>contents</a></iframe><br />
<br />
You'll need one page for each div. then put the links alongside.<br />
Then put just the content to be preloaded onto the bottom of each new page for content. (and use display:none)<br />
<br />
OK?<!--content-->If the possibility of javascript being disabled really isn't a consideration, you might want to look at <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/clientsidedivinclude.htm">http://www.infinitypages.com/research/c ... nclude.htm</a><!-- m --><!--content-->
<br />
I need to create a page with some tabs so that when I press a certain tab, the content for that tab appears immediately without flickering. I've been told that it is posible to do with preloaded frames making all but one invisible, or hide and show content with css.<br />
<br />
Can anybody give a small example of how to do that (preferably with CSS)? <br />
<br />
thanks in advance<!--content-->Preload images by putting them on a previous page and using the css display:none; property.<br />
<br />
e.g<br />
<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"" width="" height="" style="display:none"><br />
<br />
That means they don't display, but are Download <!--more-->ed to the cache. They will then display quickly when they are next called.<!--content-->I didn't mean images but rather the whole page or a frame.<br />
Can I do the following<br />
<br />
<div class="c1">...</div><br />
<div class="c2">...</div><br />
<div class="c3">...</div><br />
<br />
and manipulate display property to show only one of them at a certain time?<br />
If only one is displayed at a time, is it going to always be displayed at one place, that is if I only show "c3" it's not going to show up way down as if I was showing all three of them, right?<br />
<br />
thanks<!--content-->You can put that style="display:none;" in any tag you like. However, text Download <!--more-->s almost instantly, so you really only need it for images.<!--content-->Regards the second part of your q (missed it the first time I read it)<br />
<br />
an iframe is the best way to do it. Otherwise you are probably going to use javascript, and that makes your site inaccessible to 13% of users. Just put the content of the other iframe pages at the bottom of each page.<br />
<br />
Maybe you could use javascript to control the Download <!--more--> order?<!--content-->Thing is, nobody is going to access these pages over the web. They are configuration pages for a browser, so the Download <!--more--> time is a fraction of a second, but there is still a flicker every time I go to another url.<br />
That's why I wanted to have everything preloaded and just hide/show things.<br />
I can use javascript if necessary (plenty of it already on those pages).<br />
<br />
Could you explain how to do it with iframes?<br />
<br />
thanks in advance<!--content-->If it's coming directly off a hard drive there won't be much of a difference between preloaded or not. Maybe you'd be better adding a page transition??<br />
<br />
Anyway<br />
<br />
iframes<br />
<br />
<iframe src=http://www.webdeveloper.com/forum/archive/index.php/"framecontent1.htm" frameborder="0" style="width:XXpx; height:XXpx;"><a href="framecontent1.htm>contents</a></iframe><br />
<br />
You'll need one page for each div. then put the links alongside.<br />
Then put just the content to be preloaded onto the bottom of each new page for content. (and use display:none)<br />
<br />
OK?<!--content-->If the possibility of javascript being disabled really isn't a consideration, you might want to look at <!-- m --><a class="postlink" href="http://www.infinitypages.com/research/clientsidedivinclude.htm">http://www.infinitypages.com/research/c ... nclude.htm</a><!-- m --><!--content-->