SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Pop-up Positioning

    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

  2. #2
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    #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;
    }

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure how to help, but i would change the cursor over the links from text to a pointer hand.
    Steve Davis

  4. #4
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,863
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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

    Code:
    // 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
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Addict greg76's Avatar
    Join Date
    Aug 2004
    Location
    Poland
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very groovy Stephen, thanks for sharing the code

    Cheers,
    Greg


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •