Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Inconsistent tab/link behaviour - Very strange I think

Posted on 2005-05-12
2
Medium Priority
?
294 Views
Last Modified: 2012-06-27
Good day everyone,

I've finally learned how to create tabs and it has been most instructive and usefull. I have however discovered some peculiar behaviour that I just don't understand.

Below is the script created with a <div> heading section and then a <div> tab section.

1.
One of the tabs contain an <iframe> liked to a document that also contains a <div> heading section and also a <div> tab section. The end result is a main page that contains a main tab selection one which tabs contains a documents that also has it's own tab section (hence a tab section within tab).

2.
The main tab is functioning perfectly; however clicking on any of the tabs on the "sub" tab causes the contents of that sub tab to be displayed alone (wiping out the "sub" <div> heading) and the sub tab is incorrectly displayed on the top left of the main tab section.

3.
Also most peculiarly, when the "sub" document that contains the sub tab is opened on its own (ie: not as part of the main document) the tabs work fine. I find this behaviour very odd.

Below I include the code for the Main Document, Sub doucment and Sub-sub. Doucment.

I know that this is likely something very basic that I'm missing as a result of being quite new to html. But I would greatly appreciate the communities usual helpful insights...

MAIN DOCUMENT
------------------------------------------------
<? session_start()?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


<html>

<title>OneWorld Mortgage Maker</title>

<head>

<link rel="stylesheet" type="text/css" href="MyStyleSheet.css"/>


<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

  var elList, i;

  // Exit if no frame name was given.

  if (frameName == null)
    return;

  // Check all links.

  elList = document.getElementsByTagName("A");
  for (i = 0; i < elList.length; i++)

    // Check if the link's target matches the frame being loaded.

    if (elList[i].target == frameName) {

      // If the link's URL matches the page being loaded, activate it.
      // Otherwise, make sure the tab is deactivated.

      if (elList[i].href == window.frames[frameName].location.href) {
        elList[i].className += " activeTab";
        elList[i].blur();
      }
      else
        removeName(elList[i], "activeTab");
    }
}

function removeName(el, name) {

  var i, curList, newList;

  if (el.className == null)
    return;

  // Remove the given class name from the element's className property.

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

//]]></script>

<script>
<!-- Script for Dynamic Drop Down list -->
pressed = ";

function jumpTo(sel) {
  var keycode = window.event.keyCode;
  var str = String.fromCharCode(keycode);
  if(!/[a-z0-9]/i.test(str))return;
  pressed += str;
  if(t) clearTimeout(t);
  t = setTimeout('pressed = ""', 5000);
  var re = new RegExp('^'+pressed, 'i');
  for(var i = 0; i < sel.options.length; i++) {
    if(re.test(sel.options[i].text)) {
       sel.options[i].selected = true;
       break;
     }
  }
}
</script>

<body bgcolor="#9400D3";>
</head>

<form>
<div class="tabBox" style="clear:both;   background-color: #d0b0ff; border: 2px solid #000000; border-bottom-width: 0px;border-color: #f0d0ff #b090e0 #b090e0 #f0d0ff; position: absolute; left: 2px; top: 3px; width: 770px; height: 56px;">
      
            <p class ="tfL" style="font-size: 105%; top: 5px; left: 0px; padding: 1px
            1em 1px ; width: 118px; letter-spacing: 2px";>
            Property &nbsp;:
            </p>
            
            
            <select name=Property class="tfIT" style="top: 5px; left: 90px; width:
            299px;" maxlength="35" >
            <option value="AbeyRoad">Abey Road </option>
            <option value="Acton Court ">Acton Court </option>
            <option value="Adelaide">Adelaide </option>
            <option value="Amber Park">Amber Park </option>
            <option value="Bay Street">Bay Street </option>
            <option value="Belgrave">Belgrave</option>
            <option value="Binly Rd">Binly Rd</option>
            <option value="Borland Drive">Borland Drive</option>
            </select>
            
            <select name="MainFilter" class="tfIT" style="top: 5px; left: 390px;
            width: 140px;" maxlength="10">
              <option value="CurrentProperty" selected>CurrentProperty</option>
              <option value="AddProperty">Add Property</option>
              <option value="SearchProperty">Search Property</option>
              <option value="SearchByClient">Search By Client </option>
            </select>
            
            <p class ="tfL" style="top: 5px; left: 520px; width 50px;" >
            MortgageID
            </p>
            
            
            
            <select name=Property class="tfIT" style="top: 5px; left: 605px; width:
            64px;">
            <option value="Open" selected>Open</option>
            <option value="Complete">Complete</option>
            <option value="Closed">Closed</option>
            </select>
            
             <input type=SUBMIT VALUE="View" class="tfIS" style="top: 5px; left:
             675px"
             </input>
             
             <input type=SUBMIT VALUE="Menu" class="tfIS" style="top: 5px;left:725px"
             </input>
             
             <br />
             
             <p class ="tfL" style="font-size: 105%; top: 30px; left: 0px; width:
             120px" >
            Copy/Filter:
            </p>
            
            
            <select name="EntityFilterA" class="tfIT" style="top: 30px; left: 90px;
            width: 90px">
            <!-- onblur="this.style.width=20" onclick="this.style.width=150" size="1"> -->
              <option value="ClientPerson">Client Person </option>
              <option value="ClientCorporation">Client Corporation </option>
              <option value="LawFirms" selected>LawFirms</option>
              <option value="RealEstateCompanies">Real Estate Companies </option>
            </select>
            
            <select name=EntityFilterB class="tfIT" style="top: 30px; left: 181px;
            width: 208px;" maxlength="10" >
            <option value="ClientPerson">Client Person</option>
            <option value="ClientCorporation">Client Corporation</option>
            <option value="LawFirms" selected>LawFirms   - this sets</option>
            <option value="RealEstateCompanies">Real Estate Companies</option>
            </select>
            
            <select name=EntityFilterC class="tfIT" style="top: 30px; left: 390px;
            width: 280px" maxlength="10" >
            <option value="ClientPerson">Client Person</option>
            <option value="ClientCorporation">Client Corporation</option>
            <option value="LawFirms" selected>LawFirms   - this sets</option>
            <option value="RealEstateCompanies">Real Estate Companies</option>
            </select>
            
             <input type=SUBMIT VALUE="Edit" class="tfIS" style="top: 30px; left:
             677px"
             </input>
             
             <input type=SUBMIT VALUE="Add" class="tfIS" style="top: 30px; left:
             725px"
             </input>
</div>
<br />

<div class="tabBox" style="clear:both; position: absolute; left: 1px; top: 68px; width: 776px; height: 343px; background-color: #9070c0;">
  <div class="tabArea">
    <a class="tab" href="PersonForm.php" target="tabIframe2">Mortgage</a>
    <a class="tab" href="MainStatus.php" target="tabIframe2">Status</a>
    <a class="tab" href="MainSend.php" target="tabIframe2">Send</a>
    <a class="tab" href="MainReceived.php" target="tabIframe2">Received</a>
    <a class="tab" href="MainActions.php" target="tabIframe2">Actions</a>
    <a class="tab" href="MainRegistry.php" target="tabIframe2">Registry</a>
    <a class="tab" href="MainDelegate.php" target="tabIframe2">Delegate</a>
    <a class="tab" href="MainInvoice.php" target="tabIframe2">Invoice</a>
    <a class="tab" href="MainStageManagement.php" target="tabIframe2">Stage Management</a>
  </div>
  <div class="tabMain">
        <div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="PersonForm.php" style="height: 338px; width: 375px;"></iframe></div>
  </div>
</div>


</form>

</body>

</html>
-----------------------------------------------------------------------------------------

SUB DOCUMENT
-------------------------------------------------------------
<? session_start()?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 


<html>

<title>Person Form</title>

<head>
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css"/>
<script type="text/javascript" src="tabbed.js"></script>

<script type="text/javascript">//<![CDATA[

function synchTab(frameName) {

  var elList, i;

  // Exit if no frame name was given.

  if (frameName == null)
    return;

  // Check all links.

  elList = document.getElementsByTagName("A");
  for (i = 0; i < elList.length; i++)

    // Check if the link's target matches the frame being loaded.

    if (elList[i].target == frameName) {

      // If the link's URL matches the page being loaded, activate it.
      // Otherwise, make sure the tab is deactivated.

      if (elList[i].href == window.frames[frameName].location.href) {
        elList[i].className += " activeTab";
        elList[i].blur();
      }
      else
        removeName(elList[i], "activeTab");
    }
}

function removeName(el, name) {

  var i, curList, newList;

  if (el.className == null)
    return;

  // Remove the given class name from the element's className property.

  newList = new Array();
  curList = el.className.split(" ");
  for (i = 0; i < curList.length; i++)
    if (curList[i] != name)
      newList.push(curList[i]);
  el.className = newList.join(" ");
}

//]]></script>

</head>
<body>

<form>
<div class="tabBox" style="clear: both; background-color: #4682B4; border: 2px solid #000000; border-bottom-width: 0px;border-color: #b090e0 #b090e0 #b090e0 #b090e0; position: absolute; left: 0px; top: 0px; width: 363px; height: 102px;">
      <p class="hsoL1132">First Name</p>
      <input name=FirstName type=text class="hsoIT1232" ></input>
      
      <p class="hsoL2132">Middle Name</p>
      <input name=MiddleName type=text class="hsoIT2232" ></input>
      
      <p class="hsoL3132">Last Name</p>
      <input name=LastName type=text class="hsoIT3232" ></input>
      
      <p class="hsoL4133">Title</p>
      <select name=Title class="hsoIT4233">
            <option value="Mr" selected>Mr.</option>
            <option value="Mrs">Mrs.</option>
            <option value="Miss">Miss</option>
            <option value="Ms">Ms</option>
            <option value="Madam">Madam</option>
      </select>
      
      
      <p class="hsoL4333">Gender</p>
      <select name=Gender class="hsoIT4433" >
            <option value="Male" selected>Male</option>
            <option value="Female">Female</option>
      </select>
      
      
      
      <p class="hsoL4533">Marital</p>
      <select name=Gender class="hsoIT4633" >
            <option value="Married" selected>Married</option>
            <option value="Single">Single</option>
            <option value="Divorced">Divorced</option>
            <option value="Seperated">Seperated</option>
      </select>
</div>

<div class="tabBox" style="clear:both; position: absolute; left: 0px; top: 104px; width: 360px; height: 101px; background-color: #4682B4;">
  <div class="tabArea">
    <a class="tab" href="AddressHome.php" target="tabIframe2">Home</a>
    <a class="tab" href="AddressMail.php" target="tabIframe2">Mail</a>
    <a class="tab" href="AddressWork.php" target="tabIframe2">Work</a>
    <a class="tab" href="MainDelegate.php" target="tabIframe2">Tel/Email</a>
    <a class="tab" href="MainStageManagement.php" target="tabIframe2">Other</a>
  </div>
  <div class="tabMainSmall">
        <div class="tabIframeWrapper"><iframe class="tabContent" name="tabIframe2" src="AddressHome.php" style="height: 101px; width: 359px;"></iframe></div>
  </div>
</div>


</form>

</body>
</html>
------------------------------
SUB SUB DOCUMENT

<? session_start()?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html>

<title>AddressWork</title>

<head>
<link rel="stylesheet" type="text/css" href="MyStyleSheet.css"/>
<script type="text/javascript" src="tabbed.js"></script>


</head>
<body>

<form>
<div class="tabBox" style="clear: both; position: absolute; left: 0px; top: 0px; width: 353px; height: 97px; background-color: #4682B4;">
      <p class="hsosL1132">Address Line1</p>
      <input name=AddressLine1 type=text class="hsosIT1232" ></input>
      
      <p class="hsosL2132">Address Line2</p>
      <input name=AddressLine2 type=text class="hsosIT2232" ></input>
      
      <p class="hsosL3132">Address Line3</p>
      <input name=AddressLine3 type=text class="hsosIT3232" ></input>
      
      <p class="hsosL4122">Country</p>
      <select name=Country class="hsosID4222">
            <option value="Afghanastan" selected>Afghanastan</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
      </select>
      
      <p class="hsosL4322">Post Code</p>
      <input name=PostCode class="hsosIT4422"></input>
</div>
</form>

</body>
</html>
---------------------

Thanks again in advance everyone. I allocated 500 points due to the tedium of going through all this code.

Regards,

wb
 

Ps. You will also note that the code refers to a bit of java Script. Which is:

if (window.parent && window.parent.synchTab)
  window.parent.synchTab(window.name);


0
Comment
Question by:winbiz
2 Comments
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 13990444
Try assigning a different name-attribute to the sub-iframe.

Currently the outer iframe has name "tabIframe2" and the inner frame has the same name. As the anchors link to target="tabIframe2" the sub-tab section resolves into loading into the main iframe instead of the subframe. This behaviour would not be visible when loading only the subdocument, because then the tabIframe2 would not be ambiguous.

-r-
0
 

Author Comment

by:winbiz
ID: 13990761
Roonan.  Thank you problem solved.

Pleasure to give you the points.

Grateful regards,

wb
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month13 days, 19 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question