PDA

View Full Version : 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
.

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:

JavaScript on one domain cannot access anything on anotherand 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:


<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?

jscheuer1
12-07-2006, 06:02 PM
Turns out I lost interest in this concept as soon as I saw that it could be done (you will see this is a rather old thread and that I never posted any of the promised updates). And, as it so happens, IE now supports tabbed browsing so, I see even less reason to spend time on this script which would probably always have the problem with the 'back' button as mentioned in a previous post.

julmado
12-08-2006, 07:57 PM
I've added a "Home" button to most tabs to get rid of the back-button quirk.

I think it's still a great tool. Many companies haven't implemented IE7 yet, among which my employer...!

I use it at work every day, but would like more tabs.

jscheuer1
12-08-2006, 10:01 PM
I don't see any reason why you couldn't have more than 10 tabs, using letters will not do but, javascript can count a lot higher than 9. So your 11th tab could use the number 10, the 12th could use 11 - and so on. It is perhaps a little confusing because in javascript, as in most programming languages, counting starts with 0 instead of 1. The only limitation might be on how many tabs will fit in the layout, if they will wrap though, this would not be a problem and if they don't, they probably could be made to.