Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts

    how to slide an object under a div

    I am trying to make an object slide under a div at the top when you scroll down the page. Text and images go under the top div, but objects don't seem to.

    I have tried adding z-index:9999 z-index:1 to the object and the div respectively, but it doesn't work.

    A demo is here:

    http://aapress.com.au/PRD/demo.html

    Can anyone tell me if it's at least possible?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #2
    New Coder
    Join Date
    Apr 2012
    Posts
    44
    Thanks
    0
    Thanked 14 Times in 14 Posts
    Code:
    #col-right {
    width: 742px;
    float: right;
    background-color: 
    white;
    margin: 0px 0px 0px 0px;
    z-index: -1;
    position: relative;
    }

  • Users who have thanked Xherdas for this post:

    tpeck (05-24-2012)

  • #3
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    perfect - thank you
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #4
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    It works well with the object in the demo above, but on a page with a free gallery maker I am using, it stops the gallery from working:

    http://aapress.com.au/PRD/demo2.html

    Is there another simple fix? I notice there are z-index references in the gallery's javascript file: galleria.classic.min.js

    Maybe I can't have the slide under and the gallery at the same time.

    Would an inline frame be the answer?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Setting z-index of -1 will make the element unclickable, which is why your gallery no longer functions.

    Assign #section-head z-index of 2, and #col-right z-index of 1.
    Then #section-head will appear on top.

  • #6
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    I see.

    I have updated the demo to reflect your changes. It still fails so I suspect it is some conflict with the z-indexes in the galleria js.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You still have z-index for #col-right set to -1 on line 52 of style.css.
    All the z-indices within the galleria apply to elements within #col-right and won't affect the relative z-indices of #col-right and #section-head.

  • Users who have thanked SB65 for this post:

    tpeck (05-24-2012)

  • #8
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    You're perfectly right. My demo was not meant to include that css reference.

    Works well now. And I've learnt a lot.

    Thanks!
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #9
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    I have another similar problem. This time I require a flash object to slide under the menu. Nothing I do with z-indexes seem to get it sliding under the menu as does the <div class="right-content"> it sits on.

    Can anything be done about it?

    http://aapress.com.au/PRD/demo3.html
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    It's OK in FF13, although at the moment it shows behind #section-head as that element has neither a background colour nor a (valid) background image.

    Are you seeing something different?

  • #11
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    Thanks. I have made the images valid.

    Yes, FF does the right thing. It seems to be an IE and Chrome problem.

    Is there a workaround for these browsers?
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    OK, have a try adding the following within your object tag:

    Code:
    <param name="wmode" value="opaque">

  • #13
    Regular Coder tpeck's Avatar
    Join Date
    Oct 2002
    Location
    Sydney, Australia
    Posts
    882
    Thanks
    53
    Thanked 6 Times in 5 Posts
    That did the trick. Thanks very much.
    The difference between genius and stupidity is that genius has its limits. (Albert Einstein)


  •  

    Posting Permissions

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