Archive

Archive for the ‘JQuery’ Category

Get Form all field value at a time by JQUERY.

August 16, 2011 Leave a comment

You can get form all data at a time by clicking any field.Only jquery serializeArray function can do this. Here is very important thing is all field class name must be same, Below example all field class name is “Target”,

JQUERY CODE:

jQuery(document).ready(function () {

jQuery(‘.target’).change(function() {

var formAllData;
var fieldName;
var fieldValue;
var grossTotal=0;

formAllData = $(‘#getAllData’).serializeArray();

var dataArray = new Object();

for( index in formAllData)
{

if(formAllData[index].value) {
//dataArray[perfTimes[index].name] = perfTimes[index].value;

fieldName =formAllData[index].name;
fieldValue = formAllData[index].value;

grossTotal += parseInt(fieldValue);

//alert(fieldName);
//alert(fieldValue);
}
}

var pre_gross_price = jQuery(“#priceGross”).val(grossTotal);

});
});

HTML CODE :
<form name=”getAllData” id=”getAllData” action=”#”>

<input type=”text” name=”priceGross” id=”priceGross”  value=”1000″ />

<input type=”checkbox” name=”Attribute1″ id=”Attribute1″ value=”600″  />
<input type=”checkbox” name=”Attribute2″ id=”Attribute1″ value=”600″ />
<input type=”checkbox” name=”Attribute3″ id=”Attribute1″ value=”600″  />

<input type=”radio” name=”Size” id=”Size” value=”300″ /> XL
<input type=”radio” name=”Size” id=”Size” value=”500″ /> XXL

<select name=”color” id=”color”>
<option value=”100″>Red</option>
<option value=”200″>Blue</option>
<option value=”300″>Green</option>
</select>

</form>

Advertisements
Categories: JQuery

jquery mouseover and mouseout event

June 18, 2011 Leave a comment

Examples :Image change when mouse over and mouseout

<html>

<head>

<script type=’text/javascript>

jQuery(document).ready(function () {

jQuery(‘.yellow’).bind(‘mouseover’, yellow_mouseover)
jQuery(‘.yellow’).bind(‘mouseout’,  yellow_mouseout)

function yellow_mouseover()
{
jQuery(‘.yellow’).attr(“src”,”images/yellow.gif”);
}

function yellow_mouseout()
{
jQuery(‘.yellow’).attr(“src”,”images/yellow1.gif”);

}

});

</script>

</head>

<body>

<img class=’yellow’ src=’images/yellow1.jpg’>

</body>

</html>

Categories: JQuery Tags:

Tab Round by jquery

January 20, 2010 Leave a comment

Tab Round Example:

At First you can download jquery with jquery corners js.Then apply below this code.

<html>
<head>
<script type=”text/javascript” src=”http://localhost/js/jquery.js”></script&gt;
<script type=”text/javascript” src=”http://localhost/js/jquery.corners.js”></script&gt;

<script type=”text/javascript”>
jQuery().ready(function() {
jQuery(“.yourclassname a”).corner(“5px”);
});
</script>

<style type=”text/css”>
.yourclassname a{width: 250px; float:left; height: 35px; background: url(“../images/genbutton_35.png”) left top; text-decoration: none;}
.yourclassname a:hover{ width:250px; height:35px; float:left; background: url(“../images/genbutton_35.png”) left bottom;text-decoration: none;}
</style>

</head>

<body>
<div align=”center” class=’yourclassname’>
<a href=”#” ><div><div>Signup</div></div></a>
</div>
</body>

</html>

Categories: JQuery

Text Effects In jQuery

January 10, 2010 1 comment

Font Effect with JQuery : We can use sample code for font effect by JQuery.

Font effect is a jQuery plugin that add some effect to html text.
The available effects are (for now) Outline, Shadow, Gradient and Mirror, here is an example:

download the plugin here

Below Code :

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
<script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
<script type=”text/javascript” src=”js/jquery-FontEffect-1.0.0.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function(){

$(‘#example1’).FontEffect({ shadow:true, shadowColor:”#f00″, shadowOffsetTop:4, shadowOffsetLeft:4, shadowOpacity:1, outline:true, outlineColor1:”#fff”, outlineWeight:2 })

$(‘#example2’).FontEffect({ outline:true, shadow:true, mirror:true, gradient:true, gradientColor:”#f00″ })
$(‘#example3’).FontEffect({ gradient:true, mirror:true, mirrorColor:”#298d79″ })

});
</script>
<style type=”text/css”>

#example1{ font-family :”verdana”; font-weight :bold; color :#5a7; font-size :3em; }
#example2{ font-family:”Arial”; font-weight:bold; margin-bottom:30px; font-size:60px; color:#fff; }
#example3{ font-family:”Impact”; font-size:3em; margin-bottom:30px; color:#9ae; }

</style>

</head>
<body>

<div id=”example1″>
Enter Your Text Here
</div>

<div id=”example2″>
Mohammad Arif Hossen
</div>

<!– Gradient &amp; Mirror  –>
<div id=”example3″>
Jquery Text Effect
</div>

</body>
</html>

Categories: JQuery

JQuery Basic-

November 22, 2009 Leave a comment

First lets go over the basics of jquery coding. All jquery starts with a “$” no matter what! In all of your jquery documents ( which is just a javascript file) you need the following code in your document, this code is to load your functions if you do not add this code your jquery will be useless.

$(document).ready(function() {
// all of your code goes here
});

What that code does is simply load all of your functions quickly, without slowing down your page it is only in jquery. For everyone that knows a little about javascript you probably know the “window.onLoad()” function, it does the same thing as “$(document).ready(function() {” but it waits until the entire page finishes loading then it loads in the javascript. This makes your javascript very slow especially if you have large images, the jquery code loads all of the javascript once all of the important stuff has loaded. Like the HTML and CSS structure, which means your javascript are now the coolest kids on the block.

Now that we have that out of the way let us go over calling classes and whatnot, look here:

$('.comments')

All this does is find all of your content inside the CSS class “.comments” , if your replaced the ‘.comments’ with something like ‘p’ jquery would find all of your paragraphs. Same thing for CSS id’s just use a “#” instead of a dot.
So now lets build on our code, let’s add a CSS class to everything inside inside “.comments”. Call it stripe, and it would add a background of a light grey or something. Also note that I am referring to comments in wordpress.

$('.comments').addClass('stripe');

Now all of our comments have a background of a light grey, so now lets make our comments striped like a lot of wordpress comments. Since the comments are in a list lets take advantage of that.

$('.comments:odd').addClass('stripe');

Now this will apply the “stripe” class to every other comment, making our comments striped =). Haha I like how I doubled this tutorial to tell you how to stripe your comments.

You now know how to find a class, id, or HTML elements using jquery and add a class to it. You can also replace “.addClass” with “.removeClass” to of course remove classes from your selected elements. What about highlighting comments oMouseOver?

$('.comments').mouseOver(function() {
$('this').addClass('hover');
});

“$(‘this’) refers back to the last “$(”)” which in this case would be “.comments”, so then the mouse over event adds a function that just says to add the class “hover”. Of course this function would only happen when someone triggers the .mousOver event (when someone hovers over a comment). Obviously the “hover” class would do something like add a new background color or a border, you choose. Although this looks promising we cannot leave the code like this, because then when someone hovers a comment it will not simply remove the “hover” class when they move their mouse away it will stay there. Let’s fix that!

$('comments').mouseOut(function() {
$('this').removeClass('hover');
});

Don’t you just love how easy and short jquery is? The really cool thing is that we are going to chain the .mouseOver and .mouseOut events togethor to make it even shorter. This little trick can be kind of confusing at first, I did not feel comfortable chaining code when I first started jquery. Here it is:

$(".comments").mouseover(function() {
$(this).addClass('hover'); })
.mouseout(function() {
$(this).removeClass("over");
});

Now the code is even shorter! I’m guessing you are pretty much in love with jquery right about now so I will leave you two love birds some alone time. I’ll be back with another fabulous article on learning jquery, and this time it’s on animations and all that fun stuff.

 

Categories: JQuery

An easy to use jQuery Tabs plugin

November 22, 2009 Leave a comment

An easy to use jQuery Tabs plugin

jQuery plugin development note – the main application object Over a period of time, I developed a system for developing jQuery plugins . I create a DIV block whose role is being the plugin application placeholder. This placeholder is usually added by the web developer to a location on their webpage where they want that plugin to be displayed. This makes plugin development easier. Defining the jQuery tabs plugin application object:

// Define the application placeholder for jQuery tabs
// The plugin will take care of the rest
<div id = "MyTabbedView"></div>

The plugin’s jQuery object will take the id name of the main application object, which in this case is MyTabbedView. The code will take care of writing the internal display into this application area by itself, so there is no need to write any additional HTML. Note that while the code is working properly, this is a tabbed view example that is limited to one tabbed view area per one initialization call by design. It would be possible to consolidate this code by providing an initialization interface that takes multiple div fields and builds multiple tabbed views on a single web page. Like with other plugins I had written for Authentic Society, this trivial task is up to the web developer implementing my plugin code on their own sites. Now that we have defined the main application object MyTabbedView, it’s time for the next step. Let’s create some content for our tabbed view pages:

// Create 3 pages, each id must be unique
// These id's are conveniently passed to the plugin's initialize function later
// You may place any content you wish into these blocks
<div id = "Page1">Page 1<br/>Description of jQuery Tabs plugin</div>
<div id = "Page2">Page 2<br/>How to use this plugin</div>
<div id = "Page3">Page 3<br/>Download plugin</div>

Initializing and Executing the jQuery Tabs plugin

<script type = "text/javascript">
    // initialize plugin code
    $(document).ready(function() {
 jQuery.Tabs.initialize( "MyTabbedView","300px", "150px",['Description', 'How to Use', 'Download'],                               ['Page1',       'Page2',      'Page3'] );
    });
</script>

We pass the main application placeholder MyTabbedView 

to the plugin Tabs.initialize function. We then pass the horizontal 

and vertical dimensions of our tabbed view respectively: 300px and 150px.

 We then pass two arrays of strings. The first array indicates tabs' names.

 The second array indicates the id's of the pages the tabs link to. 

If you wanted to create more than three tabs, simply extend both of the 

arrays in the same way as demonstrated in the code above, and don't forget

 to specify additional pages with unique id's (Page1, Page2, ... Pagen).

 Final words A tabbed view interface can provide a convenient way to display

 associative information in one place. This jQuery plugin creates a tabbed view 

by taking the minimum parameters required. This plugin can be further improved by 

providing an interface to create multiple tabbed views on one page, but I'll leave 

that up to you. jQuery once again shows how easy it can be to create something as

 complex as a tabbed view with just a few lines of code! Click to see this plugin

 in action:
Categories: JQuery