DD Sticky bar

[IrishPidge]

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!

[vwphillips]

try

.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

[IrishPidge]

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!

[Beverleyh]

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.

[IrishPidge]

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.

[Beverleyh]

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

[IrishPidge]

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!

[Beverleyh]

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;

.banner, .cartoon { max-width:100%; }

[IrishPidge]

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;

.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!

[Beverleyh]

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?