Advanced Search

Results 1 to 8 of 8

Thread: Minor problem - too bad I don't understand it.

  1. #1
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Minor problem - too bad I don't understand it.

    I have a function that validates the existance of an elements ID
    Code:
    function validId(id) { // This function tests the validity of an Id - Returns true if valid / false if not
      if(document.layers) return (document.layers[id]) ? true : false;
      else if(document.all) return (document.all[id]) ? true : false;
      else if(document.getElementById) return (document.getElementById(id)) ? true : false;
      else return false;
    }
    Which I use all over the place and works.
    Another section of code locates all of the <a> tags - this also works.
    Code:
      if(document.layers && document.layers[barId]) var e=document.layers[barId];
      else if(document.all && document.all[barId]) var e=document.all[barId];
      else if(document.getElementById && document.getElementById(barId)) var e=document.getElementById(barId);
      var a=e.getElementsByTagName('a');
    An example of the <a> tag is:
    Code:
    <a id="hcblink1" href="javascript:toggle('link1')" title="Display Content 1">
    The <a> tag works! toggleing the visibility of the entity
    I'm trying to extract the "link1" from the the HREF with this
    Code:
      var c=a.item(i).href;
      c=c.substr(c.indexOf('\'')+1,c.lastIndexOf('\'')-1-c.indexOf('\''));
      alert(c);
      if( !(validId(c)) ) {
        alert('Does NOT Validate ->'+c+'<-');
      } else {
        alert('Validates ->'+c+'<-');
      }
    The problem is that it will not validate but the alerts produce:
    Does NOT Validate ->link1<-
    If I replace the first alert with
    Code:
    toggle(c);
    I get an error - stating that the element id link1 doesn't exist

    The only thing I could think of was that "c" is a string while the 'link1' in the HREF is not - even though it looks like it is. So I added:
    Code:
    c=c.valueOf();
    but that doesn't make any difference either.

    Any comments or suggestions would REALLY be appreciated
    Lee

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,913
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    function validId(id) { // This function tests the validity of an Id - Returns true if valid / false if not
      if(document.layers) return (document.layers[id]) ? true : false;
      else if(document.all) return (document.all[id]) ? true : false;
      else if(document.getElementById) return (document.getElementById(id)) ? true : false;
      else return false;
    }
    Can be simplified to:
    Code:
    function validId(id) {
      return !!(
        (document.getElementById && document.getElementById(id)) ||
        (document.layers && document.layers[id]) ||
        (document.all && document.all[id])
      );
    }
    However, I wouldn't do that. Only document.getElementById() is really worth supporting these days, and you can test its return value directly.
    if(document.layers && document.layers[barId]) var e=document.layers[barId];
    else if(document.all && document.all[barId]) var e=document.all[barId];
    else if(document.getElementById && document.getElementById(barId)) var e=document.getElementById(barId);
    var a=e.getElementsByTagName('a');
    This would be a situation in which you could use that function of yours, but you haven't. It will also throw an error if the ID doesn't exist. Bearing in mind what I said earlier, it would be easier just to do:
    Code:
    var a = document.getElementById(barId);
    a = (a && a.getElementsByTagName && a.getElementsByTagName("a")) || document.links;
    I'm trying to extract the "link1" from the the HREF with this
    But here we come to the real question: why?
    Last edited by Twey; 05-23-2007 at 08:11 PM. Reason: Fix broken vBCode.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks Twey
    It is part of a registration process / that basically stores ent Id's into arrays for manipluation by other functions.
    My test bed at the moment is an Icon Bar (a table with Icons in it). The idea is to register the table and provide an array of function names to be applied to it. The functions could do anything - changing the background/border color/Icon opacity of the table to reflect the visibility of the content that the <a>tag/icon controls. Another aspect would be controlling the visibility of the content - so that only one piece of content is visible at a time.
    So far - I've got the registration routine working - and all of the Id's stored - except the actual content. That is critical to the operation of the functions. Some of them I know work but others I'm not sure of.

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,913
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    I'm afraid I'm still not entirely sure what you're trying to accomplish. Could you give another explanation, or perhaps a demo, or the code so far?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Sure - I don't have a url that you can address but will send what I have.
    this is the js
    Code:
    /*******************************************************
    * HCBar (Hidden Content Bar)
    * Author: Lee L Bell <StarrRider@users.sourceforge.net>
    *******************************************************/
    var debugHCB=false; // Do Not Allow Error Messages
                                  // Reason                             / Example
    var HcbFuncs  = new Array();  // Contains the Bar / Functions       / HcbFuncs[barId]=[func1,func2...]
    var HcbContent  = new Array();  // Contains the Bar / Content IDs   / HcbContent[barId]=[ContentId1,ContentId2...]
    var HcbATags  = new Array();  // Contains the Bar / <a> tag IDs     / HcbATags[barId]=[AtagId1,AtagId2...]
    var HcbAIcons  = new Array();  // Contains the <a> / Icon ID        / HcbIcon[AtagId]=IconId
    var HcbAContent  = new Array();  // Contains the <a> / Content IDs  / HcbATags[AtagId]=ContentId
    var HcbLinks  = new Array();  // Contains the Link / Bar            / HcbLinkLst[ContentId]=barId
    
    function validId(id) { // This function tests the validity of an Id - Returns true if valid / false if not
      if(document.getElementById) return (document.getElementById(id)) ? true : false;
      else return false;
    }
    function setVis(id,vis) { /* This function Sets the visibility of an element
    setVis(elementsId,'block');  // Makes Element Visible
    setVis(elementsId,'none');  // Makes Element Hidden  */
      if(validId(id)) document.getElementById(id).style.display=vis;
    }
    function getVis(id) { /* This function returns the visibility of an element */
      if(validId(id)) return document.getElementById(id).style.display;
    }
    
    function registerHCBar(barId,funcArr) { // This function locates all icons / <a> tags & controled content in a HCBar
      var myError = 'Function "registerHCBar" Error:\n';
      if( !(barId) || !(validId(barId)) ) {
        if(debugHCB) alert(myError+'The function was called without a valid Id for the HCBar.');
      } else {
        if( !(funcArr) || !(funcArr.constructor==Array) )
          funcArr=['hideifhidden']; // Default Processing Functions if not specified
        HcbFuncs[barId]=funcArr; // Store the Functions
    
        var a = document.getElementById(barId);
        a = a.getElementsByTagName("a"); // Locate the <a> Tags in this bar.
        if( !(a) || !(a.length>0) ) {
          if(debugHCB) alert(myError+'The HCBar ->'+barId+'<- does not contain any <a> tags.');
        } else {
          HcbATags[barId]=[]; // Create a new array
          HcbContent[barId]=[]; // Create a new array
          for (var i=0; i<a.length; i++) { // loop through the <a> nodes
            if( !(a.item(i).id)) {
              if(debugHCB) alert(myError+'In the HCBar ->'+barId+'<- the <a> tag #'+(i+1)+' does not have an Id.');
              break;
            } else HcbATags[barId][HcbATags[barId].length]=a.item(i).id; // Store the <a> tags Id
    
            if( !(a.item(i).href) ) {
              if(debugHCB) alert(myError+'In the HCBar ->'+barId+'<- the <a> tag #'+(i+1)+' does not have a HREF.');
              break;
            } else {
              var c=a.item(i).href;
              c=c.substr(c.indexOf('\'')+1,c.lastIndexOf('\'')-1-c.indexOf('\''));
              c=c.valueOf();
              alert(c);
              if( !(validId(c)) ) {
                if(debugHCB) alert(myError+'In the HCBar ->'+barId+'<- the <a> tag #'+(i+1)+' does not specify a valid ID.\nAfter extraction the ID is ->'+c+'<- while the HREF was\n->'+a.item(i).href+'<-');
              } else {
                HcbContent[barId][HcbContent[barId].length]=c;
                HcbLinks[c]=barId;
                HcbAContent[a.item(i).id]=c;
            }  }
            var img=a.item(i).getElementsByTagName('img'); // Locate the <img> Tag in this <a> Tag.
            if( (img) && (img.length>0) ) { // No error report if there are no Icons
              HcbAIcons[a.item(i).id]=img.item(0).id; // Store Img Id
        }  }  }
        if(debugHCB) {
          var tmp=[];
          for (var i=0; i<HcbLinks.length; i++) { // HcbLinks is the reverse of the HCB norm - having the Link
            // as an index and the barId as a value - so we need to invert it here
            if(HcbLinks[i]==barId) tmp[tmp.length]=HcbLinks[i].index;
          }
          var msg =  'Function "registerHCBar" Report: NO ERRORS in HCBar ->'+barId+'<-\n'+
                'The stored functions are:\n->'+HcbFuncs[barId]+'<-\n'+
                  'The <a> tags data is:\n';
          for (var i=0; i<HcbATags[barId].length; i++) {
            msg = msg+'<a> tag Id ->'+HcbATags[barId][i]+'<-';
            if(HcbAIcons[HcbATags[barId][i]]) msg = msg+' / Icon Id ->'+HcbAIcons[HcbATags[barId][i]]+'<-';
            if(HcbAContent[HcbATags[barId][i]]) msg = msg+' / Content Id ->'+HcbAContent[HcbATags[barId][i]]+'<-\n';
            else msg = msg+'\n';
          }
          msg = msg+'The Content tags are:\n->'+tmp+'<-\n';
          alert(msg);
    }  }  }
    
    function processHCBar(barId) {
    }
    
    function toggle(link) {
    /* This function toggles the content from displayed to hidden and then calls processHCBar to modify the HCBar as needed */
      var myError = 'Function "toggle" Error:\n';
      if(HcbLinks[link]) processHCBar(HcbLinks[link],link); // process the HCBar as needed
      if( !(link) || !(validId(link)) ) {
        if( !(link) && (debugHCB) ) alert(myError+'Called without an Id for the Content.');
        else if(debugHCB) alert(myError+'The Content Id specified was not valid. No content exists with the Id ->'+link+'<- .');
      } else {
        if(getVis(link)=='none') setVis(link,'block');  // Makes Element Visible
        else setVis(link,'none'); // Makes Element Hidden
    }  }
    
    function hideAll(barId) { // This function hides all of the Content regerenced by a HCBar
      var myError = 'Function "hideAll" Error:\n';
      if( !(barId) || !(HcbContent[barId]) ) {
        if( !(barId) && (debugHCB) ) alert(myError+'Called without an Id for the HCBar.');
        else if(debugHCB) alert(myError+'The Id specified is not a Registered HCBar. No HCBar exists with the Id ->'+barId+'<- .');
      } else {
        for (var i=0; i<HcbContent[barId].length; i++) {
          setVis(HcbContent[barId][i],'none');
    }  }  }
    
    function toggleFunc(barId,funcName) { //This function removes the function funcName from HcbFuncs array
    // if the function is not in the array - it is added to it
      var found;
      var myError = 'Function "toggleFunc" Error:\n';
      if( !(barId) || !(HcbContent[barId]) || (HcbFuncs[barId]) ) {
        if( !(barId) && (debugHCB) ) alert(myError+'Called without an Id for the HCBar.');
        else if( !(HcbContent[barId]) && (debugHCB) ) alert(myError+'The Id specified is not a Registered HCBar. No HCBar exists with the Id ->'+barId+'<- .');
        else if( !(HcbFuncs[barId]) && (debugHCB) ) alert(myError+'The HCBar specified did not Registered any functions. Please report this - it should not happen. The HCBar Id is ->'+barId+'<- .');
      } else {
        if(funcName in HcbFuncs[barId]) {
          for(var i=0; i<HcbFuncs[barId].length; i++) {
            if(HcbFuncs[barId][i]==funcName) found=i;
          }
          if(found) HcbFuncs[barId].splice(found,1);
        } else HcbFuncs[barId][HcbFuncs[barId].length]=funcName;
    }  }
    
    function opqueIfHidden(barId) { // This function changes the opacity of all Icons in a HCBar if the associated
    // Content is hidden
      var myError = 'Function "opqueIfHidden" Error:\n';
      if( !(barId) || !(HcbContent[barId]) || !(HcbATags[barId]) ) {
        if( !(barId) && (debugHCB) ) alert(myError+'Called without an Id for the HCBar.');
        else if( !(HcbContent[barId]) && (debugHCB) ) alert(myError+'The Id specified is not a Registered HCBar. No HCBar exists with the Id ->'+barId+'<- .');
        else if( !(HcbATags[barId]) && (debugHCB) ) alert(myError+'The HCBar specified did not contain any Links. Please report this Error - it should not happen. The HCBar Id is ->'+barId+'<- .');
      } else {
        for (var i=0; i<HcbATags[barId].length; i++) {
          if(getVis(HcbAContent[HcbATags[barId][i]]=='none')) {
          }
      }  }
    }
    
    function hideIfHidden(barId) {
    /* This function hides the HCBar if all of the associated Content is hidden */
      var hide=false;
      var linkArr=HcbLink[barId];
      for (var i=0; i<linkArr.length; i++) {
        if( !(hide) && (getVis(linkArr[i])=="block") ) hide=true;
      }
      if(hide) setVis(barId,"none");
    }

  6. #6
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    and this is the html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1256" />
      <title>HCBar Demo1</title>
      <link rel="stylesheet" type="text/css" href="CssAndJs/HCBarDemo1.css">
      <script language="javascript" src="CssAndJs/HCBar.js"></script>
    </head>
    
    <body>
    <div>
      <center><table id="top-hcbar" class="hcbar" cellpadding="2" cellspacing="2">
        <tr>
          <th colspan="3">Top HCBar</th>
        </tr><tr>
          <td><a id="hcblink1" href="javascript:toggle('link1')" title="Display Content 1">
            <img id="hcbimg1" src="Images/Circle_1.gif"><br/>Welcome
          </a></td>
          <td><a id="hcblink2" href="javascript:toggle('link2')" title="Display Content 2">
            <img id="hcbimg2" src="Images/Circle_2.gif"><br/>Intro
          </a></td>
          <td><a id="hcblink3" href="javascript:toggle('link3')" title="Display Content 3">
            <img id="hcbimg3" src="Images/Circle_3.gif"><br/>Content
          </a></td>
        </tr>
      </table></center>
      <script type="text/javascript">
        debugHCB=true; // Set to false after you know that every Link is valid
        registerHCBar('top-hcbar');
        hideAll('top-hcbar');
        toggle('link1');
      </script>
    
      <table id="left-hcbar" class="hcbar" cellpadding="2" cellspacing="2">
        <tr><th>Left<br>HCBar</th></tr>
        <tr>
          <td><a id="hcblink4" href="javascript:toggle('link4')" title="Display Content 4">
            <img id="hcbimg4" src="Images/Circle_4.gif"><br/>Example
          </a></td>
        </tr><tr>
          <td><a id="hcblink5" href="javascript:toggle('link5')" title="Display Content 5">
            <img id="hcbimg5" src="Images/Circle_5.gif"><br/>Register
          </a></td>
        </tr><tr>
          <td><a id="hcblink6" href="javascript:toggle('link6')" title="Display Content 6">
            <img id="hcbimg6" src="Images/Circle_6.gif"><br/>Control
          </a></td>
        </tr>
      </table>
      <script type="text/javascript">
        debugHCB=true; // Set to false after you know that every Link is valid
    //    registerHCBar('left-hcbar');
      </script>
    
      <table id="right-hcbar" class="hcbar" cellpadding="2" cellspacing="2">
        <tr>
          <th colspan="2">Right<br>HCBar</th>
        </tr><tr>
          <td><a id="hcbtoggle1" href="javascript:togglefunc('right-hcbar','hideifhidden',''); toggleicon('Images/GreenFlag.gif','Images/RedFlag.gif')" title="Toggle Visiblilty">
            <img id="hcbimg1" src="Images/RedFlag.gif">
          </a></td>
          <td><a id="hcbtoggle2" href="javascript:togglefunc('right-hcbar','opqueifhidden',''); toggleicon('Images/TrafficGreenFlag.gif','Images/TrafficRed.gif')" title="Toggle Icon Opacity">
            <img id="hcbimg2" src="Images/TrafficRed.gif">
          </a></td>
        </tr><tr>
          <td colspan="2"><a id="hcblink7" href="javascript:toggle('link7')" title="Display Content 7">
            <img id="hcbimg7" src="Images/Circle_7.gif"><br/>And More
          </a></td>
        </tr><tr>
          <td colspan="2"><a id="hcblink8" href="javascript:toggle('link8')" title="Display Content 8">
            <img id="hcbimg8" src="Images/Circle_8.gif"><br/>And More
          </a></td>
        </tr><tr>
          <td colspan="2"><a id="hcblink9" href="javascript:toggle('link9')" title="Display Content 9">
            <img id="hcbimg9" src="Images/Circle_9.gif"><br/>And More
          </a></td>
        </tr>
      </table>
      <script type="text/javascript">
        debugHCB=true; // Set to false after you know that every Link is valid
    //    registerHCBar('right-hcbar');
      </script>
    </div>
    <div class="content">
      <h1 align="center">HCBar (Hidden Content Bar) Demo 1</h1>
      <br/>
      <div id="link1" class="hidden">
        <h2><img src="Images/Circle_1.gif">&nbsp;Welcome</h2>
        <p>Welcome to the HCBar. This page uses 3 HCBars (Top, Left & Right) to display all of the content on this
     page. The operation of each of the HCBars is different and is explained in section <b>6 Control</b>.
        </p>
      </div>
    
      <div id="link2" class="hidden">
        <h2><img src="Images/Circle_2.gif">&nbsp;Introduction</h2>
        <p>Hiding Content (until it's needed) is the most prolific space saving method used on the web today. Most
     of the time a Menu or an indicator of some kind is used to hide / display the content. In this - HCBar is no
     different. While a HCBar can be used as a Menu (as they are here) - that doesn't adequately describe them. In
     addition to controlling the visibility of the content - they can operate like an Anchor without the problems that
     Anchors have (not working on hidden content or content that is embedded in hidden content). Further - they are
     expandable. Providing a means to apply nearly any effect imaginable to the HCBar or the content it identifies.
        </p>
      </div>
    
      <div id="link3" class="hidden">
        <h2><img src="Images/Circle_3.gif">&nbsp;The Content</h2>
        <p>As stated earlier - this page uses 3 HCBars - each creating an Icon Bar. They demonstrate the simplest
     usage of HCBars and show that an HCBar can control the content of most Tags - including:
          <ul>
            <li><b>&lt;div&gt;</b>s are controlled by the Top HCBar</li>
             <li><b>&lt;span&gt;</b>s are controlled by the Left HCBar</li>
             <li><b>&lt;p&gt;</b>s are controlled by the Right HCBar</li>
          </ul>
     I like Icon Bars and don't think they are used often enough on the web - even though they are used in nearly every
     application you'll find.
        </p>
      </div>
    
      <span id="link4" class="hidden">
        <h2><img src="Images/Circle_4.gif">&nbsp;An Example</h2>
        <p>Lets use the Top HCBar as an example. It is a simple table defined like this:</p>
        <textarea class="codecontainer" rows="10" cols="90">
    <center>
       <table id="top-hcbar" class="hcbar" cellpadding="2" cellspacing="2">
          <tr>
             <th colspan="3">Top HCBar</th>
          </tr>
          <tr>
             <td>
                <a id="hcblink1" href="javascript:toggle('link1')" title="Display Content 1">
                   <img id="hcbimg1" src="Images/Circle_1.gif"><br/>Welcome
                </a>
             </td>
             <td>
                <a id="hcblink2" href="javascript:toggle('link2')" title="Display Content 2">
                   <img id="hcbimg2" src="Images/Circle_2.gif"><br/>Intro
                </a>
             </td>
             <td>
                <a id="hcblink3" href="javascript:toggle('link3')" title="Display Content 3">
                   <img id="hcbimg3" src="Images/Circle_3.gif"><br/>Content
                </a>
             </td>
          </tr>
       </table>
    </center>
        </textarea>
        <p><b>Please Note:</b>
          <ul>
            <li>The Table uses <b>class="hcbar"</b>.</li>
            <li>That we assigned an ID to the <b>&lt;table&gt;</b> / each <b>&lt;a&gt;</b> tag / and each
     <b>&lt;img&gt;</b> tag.</li>
          </ul>
        </p>
      </span>
    
    </div>
    </body>
    </html>

  7. #7
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I had to chop some of the html down to get it to post

  8. #8
    Join Date
    May 2007
    Location
    Sherman Texas
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    By the way - I already implemented the changes you suggested.
    Thank you :-}

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
  •