User interface design often makes use of showing and hiding blocks of content. It focuses one’s attention to the right thing, and it’s fun to do with jQuery.
I’ll show you how to toggle the visibility on a group of selected elements. I’ll build up from a simple case to the more complicated ultimate goal.
I often write very short, very simply little code snippets just to test specific things in HTML, CSS, PHP, or Javascript (and jQuery). These are short little blurbs, that are useful for looking at how certain specific things work. They are mostly notes to self.
Here are links to a few of them:
| Short Code Snippets: | |
| CSS | Change image on hover. |
| CSS | Creating large clickable areas. |
| CSS | Images sprites example – External CSS is here – Sprite is here |
| DOM | Checking how many elements in an ID. |
| Javascript | Basketball animation |
| jQuery | Return ID of clicked LI |
| jQuery | Sliding, fading, and disappearing |
| jQuery | Not this array element |
| jQuery | Using toggle() |
| jQuery | A simple infinite image slider |
| PHP Algorithm | A linear linked list |
| PHP Recursion | Turning digits into words |
| PHP JSON CSS | Retrieving and displaying information from Delicious |
| Simple Apps: | |
| jQuery PHP | Guessing game using Stackapps and Stackoverflow data |
| jQuery PHP | Dynamic Syntax Highlighting |
If you use Javascript, JQuery is a great framework to speed up your coding. It’s essentially a collection of really convenient shortcuts. It does more, since JQuery also handles a lot of browser compatibility issues. So, you don’t have to go through your JQuery code to update it for new browsers, all you have to do is download the new version of JQuery, and your old commands will learn new tricks.
Ah, speaking of downloading JQuery, you just might want to understand how JQuery works if you use it. The first time I tried to do this, I simply clicked on my JQuery src file link:
<script type="text/javascript" src="http://peter-ajtai.com/jquery/jquery-1.4.2.min.js"></script>
… and this is what I saw:
Fun reading, huh? Read the rest of this entry »
This is a basic JavaScript tutorial. I will describe how to move an element around the page using a simple animation script. The element you move around the page can be anything from an image to a paragraph.
Below is a working example:
Copyright © 2009 Netlumination LLC - Design, Development, and Consulting.
Entries (RSS)
and
Comments (RSS).
Built on a WordPress framework.
Contact | Sitemap.