jQuery and jQuery UI Demos
JQuery is great since you can write minimal code and do a lot with it. Here are some fun effects that can be created with the jQuery Library (a fast and concise JavaScript library) and jQuery UI (jQuery User Interface interactions, widgets, effects and themes) that I learned from Code Academy. It’s a great place for learning different coding and programming languages, with my favorite kind of learning, interactive learning.
Accordion
Here’s a simple accordion that only requires one line of jQuery. The style comes with the accordion through the Google jQuery UI stylesheet. The accordion uses the Google jQuery UI. You can put this in your document ready declaration. No CSS is needed for this, though you may want to use it to customize the accordion, like I did here. Look here for the default look, included in the jQuery UI stylesheet.
Bouncing Navigation Links
This one is pretty fun. You can set elements to bounce a certain number of times, as well as the speed in which they bounce.
Here’s how you can do this:
You will need to use the jQuery UI and jQuery Library again:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>This example’s jQuery makes the “a” tag (of the list item that is clicked) bounce three times at the rate of 500 milliseconds or half a second.Then after that, go to the link location of the “a” tag’s href, and don’t execute the natural click event of the “a” tag. This is so the click event of the “a” tag (going to the page linked) won’t be in conflict with the click event of the list item specified.
Sortable Items
You can make items sortable if you want your user to input an order for a list of items, either for a survey, or a quiz etc. The example below is a hypothetical quiz game question:
You will need the jQuery Library as well as the jQuery UI again, like the examples above. You may also use the jQuery UI stylesheet if you don’t want to apply your own CSS. Here’s what the default would look like.
Resizable Container
You can make elements such as tables resizable with the jQuery UI. Here’s an example:
You will need the jQuery Library and the jQuery UI again for this example. You will also need the jQuery UI stylesheet in order for the resizable functionality to work, or copy the styles that are required for it to work. Basically I’m making the sidebar resizable. You can resize it horizontally and vertically.
Fading Effects
This is pretty cool, a combination of stuff I learned relating to fading effects. You will need the jQuery Library. You do not need the jQuery UI for this.
The button is set to fade to an opacity of 40% on mouseover. Then on mouseout, it fades to 100% opacity. Both are set to fade slowly. Then a toggle is also set on the button so when you click the pink and red dots disappear slowly, as the opacity goes to 0%, and you’re left with just the orange dots. Then when you click again, they re-appear, as the opacity reaches 100% again for the pink and red dots.
That’s it for now. I hope you enjoyed this tutorial; though my explanations may not be very thorough, you may read more about them at the web links provided: