Quandary about Events in JS

largelylivin

/*  Navigation Bars - all Navbars same format if used at all */
#firstPass {display:block;}
#firstPass  #navwrapper {
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
    display: block;
}
#firstPass #ffwrapper,
#firstPass #OWCwrapper,
#firstPass #clientswrapper {
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
    display: none;
}
/* event names */
#toFF,
#toOWC,
#toClients,
#toHome { display:inline; }
#theFirstpass {display: inline;}
/* this is the inital state upon entering the site or anytime we hit homepage */

I am trying to use Events to let me change homepage 'Domains', losely speaking. I have 4 different navbars (only three implemented) that are enabled by navcontainer, ffcontainer, and OWC container. Only one should be 'display: block;' at a time. I also implemented a "first pass" mechanism to try and solve this problem - it doesn't seem to help.

In the footer I have added listeners to each tag so that I can flip all the nav containers before allow the href to occur.

******** type="text/javascript">
YAHOO.util.Event.addListener("theFirstpass","onload",itstheFirstpass);
YAHOO.util.Event.addListener("toFF","click",gotoFamilypage);
YAHOO.util.Event.addListener("toOWC","click",gotoOWCpage);
YAHOO.util.Event.addListener("toHome","click",gotoHomepage);
YAHOO.util.Event.addListener("toClients","click",gotoClientspage);
 
</********< p>

Those event listeners are defined in the javascropt section. To help debugging I have added alert messages to each.

/******   Event handler for changing "domains"  ********/
/* when user clicks a button to cause change in domain, these routines */
/* intercept and sets/clears the appropriate navigation wrapper display settings */
/*                  */
var itstheFirstpass = function(e) {
     YD.setStyle('firstPass','display','none');
      YAHOO.util.Event.prevent(e);
     alert("firstPass Listener");
 
 
}
var gotoHomepage = function(e){
  YD.setStyle('navwrapper','display','block');
  YD.setStyle('ffwrapper','display','none');
  YD.setStyle('OWCwrapper','display','none');
  YD.setStyle('clientswrapper','display','none');
  alert("Home Listener");
}
var gotoFamilypage = function(e){
  YD.setStyle('navwrapper','display','none');
  YD.setStyle('ffwrapper','display','block');
  YD.setStyle('OWCwrapper','display','none');
  YD.setStyle('clientswrapper','display','none');
  alert("FF Listener");
}
var gotoOWCpage = function(e){
  YD.setStyle('navwrapper','display','none');
  YD.setStyle('ffwrapper','display','none');
  YD.setStyle('OWCwrapper','display','block');
  YD.setStyle('clientswrapper','display','none');
  alert("OWC Listener");
}
var gotoClientspage = function(e){
  YD.setStyle('navwrapper','display','none');
  YD.setStyle('ffwrapper','display','none');
  YD.setStyle('OWCwrapper','display','none');
  YD.setStyle('clientswrapper','display','block');
}

Finally, and this is just a partial, the HTML has buttons that when clicked, send me off to the appropriate category, presumably after the listener has been hit. Also, note first class mechanism.

<div id="theFirstpass">
  <a href="[URL="http://largelylivin.smugmug.com/"]http://largelylivin.smugmug.com/[/URL]" id="theFirstpass" ></a>
</div> 
<div id="my_header" align="center">
  <table border="0" width="1100" cellpadding="0" cellspacing="0">
    <tr>
      <td width="120">
        <div id="fandfcontainer" align="center">
         <ul>
         <li><a href="[URL="http://largelylivin.smugmug.com/Family__Friends"]http://largelylivin.smugmug.com/Family__Friends[/URL]" id="toFF"
           title="Personal Area">Friends & Family</a></li>
         <li><a href="[URL="http://largelylivin.smugmug.com/OWC"]http://largelylivin.smugmug.com/OWC[/URL]" id="toOWC"
title="Personal Area">Orville Waugh Collection</a> </li>
         </ul>
        </div>
      </td>
      <td width="783">
         <div id="my_banner" align="center">  
           <a href="[URL="http://www.largelylivin.smugmug.com/"]http://www.largelylivin.smugmug.com/[/URL]" id="toHome"
                 title="To Blue Dog's Home Page">
            <img src="[URL="http://largelylivin.smugmug.com/photos/118164107-L.gif"]http://largelylivin.smugmug.com/photos/118164107-L.gif[/URL]"  height="100px" width="653px" alt="Blue Dog Logo"></img>
            </a>
   
         </div>

Here's the bizzare behavior. When it first gets displayed I get all three headers. When I click on Family, I get only the family nav bar and the alert message from the family listener. When I click on the alert, I get all three headers and I am back at the original homepage!

Ideas???

largelylivin

I can't get that last code box FIXED!!!!

[QUOTE]<div id="theFirstpass">
  <a href="[URL="http://largelylivin.smugmug.com/"]http://largelylivin.smugmug.com/[/URL]" id="theFirstpass" ></a>
</div> 
<div id="my_header" align="center">
  <table border="0" width="1100" cellpadding="0" cellspacing="0">
    <tr>
      <td width="120">
        <div id="fandfcontainer" align="center">
         <ul>
         <li><a href="[URL="http://largelylivin.smugmug.com/Family__Friends"]http://largelylivin.smugmug.com/Family__Friends[/URL]" id="toFF"
           title="Personal Area">Friends & Family</a></li>
         <li><a href="[URL="http://largelylivin.smugmug.com/OWC"]http://largelylivin.smugmug.com/OWC[/URL]" id="toOWC"
title="Personal Area">Orville Waugh Collection</a> </li>
         </ul>
        </div>
      </td>
      <td width="783">
         <div id="my_banner" align="center">  
           <a href="[URL="http://www.largelylivin.smugmug.com/"]http://www.largelylivin.smugmug.com/[/URL]" id="toHome"
                 title="To Blue Dog's Home Page">
            <img src="[URL="http://largelylivin.smugmug.com/photos/118164107-L.gif"]http://largelylivin.smugmug.com/photos/118164107-L.gif[/URL]"  height="100px" width="653px" alt="Blue Dog Logo"></img>
            </a>
   
         </div>
[/QUOTE]

Here goes nothing......

Take a look. It is bizarre!


http://largelylivin.smugmug.com

largelylivin

Bump
Bump

largelylivin

bump
bump