Creating JSON Parser Using JQuery

posted by Jitendra on May 6, 2011 under category Web Technology and tagged as Javascript, JQuery with 2 Comments

JQuery JSON Tutorial – Creating JSON Parser Using JQuery with Source code and live demo

JSON stands for “Javascript Object Notation” and often used to interchange the data between servers. Its use is increased in web development because of its flexibility and data support.

I have created Online JSON parser using JQuery library.

Live Demo – Online JSON Parser

Continue reading “Creating JSON Parser Using JQuery”

Servlet, Hibernate, jQuery and Ajax based google like chat

posted by Jitendra on March 14, 2011 under category Hibernate, JSP, Servlet and tagged as Ajax, Google, Javascript, JQuery, MySQL, Query Browser with 14 Comments

Servlet, Hibernate, jQuery and Ajax based google like chat with source code

Hi, In this article, my aim is to create an application which uses the concept of Hibernate in Servlet with Ajax support of Jquery.
Below figure can give you the idea of final look and feel of the complete application:

Continue reading “Servlet, Hibernate, jQuery and Ajax based google like chat”

JavaScript Error “˜expected identifier, string or number’ in Internet Explorer (IE)

posted by Jitendra on September 13, 2010 under category HTML and tagged as HTML, Intenet explorer, Javascript with 5 Comments

Solution of expected identifier, string or number’ in Internet Explorer (IE) – javascript

Yesterday my friend come across a javascript error “expected identifier, string or number” in internet explorer (IE). The same code was running great in Mozilla and chrome. here the snap of code causing an error:

Continue reading “JavaScript Error “˜expected identifier, string or number’ in Internet Explorer (IE)”

Difference between $find and $get Methods

posted by Jitendra on July 30, 2010 under category ASP.NET and tagged as Ajax, ASP.NET, Javascript with Leave a comment

What is Difference between $find() and $get() Methods in ASP.NET

$get is used to get a reference to a DOM element. It is an alias for Sys.UI.DomElement.getElementById:

var myLabel = $get(‘myLabel’);

$find is an alias for Sys.Application.findComponent() and it’s used to get a reference to a particular component, given its id.

How to get DOM element using $find

var lnkAddNew = $find("CntrlID");
if(lnkAddNew)
{
    lnkAddNew.get_element().style.display = '';
}

Get Mouse Position in JavaScript for all browsers

posted by Jitendra on May 20, 2010 under category Tech Tips and tagged as Javascript with Leave a comment

function mouseXPos(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}

function mouseYPos(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
else return null;
}

To use above function, just pass the mouse event.

Live Demo

Why Style.left does not work in Firefox, chrome and safari ?

posted by Jitendra on May 20, 2010 under category HTML and tagged as HTML, Javascript with 3 Comments

During working on one of my project, i found that style.left does not work with Mozilla, chrome and safari but nicely works on internet explorer.

The code was :

var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY;
docStyle.left = e.clientX-5;
docStyle .style.display = "";

And the simple solution is, append “px” at the end to work with other browsers.

and final code is:

var docStyle = document.getElementById("divAddPartnerAndProjectEntities").style;
docStyle.top = e.clientY+"px";
docStyle.left = e.clientX-5+"px";
docStyle .style.display = "";

Very Simple right ? 🙂

Highlight Current field using JQuery

posted by Jitendra on May 10, 2010 under category HTML and tagged as CSS, HTML, Javascript, JQuery with 1 Comment

Write below HTML code :

This will create two text boxes.

<form>
	<div>
		<label for="Name">Name:</label>
		<input name="Name" type="text"></input>
	</div>
	<div>
		<label for="Email">Email:</label>
		<input name="Email" type="text"></input>
	</div>
</form>

Using jQuery, we can watch for an event where an input form comes into focus:

Add link to JQuery file in script tag as shown in below line:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" />

Now, add below CSS in document.

div.curFocus {
background: #fdecb2;
}

Then at last write JQuery / javascript code on focus event and blur event (opposite of focus event in javascript ) .

$(document).ready(function(){

$("input").focus(function() {

$(this).parent().addClass("curFocus")

});

$("input").blur(function() {

$(this).parent().removeClass("curFocus")

});

});

We are using the advantage of jquery of adding and removing the CSS class. we cannot left blank to CSS class, as it may remove the existing other class from the tag.

$(document).ready(function(){

This line causes the execution of jquery after complete loading of page.

Output:

Tag: Javascript