28

I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.

What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?

Here's my code:

<div id="tabs">
<div id="overview">
  <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
  <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
  <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>

<div id="tabs-1">
  <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
  </iframe>
</div>
3
  • 73
    IFRAME is not an Apple product. Please don't write iFrame.
    – SLaks
    Jan 20, 2010 at 16:17
  • 8
    Acutally it is an apple product too -- it's a video format. :) Jan 20, 2010 at 16:21
  • 3
    Please rename the question and add that you are looking for tabs implementation.
    – sorin
    Mar 2, 2010 at 7:11

8 Answers 8

16

The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.

3
  • 2
    That's not the ONLY alternative - see my asnwer for another one.
    – DVK
    Jan 20, 2010 at 16:26
  • DVK: Good point, but I was assuming the OP is looking to dynamically load data.
    – Pekka
    Jan 20, 2010 at 16:29
  • more about AJAX / fetch / XMLHTTPRequest
    – djvg
    Mar 24, 2023 at 15:30
13

Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.

Maybe the jQuery UI Tab might be helpful here if you like to try it.


EDIT: AJAX example with UI Tabs.

First, the HTML will look like this.

   <div id="tabs">
     <ul>
      <li><a href="toframe.html"><span>Overviews</span></a></li>
      <li><a href="tawagpinoygallery.html"><span>Gallery</span></a></li>
      <li><a href="trframe.html"><span>Reviews</span></a></li>
     </ul>
   </div>

Then make sure that you import the appropriate jQuery files:

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  etc...

Then add the code to create the tabs:

   <script type="text/javascript">
$(function() {
    $("#tabs").tabs();
});
</script>
2
  • 1
    If I were to use AJAX, how would I go about it? :) Tried the jQuery UI Tabs, but it didn't work so well.. :(
    – laura
    Jan 20, 2010 at 16:21
  • The jQuery tab widget has options to load content via AJAX already and it is quite straight forward. Its as simple as specifying the URL. Let me see if I can put together an example. Jan 20, 2010 at 16:27
6

There's an alternative to AJAX!

You can load ALL three possible contents into separate DIVs.

Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".

Cheap, easy, does not require AJAX costs for extra http request or for coding.

Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.

2
  • how will i tell the code to set the div to display: block when a tab is pressed? :)
    – laura
    Jan 20, 2010 at 16:31
  • 1
    onclick handler for the tab would find the appropriate DIV using getelementbyid() and then change that object's style.display value
    – DVK
    Jan 20, 2010 at 22:39
2

It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.

If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

You would then need to add the following CSS to the BODY element using:

BODY { Background: transparent; }
2
  • It seem I was also beaten to the answer! Wow you have to move fast here!
    – Camsoft
    Jan 20, 2010 at 16:31
  • What if you are loading a hundreds of hidden <divs> that need to be loaded on a click? How does that effect the scalability? Is it incredibly sluggish on the site? Having so many <divs> Jan 3, 2013 at 21:15
2

You don't need script.

<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>

Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).

If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.

1

The HTML iframe is to be used to include/display non-template content, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.

In your case you just want to have a tabbed panel. This can be solved in several ways:

  1. Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block; (show) and display: none; (hide) on the tab content divs accordingly.

  2. Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.

  3. Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.

When going for the JavaScript based approach, I can warmly recommend to adopt jQuery for this.

1

This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)

1

As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.

http://docs.jquery.com/Ajax/jQuery.get

Something along these lines:

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

edit.. you could prepopulate or onclick you could do the get dynamically

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.

The get is less code though, easier time.

2
  • hmmm...so if i add this script to the top of my page, it'll pre-load the contents of the div? is it possible for me to pre-load all the tab contents without showing them until a tab is pressed? :)
    – laura
    Jan 20, 2010 at 16:32
  • See added code, I think it would be easier just to do a get, but you could prepopulate them and hide/show. Personal opinion as you the coder. Jan 20, 2010 at 18:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.