Tutorial :CSS Image Viewer - Align centre of the screen



Question:

I want to use the below image enlarger/viewer but i would like the popup of the enlarged image to appear on the center of the screen.

http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/

I tried many ways but was unsuccessful....

Any help on this would be much appreciated.


Solution:1

To solve these issues I usually query the DOM with JavaScript to find out the size of the window. I then use:

document.getElementById('popup').style.top = window_height - popup_height / 2;  document.getElementById('popup').style.left = window_width - popup_width / 2;  

The positioning of the popup must be set to 'absolute' in the CSS. To get height (same for width) I use:

if (document.body.clientHeight) {      window_height = document.body.clientHeight;  } else {      window_height = window.innerHeight;  }  

If your div doesn't have an id you can still pass the object reference to the JavaScript function like:

<div class='popup' onmouseover='javascript:openPopup(this);'> ... </div>  

And, in a nearby piece of code:

function openPopup(element) {        // Get window's height and width using the code above        element.style.top  = window_height - popup_height / 2;      element.style.left = window_width - popup_width / 2;    }  

That is, instead of querying the DOM to get the object by the ID, you directly pass the object to the JavaScript function.


Solution:2

You could do like this if you got a fixed with..

.popup { position: absolute; width: 140px; margin-left: -70px; top: 0px; left: 50%; }


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »