Toggling Two Forms with jQuery

Tagged: • •
6

I am currently working on a prototype for an event management web application. That is my internship for this summer. Since it is a prototype, I am not developing it in Ruby on Rails or PHP/MySQL. I am currently using backbone.js which I am going to talk about in another entry later on.

For this web application, I wanted to put two forms on the same page. However, making two forms visible on the same page looks very messy and this is where jQuery comes into play. I wanted to have two forms; one for adding announcement while the other one is for adding events. You can view the demo here. For those of you that are clueless about how the demo works, just click on the green “+ add event” button. I got an email from someone because he doesn’t know how to work with the demo. *sigh*

I wanted to show only the first form by hiding the second form. However, the second form will show up only when the user clicks on a button and it will hide the first form and shows the second form instead.

Both the HTML and CSS is fairly simple. Since I am pretty sure that you can hack your own CSS, I am not going to put it up here. I’ll just put up the HTML. The jQuery code is short but it requires a bit of explanation.

(Check out the sexy tutorial!)

Animate Image Captions with JQuery

4

Here are some techniques to animate your image captions and descriptions that I had discovered when I was playing around with jQuery. I was thinking of ways on how to animate the image captions on my icon texture/brush pages so that the caption that shows ‘Downloaded # times” would look awesome and sleek rather than dull. If you visit the Icon Texture or Brushes page, you will notice that on top of all the images, I had added captions that shows the download counter of each downloads. It looks good but it is pretty boring. I haven’t edited the pages with this technique yet but hopefully will do so soon. Here I am sharing it with you guys.

We have two types of techniques here. Both are equally awesome. It all depends on how you want your captions to be like on hover. If you want a short description to display your download counter, the first technique will show you how to do so. You can view the demo of the first technique here (hover your mouse on each images):

First Animation Demo

If you want a short paragraph for your image descriptions, the second technique will be more suitable for you. The demo is here(hover your mouse on each images):

Second Animation Demo

(Follow the white naked rabbit…)

Animated Multiple Image Viewer in Jquery

10

Hello again, children! This is my first time updating with my new laptop so I am a bit excited! Yay! Okay, back to the tutorial. *Clears throat*. Years ago, when I was still new in web designing, I visited Animepaper and thought that their slideshows were created in flash. I know nothing about Javascript and JQuery back then. I visited Animepaper again today and I notice how sleek their slideshow was and I decided to imitate the image viewer by writing my own JQuery code. I decided to imitate only the image viewer part since there are a lot of available slideshow script that can give you the exact same effect that they have in Animepaper. I was actually imitating the technique in order to apply what I had learn so far and to test my understanding. Here I am sharing it with you! You lucky kitties! Those of you who never visited the website before and have no clue on what slideshows am I talking about, you can visit the site here: Animepaper

For those of you who do not know what exactly is an image viewer, I hope this picture below will give you a rough idea on what it is. You can also view the demo here!

VIEW DEMO HERE

(Check out the cute technique below!)