Tabbed Document Viewer script

**link607** · 07-28-2005, 03:00 AM

Hi all,

This may not be possible, but I thought I would ask anyway. Is there any way to make the tabbed document viewer content retain their state? Like how FireFox has tabbed browsing. A user would open the tab and then click on a couple of links in there and switch to another tab, come back and the last page they had visited in that tab would still be there.

Not possible?

Thanks,
Ed

**ddadmin** · 07-28-2005, 07:53 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format for asking a question.

Unfortunately this most likely isn't possible. As you navigate to different pages within the iframe, there's no way for the script to know what page/url the visitor is currently at. This is due to cross domain security limitations- JavaScript on one domain cannot access anything on another.

**jscheuer1** · 07-28-2005, 11:45 AM

I was thinking about this and thought similarly:

Originally Posted by ddadmin

JavaScript on one domain cannot access anything on another

and with the script as is, that is certainly the case. The tabbed document viewer utilizes one iframe to display whatever content is selected by clicking on the tabs which, essentially are targeted links. If however the script could be rewritten to use a separate iframe for each tab, with each iframe's display property set to 'none' when not active, the browser itself might remember what url was in each iframe via the history stack. For this to work, some kind of test would have to be used each time a tab was clicked:

Is this the first time this tab has been selected? If so, go to the base url of the tab and make the tab's iframe's display property 'block'. If not the first time, simply restore block display to the tab's iframe. This would be combined with code that, in both cases, changes the display property of all the other tab's iframes to none.

When I get some time, I will give this idea a shot. Seems feasible at least, you think?

**jscheuer1** · 07-28-2005, 04:19 PM

OK, this is about as close as it is going to get. Everything works as expected until you start hitting the browser's back button after loading various content into the iframes. Then, whatever iframe was active the last time a link was clicked is the one that will go 'back'. Also if a site in a given iframe has code on it to break out of frames on its links (as Yahoo does with some, if not all of their links) it will break out of the iframe but, that was true of the original script too. The checkbox to break out of iframes doesn't work right (it will break out to the original page for the given tab) but, I can probably fix that or it can be taken out. Here is what I have so far:

Code:

<html>
<head>
<title>Tabbed Doc Memory - Demo</title>
<style type="text/css">

/*Eric Meyer's based CSS tab*/

#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}

#tablist li{
list-style: none;
display: inline;
margin: 0;
}

#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
}

#tablist li a:link, #tablist li a:visited{
color: navy;
}

#tablist li a:hover{
color: #000000;
background: #C1C1FF;
border-color: #227;
}

#tablist li a.current{
background: lightyellow;
}

.tabcurrent{
display:block;
}

.tabbkgrnd{
display:none;
}

</style>

<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var selectedtablink=""
var tcischecked=false

function handlelink(aobject, frameNum){
selectedtablink=aobject.href
tcischecked=(document.tabcontrol && document.tabcontrol.tabcheck.checked)? true : false
if (document.getElementById && !tcischecked){
var tabobj=document.getElementById("tablist")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
dispFrames=document.getElementsByTagName('iframe');
for (i = 0; i < dispFrames.length; i++)
if(dispFrames[i].className=='tabcurrent')
dispFrames[i].className='tabbkgrnd'
document.getElementById("tabiframe"+frameNum).className='tabcurrent'
if (document.getElementById("tabiframe"+frameNum).src==''||document.getElementById("tabiframe"+frameNum).src==location.href)
document.getElementById("tabiframe"+frameNum).src=selectedtablink
return false
}
else
return true
}

function handleview(){
tcischecked=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked){
if (selectedtablink!="")
window.location=selectedtablink
}
}


</script>
</head>
<body>
<ul id="tablist">
<li><a class="current" href="http://www.google.com" onClick="return handlelink(this, 0)">Google</a></li>
<li><a href="http://www.yahoo.com" onClick="return handlelink(this, 1)">Yahoo</a></li>
<li><a href="http://www.msn.com" onClick="return handlelink(this, 2)">MSN</a></li>
<li><a href="http://www.news.com" onClick="return handlelink(this, 3)">News.com</a></li>
<li><a href="http://www.dynamicdrive.com" onClick="return handlelink(this, 4)">Dynamic Drive</a></li>
</ul>
<iframe class="tabcurrent" id="tabiframe0" src="http://www.google.com" width="98%" height="350px"></iframe>
<iframe class="tabbkgrnd" id="tabiframe1" src="" width="98%" height="350px"></iframe>
<iframe class="tabbkgrnd" id="tabiframe2" src="" width="98%" height="350px"></iframe>
<iframe class="tabbkgrnd" id="tabiframe3" src="" width="98%" height="350px"></iframe>
<iframe class="tabbkgrnd" id="tabiframe4" src="" width="98%" height="350px"></iframe>

<form name="tabcontrol" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview()"> Open tab links in browser window instead.
</form>
</body>
</html>

**ddadmin** · 07-28-2005, 07:08 PM

Hi jscheuer1:
Very nice! I didn't really think it could be done, but the use of multiple iframes is ingenious. Very nice indeed.

**link607** · 07-29-2005, 04:54 AM

Thanks a lot! I really appreciate it.

Of course, I have to be difficult and push it again. =/ Is it impossible to retain the unsubmitted data in fields when a user changes tabs and then changes back? Or does it always have to reload the page?

Thank you again!! :-D

Edric

**jscheuer1** · 07-29-2005, 05:04 AM

Not sure what you mean. In my demo, if you enter some info into the Google page in its tab and don't submit it, hit the Dynamic Drive tab, navigate around in Dynamic Drive, then hit the Google tab, the unsubmitted info is still there.

Note: The above post of mine with the demo was just a 'see it can be done'. I will be playing with the concept a bit to make it easier to configure, fix the problem with the checkbox I mentioned, and perhaps make a better interface for the user.

**link607** · 07-30-2005, 10:13 PM

Ahhh I see. The form data is retained in IE, but not in firefox.

Ok, thanks again John for all your effort. =)

Ed

**jscheuer1** · 07-30-2005, 10:46 PM

I hadn't noticed that and it strikes me as very odd because FF is usually the one that retains form field values in more cases than IE. I'll let you know if anything strikes me as a fix.

**julmado** · 12-07-2006, 03:59 PM

I've been using this modified script for quite some time. Once again, very well executed jscheuer1, you've essentially brought Opera functionality to IE users.

I am looking to increase the number of tabs.

They are assigned numeric values 0-9, so I simply tried assigning alphabetical values. You're probably chuckling at my naivety by now..

In any case, is there any way to have more than 10 tabs?

Thread: Tabbed Document Viewer script

Thread Tools

Search Thread

Tabbed Document Viewer script

Bookmarks

Bookmarks

Posting Permissions