Pop-overs are a non-intrusive way of presenting information to a user quickly and effectively. In part 1 of the pop-overs tutorial we showed you the basics of how to make a pop-over. The pop-overs position wasn’t very good though, it would be much more effective to position the pop-over in the center of the screen area where the user is viewing regardless of whether the user has scrolled down on the page.

To do this we’ll be using javascript to detect the size of the browser window, the scroll position and the size of the pop-over.

VIEW EXAMPLE

Step 1: Getting screen attributes with Javascript.

In our javascript file we’re going to add a new function to the bottom of the file.

// LOAD SCREEN ATTRIBUTES
var myWidth = 0, myHeight = 0, myScroll = 0; myScrollWidth = 0; myScrollHeight = 0;

function loadScreen() {
	if (document.all) {
		// IE
		myWidth  = (document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.clientWidth;
		myHeight = (document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight;
		myScroll = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
	} else {
		// NON-IE
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
		myScroll = window.pageYOffset;
	}

	if (window.innerHeight && window.scrollMaxY) { 
		// NON-IE
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight) {
		// IE
		myScrollWidth = document.body.scrollWidth;
		myScrollHeight = document.body.scrollHeight;
	 } else {
		// IE MAC
		myScrollWidth = document.body.offsetWidth;
		myScrollHeight = document.body.offsetHeight;
	}
}

The above script will go through various ways of getting the browsers viewing area details. As usual Internet Explorer has it’s own “special” way of getting the attributes so it will run through and work out what calls it needs to make to get the information and fill the variables so we can use them to position the pop-overs.

Step 2: Positioning the pop-over.

In our javascript file we’re going to replace our previous showPopOver function with the following updated function.

// SHOW POP-OVER
function showPopOver(divID) {
	// LOAD THE VIEW SIZE + SCROLL POSITION
	loadScreen();

	// SHOW THE DIV
	document.getElementById(divID).style.display = "block";

	// SET THE DIV POSITION
	document.getElementById(divID).style.left = ((myWidth / 2)-(document.getElementById(divID).offsetWidth / 2))+"px";
	document.getElementById(divID).style.top = ((myHeight / 2)-(document.getElementById(divID).offsetHeight / 2)+myScroll)+"px";
}

The modified function still uses the same display method to show the pop-over however we’ve modified the positioning of the pop-overs. We first call the loadScreen() function we put in to get the current area being viewed, then we show the pop-overs div. Notice we’re not positioning the pop-over until we have made the div visible. The reason for this is we need to get the height and width of the pop-over and in most browsers if you have the display equal to none when doing so it will return 0 for the width and height, which will not position the pop-over where we want it. So now we’ll use my masterful math equation to get the width and height of the viewing area and the width and height of the pop-over we are showing, divide each by two and subtract half the size of the pop-over to half the size of the browser thus positioning the pop-over in the center. We also need to add the amount scrolled to the height so the height is relative to the scroll position of the site. Yeah I know, it’s hard to explain, all you need to know is it works, I’ve done the maths for you already.

After that you’re all done. It will automatically get the size of the pop-over for you and the page so it doesn’t matter what size you want to make your pop-overs. And as you will see it is fully cross-browser compatible!

DOWNLOAD EXAMPLE

Checkout Part 3 to find out how to add a transparent background to your pop-overs.