Access <body> tag properties from form found in mediaboxAdvanced lightbox.
- by Christopher Richa
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!
Am I missing something?
If you need more examples, I will fill in on demand.
Thank you all in advance.
-Christopher
