Problem with Tabbed Document Viewer

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

Please provide a link to the page in question.

Page in question is still under construction and is at

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

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:

Code:

---

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

Code:

---

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

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):

Code:

---

. . . 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):

Code:

---

<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):

Code:

---

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

---

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

Many many many thanks!!!
Cathimac

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

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!! :confused:

Cathimac

Try to add highlighted:

Code:

---

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

---

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

I'm uncertain what you mean, but have you tried adding border attribute here:

Code:

---

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

---

Both options you gave me affect the actual tabs. There is already a border around those and they are fine as they are.

I want to put a border around the large box under the tabs.

Quote:

---

Originally Posted by cathimac

Both options you gave me affect the actual tabs. There is already a border around those and they are fine as they are.

I want to put a border around the large box under the tabs.

---

Highlighted is the keyword, you mean to describe the iframe and not the tabs. It was definitely a misunderstanding on both parties.

Anyway, for the fix, you can either choose from these two:

• You can style all the iframe elements:
  
  Code:

  ---

  iframe{border:3px double #555;}

  ---

• You can style the two iframes individually, by accessing the iframe's ID:
  
  Code:

  ---

  #tabiframe1{border:3px double #f00;}
#tabiframe2{border:3px double #00f;}

  ---

Hope it helps.

Thank you! I got it working.
Much appreciated for taking the time.

I've managed to get the two IFRAMES working on the page, however for some bizarre reason the colours on the tabs do not match with the CSS. Any idea why this maybe? My test site is:

http://www.met-monkey.co.uk/stormwatch.html

The purple on the tabs should not be there, it should be white and the IFRAME at the top the mouse-over text link should not be white, but navy blue.

Thanks for your help in advance, probably a real simple one this. I've checked the CSS though and I can't for the life of me see any problems.

Please start a new thread if you haven't already.