Question

I am building my portfolio website simply using HTML, Flash, and the Mootools Javascript framework. I have decided to implement a theme changing feature using Javascript and cookies. When the user clicks on the “Change Theme” link, a mediaboxAdvanced lightbox appears, containing a real-time form which allows you to change the theme on the portfolio.

Here’s the code for the form:

<div id="mb_inline" style="display: none; margin:15px;">
    <h3>Change Your Theme</h3>
    <form>
        <fieldset>
            <select id="background_color" name="background_color">
                <option  value="#dcf589">Original</option>
                <option value="#000FFF">Blue</option>
                <option value="#00FF00">Green</option>
            </select>
        </fieldset>
    </form>
</div>

I know, there is no submit button, but as soon as something is changed in that form, the following Mootools code happens:

var themeChanger = new Class(
{
    pageBody : null,

    themeOptions : null,

    initialize: function()
{
    this.pageBody = $(document.body);
    this.themeOptions = $('background_color');
    this.themeOptions.addEvent('change', this.change_theme.bindWithEvent(this));
},

change_theme: function(event)
{
    alert("Hello");
}
});

window.addEvent('domready', function() {
    var themeChanger_class = new themeChanger();
});

Now this is only a test function, which should be triggered when the dropdown menu changes. However, it seems that none of it works when the form is in the lightbox! Now if I decide to run the form outside of the lightbox, then it works great!

It seems it can’t even access the “background_color” element.

Am I missing something?

If you need more examples, I will fill in on demand.

Thank you all in advance.

-Christopher

Update (4/27/2010 – 12:54PM):

---

I looked into this a little more and have two theories about all of this.

1- In the mediaboxAdv.js file, there’s the following declaration:

$(document.body).adopt(

Could this keep me from accessing the body’s properties, such as “background-color”?

2- Could the lightbox display that form as a page on its own, hence why I cannot access the parent page’s body tag?

3- Do I need to declare my javascript file the following way?

<div id="mb_inline" style="display: none; margin:15px;">
<!-- script declaration -->
<script type="text/Javascript" src="scripts/themeChanger.js"></script>
<!-- the form -->
<h3>Change Your Theme</h3>
<form>
    <fieldset>
        <select id="background_color" name="background_color">
            <option  value="#dcf589">Original</option>
            <option value="#000FFF">Blue</option>
            <option value="#00FF00">Green</option>
        </select>
    </fieldset>
</form>
</div>

Update (4/27/2010 – 1:17PM):

Here’s a screenshot of what I am trying to do, if it can help you guys.

Chances are I might post a link to the site so that you can see with your own eyes what I want to do.

Answer 1

This is a modal window. running code on DOMREADY here is pretty pointless. There is no DOMREADY when you put some HTML into a div. I assume there’s an onComplete event being fired by the lightbox/mediabox plugin that you can hook into and use it to instantiate your themeChanger

Not seen the specifics of the plugin that you use but in pseudo code…

new mediaBox({
    width: nnn,
    height: nnn,
    title: "Change your theme",
    text: "your mark-up",
    onComplete: function() {
        new themeChanger(); // will set the listener which will work with the mark-up.
    }

});

if the content of the window is being loaded through Request.HTML or whatever other method, you should also get an onComplete event you can plug into.

I hope this makes sense, good luck

edit i stand corrected – this is not even a class but a function-based plugin (http://iaian7.com/files/webcode/mediaboxAdv/mediaboxAdv-1.2.0.js) that uses element prototypes… it does not look as if it has support for events on content loaded. furthermore, it supports just 1 method that is suitable of supplying content in your case, inline which relies on the modal content already being hidden within the DOM. perhaps this is the source of your problem – if you look at http://iaian7.com/webcode/mediaboxAdvanced#inline – the hidden content is copied through the innerHTML, it uses just preload = $(URLsplit[1]).get('html'); and then in the startEffect function sets the contents of the modal window to the value of preload. this technique WON’T clone the events you may have done but just the HTML-events in mootools are in element storage and as such, tied to element UID.

Perhaps you can modify the script to add a new option, like onComplete: $empty() that you can call from within the startEffect function once it has finished animating and has added in the content.

good luck again. the best advice i can give you here – do not use this plugin for dialogue windows, its overkill and its not modular enough – such a shame because mootools could have been put to a great use here, it’s not just a tool for DOM manipulation 🙂