Tuesday, March 20, 2012

Simple jquery tab navigation

The code below creates very simple tabbed interface with plain HTML, CSS and jquery -

The jQuery

$('.theTabs li:first').addClass('selectedTab');
$('.theTabs li a').click(function(){    
    $('.theTabs li').removeClass('selectedTab');   
    var currentTab = $(this).attr('href');    
return false;



<ul class="theTabs">                       
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>

<div id="tab-1" class="tabsContent">
    Tab 1
<div id="tab-2" class="tabsContent">
    Tab 2
<div id="tab-3" class="tabsContent">
    Tab 3


    font-weight: bold;
.theTabs li{
    float: left;
.theTabs li a{
    display: block;
    padding: 6px 0;
    display: none;
    background: red;

Monday, March 19, 2012

jquery substring text with dots

Here is the code snippet to Substring text using jquery -

    if ($(this).text().length > 24) {           
        $(this).text($(this).text().substr(0, 24));

Wednesday, March 14, 2012

Input type text element width auto resize

A small jquery function helps us making the text field resize automatically with width auto -

function resizeInput() {
    $(this).attr('size', $(this).val().length+2);