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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts

    Keep buttons centered in browser window

    Right now my image in the lightbox stays in the middle of the screen, but my previou/next buttons don't. So if the user happens to have scrolled down before clicking a thumbnail, they'll see the enlarged image, but not the buttons unless they scroll back up. How do I make my buttons just stay in the middle of the window?

    Here's the page info. I have it in a password-protected staging area:

    http://www.vicesbyproxy.com/staging/cb/studio.html
    username: helper
    password: bacon

    You'll have to wait 3 seconds before the thumbnail array fades up.
    Last edited by marilynn.fowler; 04-21-2011 at 12:16 AM. Reason: Resolved!
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    maybe using a position: fixed style on the buttons' container will fix it.

  • #3
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    I tried that earlier - both in the CSS and as part of the jQuery code - but for some reason position:fixed makes the btnBox container disappear altogether. I don't understand why.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by marilynn.fowler View Post
    I tried that earlier - both in the CSS and as part of the jQuery code - but for some reason position:fixed makes the btnBox container disappear altogether. I don't understand why.
    the width of the div#thumbNav is same as the width of div#maincontent. I would put div#maincontent inside #thumbNav between a tags

    Code:
    <div id="thumbNav">
       <a id="prevButt" .... </a>
       <div id="maincontent">
       ....
       </div>
       <a id="nextButt" .... </a>
    </div>
    also i would remove position: absloute from #thimbNav, both a tags need position: absolute one with left: 0 other with right: 0 as you did.
    the main problem with scrolling is that you need to track the the viewport not the document.

    best regards

  • #5
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    Actually, oesxy, it's the previous and next button of the dynamically added lightbox, but thanks to you I realize I have 2 sets of buttons with the exact same IDs, as well as just way too many things called prevBtn and nextBtn. I'm going to rename stuff again and see if that helps.
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx

  • #6
    Regular Coder
    Join Date
    Aug 2002
    Location
    San Francisco
    Posts
    455
    Thanks
    19
    Thanked 15 Times in 15 Posts
    OK, renaming things helped me catch an overlooked reference in my lightbox script to an explicitly named CSS style. And applying position:fixed to the buttons themselves instead of the containing div got the results I wanted. Hurrah!
    Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. Groucho Marx


  •  

    Posting Permissions

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