Solved

Format JavaScript so window does not go outside page margins

Posted on 2006-06-10
10
554 Views
Last Modified: 2008-01-09
I am currently using the code below to bring up a pop-up window (with Iframe) within the current page when a link is pushed. However the way my page is formatted one of the links is at on the right side of the page. When the link is clicked the popup window comes up outside the current window.

Is there a way to add additional code so that if the popup window is going to go outside the boundaries of the current window it is automatically aligned to the end of the page?


<body>
<script TYPE="text/javascript"><!--
function move_box(an, box)
{
    var cleft = -200;
    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;


    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}


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;
    }


    boxdiv = document.createElement('div');


    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 = '2px';
    boxdiv.style.background = '#C0C0C0';
    document.body.appendChild(boxdiv);

    var offset = 0;

    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.style.fontFamily = 'Verdana';
    close_href.style.fontSize = '8';
    close_href.style.fontWeight = 'bold';
    close_href.appendChild(document.createTextNode('Close [X]'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
   
   
    var contents = document.createElement('iframe');
    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;


    return false;
}
//--></script>
</body>

<a href="page.html" onclick="return show_hide_box(this, 525, 350, '0px solid')" style="text-decoration: none">This is the link</a>
0
Comment
Question by:jfs9900
  • 4
  • 4
  • 2
10 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 16882282
Add one line.
Like this:

function move_box(an, box)
{
    var cleft = -200;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }
    if(cleft<2)cleft=2;  // this is the new line
    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;


    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}


0
 

Author Comment

by:jfs9900
ID: 16882292
Adding if(cleft<2)cleft=2; did not make box aline to the edge of page.......
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16882305
if(cleft<0)cleft=0;
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:jfs9900
ID: 16882414
still nothing....
0
 
LVL 2

Accepted Solution

by:
xlt77 earned 500 total points
ID: 16882804
Try this, I use a 0 height table to get the window's width.

<body>
<script TYPE="text/javascript">
<!--
function move_box(an, box, width, height)
{
    var cleft = -200;
    var ctop = 0;
    var obj = an;
      var maxwidth=xtable.offsetWidth;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

      if (cleft+width >= maxwidth) cleft=maxwidth-width;
    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;


    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}


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,width,height);
            boxdiv.style.display='block';
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }


    boxdiv = document.createElement('div');


    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 = '2px';
    boxdiv.style.background = '#C0C0C0';
    document.body.appendChild(boxdiv);

    var offset = 0;

    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.style.fontFamily = 'Verdana';
    close_href.style.fontSize = '8';
    close_href.style.fontWeight = 'bold';
    close_href.appendChild(document.createTextNode('Close [X]'));
    boxdiv.appendChild(close_href);
    offset = close_href.offsetHeight;
   
   
    var contents = document.createElement('iframe');
    contents.frameBorder = '0';
    contents.style.width = width + 'px';
    contents.style.height = (height - offset) + 'px';

    boxdiv.appendChild(contents);

    move_box(an, boxdiv, width, height);

    if (contents.contentWindow)
        contents.contentWindow.document.location.replace(
            href);
    else
        contents.src = href;


    return false;
}
//--></script>
</body>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="page.html" onclick="return show_hide_box(this, 525, 350, '0px solid')" style="text-decoration: none">This is the link</a>
<table width=100% id=xtable height=0><tr><td></td></tr></table>
0
 

Author Comment

by:jfs9900
ID: 16882957
hmmm that casued the script not to work at all....
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16883910
Here my version:

function move_box(an, box){
    box.style.left = 0;
    box.style.top = 0;
}


0
 

Author Comment

by:jfs9900
ID: 16884456
Zvonko, that works somewhat. It moves the popup box to the upper left hand corner.

However I want the popup to show where the current link is located. If the link is at the right edge of the page I want the popup to end at the right margin and go left, so that it does not expand the page size at all.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 16884760
It seams to me you have misunderstood the purpose of EE. The purpose is NOT that I do your work. The purpose is that you think about a question about JavaScript (and what work you search someone can do for you) and I or some other Experts helps you to understand how it works. So what do you not do understand?
0
 
LVL 2

Expert Comment

by:xlt77
ID: 16885575
jfs9900
   My code works on my IE well, but I don't know what's the error you have got.
   I explaned my idea just use a 0 height table to get the window's width, then you can adjust your pop-up window left side in code.
     
   
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question