Solved

Format JavaScript so window does not go outside page margins

Posted on 2006-06-10
10
1 solution
557 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Join The Community
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Learn More
 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Access It Instantly
Question has a verified solution.

If you are experiencing a similar issue, please ask a related question
Comparison of JS Frameworks: Angular.js vs React.js vs Ember.js
Article by: Serhiy
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
AJAX form submission with customized server field validation
Article by: Julian
This article discusses how to implement server side field validation and display customized error messages to the client.
Introduction to jQuery (Part 1)
Video by: Jason
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)
Introduction to jQuery (Part 2)
Video by: Jason
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…
Advertise Here

691 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

Advertise Here