Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Viking Princess
Viking Princess
999 Points

Flipping modal

Hi Everyone

is it possible to get a modal popup to flip like a card?

thanks

5 Answers

Ash Scott
Ash Scott
423 Points

It is yes. You can use a CSS animation library such as animate.css for the animation. You then need to add the class of the animation to the modal. Then you need to add the .animated class to the thing you want to animate, and use JS or jQuery to apply this class to the modal when the button which opens it, is clicked. Something along the lines of:

$('.button-trigger-modal').click(function(){
    $('.modal').addClass('animated');
});

Obviously without seeing your code and how it's working I can't do it for you (And I wouldn't anyway otherwise you wouldn't learn!) but that's the sort of thing you need to aim for.

Need any help, give me a shout!

Viking Princess
Viking Princess
999 Points

Ash.. thanks

I do not want the code.. I was curious if it is actually doable.. Yeah, I don't like stripping the code, I must think through the code first..

I will post the glitch if I cannot resolve it..

Thanks!

Ash Scott
Ash Scott
423 Points

Good good! It's definitely doable. It can be done in pure CSS too, just a little more involved that's all :)

Viking Princess
Viking Princess
999 Points

Ash.. while you are here. Tell me something please. Can you think of a situation where While Do loop in Javascript is needed? I would imagine that it would be efficient in output the database query .. is there more?

Thank you very very much!

Ash Scott
Ash Scott
423 Points

Sure! It's simply a Javascript loop which is saying:

do {
    // Something
}
while ( // Argument )

The browser will process the JS, WHILE whatever is in the brackets, is true. It's hard to explain without being able to show you a real usage example, so the best I can do is link you to W3 schools, where you can see how it works! http://www.w3schools.com/js/tryit.asp?filename=tryjs_dowhile

There are various uses, such as outputting a list of items in a shopping cart. You can do quite a lot with these gems :)

You have similar functionality in PHP too, as well as other languages. Sorry it wasn't too helpful, but hopefully you understand them a bit better now :)

Viking Princess
Viking Princess
999 Points

Ash.. The syntax is not the problem.. but the actual use of it. I have used them in school in C++ and PHP but in real life, I am running out of ideas ..

I am sorry I wasn't clear.

Thanks

Ash Scott
Ash Scott
423 Points

Ah apologies for misunderstanding!

An example of real-world usage. Say an Ecommerce store had a dynamic basket dropdown in the header, and could show a max of 5 items. The product info such as title, image urls and price, could be returned from the database into a JS array. You could then loop through this array to only list 5 in that basket in the header. This is what some of the guys at work have done for an Ecom site we built. The same sort of concept for a list of branches for a supplier website. We stored everything in a JS array, and output it that way.

Sorry if it doesn't make sense, I've been awake for hours and am slowly dozing off! I'm going to come off now to preserve my sanity with a project I'm on, but will return tomorrow after work :)

Have a good night my friend!

Viking Princess
Viking Princess
999 Points

That is exactly what I was looking for.. Good night! don't dream of code!

bows thank you a million times