Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points

jQuery Notification Plugin

Hi everyone.

I know my account is on pause at the moment but I've got something of a mystery on my hands regarding what should be a simple implementation of a notification bar plugin and I thought I'd open it out to Treehouse users.

The plugin can be easily found and downloaded here. Notification Bar Demo

But I want to implement it on my own site. My Site and I've created a demo page to try and fix it up.

The code is there, the assets are there, the CSS is right. I've even tried changing the stacking order as the CSS for the bar is in an external file.

I don't see that it's being conflicted with other styles on the rest of my site. I've linked to the latest version of jQuery.

I want to be able to close the bar but the open state is up first and it leaves the red bar open. I can work around this by setting the jQuery to take down the whole bar by clicking anywhere on the red space. But that's not what it was designed to do and I'd like to get to the bottom of whats behind this issue if possible,

Any ideas? :)

Robert Ho
Robert Ho
Courses Plus Student 11,383 Points

How do you want to close the bar? Also, you want the bar to show (be in "open state") as soon as users view your site right?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

The idea is that the bar should be visible first with a "close" button up there. Hitting that button should close down the entire bar so yes "closed" state should be first but open appears first for whatever reason that is beyond me. .

There's another file that stores a cookie that "remembers" the state. That said, the open button could probably skipped anyway if it's out of place or intrusive.

1 Answer

Hi Jonathan,

I think you might be getting the terms confused. The 'open state' is when the bar is visible (and the close button is shown), and is the default (at least in the demo from the plugin site).

When I open your site, the bar is visible and closes (and re-opens) with the buttons like I would expect it to.

What was the behaviour you were expecting, from page load through to closing/opening the bar?

Or was it a styling issue?

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

I fixed it yesterday, sorry I should have updated. :)

It was probably good the whole time but 2 things led me the wrong way.

  1. The cookie file wasn't correctly linked to the page, which is why the "open" button kept appearing first even though when clicked it disappeared,

  2. When it did work, and the correct button appeared, the open button then disappeared again so I couldn't bring the bar back. It was there, just hidden behind the bar. I spotted it by chance when I scrolled down and there it was. I brought it back up by simply applying a z-index: 1 to it so now it appears on a fixed position 100% of the time.

All is well with the world again. :)