God Likes to Smell Sweat
http://www.gltss.org
gltss, acronym:
god likes to smell sweat
gltss, pronounciation:
1. gee elle tea ess ess
2. glitz
gltss is an collaborative art unit. It was founded in 2000
Contributors
Filed under
resource
15 Free Guides That Really Teach You USEFUL Stuff
via makeuseof.com
Posted by GLTSS .ORG
Comments [0]
jQuery Lessons Series: How to Interact with HTML Forms – woorkup.com
This article illustrates some useful basic concepts that explain how it’s easy interacting with HTML forms using jQuery. I’ve prepared five practical step-by-step examples you can follow to learn quickly this argument.
For a printable reference guide to the jQuery API I suggest you to download my jQuery Visual Cheat Sheet or take a look at the official jQuery documentation.
Simple characters counter
The first example is a simple character counter. Here is the result (try to write something into the input field below):
0How can you implement it? Add an input field in your HTML document and a
<span>tag for the counter in this way:<input type="text" id="input-text"/><span id="count"></span>Then add this JavaScript code into the
<head>tag of your page or into an external JavaScript file:$(document).ready(function() { $("input[id='input-text']").keyup(function count(){ counter = $("input[id='input-text']").val().length; $("#count").html(counter); }); });The previous script, on
keyupevent, gets the value and the length of the string contained into the input field withID="input-text"and updates the DOM element withID="count"(in this case the<span>tag) using the jQuery attributehtml().Characters countdown
Now we can try to implement a simple variant of the previous example to realize a script that displays the number of remaining available characters in an input field. Here is the result (try to write something into the input field below):
10 remaining charsThe HTML code is exactly the same of the previous example. I only changed the
idproperty for theinputandspantags.<input type="text" id="input-text-2"/> <span id="count-2"></span>Here is the JavaScript code that updates the counter:
$("input[id='input-text-2']").keyup(function countRemainingChars(){ maxchars = 10; counter = $("input[id='input-text-2']").val().length; if(counter==0){ $("#count-2").html(0 +" remaining chars") } else { $("#count-2").html(maxchars-counter+" remaining chars"); } });In the code above I declared the variable
maxcharto set the maximum number of allowed characters for the input field withid="input-text-2". Onkeyupevent, the script gets the value and the length of the string contained into the input field withid="input-text-2"and updates the DOM element withID="count-2” (in this case the<span>tag) with the difference betweenmaxchars-counteror0.Basic form validation
This example illustrates how to implement a simple form validation. When the input element loses focus, an error message appears if the field is empty. Here is the result (try to select the input field and leave it blank):
Here is the HTML code:
<input type="text" id="input-text-3" maxlength="10" /><span id="msg"></span>And here is the JavaScript code:
$("input[id='input-text-3']").blur(function validate(){ el = $("input[id='input-text-3']"); inputString = el.val(); if(inputString==""){ el.css({ "background" : "red", "color" : "white" }); $("#msg").html("This field can't be empty!"); } else { el.css({ "background" : "white", "color" : "black", }); } });On
blurevent (when the input field loses focus), an error message appears if the field is empty and the background and text color of the input field change to red and white.Pick values from a list
This example illustrates how it’s easy to add values into an input field picking them from a list. Here is the result (click on a list element, Smashing Magazine, Woork Up or Mashable):
Click on a website from the list:
- Smashing Magazine
- Woork Up
- Mashable
The HTML code to implement this example is not complex: I added an unordered list that contains the list of values you can pick:
<input type="text" id="input-text-4" size="40"/> <ul id="values"> <li>Smashing Magazine</li> <li>Woork Up</li> <li>Mashable</li> </ul>And here is the JavaScript code:
$("ul[id='values'] li").click(function suggestValues(){ input = $("input[id='input-text-4']"); el = $(this).html(); $(this).remove(); newinput = input.val(); newinput = (newinput + el + ", "); input.val(newinput); });Naturally, this is a very basic example you can improve and customize how you prefer for your specific needs in your web projects.
Add elements into a list from a select field
This example illustrates how to add some value into an external list piking them from a
selectelement. When you add a new element into the list, the selected option is contextually removed from theselectelement. I also added a nicefadeInanimation to improve the final effect.
Here is the HTML code:
<select id="my-list"> <option value="1">Smashing Magazine</option> <option value="2">Woork Up</option> <option value="3">Mashable</option> </select> <input type="button" id="submit-list" value="Button"/> <ul id="selected-items-list"></ul>And here is the JavaScript code:
$("#submit-list").click(function selectItem(){ s = $("option:selected") el = s.text(); destination = $("#selected-items-list"); $(destination).append('<li>'+el+'</li>'); $(destination +':last').css('display', 'none').fadeIn(1000); $("option:selected").remove(); if($('#my-list option').length==0){ $('input[id=submit-list]').attr('disabled', 'disabled'); } });When you pick an option from the
selectelement, the option it’s added into the destination list withid=selected-items-listusing.append(). To remove the option for theselectelement you can use.remove(). When theselectis empty you can disable the button using.attr().Conclusions
In this post we’ve started learning how to use jQuery to interact with HTML forms. Obviously all concepts illustrated are very simple but easy to learn and useful to start using quickly jQuery. If you are a developer I suggest you to download my jQuery 1.3 Visual Cheat Sheet. Comments and suggestions are appreciated.
via woorkup.com
Posted by GLTSS .ORG
Comments [0]
10 Fresh jQuery Tutorials to Enhance Navigation Menus | Web Design Ledger
By Henry Jones10 Fresh jQuery Tutorials to Enhance Navigation Menus
Make sure you read this popular related article.
13 Super Useful jQuery Content Slider Scripts and TutorialsA few years ago, when designers wanted to add cool effects to the navigation of a website they used Flash. We all know the types of problems that caused. Now with the growing popularity of javascript frameworks like jQuery, those same types of “Flash-like” effects can be achieved without Flash. Here are 10 jQuery tutorials and techniques to enhance your website’s navigation and menus.
Horizontal Scroll Menu with jQuery Tutorial
BBC Radio 1 Zoom Tabs
Spritemenu
Outside the Box Navigation with jQuery
Sexy Drop Down Menu w/ jQuery & CSS
A Simple and Beautiful jQuery Accordion Tutorial
Make a Mega Drop-Down Menu with jQuery
jQuery look: Tim Van Damme
jQuery Feed Menus
Create a Good Looking Floating Menu with jQuery Easing
Related Posts
Here's some other articles that you will definitely find useful.
13 Super Useful jQuery Content Slider Scripts and Tutorials
14 Easy to Implement Drop Down Menu Solutions
Create a Resizable Image Grid with jQuery
15 Excellent jQuery Navigation Techniques and Solutions
11 Excellent Solutions for Creating Tooltips
Digg | Stumble | Del.icio.us Subscribe to RSSIf you enjoyed this article, consider sharing it on one of the following social bookmarking site.
Posted by GLTSS .ORG
Comments [0]
Free Slideshow, Gallery And Lightboxes Scripts « Noupe
via noupe.com
Posted by GLTSS .ORG
Comments [0]
Comments [0]