Three2Tango » JQuery http://www.three2tango.com Points To Ponder : The Latest news from the TechWorld,Automobiles,CellPhones and lots of useful Code Snippets Fri, 27 Jan 2012 09:03:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Simple Hover Effect Using JQuery http://www.three2tango.com/techcorner/simple-hover-effect-using-jquery.html/ http://www.three2tango.com/techcorner/simple-hover-effect-using-jquery.html/#comments Sun, 05 Jul 2009 06:29:45 +0000 Vivek http://www.three2tango.com/?p=1811 This time we will study about how to bring about a hover effect on an object using JQuery.We will create a menu like structure using basic html and show hover effects on the menu on which the mouse is hovered on.View Demo

Fist we create the basic HTML for this.Here is the basic HTML we will be using

<html>
<head>
<title>Simple Slide Panel Using jQuery</title>
</head>
<body>
<form id="myform">
<div>
JQuery is a JavaScript library that emphasizes interaction
between JavaScript and HTML.
</div>
<div>
JQuery simplifies the use of JavaScript and also can
enhance your web application by adding a lot of
professionalism and usability.
</div>
<div>
It is a great tool for webmasters as JQuery is SEO
friendly too,which makes it a better option than Flash.
</div>
<div>
JQuery exists as a single JavaScript files which
contains the DOM,Events,effects and Ajax functions
</div>
</form>
</body>
</html>

Now we will add some CSS styling.For actually distinguishing between the hovered mode and the normal mode,we need to stylize them in two different styles.Here is the CSS code i have applied.

<style type="text/css">
.pane{
height:100px;
width:200px;
color:#FFFFFF;
border-color:#FFFF00;
border-style:groove;
background-color:#000000;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.paneHover{
cursor:hand;
height:100px;
width:200px;
color:#FFFFFF;
border-color:#000000;
border-style:inset;
background-color:#FF6633;
text-align:center;
margin-left:auto;
margin-right:auto;
}
</style>


Ok,now we can apply the JQuery script to our page.What we will be doing is add the “paneHover” class when the mouse is over the particular div and remove the “paneHover” class when the particular div is returned to normal mode.Again we are using the minified version of the JQuery script here.Here is the JQuery script.

<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pane").hover(function()
{
$(this).addClass("paneHover");
},
function()
{$(this).removeClass("paneHover");}
);
});
</script>

Download Simple Hover Effects Source

]]> http://www.three2tango.com/techcorner/simple-hover-effect-using-jquery.html/feed/ 0 Disappearing Panel using JQuery http://www.three2tango.com/techcorner/disappearing-panel-using-jquery.html/ http://www.three2tango.com/techcorner/disappearing-panel-using-jquery.html/#comments Sat, 04 Jul 2009 06:18:49 +0000 Vivek http://www.three2tango.com/?p=1791 We continue our JQuery tutorial by making a div disappear using JQuery.The basic html and CSS is similar to the one we used in the Simple Slide Panel.Anyway i am  repeating the steps.View Demo

Fist we create the basic HTML for this.For the purpose of styling the button,i have replaced it with another div.We will however make the div look like a button using CSS.Here is the basic HTML we will be using

<html>
<head>
<title>Simple Slide Panel Using jQuery</title>
</head>
<body>
<form id="myform">
<div id="pane">
This is an example of Sliding Panels using JQuery.
You are viewing this at three2tango.com.
JQuery is a JavaScript library that emphasizes interaction
between JavaScript and HTML.JQuery simplifies the use of JavaScript
and also can enhance your web application by adding a lot of professionalism
and usability.It is a great tool for webmasters as JQuery is SEO friendly
too,which makes it a better option than Flash.JQuery exists as a single
JavaScript files which contains the DOM,Events,effects and Ajax functions
</div>
<div id="mybutton">
Click Here!!
</div>
</form>
</body>
</html>


Now we will add some CSS styling to the above created elements to make it look better.Here is the CSS code i have applied.Again i am assuming that you are comfortable using CSS.You might be able to do much better as i am not really a good designer myself.Anyways,here is my code.

<style type="text/css">
#pane{
height:120px;
width:700px;
color:#FFFFFF;
background-color:#000000;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.btn_disappear{
border-style:inset;
border-color:#FFFFFF;
background-color:#000000;
color:#FFFFFF;
height:25px;
width:100px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>

Ok,now we can apply the JQuery script to our page.What we will be doing is animating the opacity of the div with id=”pane” to “hide” when the div with is clicked.Again we are using the minified version of the JQuery script here.Here is the JQuery script.

<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn_disappear").click(function()
{
$("#pane").animate({opacity:"hide"},"slow");
});
});
</script>

In addition if you want to show the disappeared panel,you can use the following code.All it does is making the opacity=”show”

$("#pane").animate({opacity:"show"},"slow");

Download Simple Disappearing Panel Source

]]> http://www.three2tango.com/techcorner/disappearing-panel-using-jquery.html/feed/ 0 Simple Slide Panel Using JQuery http://www.three2tango.com/techcorner/simple-slide-panel-using-jquery.html/ http://www.three2tango.com/techcorner/simple-slide-panel-using-jquery.html/#comments Fri, 03 Jul 2009 06:06:00 +0000 Vivek http://www.three2tango.com/?p=1777 We continue our JQuery tutorial by creating a simple slide panel using JQuery.What we are trying to do is to toggle a div up/down on button click.View Demo

Fist we create the basic HTML for this.For the purpose of styling the button,i have replaced it with another div.We will however make the div look like a button using CSS.Here is the basic HTML we will be using

<html>
<head>
<title>Simple Slide Panel Using jQuery</title>
</head>
<body>
<form id="myform">
<div id="pane">
This is an example of Sliding Panels using JQuery.
You are viewing this at three2tango.com.
JQuery is a JavaScript library that emphasizes interaction
between JavaScript and HTML.JQuery simplifies the use of JavaScript
and also can enhance your web application by adding a lot of professionalism and usability.It is a great tool for webmasters as JQuery is SEO friendly too,which makes it a better option than Flash.JQuery exists as a single JavaScript files which contains the DOM,Events,effects and Ajax functions
</div>
<div id="mybutton">
Click Here!!
</div>
</form>
</body>
</html>


Now we will add some CSS styling to the above created elements to make it look better.Here is the CSS code i have applied.Again i am assuming that you are comfortable using CSS.You might be able to do much better as i am not really a good designer myself.Anyways,here is my code.

<style type="text/css">
#pane{
height:120px;
width:700px;
color:#FFFFFF;
background-color:#000000;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.btn_slide{
border-style:inset;
border-color:#FFFFFF;
background-color:#000000;
color:#FFFFFF;
height:25px;
width:100px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>

Now you will get something like this

screenshot

Ok,now we can apply the JQuery script to our page.What we will be doing is that we toggle the div with id=”pane” up/down when the div with class “btn_slide” get clicked.Here is the JQuery code to do
this.Again we are using the minified version of the JQuery script here.

<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn_slide").click(function()
{
$("#pane").slideToggle("slow");
});
});
</script>

Download Simple Sliding Panel Source

]]> http://www.three2tango.com/techcorner/simple-slide-panel-using-jquery.html/feed/ 3 Simple JQuery Tabs http://www.three2tango.com/techcorner/simple-jquery-tabs.html/ http://www.three2tango.com/techcorner/simple-jquery-tabs.html/#comments Fri, 26 Jun 2009 10:09:53 +0000 Vivek http://www.three2tango.com/?p=1664 We will now create a simple tabbed interface using JQuery and html/CSS.I hope everyone knows what a tabbed interface is.So i guess nothing much needed to be told about it else See the Demo

We will start with the basic Html structure used.We are going to create 2 tabs.The tabs list is shown by using an unordered list.We are making the list inlne so that it may be displayed inline.Aslo we add two DIVs,one for each tab link.Here is the basic HTML  structure and CSS of the tabbed interface

<html>
<head>
<style type="text/css">
#tabs{
margin:20 px 0;
}
#tabs ul {
float: center;
background: #003333;
height:25px;
width: 150px;
padding-top: 4px;
}
#tabs ul li {
float: left;
margin-left: 2em;
}
#tabs ul li a{
text-decoration:none;
color:#FFFFFF;
font-weight:bold;
}
#tabs ul li.active{
background-color:#669999;
}
#tabs div{
min-height:200px;
padding:20px;
width:150 px;
margin-top:2px;
background-color:#339966;
}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li><a href='#Tab1'>Tab 1</a></li>
<li><a href="#Tab2">Tab 2</a></li>
</ul>
<div id="Tab1">
<p>Contents in Tab1 </p>
</div>
<div id="Tab2">
<p>Contents in Tab2</p>
</div>
</div>
</body>
</html>



Now we need to add the JQuery code to make the tabbed interface work so that only the tab whose link has been clicked is shown visible.First we need to show the first tab as active when the page is loaded for the first time.For this we add the following JQuery code

$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

Now having made the first tab visible,we will change the active tab depending on which link has been clicked.In the click() function of the link,we first remove the active class from all links.Then we add the active class to the link that has been clicked.Now we assign to a variable,the value of the href attribute of the active link.Finaaly,we show the active tab using the variable to which the active tab was assigned.That’s all.Here is the click() function

$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs div').hide();
$(selectedTab).show();
return false;
});

The complete JQuery code

<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('#tabs div').hide();
$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');
$('#tabs ul li a').click(function(){
$('#tabs ul li').removeClass('active');
$(this).parent().addClass('active');
var selectedTab=$(this).attr('href');
$('#tabs div').hide();
$(selectedTab).show();
return false;
});
});
</script>

I am really not good at designing.So the tabbed structure you find here will be very ugly looking.You can add better CSS structures to enhance the structure.
Download the Tab Files

]]> http://www.three2tango.com/techcorner/simple-jquery-tabs.html/feed/ 0 Accordion Menu using JQuery http://www.three2tango.com/techcorner/accordion-menu-using-jquery.html/ http://www.three2tango.com/techcorner/accordion-menu-using-jquery.html/#comments Thu, 25 Jun 2009 07:15:05 +0000 Vivek http://www.three2tango.com/?p=1634 Earlier i had introduced about JQuery and about how to build a Cascading Menu using JQuery.Here we will create an Accordion menu using JQuery.An accordion provides you with multiple panes,but displaying only one at once. The Menu’s visibility is toggled when the mouse is moved over it.
See Demo
Again we are using the minified version of the JQuery Script file in this example.

Here is the source code for the accordion menu

<html>
<head>
<title>Accordion Menu Using jQuery</title>
<script src=”jquery-1.3.2.min.js” type=”text/javascript” /></script>
<script type=”text/javascript”>
$(document).ready(function()
{
$(“#accordionpane p.menu_head”).mouseover(function()
{
$(this).css({backgroundImage:”url(UpArrow.jpg)”}).next(“div.menu_body”).slideDown(500)

siblings(“div.menu_body”).slideUp(“slow”);
$(this).siblings().css({backgroundImage:”url(DownArrow.jpg)”});
});
});
</script>
<style type=”text/css”>
body {
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {
width: 150px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
color:#FFFFFF;
font-weight:bold;
background: #000000 url(DownArrow.jpg) center right no-repeat;
}
.menu_body {
display:none;
}
.menu_body a{
display:block;
color:#000000;
background-color:#CCCCCC;
padding-left:10px;
font-weight:bold;
text-decoration:none;
}
.menu_body a:hover{
color: #333333;
text-decoration:underline;
}
</style>
</head>
<body>
<div style=”float:left; margin-left:20px;”>
<div id=”accordionpane”>
<p>Car and Bike Corner</p>
<div>
<a href=”#”>Cars</a>
<a href=”#”>Bikes</a>
<a href=”#”>Gearless</a>
</div>
<p>Tech Corner</p>
<div>
<a href=”#”>ASP.NET</a>
<a href=”#”>PHP</a>
<a href=”#”>JavaScript</a>
</div>
<p>The Game</p>
<div>
<a href=”#”>Cricket</a>
<a href=”#”>Formula1</a>
<a href=”#”>MotoGp</a>
</div>
</div>
</div>
</body>
</html>

Download Source

All we do here is toggle the images,that is, the downarrow and uparrow images.When the menu_head is clicked,the image is changed and also the sibling items in the menu list are shown in a sliding manner.

]]> http://www.three2tango.com/techcorner/accordion-menu-using-jquery.html/feed/ 1 Simple Cascading Menu using JQuery http://www.three2tango.com/techcorner/simple-cascading-menu-using-jquery.html/ http://www.three2tango.com/techcorner/simple-cascading-menu-using-jquery.html/#comments Wed, 24 Jun 2009 12:38:29 +0000 Vivek http://www.three2tango.com/?p=1616 Before we go on to learn how to build a cascading menu using JQuery, let me just introduce what JQuery is.
JQuery is a JavaScript library that emphasizes interaction between JavaScript and HTML.JQuery mainly contains the following features

  • DOM element selections,traversals and modifications
  • Events
  • AJAX
  • CSS Manipulations
  • Effects and animations

JQuery simplifies the use of JavaScript and also can enhance your web application by adding a lot of professionalism and usability.It is a great tool for webmasters as JQuery is SEO friendly too,which makes it a better option than Flash

JQuery exists as a single JavaScript files which contains the DOM,Events,effects and Ajax functions.It can be included using the following code
<script src=”jquery-1.3.2.min.js” type=”text/javascript” /></script>

Hence the first thing you must do is to download this JavaScript file.Visit JQuery.com to download the file.There are three versions of Jquery available-the Minified,Packaged and the Uncompressed version.We will be using the minified version in our snippets.

I guess it would be better to show an example to actually get a better understanding of JQuery.So we can move to our first JQuery script. We will create a cascading menu. .The source code is given below. See the demo

<html>
<head>
<title>Cascading Menu Using Jquery</title>
<style type="text/css">
ul
{
list-style:square inside url("arrow.gif");
}

</style>
<script src="jquery-1.3.2.min.js" type="text/javascript" /></script>
<script type="text/javascript">

$(document).ready(function(){
$('#carandbike').click(function(){
$('#carandbikecategory').toggle();<!--the toggle() method is used to show the element when clicked and if it is hidden and to hide if is already visible -->
});

$('#techcorner').click(function(){
$('#techcornercategory').toggle();
});

$('#thegame').click(function(){
$('#thegamecategory').toggle();
});
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<a href="#" id="carandbike">Car and Bike Corner</a><!--'#' is used so that you will remain in the same page-->
<ul id="carandbikecategory">
<li>Bike</li>
<li>Car</li>
<li>Gearless</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="#" id="techcorner">Tech Corner</a>
<ul id="techcornercategory">
<li>ASP.NET</li>
<li>PHP</li>
<li>JavaScript</li>
<li>Tech Talk</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="#" id="thegame">The Game</a>
<ul id="thegamecategory">
<li>Cricket</li>
<li>Formula 1</li>
<li>MotoGp</li>
</ul>
</td>
</tr>
</table>
</body>
</html>

 

To give it a better look,you can apply more CSS.Also we can add parameters to the methods to make it look even better.I am adding the parameter ‘slow’ to the toggle() method.See What happens now-Demo

Just take the source of the page to get the complete code.Happy JQuering folks!!!

]]> http://www.three2tango.com/techcorner/simple-cascading-menu-using-jquery.html/feed/ 0