• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 560
  • Last Modified:

Format JavaScript so window does not go outside page margins

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
jfs9900
Asked:
jfs9900
  • 4
  • 4
  • 2
1 Solution
 
ZvonkoSystems architectCommented:
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
 
jfs9900Author Commented:
Adding if(cleft<2)cleft=2; did not make box aline to the edge of page.......
0
 
ZvonkoSystems architectCommented:
if(cleft<0)cleft=0;
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
jfs9900Author Commented:
still nothing....
0
 
xlt77Commented:
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
 
jfs9900Author Commented:
hmmm that casued the script not to work at all....
0
 
ZvonkoSystems architectCommented:
Here my version:

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


0
 
jfs9900Author Commented:
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
 
ZvonkoSystems architectCommented:
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
 
xlt77Commented:
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now