jQuery Mobile Tutorials

]]> http://www.shakeelakbar.com/index.php/2011/12/mobile-jquery-tutorial/feed/ 0 http://www.shakeelakbar.com/index.php/2011/06/jquery-for-designers/ http://www.shakeelakbar.com/index.php/2011/06/jquery-for-designers/#comments Wed, 22 Jun 2011 09:55:57 +0000 admin http://www.shakeelakbar.com/?p=261 jQuery for Designers Here are 10 visual exmples to demonstrate on how to use jQuery to enchance user experience and semantic web design (view original jQuery Tutorials).]]> jQuery for Designers

Here are 10 visual exmples to demonstrate on how to use jQuery to enchance user experience and semantic web design (view original jQuery Tutorials).
Another awesome tutorial by Shakeel Akbar Malik

1. Simple Slide Panel

2. Simple Disappear

3. Chainable Effects

4a. Accordion 1

4b. Accordion 2

This one lets you specify which panel to open as default.

5a. Animated Hover 1

5b. Animated Hover 2

6. Entire Block Clickable

This will make entire block element clickable (see live demo on Best Web Gallery).

7. Collapsible Panels

This example shows you how to imitate the Gmail inbox panels.

8. Imitate the WordPress Comment Management

This one requires the Color Animations plugin.

9. Image Replacement Gallery

Source File

Enhance your input fields with simple CSS tricks

We’re all trying to build an effective and good looking web forms. But there are always a new challenges. If you read my previous articles on how to build a better web forms, you could have noticed there are so many details. Label positioning, context highlighting or justifying elements. But, with just a few simple CSS tricks you can make a usual, boring web forms more effective and exciting.

At least what you can do is to add borders and padding to your input fields. Two examples above shows how you can sat the border color to match your color schema. It is also a good practice to add some padding to input fields. That will make forms more clear. In this example I set the 4px padding to inputs and textarea.

Let me review the code above shortly. This is the code for the second example, the blue one. The entire form has a light blue background #d6ee5f4 and 10px padding. Each input element is displayed as a block, which ensures that labels are positioned above input fields.

Now, this was very simple. But you can do more. You can…

Add some background…

You can also add some solid background like in the example below

The trick is simple and is contained in last three lines of the code. You add gradient image as background, set it to be repeated horizontally (repeat-x), and position it to the top of the field. Simple, eh?

But you can do even more! You can…

Add some behavior
But very simple. Make the active input field different. Like in the example below.

As you can see, the code is very simple. Each time a field get the focus a different styles will be applied. It changes the background and the border. But wait! This doesn’t work in Internet Explorer !! So we have to call JavaScript (or jQuery) for help. Ok, you now know that I lied. You can’t do this only with CSS. But, hey, it’s not my false, talk to IE guys

Ok, to do this, we have to change our CSS slightly.

We will define all styles for all inputs and texareas except for background and border

It is now working in IE. Of course, it is working in Firefox as well. This code does three things: initially, it adds “idle” class to all of the inputs and defined behavior for focus and blur events. Maybe not perfect, but it’s working.

So, what else you can do?

Experiment

Yeas, that’s right, experiment with different colors, border sizes and backgrounds. You can for example also add hover functionality. Try, and get rid of boring forms!