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

Mike Mitchell
PLUS
Mike Mitchell
Courses Plus Student 27,026 Points
Posted by Mike Mitchell
Mike Mitchell
Courses Plus Student 27,026 Points

Tweaking @chalkers jQuery project to make a .mouseenter() pop up

I recently finished the "Creating a Simple Lightbox" project in jQuery basics and was curious...

Instead of appending an <img> and <p></p> on the overlay - which displays the selected image and its alt text - could I somehow create a general pop up using similar means only with text?

For example, I have a div class called "big announcement" that displays some text <p>Hey!</p>.

I plan on using a .mouseenter() function to have a small box pop up with the big announcement text.

It's probably really simple, but I can't think of how to tweak what I already know (e.g. the lightbox example) into something like this.

Any leads on this would be much appreciated!

Thanks!

Mike

2 Answers

Craig Bauer
Craig Bauer
3,376 Points
Craig Bauer
Craig Bauer
3,376 Points

Hey Mike, I didn't take the course but you should be able to switch out the html for a div with text. If you post what you have I can show you how to fix it.

Craig

Mike Mitchell
PLUS
Mike Mitchell
Courses Plus Student 27,026 Points
Mike Mitchell
Mike Mitchell
Courses Plus Student 27,026 Points

Craig,

Thanks for replying. I actually just discovered a nice little UI widget in jQuery called .dialog.

Here's the documentation I followed: jquery dialog

Here's the code I plugged in:

$(".global-message.image-block").dialog({
    autoOpen: true,
    width: 600,
    dialogClass: "no-close-on-top"
});

I then threw in a little CSS on the dialogClass for styling.

I ran into a new problem, though.

On the same page, the dialog box is also affecting another div class called ".no-recent-messages.global-message.image-block"

I tried to hide this message, since it's essentially telling the user they have no messages because they do when we send out a global message.

This is the code I'm using to hide the problem div:

$(".no-recent-messages.global-message.image-block").hide();

Seems pretty straightforward, but it's not behaving how I think it should. :)

Mike