Techbray » jQuery http://www.techbray.com Tech, Tips N Tricks and Web 2.0 Wed, 18 Jan 2012 06:08:57 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Text with moving backgrounds using jQuery http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/ http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/#comments Mon, 11 Jan 2010 17:04:42 +0000 Jaan http://www.techbray.com/?p=355 >]]> I have come across a wonderful article on Gayadesign on how to create a moving backgrounds for text using jquery like flash.

textjquery

Read more on gayadesign >>

]]> http://www.techbray.com/2010/01/text-with-moving-backgrounds-using-jquery/feed/ 0 A Colorful Clock With CSS & jQuery http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/ http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/#comments Thu, 31 Dec 2009 05:34:46 +0000 Jaan http://www.techbray.com/?p=336 >]]> A wonderful clock design explained on tutorialzine site using css & jquery.

clock

Read more >>

]]> http://www.techbray.com/2009/12/a-colorful-clock-with-css-jquery/feed/ 4 How to highlight the important keywords in text using jQuery. http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/ http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/#comments Mon, 28 Dec 2009 17:03:34 +0000 Jaan http://www.techbray.com/?p=348 >]]> A solution to highlight identified keywords (using named entity recognition) inside the chunk of user generated text had been posted on 5thirtyone .Look at the below pictures which demonstrates the actual working.
img1
With format selected, highlights the particular meaningful text.
img2

Read more on 5thirtyone >>

]]> http://www.techbray.com/2009/12/how-to-highlight-the-important-keywords-in-text-using-jquery/feed/ 2 Click and Increase the Size of an Image using jQuery http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/ http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/#comments Mon, 28 Dec 2009 16:26:24 +0000 Jaan http://www.techbray.com/?p=331 The article on dotnetcurry demonstrates how to click and view a larger image when the thumbnail is clicked on.imageincrease

Read more on dotnetcurrey.com

]]> http://www.techbray.com/2009/12/click-and-increase-the-size-of-an-image-using-jquery/feed/ 0 How to disable the right click using jQuery http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/ http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/#comments Sat, 26 Dec 2009 18:17:24 +0000 Jaan http://www.techbray.com/?p=343 Some of us might want to disable the mouse right click .Below simple code snippet can be used to d the job easily using jQuery.

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

]]> http://www.techbray.com/2009/12/how-to-disable-the-right-click-using-jquery/feed/ 0 How to prevent form submission when enter key is pressed using jquery. http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/ http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/#comments Sat, 26 Dec 2009 09:02:39 +0000 Jaan http://www.techbray.com/?p=353 As a web developer, most of the times you would have to do some functionality / operation before form gets submitted.By default form gets submitted on click of enter key when the input field is focussed.Below code snipppet can be used to avoid default form submision.

$(document).ready(function() {
$(“form”).bind(“keypress”, function(e) {
if (e.keyCode == 13) {
searchFunc($(“#searchInput”).attr(‘value’)); //perform some operation
return false;
}
});
});

]]> http://www.techbray.com/2009/12/how-to-prevent-form-submission-when-enter-key-is-pressed-using-jquery/feed/ 0 How to count the number of lines in the input textarea http://www.techbray.com/2009/12/how-to-count-the-number-of-lines-in-the-input-textarea/ http://www.techbray.com/2009/12/how-to-count-the-number-of-lines-in-the-input-textarea/#comments Mon, 21 Dec 2009 17:13:50 +0000 Jaan http://www.techbray.com/?p=358 Below code snippet helps you to find the number of lines in the input textarea using Jquery & native RegEx functionality.

var textInput = $(“#textareaId”).val();
var lines = textInput .split(/\r|\r\n|\n/);
alert(lines.length);

]]> http://www.techbray.com/2009/12/how-to-count-the-number-of-lines-in-the-input-textarea/feed/ 1 How to parse XML data using Jquery http://www.techbray.com/2009/11/how-to-parse-xml-data-using-jquery/ http://www.techbray.com/2009/11/how-to-parse-xml-data-using-jquery/#comments Wed, 04 Nov 2009 18:50:14 +0000 Jaan http://www.techbray.com/?p=287 Due to the increase in popularity of Web 2.0 applications and web services it has become increasingly important to be able to parse XML from the client browser.Parsing is not the easiest thing till the JavaScript libraries that supports XML made their way.

With jQuery, when you receive an XML from a callback (usually thro’ Ajax) which is basically a DOM (document object model) that jQuery can traverse seamlessly and efficiently to get the data you need.
we are using jQuery to parse XML due to its ubiquity& for cross browser compatibility.

The below xml file is used for reference.

<?xml version="1.0" encoding="utf-8" ?>
<country>
<state>
<city>Bangalore</city>
<id>24378</id>
</state>
<state>
<city>Chennai</city>
<id>42378</id>
</state>
<state>
<city>Mumbai</city>
<id>324782</id>
</state>
<state>
<city>Hyderabad</city>
<id>6524</id>
</state>
</country>

To parse the xml file we’re going to set up a function that will search each parent element and output the specified child element’s value as text using the find and each statement.The xml data gets parsed on success of ajax callback through parseXml function.Don’t forget to set dataType as “xml” while making an ajax call.
$(this).find(“city”).text() represents the textual value of city by striping the city tags -<city> &</city>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xml parser using jquery</title>
<script type="text/javascript" src="/jquery-min.1.3.2.js"></script>
<script type="text/javascript">

$(document).ready(function() {
$.ajax({
type: "GET",
url: "/statecity.xml",
dataType: "xml",
success: parseXml
});

function parseXml(xml) {
$(xml).find("state").each(function() {
//Loops through each state & find's respective instance of city & id in the xml file

$("table#Citylist").append('<tr><td>'+ $(this).find("city").text() +'</td><td>'+$(this).find("id").text()+'</td></tr>');

});
}
});
</script>
</head>
<body>
<table id="Citylist">
<tr ><td >City List</td> <td >ID</td><tr>
</table>
</body>
</html>

The output would be displayed as below after parsing the xml file:

The City List ID
Bangalore 24378
Chennai 42378
Mumbai 324782
Hyderabad 6524
]]> http://www.techbray.com/2009/11/how-to-parse-xml-data-using-jquery/feed/ 3 How to switch a stylesheet using jQuery. http://www.techbray.com/2009/09/how-to-switch-a-stylesheet-using-jquery/ http://www.techbray.com/2009/09/how-to-switch-a-stylesheet-using-jquery/#comments Sat, 05 Sep 2009 16:28:59 +0000 Jaan http://www.techbray.com/?p=279 Switching stylesheets may be necessary to accommodate different screen resolutions, or entirely different look ‘n’ feel of web page .
It really helps in complex styles where more no of styles are included.
Include the following jQuery script to the header section of your HTML file.

<script type="text/javascript">
$(".cssswitch").click(function() {
$(‘link[rel=stylesheet]‘).attr(‘href’ , $(this).attr(‘rel’));
});
</script>

If you are referring your default stylesheet like below :

<link rel="stylesheet" href="greentheme.css" type="text/css">

For switching the styles, just assign the cssswitch class to an HTML element & use the rel attribute to reference the location of your stylesheets.

<a href="#" class="cssswitch" rel="greentheme.css">greentheme</a>
<a href="#" class=" cssswitch " rel="bluetheme.css">bluetheme(new one)</a>

Clicking on the second link above (blue theme) will modify the DOM in such a way that the href attribute will take on the value of bluetheme.css.

]]> http://www.techbray.com/2009/09/how-to-switch-a-stylesheet-using-jquery/feed/ 0 How to get the values of the selected checkboxes into an Array using Jquery http://www.techbray.com/2009/08/how-to-get-the-values-of-the-selected-checkboxes-into-an-array-using-jquery/ http://www.techbray.com/2009/08/how-to-get-the-values-of-the-selected-checkboxes-into-an-array-using-jquery/#comments Sat, 01 Aug 2009 06:08:21 +0000 Jaan http://www.techbray.com/?p=272 For the below html code snippet ,we can retreive the selected(checked) checkbox values into an javascript array for further processing.

<div>
<input type="checkbox" name="list_group" value="one" />
<input type="checkbox" name="list_group" value="two" />
<input type="checkbox" name="list_group" value="three" />
<input type="checkbox" name="list_group" value="four" />
<input type="checkbox" name="list_group" value="five" />
</div>

jQuery code to be used on onready or onclick event.

var values = new Array();
$.each($("input[@name='list_group']:checked"), function() {
values.push($(this).val());
});

]]> http://www.techbray.com/2009/08/how-to-get-the-values-of-the-selected-checkboxes-into-an-array-using-jquery/feed/ 1