Solved

Format JavaScript so window does not go outside page margins

Posted on 2006-06-10
10
553 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
 

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

911 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now