4

I want to open a div on page load. The code I've pasted gives me a javascript error in the ShadowBox library: 'container is undefined'

How can I achieve this?

$(document).ready(function () {

    Shadowbox.init({ skipSetup: true }); 
    Shadowbox.open({
        content: '#surveyDialog',
        player: 'inline',
        height: 450,
        width: 500
    });
});


<div id="surveyDialog" class="dialogWindowWrapper">
    <h2>Hello!</h2>
</div>
Kulvis
  • 655
  • 11
  • 33
  • I'm not familiar with Shadowbox, but at a guess - if your initialising something with "skipSetup:true", then maybe that's your problem? :) – Nathan Jun 01 '12 at 07:52
  • 1
    @Nathan No, `skipSetup` simply prevents ShadowBox from binding events to elements with `rel="shadowbox"` in the page. – VisioN Jun 01 '12 at 07:58
  • As @VisioN says that is just to prevent event-binding – Kulvis Jun 01 '12 at 08:06
  • I'm not familiar with shadowbox either but for example in fancybox, the content option I believe is to enter html content and not ids. – Federico Giust Jun 01 '12 at 08:18

1 Answers1

5

The error is a result of having Shadowbox open something when it wasn't ready.

For the head section, use this:

<script type="text/javascript">

    Shadowbox.init({
        skipSetup: true
    });

    window.onload = function() {

        Shadowbox.open({
            content: '#surveyDialog',
            player: 'inline',
            height: 450,
            width: 500
        });

    };

</script>

For the body section, use this:

<div id="surveyDialog" class="dialogWindowWrapper" style="display:none">
    <h2 style="color:#ffffff;">Hello!</h2>
</div>

For ready to use Shadowbox examples, visit the source page on github here.

EDIT: If you wanted to access the Shadowbox.open after the page has loaded, then check out the modified script shown here:

<script type="text/javascript">

    Shadowbox.init({
        skipSetup: true
    });


    function survery01(){
        Shadowbox.open({
            content: '#surveyDialog',
            player: 'inline',
            height: 450,
            width: 500
        });
    }

    window.onload = function() {

        survery01();

    };

</script>

Now that Shadowbox.open is in a named function, you can call it when required (e.g., use onclick attribute).

arttronics
  • 9,957
  • 2
  • 26
  • 62