Question

I have a basic jquery-ui dialog widget that is set to execute on a click handler:

jQuery(document).ready(function() {
    $('.menu_link').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        var horizontalPadding = 0;
        var verticalPadding = 15;
        $('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
            autoOpen: true,
            width: 600,
            height: 550,
            modal: true,
            resizable: true,
            autoResize: true,
            scrolling: false,
            close: function(ev, ui) { $(this).remove(); },
            overlay: {
                opacity: 0.9,
                background: "white"
            }


        }).width(580 - horizontalPadding).height(550 - verticalPadding);            
    });
});

what I’d like to do is set it so that it executes on page load instead. Also (lower priority) is there an easy way I can set it on a timer… eg., the dialog launches after the page has been loaded for 5 secs?

Answer 1

Remove the click handler and wrap the code into a function (here called showIFrame).
To start it after 5sec, use setTimeout.
Enter the url for the iframe in line 2.

function showIFrame() {
    var url = '>enter url here<';
    var horizontalPadding = 0;
    var verticalPadding = 15;
    $('<iframe id="externalSite" class="externalSite" src="' + url + '" />').dialog({
        autoOpen: true,
        width: 600,
        height: 550,
        modal: true,
        resizable: true,
        autoResize: true,
        scrolling: false,
        close: function(ev, ui) { $(this).remove(); },
        overlay: {
            opacity: 0.9,
            background: "white"
        }
    }).width(580 - horizontalPadding).height(550 - verticalPadding);
}
setTimeout(showIFrame, 5000);

Also see this example with or without code.