tags:

views:

155

answers:

2
Q: 

Access <body> tag properties from form found in mediaboxAdvanced lightbox.

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.

alt text

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

+1  A: 

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 :)

Dimitar Christoff  2010-04-27 22:02:14
I am giving you a +1 because your answer has helped me with my decision, and has given me some hints as to what was my real problem.
Christopher Richa  2010-04-29 18:25:45
And the accepted answer because I didn't read this correctly.
Christopher Richa  2010-04-29 19:27:09
heh no worries, you got me to 1337 rep which is a nice little landmark. i had written this under the assumption that you had already studied the code somewhat as its rather simplistic... so perhaps i did not summarise it well enough but got to the actual lines of code to look at :)
Dimitar Christoff  2010-04-29 22:25:32
A: 

After extensive research and testing, I have figured out, thanks to Andrew Moore, that mediaboxAdvanced simply duplicates, if not clones the hidden content to then display it, thus rendering my class basically useless. In other words, it treats it as an external page, completely apart from the original html.

Or so it seems.

This has basically prompted me to create my own lightbox feature, which simply allowed my theme changer code to work.

Thank you all for your help, simply appreciated.

I will leave this question open, in case someone comes up with a better answer.

-Christopher

Christopher Richa  2010-04-29 17:55:01
as i said, and i quote: `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` - which means it COPIES the innerhtml (alongside of ids, classes and so forth but _without_ events).
Dimitar Christoff  2010-04-29 19:15:33
Wow XD Just for that, and for my mistake, I will give you the accepted answer. I apologize, and thanks again.
Christopher Richa  2010-04-29 19:25:22

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?