How can I re-size and re-position a shadowbox/greybox window to display in a certain div element?

Question

Hi guys, I would like to know if it is possible to re-size and re-position a greybox or shadowbox window to display in a certain div element?

I am creating a template for a wordpress site, and I am using the default calendar, but when you click on a date inside of the calendar, the default action is to open it up in a new window.

Would it be possible to mod greybox or shadowbox in such a way that when you click on a date, the box opens up over the calendar displaying the contents in it, instead of a new page?

Or is there another way of achieving the desired result, maybe with jQuery or Javascript?

Any help would be greatly appreciated, thanx in advance!

Answer 1

jQuery UI has a widget called Dialog that can achieve your result. You could use it like this:

$(document).ready( function() {

    // This will initialize the dialog box and hide it by default.
    // You can find a list of most options here: http://docs.jquery.com/UI/Dialog
    $("#dialog").dialog({
        autoOpen: false,
        modal : true,
    });

    // This will select the links like you specified
    $('#wp-calendar a').click( function(e) {
        e.preventDefault() // Disable the link from going to a new page
        var url = $(this).attr("href"); // Pull the HRef for the link for making the AJAX request

        // This will make an AJAX request and put the result in the dialog.
        $("#dialog").empty().load(url, function() {

            // This is the callback for when the AJAX request finishes
            // All it does it open the dialog, which now has data in it
            $("#dialog").dialog("open");
        });
    });
});

Note: You'd need to install jQuery UI for this, and you'll probably want to read up on Dialog here. You'll need to take more steps if you'd want this to degrade gracefully, and depending on your markup. If you could post a snippet of a "day" on the calendar, I can try to tailor it to your needs.

---

Edit: Lets say that the file that return the rendered page for the event is "/ajax/event.php?id=123", you'd first want to prevent the link's default behavior (of navigating to a new page); then you'd want to use jQuery's load function to load an assembled URL's data into the dialog; once that request completes, you'd want to open the dialog. I've edited to code to do so, and it will degrade gracefully for user that don't have JavaScript enabled.