does control.modal disable document.getElementById?

i have two buttons inside my modal, which are to switch between to different coloured images.

<a href="#" onclick="document.getElementById('primary').style.display = 'block';
document.getElementById('secondary').style.display = 'none';">Colour 1</a>

<a href="#" onclick="document.getElementById('primary').style.display = 'none';
document.getElementById('secondary').style.display = 'block';">Colour 2</a>

<div id="primary" style="display: block;">
        image;
    </div>
    <div id="secondary" style="display: none;">
        image2
    </div>

However when i click on either one, nothing happens. Is this an issue due to using the modal javascript or prototype javascript or scriptaculous javascript.

I can't find any where people having an issue like this, maybe i am the only one.

Please help

Posted September 13th, 2007 at 12:01am by arrow79

If you're using Prototype, it would be best to use its utility methods for DOM navigation, and style changing, rather than the native Javascript approach. It may make more sense to wrap the functionality in a function, for neatness.

Try this out:

function showPrimary() {
  $('primary').show();
  $('secondary').hide();
  return false;
}
function showSecondary() {
  $('primary').hide();
  $('secondary').show();
  return false;
}

Leave your markup for the divs as you have it there, but change your anchor elements as follows:

< a href="#" onclick="showPrimary();">Colour 1< /a>
< a href="#" onclick="showSecondary();">Colour 2< /a>

See if that works for you. Note that in order for show() and hide() to work, you must use inline CSS to set the initial display state of each element; setting the display property using an external stylesheet will prevent show() and hide() from being able to flip the property value.

Posted September 13th, 2007 at 4:20am by bbodien

i tried that, sort of works. When i disable css the links work ok, however when i pop up the modal window, it does not. Surely nothing is blocking it. Thoughts please.

Posted September 13th, 2007 at 5:32am by arrow79

Hm, that sounds strange.

Have you got the page online so I can see?

Ben

Posted September 13th, 2007 at 8:25am by bbodien

Now before i give a link to the site, the function to gave me above, can that go anywhere on the page?

Posted September 13th, 2007 at 4:57pm by arrow79

Put it in script tags in your page < head>, either paste the functions between the script tags, or link in an external .js file using the src attribute of the script tag.

Posted September 14th, 2007 at 4:07am by bbodien

thanks for all your help.

i have got it working now, i had the two id primary and secondary coming up twice.

I think it had something to do with passing most of the control.modal properties through the link as onclick.

thanks again

Posted September 14th, 2007 at 8:05am by arrow79

Good work, glad you got it working :)

Ben

Posted September 14th, 2007 at 9:55am by bbodien