Problem with Tabbed Document Viewer

[cathimac]

Tabbed Document Viewer

http://www.dynamicdrive.com/dynamici...bdocviewer.htm


I am using the Tabbed Document Viewer code in a website I am designing, and so far everything works bang on. Great script, easy to understand instructions.

However, when you click on the tabs, the page that is supposed to be inline on my website, it opening full page. I do not have the box checked at the bottom that allows the page to open fully, and I have nothing in the target (_blank, _self…etc)

I cannot for the life of me figure this out!!
Can someone please help me ASAP??

[rangana]

Please provide a link to the page in question.

[cathimac]

Page in question is still under construction and is at

http://www.frogandonion.bm/2008/menus.htm

[rangana]

First of all, id should be unique in every page and should not exist more than once.

Secondly, the script does'nt allow multiple tabbed content viewer and creates conflict thus what you are experiencing now.

But you can have this script instead:

<script type="text/javascript">

/***********************************************
* Tabbed Document Viewer script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by Raymond Angana rangana in dynamicdrive.com/forums
* First seen in dynamicdrive.com/forums
* Modification - Allow multiple tabbed content viewer
* 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,targFrame){
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"
document.getElementById(targFrame).src=selectedtablink
return false
}
else
return true
}

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

</script>

And mofidy your markup (from content table) to:

<table cellpadding="0" cellspacing="10" border="0" width="700
">
<tr>
  <td width="700" align="left" valign="top" class="just">


<span class="title">Frog and Onion Regular Menus</span><br>


Click on the menu of your choice to see contents.<br>

<br><br>


<ul id="tablist">
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch.htm" class="current" onClick="return handlelink(this,'tabiframe1')">Lunch</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Dinner.htm" target="_parent" onClick="return handlelink(this,'tabiframe1')">Candlelight Dinner</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Sweets.htm" onClick="return handlelink(this,'tabiframe1')">Sweets & Puddings</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Beer.htm" onClick="return handlelink(this,'tabiframe1')">Beer Tasting</a></li>
</ul>
<iframe id="tabiframe1" src="http://www.frogandonion.bm/2008/menu-Lunch.htm" width="98%" height="350px"></iframe>

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


<span class="title">Frog and Onion Group Menus</span><br>


Click on the group menu of your choice to see contents.<br>

<br><br>



<ul id="tablist">
<li><a href="http://www.frogandonion.bm/2008/menu-HorDoeuvres.htm" class="current" onClick="return handlelink(this,'tabiframe2')">Hors D'Oeuvres</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Soups.htmm" onClick="return handlelink(this,'tabiframe2')">Soups</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch7.htm" onClick="return handlelink(this,'tabiframe2')">Lunch 7</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch8.htm" onClick="return handlelink(this,'tabiframe2')">Lunch 8</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch9.htm" onClick="return handlelink(this,'tabiframe2')">Lunch 9</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch10.htm" onClick="return handlelink(this,'tabiframe2')">Dinner 10</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch11.htm" onClick="return handlelink(this,'tabiframe2'')">Dinner 11</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch12.htm" onClick="return handlelink(this,'tabiframe2')">Dinner 12</a></li>
<div style="margin-bottom: 8px"></div>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet1.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 1</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet2.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 2</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet3.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 3</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet4.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 4</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet5.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 5</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet6.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 6</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet7.htm" onClick="return handlelink(this,'tabiframe2')">Buffet 7</a></li>
</ul>
<iframe id="tabiframe2" src="http://www.frogandonion.bm/2008/menu-HorDoeuvres.htm" width="98%" height="350px"></iframe>

<form name="tabcontrol2" style="margin-top:0">
<input name="tabcheck" type="checkbox" onClick="handleview(this)"> Open tab links in browser window instead.<br>
 <br>
 <br>
</form>
</td>
</tr></table>

The code now accepts two parameters, the first is the this keyword and the second is the iframe you want to target.
Highlighted are the modifications.

Hope that helps.

[jscheuer1]

You can only have one element on a given page with a given id. So, without modifications, you can have only one tabbed document viewer on a page. After I removed the second iframe and checkbox form (highlighted):

 . . . gandonion.bm/2008/menu-Buffet5.htm" onclick="return handlelink(this)">Buffet 5</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet6.htm" onclick="return handlelink(this)">Buffet 6</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet7.htm" onclick="return handlelink(this)">Buffet 7</a></li>
</ul>
<iframe id="tabiframe" src="http://www.frogandonion.bm/2008/menu-HorDoeuvres.htm" width="98%" height="350"></iframe>

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



</td>
</tr></tbody></table> . . .

The first one worked fine.

If you were to put a second set of styles and script on your page in addition to the current script and styles (note the addition of the number 2 in many strategic places):

<style type="text/css">

/*Eric Meyer's based CSS tab*/

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

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

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

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

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

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

</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 selectedtablink2=""
var tcischecked2=false

function handlelink2(aobject){
selectedtablink2=aobject.href
tcischecked2=(document.tabcontrol && document.tabcontrol2.tabcheck2.checked)? true : false
if (document.getElementById && !tcischecked2){
var tabobj=document.getElementById("tablist2")
var tabobjlinks=tabobj.getElementsByTagName("A")
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
document.getElementById("tabiframe2").src=selectedtablink2
return false
}
else
return true
}

function handleview2(){
tcischecked2=document.tabcontrol.tabcheck.checked
if (document.getElementById && tcischecked2){
if (selectedtablink2!="")
window.location=selectedtablink2
}
}

</script>

Then you could have a second viewer (number 2 also used in many places, to match up with the second script and styles set):

<ul id="tablist2">
<li><a href="http://www.frogandonion.bm/2008/menu-HorDoeuvres.htm" class="current" onclick="return handlelink2(this)">Hors D'Oeuvres</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Soups.htmm" onclick="return handlelink2(this)">Soups</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch7.htm" onclick="return handlelink2(this)">Lunch 7</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch8.htm" onclick="return handlelink2(this)">Lunch 8</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch9.htm" onclick="return handlelink2(this)">Lunch 9</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch10.htm" onclick="return handlelink2(this)">Dinner 10</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch11.htm" onclick="return handlelink2(this)">Dinner 11</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Lunch12.htm" onclick="return handlelink2(this)">Dinner 12</a></li>
<div style="margin-bottom: 8px;"></div>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet1.htm" onclick="return handlelink2(this)">Buffet 1</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet2.htm" onclick="return handlelink2(this)">Buffet 2</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet3.htm" onclick="return handlelink2(this)">Buffet 3</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet4.htm" onclick="return handlelink2(this)">Buffet 4</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet5.htm" onclick="return handlelink2(this)">Buffet 5</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet6.htm" onclick="return handlelink2(this)">Buffet 6</a></li>
<li><a href="http://www.frogandonion.bm/2008/menu-Buffet7.htm" onclick="return handlelink2(this)">Buffet 7</a></li>
</ul>
<iframe id="tabiframe2" src="http://www.frogandonion.bm/2008/menu-HorDoeuvres.htm" width="98%" height="350"></iframe>

<form name="tabcontrol2" style="margin-top: 0pt;">
<input name="tabcheck2" onclick="handleview2()" type="checkbox"> Open tab links in browser window instead.<br>
 <br>
 <br>
</form>

[cathimac]

Thank you both for the info... makes sense!!
I will try it later and let you know.

Many many many thanks!!!
Cathimac

[cathimac]

It worked!! Thank you so much for your help!

[cathimac]

Good afternoon,

Thank you again for those who helped with my first problem.

Now I would like to add a border around the area where the menus appear. I cannot seem to find how to do this. I am sure it is easy, but I cannot work it out.

Any help would be appreciated once again!!

Cathimac

[rangana]

Try to add highlighted:

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

[cathimac]

Thank you, but I did try that, and it puts a border around the tabs area. I want a border around the box that contains the menus.

Didnt think it would be that hard, but I can't figure it out!!