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
Viking Princess
999 PointsFlipping modal
Hi Everyone
is it possible to get a modal popup to flip like a card?
thanks
5 Answers
Ash Scott
435 PointsIt 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
999 PointsAsh.. 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
435 PointsGood good! It's definitely doable. It can be done in pure CSS too, just a little more involved that's all :)
Viking Princess
999 PointsAsh.. 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
435 PointsSure! 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
999 PointsAsh.. 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
435 PointsAh 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
999 PointsThat is exactly what I was looking for.. Good night! don't dream of code!
bows thank you a million times