ansaurus

Question

CSS Image Viewer - Align centre of the screen

Answer 1

+1 A:

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

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

Allan Kimmer Jensen 2010-02-11 12:18:36

nope that doesn't work at all...there should be css properties in the .ienlarger a:hover span _______tried mostly all the properties but no luck

Mo 2010-02-11 12:32:27

This works when i try it:.ienlarger a span {background-color:#000000;color:#FFCC00;display:none;font-family:Arial,Helvetica,sans-serif;font-size:13px;font-weight:bold;left:50%;margin-left:-70px;padding:10px 10px 13px;position:absolute;text-decoration:none;width:150px;}But this is not vertical... i guess it would be clever to use some javascript

Allan Kimmer Jensen 2010-02-11 12:37:35

Answer 2

+2 A:

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.

tunnuz 2010-02-11 12:31:14

thanks! but the code has a div class... could you kindly give me an example from the code pleasE? much appreciated

Mo 2010-02-11 12:37:20

Just put the ID on the span like this: <span id="popup"></span>

Allan Kimmer Jensen 2010-02-11 12:55:14

really appreciate your support...but i may be being dumb - i tried all the above but no luck..I got __________________________________ function openPopup(element) { // Get window's height and width using the code above if (document.body.clientHeight) { window_height = document.body.clientHeight; window_width = document.body.clientWidth; } else { window_height = window.innerHeight; window_height = window.innerWidth; } element.style.top = window_height - 200 / 2; element.style.left = window_width - 200 / 2; }

Mo 2010-02-11 13:10:10

this is for the div________________________ <div class="ienlarger" onmouseover='javascript:openPopup(this);'><a href="#nogo"><img src="images/1646.jpg" alt="thumb" class="resize_thumb" /><span> <img src="images/234026.jpg" alt="large" /></span></a></div> _____________ and for the CSS i have .ienlarger a:hover span { display:block; position: absolute;_____________________________________________________ We're nearly there please could you test it with the code i am using with - http://www.dynamicdrive.com/style/csslibrary/item/css_smart_image_enlarger/ THANK YOU!!!

Mo 2010-02-11 13:12:12

Try to strip off the a:hover part.

tunnuz 2010-02-11 16:58:32

ansaurus

tags:

views:

answers:

CSS Image Viewer - Align centre of the screen

related questions