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

PHP Flash Messages with The Slim Framework

Posted by Gleb Sklyr
Gleb Sklyr
17,492 Points

The "dismissed class"

When I click the dismiss button, how does the {{ key }} changes to the .dismissed class?

Please I'd like to know

1 Answer

Vadim Zelenin
Vadim Zelenin
13,045 Points

Hey Gleb. I've looked through the project files. And there's the answer in global.js file in js folder:

              $(".dismiss").click(function() {
                   $("#feedback").addClass("dismissed");
              });

Learn a bit about jQuery to make it easier to understand. Hope I helped.

Gleb Sklyr
Gleb Sklyr
17,492 Points

ooh thanks I've thought that I need the js file for it to work but I don't know if I need anything else to make it ease in and out of the page because I just copied the css I need for the flash message to my own different project so it looks the same on my page but doesn't act the same and the dismiss button is not functional. Any easy way to fix that?

Vadim Zelenin
Vadim Zelenin
13,045 Points

Gleb Sklyr Look at the HTML structure of this flash message and for CSS styles for this as well. JS code from above will give the message .dismissed class so do not forget to copy it too. If I understand your problem then it's hard to say what exactly is wrong with your own project without capability to look through your code.

Gleb Sklyr
Gleb Sklyr
17,492 Points

Okay so I was able to add this guy ("script src="../js/global.js")("/script") to my main.twig and I know now that it is linked and working because the .addClass is actually adding the "dismissed" to #feedback. Now one last thing I need the ease in and out animations. I linked this to my main.twig as well: ("script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js")("/script") but it is not letting the ease in and out animations work. Any ideas? The animations are in the css file as I understand (-webkit-animation: feedback-out .3s ease-in-out forwards;)

But where do they get this functionality..

Vadim Zelenin
Vadim Zelenin
13,045 Points

So neither ease-in nor ease-out work? If so check if you include your css file properly.

And if you did and there's still no result then try to copy the whole project to your one and delete all redundant stuff(Like I do :D)

upd: also try to download jQuery to your project locally

Gleb Sklyr
Gleb Sklyr
17,492 Points

Ease out works when I add -webkit-transition: all 2s; /* For Safari 3.1 to 6.0 * / transition: all 2s; to the css, there is good documentation.. Thanks for the help Vadim Zelenin