PDA

View Full Version : Minor problem - too bad I don't understand it.



StarrRider
05-23-2007, 05:17 PM
I have a function that validates the existance of an elements ID

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.

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:

<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

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

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:

c=c.valueOf();
but that doesn't make any difference either.

Any comments or suggestions would REALLY be appreciated
Lee

Twey
05-23-2007, 05:26 PM
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:
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:
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 thisBut here we come to the real question: why?

StarrRider
05-23-2007, 06:46 PM
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.

Twey
05-23-2007, 06:49 PM
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?

StarrRider
05-23-2007, 07:13 PM
Sure - I don't have a url that you can address but will send what I have.
this is the js

/*******************************************************
* 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");
}

StarrRider
05-23-2007, 07:15 PM
and this is the html

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

StarrRider
05-23-2007, 07:16 PM
I had to chop some of the html down to get it to post

StarrRider
05-23-2007, 07:24 PM
By the way - I already implemented the changes you suggested.
Thank you :-}