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

CSS

Posted by John Locke
John Locke
15,479 Points

Has anyone used bootstrap-alert.js?

I have already been to Stack Overflow and http://twitter.github.io/bootstrap/javascript.html but I can't seem to figure out how to make these alerts work.

What I'm trying to do: User clicks a link to a page that hasn't been built yet. A Bootstrap style alert pops up saying, that page hasn't been built yet. (Not a traditional JavaScript alert box).

Code so far: <li class="first alert"><a href="#" class="close" data-dismiss="alert">The LInk</a>This page is still being built.</li>

Trying to follow the instructions found here: http://twitter.github.io/bootstrap/javascript.html#alerts

Any advice would be appreciated.

2 Answers

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

And my other thought is to use something like this:

<script type="text/javascript">
    $( document ).ready(function() {
       $( ".no-link" ).click(function( event ) {
          $(this).html( '<div class="alert fade in"><button type="button" class="close" data-dismiss="alert">×</button><strong>That page is still being built.</strong> "Check back soon."</div>' );
     });
  });
</script>

But that doesn't seem to work either.

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

This is closer to the solution:

http://jsfiddle.net/cQNFL/

And in fact, this is how i resolved it. Because the <a> links had "#" as a destination, I included a second alert div at the top of the page. If you clicked the footer links, they would go back to the top of the page. Put a different CSS class on the top <div>, and set the "close" to close both top and bottom alerts if you close the top div. I will edit this entry in a minute as I add it to Codepen.