SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: z-index problem

  1. #1
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    z-index problem

    I have a div with an id of 'cover' in which is a nested div with an id of 'stars1'. The 'cover' div has a black background and an animation of fading. The 'stars1' div has an animation of moving stars. Both animations work on their own but the stars1 animation doesn't work until the cover div animation is finished. I was thinking this was a z-index problem as the cover div has a z-index of 180. Can anyone advise if there is any obvious problem which might be causing the stars animation not to work.

  2. #2
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Hlforr View Post
    Can anyone advise if there is any obvious problem which might be causing the stars animation not to work.
    The obvious problem is your code is telling the stars animation to not start until the cover animation is complete. So all you need to do is tell your stars animation in your code to start at some point before the cover animation finishes. At what point the stars animation starts is up to you to choose.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. I need the stars animation to start immediately and the fading out animation to start a few seconds later. However the stars animation doesn't work until the opacity of the div doing the fading animation has reduced. That was why I thought it might be a z-index problem.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    This sounds more like a script problem than a css problem. It won't have anything to do with z-index because a parent's background can't sit on top of its childrens background. If you are fading the parent in and out then the nested children will automatically be faded in and out also.

    You could possibly move the nested stars div out of that parent and then absolutely place it back into position and the fading div will not affect the absolutely placed element.

    However as MaxHeight said above this sounds more like a script timing problem. Are you using jquery for this? Do you have a link to the page.

    If you can provide more information I will move the thread to the appropriate place.

  5. #5
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replies.
    I have tried taking the nested div out but with no luck. So now I have added the starry effect to the fading div itself and I still get the same result - the starry effect only appears once the div has started fading a bit.
    I have the page uploaded here
    Apologies for the messy code - you can tell I have been working on this for a while And yes, I know I have far too many JQuery scripts going on here - never again.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Ok,

    I think this will get the stars working for you:

    Code:
    .jstar_span{z-index:9999}
    Those scripts are causing some errors in the Firefox error console so you do need to sort them out a bit.

  7. #7
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    278
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow! Thanks so much - it works! And yes, I need to start looking at the scripts, they are a bit of a mess.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    What you've done here is basically create a scripted 'splash page' -- an annoying feature more prone to driving vistiors away from the site than draw them in. It's a goofy silly little animooted bit of nonsense, so I'd just axe the entire concept as a waste of bandwidth, time and effort. Same goes for that annoying CPU chewing memory hogging disaster of mouse-trails nonsense.

    The two combined bring me back to the old question "What is this, 1997?" -- I mean, what's next? Auto-playing music?

    Though to be fair, I say that about any page filled with jquery bloat and other "gee ain't it neat" nonsense that just gets in the way of the page actually being something I'd want to visit.

  9. #9
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    What you've done here is basically create a scripted 'splash page' -- an annoying feature more prone to driving vistiors away from the site than draw them in.
    Not necessarily

    You would have to do some sort of analytics to see if you actually are losing visitors or not. In some cases you might actually be gaining visitors.
    In any case, if that is what a client asks for I would explain the potential pros and cons and if the client still insists and is a client I want to hang on to, then I would do it because if I don't then the client would most probably go to some else who will.


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
  •