Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

Results 1 to 1 of 1

Thread: Javascript Popup situation

  1. #1

    Javascript Popup situation

    Ive been working with this code to get a info-pic to pop up on my site.
    Thing is the default settings of the code is that the popup posts itself directly to the bottom of the linked text/image.
    What i would like to know is if any of you can pinpoint what id need to change to get the popup to pop to the right and be centered on the page.

    Code:
    <SCRIPT TYPE="text/javascript"><!--
    /* Script by: www.jtricks.com
     * Version: 20060314
     * Latest version:
     * www.jtricks.com/javascript/window/box.html
     */
    // Moves the box object to be directly beneath an object.
    function move_box(an, box)
    {
        var cleft = 0;
        var ctop = 0;
        var obj = an;
     
        while (obj.offsetParent)
        {
            cleft += obj.offsetLeft;
            ctop += obj.offsetTop;
            obj = obj.offsetParent;
        }
     
        box.style.left = cleft + 'px';
     
        ctop += an.offsetHeight + 8;
     
        // Handle Internet Explorer body margins,
        // which affect normal document, but not
        // absolute-positioned stuff.
        if (document.body.currentStyle &&
            document.body.currentStyle['marginTop'])
        {
            ctop += parseInt(
                document.body.currentStyle['marginTop']);
        }
     
        box.style.top = ctop + 'px';
    }
     
    // Shows a box if it wasn't shown yet or is hidden
    // or hides it if it is curre
    function show_hide_box(an, width, height, borderStyle)
    {
        var href = an.href;
        var boxdiv = document.getElementById(href);
     
        if (boxdiv != null)
        {
            if (boxdiv.style.display=='none')
            {
                // Show existing box, move it
                // if document changed layout
                move_box(an, boxdiv);
                boxdiv.style.display='block';
            }
            else
                // Hide currently shown box.
                boxdiv.style.display='none';
            return false;
        }
     
        // Create box object through DOM
        boxdiv = document.createElement('div');
     
        // Assign id equalling to the document it will show
        boxdiv.setAttribute('id', href);
     
        boxdiv.style.display = 'block';
        boxdiv.style.position = 'absolute';
        boxdiv.style.width = width + 'px';
        boxdiv.style.height = height + 'px';
        boxdiv.style.border = borderStyle;
        boxdiv.style.textAlign = 'right';
        boxdiv.style.padding = '4px';
        boxdiv.style.background = '#FFFFFF';
        document.body.appendChild(boxdiv);
     
        var offset = 0;
     
        // Remove the following code if 'Close' hyperlink
        // is not needed.
        var close_href = document.createElement('a');
        close_href.href = 'javascript:void(0);';
        close_href.onclick = function()
            { show_hide_box(an, width, height, borderStyle); }
        close_href.appendChild(document.createTextNode('Close'));
        boxdiv.appendChild(close_href);
        offset = close_href.offsetHeight;
        // End of 'Close' hyperlink code.
     
        var contents = document.createElement('iframe');
        contents.scrolling = 'no';
        contents.frameBorder = '0';
        contents.style.width = width + 'px';
        contents.style.height = (height - offset) + 'px';
     
        boxdiv.appendChild(contents);
     
        move_box(an, boxdiv);
     
        if (contents.contentWindow)
            contents.contentWindow.document.location.replace(
                href);
        else
            contents.src = href;
     
        // The script has successfully shown the box,
        // prevent hyperlink navigation.
        return false;
    }
    //--></SCRIPT>
    If you can too, figuring the 'close' feature to be seletec on the image alone [with no added text] would be cool.

    to get an idea of my situation, heres the page: http://www.dolphinencounters.com/2index.htm - its the image with the guy wearing a hat... a cowboy hat.
    Last edited by Ajax-45; March 30th, 2006 at 04:23 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012