Link to home
Create AccountLog in
Avatar of cdemott33
cdemott33Flag for United States of America

asked on

Help needed with JavaScript & CSS pop-over

Hi - Not much of a Javascipt guy so I could really use some help.  

I have a script that executes when a user hits a button.  It's fades the background and displays a box that give a user a message.

The problem I'm having is this.  I have a page with a form on it.  The form is long so you have to scoll down to hit the button.  When the user clicks the button you don't see the fade or the pop-up becuase it's at the top of the page.  If you scoll up you can see it, however I need the fade and popup to appear right where the scroll position is.

Can anyone help?  I attached my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Test</title>
		<style>
		
			.white_content {
				display: none;
				position: absolute;
				top: 25%;
				left: 25%;
				width: 50%;
				height: 50%;
				padding: 16px;
				border: 16px solid orange;
				background-color: white;
				z-index:1002;
				overflow: auto;
			}
			
			
			.black_overlay{
				display: none;
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				background-color: black;
				z-index:1001;
				-moz-opacity: 0.8;
				opacity:.50;
				filter: alpha(opacity=80);
			}
	</style>
	<script type="text/javascript">
	function showProcessing(fadeid,boxid){
   		document.getElementById(boxid).style.display='block';
   		document.getElementById(fadeid).style.display='block';
	}
	</script>
	</head>
	<body>
     	<input type="submit" name="button" value="Place Order" onClick="showProcessing('fade','processing');"/> 

	<DIV id="processing" class="white_content">
 		 <DIV class="processingComments">
			<p>Your order is being processed. Please wait.<a href="/"></a></p>
		</DIV>
	</DIV>
	<DIV id="fade" class="black_overlay"></DIV>
	</body>
</html>

Open in new window

Avatar of Richard Davis
Richard Davis
Flag of United States of America image

Perhaps something like this might work for you.

~A~
var ScrollTop = document.body.scrollTop;

if (ScrollTop == 0)
{
  if (window.pageYOffset)
    ScrollTop = window.pageYOffset;
  else
    ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
}

Open in new window

You can do it by finding the scroll of the page and the window height. Replace your current JS with the following. You may want to include what adrian has written to make it fully cross browser supportive. This has only been tested working in IE8.
<script type="text/javascript">
    function showProcessing(fadeid,boxid){
        var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset);
        var myHeight = 0;
        // adapted from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
        if( typeof( window.innerHeight ) == 'number' ) {
            //Non-IE
            myHeight = window.innerHeight;
        } else if( document.documentElement.clientHeight ) ) {
            //IE 6+ in 'standards compliant mode'
            myHeight = document.documentElement.clientHeight;
        } else if( document.body.clientHeight ) ) {
            //IE 4 compatible
            myHeight = document.body.clientHeight;
        }
        document.getElementById(fadeid).style.top = vscroll;
        document.getElementById(boxid).style.top = vscroll + (myHeight / 4);
        document.getElementById(boxid).style.display='block';
        document.getElementById(fadeid).style.display='block';
    }
</script>

Open in new window

Sorry, the above had 2 extra parentheses so it won't work:
<script type="text/javascript"> 
    function showProcessing(fadeid,boxid){ 
        var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset); 
        var myHeight = 0; 
        // adapted from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow 
        if( typeof( window.innerHeight ) == 'number' ) { 
            //Non-IE 
            myHeight = window.innerHeight; 
        } else if( document.documentElement.clientHeight ) ) { 
            //IE 6+ in 'standards compliant mode' 
            myHeight = document.documentElement.clientHeight; 
        } else if( document.body.clientHeight ) ) { 
            //IE 4 compatible 
            myHeight = document.body.clientHeight; 
        } 
        document.getElementById(fadeid).style.top = vscroll; 
        document.getElementById(boxid).style.top = vscroll + (myHeight / 4); 
        document.getElementById(boxid).style.display='block'; 
        document.getElementById(fadeid).style.display='block'; 
    } 
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of DT20Three
DT20Three
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of cdemott33

ASKER

This worked for me.  Thank you!