Easy Carousel slider using bxslider

<script src=”http://code.jquery.com/jquery-latest.js&#8221; type=”text/javascript”></script>
<script src=”https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js&#8221; type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#slider1’).bxSlider({auto:true});
});
</script>

<div id=”slider1″>
<div>Slide one content</div>
<div>Slide two content</div>
<div>Slide three content</div>
<div>And so on…</div>
</div>

Advertisements

Jquery for Tooltip

There is simple example shows for the tooltip. This example generally for the jquery beginner. This initial example after this you can be modify this to our basic purposes. The tooltip is use for in various part of the website.

1. In forms on the elements

2. On the href Url

 

Now we start the code

Step 1 : Put the below query files in the head section of the html file.

<html>
<head>
<meta charset=”utf-8″ />
<title>Jquery Tooltip</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />

</head>

Step 2 : Now need to put the script for execution of the  tooltip on mouse over.

<script>
$(function() {
$(“#demo”).tooltip();
});
</script>

Presently it’s script for the working on the demo div. If you want the put tooltip on complete file then just put the document in instead of demo $(“#demo”).tooltip();  -> $(document).tooltip();

 

Step 3 : Now putting the final html code.

</head>
<body>
<div id=”demo” style=”width:500px”>
<p><a href=”#” title=”That’s what this widget is”>For Test mouse Over me</a>
<p><label for=”age”Your age:</label><input id=”age” title=”We ask for your age only for statistical purposes.” /></p>

</div>
</body>
</html>

 

Now Final code

<!doctype html>

<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title>Jquery Tooltip</title>
<link rel=”stylesheet” href=”http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css&#8221; />
<script src=”http://code.jquery.com/jquery-1.8.2.js”></script&gt;
<script src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script&gt;
<link rel=”stylesheet” href=”/resources/demos/style.css” />
<script>
$(function() {
$(“#demo”).tooltip();
});
</script>

</head>
<body>
<div id=”demo” style=”width:500px”>
<p><a href=”#” title=”That’s what this widget is”>For Test mouse Over me</a>
<p><label for=”age”Your age:</label><input id=”age” title=”We ask for your age only for statistical purposes.” /></p>

</div>
</body>
</html>

 

Result Screen Shot

 

 

Post a form field using jquery

Step: 1 Create a Form

<form id=”Test_form”>

Name:<input type=”text” name=”name” onsubmit=””>

Age:<input type=”text” name=”name”><br>

<div id=”result”></div>

<input type=”submit” value=”Submit” />

</form>

Step: 2 Now javascript code

<script type=”text/javascript”>

function send()

{

$.ajax({type:’POST’, url:’path_file_processing’, data:$(“#form_id”).serialize(), success:function(response){alert(response);}});

}

</script>

It will perfectly