The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help on DOM scripting - Global Variables?, Changing CSS visibility of one object by clicking another
Charlie
post Sep 20 2006, 07:50 PM
Post #1





Group: Members
Posts: 1
Joined: 20-September 06
Member No.: 187



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 wacko.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 21 2006, 04:09 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 21 2006, 07:39 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 24th August 2019 - 01:43 PM