Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: DD Sticky bar

  1. #1
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default DD Sticky bar

    1) Script Title: Expandable Sticky Bar

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../stickybar.htm

    3) Describe problem: It's a really great script, but I'm having trouble with at the moment for a small project I'm doing for an NGO. The issue is that when I put a lot of content in the hidden part of the stickbar, lots of the supposedly hidden content pokes up when the site initially loads. On mouseover, the bar pulls up to reveal all of the content, and when you move the mouse away, the bar goes to a perfect setting, where only the top bar is visible.

    Is there a limit on the amount of content which can be hidden in the footer? If so, is there a way around it. I can't find anything after a search through the relevant HTML, CSS, and Java files. I'm not familiar with Java, so perhaps I'm missing something there.

    Any help greatly appreciated. EDIT: Apologies for the vague title - I can't seem to edit it!

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,791
    Thanks
    2
    Thanked 418 Times in 412 Posts

    Default

    try

    Code:
    .expstickybar{
    visibility:hidden;
    position:fixed;
    color: white;
    padding: 5px;
    right:0; /*horizontally center bar in window*/
    left:0; /*horizontally center bar in window*/
    visibility:hidden;
    background: #e43a3d;
    z-index: 10000;
    width:auto; /*set width of bar to width of entire window*/
    font-weight:bold;
    }
    
    .expstickybar a{
    color: white;
    }
    or post a link to your page
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. The Following User Says Thank You to vwphillips For This Useful Post:

    IrishPidge (05-14-2013)

  4. #3
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help! I tried that, but to no avail. The CSS already has visibility set to hidden, and it appears twice in the code you kindly posted. Here's a copy of the relevant page, which should make it easier to see the problem. Any help you can provide is much appreciated. As you can see, part of the footer content is visible when the page loads, but not after you mouseover.

    Page/directory: http://michaelpidgeon.com/indopp/

    CSS: http://michaelpidgeon.com/indopp/style.css

    JS: http://michaelpidgeon.com/indopp/expstickybar.js

    There's a separate issue, unrelated to the DD script about some browsers (other than Chrome) not resizing the images on the main page. So ignore the current ugly state of the site!

    Again, any help is hugely appreciated!

  5. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    10

    Default

    Untested (on iPhone) but I had a quick look at the JavaScript file and right at the top (about 3 lines in) is the value for the peekamount, which is set to 30.

    Now, right at the bottom of the file, there is another reference to the peekamount but that is set to 43.

    Try setting them to the same number to see if that helps. You might need to do a hard refresh (CTRL+F5 on Windows) to pull the revised script through.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  6. #5
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    Untested (on iPhone) but I had a quick look at the JavaScript file and right at the top (about 3 lines in) is the value for the peekamount, which is set to 30.

    Now, right at the bottom of the file, there is another reference to the peekamount but that is set to 43.

    Try setting them to the same number to see if that helps. You might need to do a hard refresh (CTRL+F5 on Windows) to pull the revised script through.
    Thanks for the answer! I've tried setting them both to 30, and 10, and now 45. I've updated the files in the links above to have consistent numbers. They only seemed to affect the position of the bar after mouseover, not on loading. Hmmmm.

  7. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    10

    Default

    OK I'm on a computer now and can check properly.

    I reckon it's due to you not having a valid doctype in your current markup. One of these right at the top of your page: http://www.javascriptkit.com/howto/doctype.shtml

    I copied and pasted in the doctype used on the script demo page for testing and you'll be pleased to hear that it suddenly worked perfectly

    Funnily enough, on iPhone 4S, the initially loaded difference in peekamount was negligible.

    Furthur notes: Your current page took a fair amount of time to load due to the image file sizes, so I'd recommend converting them to the png-8 format instead of png-24, and that will slash them to between a fifth and a quarter of their current file size (= pages that load upto 5 times faster! bonus!)

    The reduced colour palette of your cartoons make them ideal of converting to png-8, because, like gif, png-8 only support upto 256 colours, so there will be no, or at worst a teeny-weeny amount, of visible quality loss.

    Also, if you're using something like Photoshop for image editing, I find that setting a matted background colour through the save dialogue, will rid you of any 'speckling' when you're optimising images with transparencies. You'd set the matte colour to the same grey you have as your web page background, and that will stop any default white raggedy edges from appearing on-save. Here's a link for more info: http://help.adobe.com/en_US/photosho...e28b29a0a-7ff0
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  8. The Following User Says Thank You to Beverleyh For This Useful Post:

    IrishPidge (05-14-2013)

  9. #7
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much for your help! Hugely appreciated. I'll implement the image changes you suggest once we get the final images in. I've uploaded the updated files.

    Two quick things, though. While the bar is correctly sized on IE and FF, it still peeks out too much on Chrome, even with a HTML doctype. I've tried all the doctypes on the page you gave, but stuck with the one used on the DD demo page.

    Also, while not DD-related, I'm completely stumped as to why the two big images won't proportionately resize to the max % height I set. It works perfectly in Chrome, but not at all in FF or IE. I thought it was fairly basic, but I'm totally stumped at the moment!

    If you're ever in Belgium, you're owed a beer!

  10. #8
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    10

    Default

    I'm not sure about the peekamount glitch at the mo but if you add the following to your stylesheet, it should fix the image rescaling issue;
    Code:
    .banner, .cartoon { max-width:100%; }
    Last edited by Beverleyh; 05-14-2013 at 10:46 AM. Reason: formatting
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  11. The Following User Says Thank You to Beverleyh For This Useful Post:

    IrishPidge (05-14-2013)

  12. #9
    Join Date
    May 2013
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Beverleyh View Post
    I'm not sure about the peekamount glitch at the mo but if you add the following to your stylesheet, it should fix the image rescaling issue;
    Code:
    .banner, .cartoon { max-width:100%; }
    Brilliant, thanks. Turns out I had forgotten to set the height of the body/html, so the container had no reference. Phew! All sorted now, except for the extra peek on Google Chrome, which seems weird!

  13. #10
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,935
    Thanks
    16
    Thanked 303 Times in 302 Posts
    Blog Entries
    10

    Default

    I dont know why but it seems to be due to the images. If those are removed, everything works fine.

    I wonder why it only happens in Google Chrome though?

    Maybe somebody else can offer assistance?
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. Sticky Note
    By fmv503 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-22-2011, 02:19 PM
  2. Sticky Tooltip script - not sticky
    By jscheuer1 in forum Bug reports
    Replies: 0
    Last Post: 11-09-2010, 02:01 PM
  3. Need help with my sticky footer.
    By robin9000 in forum CSS
    Replies: 1
    Last Post: 11-08-2009, 02:37 PM
  4. Sticky Image
    By danno in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 04-06-2007, 03:02 AM
  5. CSS Sticky Footer (CSS/JS)
    By wyclef in forum CSS
    Replies: 0
    Last Post: 12-13-2006, 02:52 PM

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
  •