Help on DOM scripting - Global Variables?, Changing CSS visibility of one object by clicking another Options

[Charlie]

I'm creating an online catalog with numerous items. Each item is listed in a SPAN tag with an ID such as "A01".

On another part of the page is a fixed DIV (id="js-popups") containing detailed descriptions and images of the products. Inside of this DIV, each product's description appears in its own DIV with an ID such as "js-A01", matching the ID on the original product list.

All of the popup DIVs have their visibility initially set to "hidden"; I would like to be able to mouseover, say, item "A01" and have the DIV with the corresponding "js-A01" pop into view...but I HAVE NOT been able to change CSS properties of one DOM object on the page by clicking on a different object.

My approach has been to test the object clicked for its ID, and then use that ID to create a variable containing the matching ID:

CODE

function findObjectID(evt) {
    var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);
    var test1 = objectID;    
    
    var test2 = document.id=('js-' + test1);
    if (test2)
        alert(test2);
        return;
}

...but that's as far as I've gotten. I can't find a way to use this variable to apply a style change to the second object! Can anybody offer suggestions? Thanks...

Charlie

[Christian J]

I recommend that you make the page functional without javascript, then add JS as an enhancement. This means only hiding the description DIVs when JS is enabled. When JS is unavailable, the links below work as named anchors, leading to each description DIV. With JS enabled, this link function is disabled.

Note that I put the JS after the involved HTML to speed up rendering. You can also put it in the page's HEAD section and use window.onload, but that's slower in some browsers.

CSS

CODE

#js-popups {
height: 5em;
border: solid;
}
.hide {display: none;}
.show {display: block;}

HTML/JS

CODE

<div id="buttons">
<a href="#js-A01" id="A01">A01</a>
<a href="#js-A02" id="A02">A02</a>
</div>

<div id="js-popups">
<div id="js-A01">JS-A01</div>
<div id="js-A02">JS-A02</div>
</div>

<script type="text/javascript">
if(document.getElementById && document.getElementsByTagName)
{
    function hide_all()
    {
        var js_popups=document.getElementById('js-popups').getElementsByTagName('div');
        for(var i=0; i<js_popups.length; i++)
        {
            js_popups[i].className='hide';
        }
    }
    hide_all();

    var buttons=document.getElementById('buttons').getElementsByTagName('a');
    for(var i=0; i<buttons.length; i++)
    {
        buttons[i].removeAttribute('href');
        buttons[i].onmouseover=function()
        {
            hide_all();
            document.getElementById('js-'+this.id).className='show';

        }
    }
}
</script>

[Christian J]

Here's another one that's possibly better, since the buttons are generated by JS. Note that I've changed some ID values fromn the previous example:

CODE

<div id="container">
<div id="item-A01">JS-A01<img src="dog.jpg" width="100" height="50" alt=""></div>
<div id="item-A02">JS-A02<img src="dog.jpg" width="100" height="50" alt=""></div>
</div>

<script type="text/javascript">
if(document.getElementById && document.createElement)
{
    var container=document.getElementById('container');
    var div=container.getElementsByTagName('div');
    
    function hide()
    {
        // loop begins with 1, so  
        // button_container is not counted:
        for(var i=1; i<div.length; i++)
        {
            div[i].style.display='none';
        }
    }

    // create buttons
    var button_container=document.createElement('div');
    button_container.id='button_container';
    container.insertBefore(button_container, container.firstChild);
    
    // loop begins with 1, so  
    // button_container is not counted:
    for(var i=1; i<div.length; i++)
    {
        var span=document.createElement('span');
        var span_text=document.createTextNode(div[i].firstChild.nodeValue);
        span.appendChild(span_text);
        span.id=div[i].id.replace('item-', '');
        button_container.appendChild(span);        
        span.onmouseover=function()
        {
            hide(); // hides previously opened items
            document.getElementById('item-'+this.id).style.display='block';
        }
    }
    hide();
}
</script>

The JS-generated HTML will look something like this (depending on browser):

CODE

<DIV id=container>
    <DIV id=button_container>
        <SPAN id=A01>JS-A01</SPAN>
        <SPAN id=A02>JS-A02</SPAN>
    </DIV>
    <DIV id=item-A01 style="DISPLAY: none">
        JS-A01<IMG height=50 alt="" src="dog.jpg" width=100>
    </DIV>
    <DIV id=item-A02 style="DISPLAY: block">
        JS-A02<IMG height=50 alt="" src="dog.jpg" width=100>
    </DIV>
</DIV>