Skip to content

Instantly share code, notes, and snippets.

<!-- jQuery: Validating an email. -->
$('#txtEmail').blur(function(e) {
var sEmail = $('#txtEmail').val();
if ($.trim(sEmail).length == 0) {
alert('Please enter valid email address');
e.preventDefault();
}
var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]
{2,4}|[0-9]{1,3})(\]?)$/;
if (filter.test(sEmail)) {
@enopanen
enopanen / Traversing_the_DOM
Created December 3, 2013 18:07
This idea of traversing through object nodes is deep enough to be an article within itself. But for any intermediate or advance jQuery developers who understand this topic, I’m sure these quick snippets will help in future problem solving. The goal is often to pull data from another element related to the currently active element(clicked, hovere…
$("div#home").prev("div"); // find the div previous in relation to the current div
$("div#home").next("ul"); // find the next ul element after the current div
$("div#home").parent(); // returns the parent container element of the current div
$("div#home").children("p"); // returns only the paragraphs found inside the current div
@enopanen
enopanen / Retrieve_Content_Values
Created December 3, 2013 18:06
Instead of appending new HTML content into the document you may also pull out the current HTML content from any area in your webpage. This can be an entire list item block, or the contents of a paragraph tag. Also the .val() property is used on input fields and form elements where you cannot get inside the object to read anything further.
$("p").click(function () {
var htmlstring = $(this).html(); // obtain html string from paragraph
$(this).text(htmlstring); // overwrite paragraph text with new string value
});
var value1 = $('input#username').val(); // textfield input value
var value2 = $('input:checkbox:checked').val(); // get the value from a checked checkbox
var value3 = $('input:radio[name=bar]:checked').val(); // get the value from a set of radio buttons
@enopanen
enopanen / Setting_and_Getting_Attributes
Created December 3, 2013 18:05
This property is relatively straightforward but I always see these problems in StackOverflow. You can pull the .attr() method on any HTML element and pass in the attribute string value. This will return the value of that attribute, whether it’s ID or class or name or maxlength. All HTML attributes may be accessed through this syntax and so it’s …
var alink = $("a#user").attr("href"); // obtain href attribute value
$("a#user").attr("href", "http://www.google.com/"); // set the href attribute to a new value
$("a#user").attr({
alt: "the classiest search engine",
href: "http://www.google.com/"
}); // set more than one attribute to new values
@enopanen
enopanen / append_html
Created December 3, 2013 18:05
Using the .append() method we can quickly place any HTML code directly into the DOM. This is similar to .load() we saw earlier, except these functions can take HTML from any source. You could setup a brand new variable of HTML text or even clone HTML right from your webpage. These properties are often used in conjunction with Ajax response data.
var sometext = "here is more HTML";
$("p#text1").append(sometext); // added after
$("p#text1").prepend(sometext); // added before
@enopanen
enopanen / Equal_Column_Heights
Created December 3, 2013 18:04
This is a small jQuery snippet I ran into while surfing the web earlier in the year. While this is not the most recommended solution for your layout display, this code snippet may come in handy down the line. CSS column heights are not always matched and so this dynamic solution using JavaScript is worthy of some insight.
var maxheight = 0;
$("div.col").each(function(){
if($(this).height() > maxheight) { maxheight = $(this).height(); }
});
$("div.col").height(maxheight);
@enopanen
enopanen / Keystroke_Events
Created December 3, 2013 18:04
Dealing with user input is another grey area I have come across. The jQuery keydown and keyup event listeners are perfect for dealing with such experiences. Both of these methods are called at very different times during the keystroke event. So make sure you have the application planned out before deciding which one to use.
$('input').keydown(function(e) {
// variable e contains keystroke data
// only accessible with .keydown()
if(e.which == 11) {
e.preventDefault();
}
});
$('input').keyup(function(event) {
// run other event codes here
@enopanen
enopanen / load_external_html_content
Created December 3, 2013 18:03
Believe it or not you can actually pull external HTML code from a file right into your webpage. This doesn’t technically require an Ajax call, but instead we’re parsing the external files for whatever content they have. Afterwards this new content may be loaded into the DOM anywhere in the page.
$("#content").load("somefile.html", function(response, status, xhr) {
// error handling
if(status == "error") {
$("#content").html("An error occured: " + xhr.status + " " + xhr.statusText);
}
});
@enopanen
enopanen / Toggle_visibility
Created December 3, 2013 18:02
Fading objects out of the document is very common with modern user interfaces. You can always have small popup boxes or notifications which need to display and then hide after a few seconds. Using the fadeToggle function you can quickly hide and display any objects in your DOM. Keep this code handy if you will ever need such functionality in a w…
$("a.register").on("click", function(e){
$("#signup").fadeToggle(750, "linear");
});
@enopanen
enopanen / Toggle_CSS_class
Created December 3, 2013 18:02
Adding and removing CSS classes on HTML elements is another fairly common action. This is one technique you may consider with selected menu items, highlighted rows, or active input elements. This newer method is simply quicker than using .addClass() and .removeClass() where you can put all the code into one function call.
$('nav a').toggleClass('selected');