Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Problem with Tabbed Document Viewer

  1. #1
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question 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??
    Last edited by cathimac; 08-16-2008 at 12:47 AM. Reason: Looked bad!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Please provide a link to the page in question.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Page in question is still under construction and is at

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

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. The Following User Says Thank You to rangana For This Useful Post:

    cathimac (08-16-2008)

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    cathimac (08-16-2008)

  8. #6
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

    Many many many thanks!!!
    Cathimac

  9. #7
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

  10. #8
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Adding Border to Tabbed Document Viewer

    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

  11. #9
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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;
    }
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  12. #10
    Join Date
    Aug 2008
    Location
    Bermuda
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •