Advanced Search

Page 1 of 3 123 LastLast
Results 1 to 10 of 30

Thread: Need Expando with a Z-index

  1. #1
    Join Date
    Jul 2007
    Location
    Spokane
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need Expando with a Z-index

    Hi

    I have the Expando script available on dynamicdrive working with a row of small images across the top of a page, but I would like it to float above the text on the page on mouseover so it won't push the text down. I tried adding z-index:-1; to the CSS but that didn't work.

    If this is supposed to go in the js can someone tell me how to add it as I don't write JS?

    Here is the page for Expando:
    http://www.dynamicdrive.com/dynamici...pandoimage.htm

    Lorel

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    For z-index to work, the element has to be positioned. Try adding position:relative; to the elements you are giving z-indexes. If you want more help:
    Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out and help you.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jul 2007
    Location
    Spokane
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried the position:relative; with z-index and now the mouseover doesn't work at all. If I take out the position relative it works again but still pushing text down.

    -----HTML--------

    <img class="expando" src="images/Example.gif" width="100" height="137" border="0" alt="">

    ------CSS---------

    .expando {border: none;
    position:relative;
    z-index:-1;
    vertical-align: top; }


    thanks for trying to help.

    Lorel

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Ahh, now I see what you want to do. Try giving the image position: absolute;. You will then need to position the image with left/right and top/bottom margins. I'm not sure if this will affect the script though, but try it.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Jul 2007
    Location
    Spokane
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I tried using position:absolute, etc. but it didn't work. I tried setting up a separate class for each image as I have 5 images centered at the top of the page but that didn't work either. Noting I tried lifts the expando images above the text on the page.

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I tried it on the demo site with absolute positioning and it worked. Could you please post a link to your site or attach the code you're using so we can take a look?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  7. #7
    Join Date
    Jul 2007
    Location
    Spokane
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Here is the URL. This is a rough draft temporary site.

    http://www.loriswebs.com/-RC/

  8. #8
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    I see what the problem is now. Since you are using a negative z-index, the images are placed behind the other elements (when you absolutely position them) and therefore your mouse never hovers over them so the zoom-effect doesn't work. I suggest that you skip the z-index and leave the images on the top. Also, remember to give them different values from the left or right or else they'll just pile up on top of each other.

    Good luck!
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,675
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    Demo:

    Link Removed

    Use your browser's 'view source' to get the code.

    Notes: The (slightly modified) script may be made external again, as long as the script credit remains on the page. The inline styles may be placed in an external stylesheet, as can the on page stylesheet's styles, as long as their order in relation to the main aarc.css styles remains the same. The:

    Code:
    <base href="http://www.loriswebs.com/-RC/">
    tag is only required for my demo so that I did not have to copy all of your images and other external resources. It may be removed.

    Any questions, feel free to ask.
    Last edited by jscheuer1; 03-29-2009 at 10:27 AM. Reason: remove link at Lorel's request
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jul 2007
    Location
    Spokane
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John,

    Thanks for trying to help. I can see it working on your site as it should be.

    I copied off the code (put css data in the css file and JS in the JS file and edited the index file and that didn't work so I copied off the whole page on your site and put it on mine but it's not working that way either.

    Can you check to see what might be wrong?

    I know it's not centered. I'll deal with that later.

    BTW, what was the purpose of the div>&nbsp;</div> at top of page?

Tags for this Thread

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
  •