Topic: problem with Javascript making box appear

My goal is to have a box appear displaying the appropriate text that corresponds to an image. I guess a simple example would be to imagine a layout of images that say.. are a different color like a red box a blue one a yellow one etc... once that image is clicked. I want a box to appear in the foreground and display test that corresponds to that image. For example, if the user clicks the yellow box. I want the pop up box to say "yellow". If one clicks the red one I would like it to say "red". Furthermore I want to pull the text from a table (say, colors). Right now only the first image in the layout is triggering the popup box to appear and I can't figure out why...
Here is the Javascript:

function prepareColorDescription(){
    if(!document.getElementsByTagName) return false;
    if(!document.getElementById) return false;
    if(!document.getElementById("description")) return false;
    if(!document.getElementById("color_description_box")) return false;
    if(!document.getElementById("close_color_description_box")) return false;
   
    var colorLink = document.getElementById("description");
    var colorDescriptionBox = document.getElementById("color_description_box");
    var closeColorDescriptionBox = document.getElementById("close_color_description_box");
   
    //alert(colorLink);//for debugging   
    colorLink.onclick = function(){
           //alert(document.getElementsByTagName('html')[0].offsetWidth);
           colorDescriptionBox.style.left =
           (document.getElementsByTagName('html')[0].offsetWidth/2 - 173) + 'px';
           colorDescriptionBox.style.top = (getY(this)/2.5) + 'px';
           //alert(getX(this));
           return false;
    }   
    closeColorDescriptionBox.onclick = function(){
        colorDescriptionBox.style.left = '-9999px';
        return false;
    }
}

Here is the view:
<div id="color_description_box" style="height: 250px; width: 333px;">
    <span class="description_box_text">Text goes here.</span>
      <%= link_to("close", {}, {:id => 'close_color_description_box'}) %>   

</div> 

<div id="color_area">
    <table>
        <% row_count = 1 %>
        <% @colors.each do |color| %>
            <% if row_count % 10 == 0 %>
                <tr>
            <%- end %>
           
                <td>
                <%= link_to(image_tag(color.color_name),{}, :id => "description")
                    %>
                </td>
                <% row_count+=1 %>
            <% if row_count % 10 == 0 %>
                </tr>
            <%- end %>
           
        <%- end %>
    </table>
</div>


Tell me what i'm doin wrong....oh yeah I am a noob thanks!

Re: problem with Javascript making box appear

Your links all have the same ID. which means the DOM is going to get confused.

It's probably easier to add the onClick behaviour in your loop rather than adding it via code:

<%= link_to(image_tag(color.color_name),{}, :onclick => "showDescription()")

Also, in Prototype, you can use:
$('id')

instead of "document.getElementById("description");"

Makes code much more concise.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: problem with Javascript making box appear

Cool I understand what you mean on the first part but

Are you saying that

$('id')

is a direct replacement for
document.getElementById('id')

thanks in advance!

Re: problem with Javascript making box appear

I am still having a problem making the box display the appropriate info. Is there a big chunk that I am missing?

def show_description
    @color = Color.find(params[:id])
end