Image Pop-up Positioning

[Zygote76]

Hi guys,

I have been recently asked to update a site. I am still fairly new to CSS but am getting a good handle on it. The site uses a Java script to pop up images when certain links are rolled over. This works great and I have added text and images and it all works properly.

The problem I have inherited is that the images all pop up in the same positions. I can force them down by changing the CSS but if you scroll down the page and roll over the text the image tends to get cut off depending on how far down or up you may have scrolled in the browser. Is there a way to position the pop up to center itself vertically in the browser whether you are at the bottom of the page or the top?

Here is a link to the page so that you can see what I mean.
http://www.excelsiorlofts.com/amenit...Amenities.html

I can post the code if need be. The CSS controling the pop ups is inside the code if you view the source.

I'd really appreciate any help on this. I know that it needs to be validated still but I have been nervous about messing with it since most of the errors surround bits that deal with the Java and I know next to nothing about Java.

Thanks again for any help that you can give.
Zygote76

[greg76]

Hi Zygote76, welcome to the SitePoint forums

k, I don't think that the positioning of hidden layer is a CSS thing (at least I don't know how to make it work), this smells rather like DHTML.

off topic.
style1 suggests that this was dreamweaver's auto code, but you could make your css a little smaller by merging the classes: all details for all of the hidden ID are the same, so you can make your life easier by doing this:

#balcony, #parking, #elevator, #freight, #storage, #wine, #grill, #terrace, #bocce, #putting, #misting {
	position:absolute;
	width:252px;
	height:358px;
	z-index:6;
	left: 574px;
	top: 22px;
	visibility: hidden;
}

[CraniumDesigns]

not sure how to help, but i would change the cursor over the links from text to a pointer hand.

[Zygote76]

Thanks,

Yeah I'm still going through and cleaning up the code. There are some bits that look like they might have been used at one time but have no known reason to be there now.

I will definitely change the cursor for the rollovers (hadn't thought about that)

I know that if I change this value:

top: 22px;

to say

top: 200px I can get the pop ups to appear lower on the page. I'm just wondering if there is a way to center it in the browser no matter where you are on the page. I'll look into some dhtml.

Thanks again
Zygote76

[felgall]

The following four functions will get you the width and height of the browser window and the distance that the page has been scrolled from the top left corner. To centre something you would want

// Browser Window Size and Position
// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
// you may copy these functions but please keep the copyright notice as well
function pageWidth() {return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?       document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;} 
function pageHeight() {return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;} 
function posLeft() {return typeof window.pageXOffset != 'undefined' ? window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;} 
function posTop() {return typeof window.pageYOffset != 'undefined' ?  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;} function posRight() {return posLeft()+pageWidth();} function posBottom() {return posTop()+pageHeight();}

To centre something you would want

posLeft() + pageWidth()/2 - half width of object to be centred

and similarly for the height/top

[greg76]

Very groovy Stephen, thanks for sharing the code

Cheers,
Greg