Tab Control in one line of jQuery

How to create a Tab Control, people ask me this question so many times. So finally I have decided to post its simple solution here. This is very easy task. Lets understand.

We need tabs Title in <UL>, <LI> title. something like below:

 

 <!--This is Tab Control UL-->  
 <ul class="tab">  
      <li>Tab1</li>  
      <li>Tab2</li>  
      <li>Tab3</li>  
 </ul>  

Below is Tab Content UL, we have to strore data here

 <!--this is Tab Content UL, we have to strore data here-->  
 <ul class="tabContent">  
   <li style="display: block;">This text for Tab 1,<br />111 111 111</li>  
   <li>This text for Tab 2,<br />222 222 222</li>  
   <li>This text for Tab 3,<br />333 333 333</li>  
 </ul>   

Now add Below CSS: to give proper alignment.

 <style type="text/css">  
      .tab{position: relative;}  
      .tab li{list-style: none;float: left;border: solid 1px blue;padding: 10px;cursor: pointer;}  
      .tab li:hover{background-color: #c5c5c5;}  
      .tabContent{position: relative;clear: both;float: none;}  
      .tabContent li{list-style: none;position: absolute;height: 100px;width: 300px;display: none;border: solid 1px blue;}  
 </style>  

Now it will look properly as TAB control, but still we need to add jQuery to give activate the TAB controls.

 <script language="javascript" type="text/javascript">  
 $(document).ready(function () {  
      $('.tab li').click(function () {  
           ///Hide Old content  
           $('.tabContent li').fadeOut();  
           ///Show related content   
           $('.tabContent li:eq(' + $('li', $(this).parent()).index(this) + ')').fadeIn();  
      });  
 });  
 </script>  

How easy tab controls is!

Peace

Read More

Google Map Advance Search by Radius

Google map allows us to create radius in its map, user will drag and drop that radius in different location and he will able to show only those pointers which are search result in his selected criteria.
Visit this example : http://maps.forum.nu/gm_sensitive circle2.html to create radius in Google map.

Now we can get new updated radius value from JavaScript function.
We have to pass that amount to SQL Server stored procedure Below is that sql :

    CREATE PROCEDURE uspAddress_GetByRadius
        @Latitude        decimal(10,8)
        ,@Longitude        decimal(10,8)   
        ,@Radius        decimal(5,3)
    AS
    BEGIN

        DECLARE @R decimal(18,10)
        SET @R = PI()/180

        SELECT
              ACOS((SIN(@Latitude*@R)* SIN(Latitude*@R)) + (COS(@Latitude*@R)* COS(Latitude*@R) * COS(Longitude*@R - @Longitude*@R))) * 6378.137 AS Distance
              ,A.*
        FROM
              (SELECT
                     CONVERT(decimal(10,8), SUBSTRING(LMapCoordonates, 0, CHARINDEX(',',LMapCoordonates))) as Latitude
                    ,CONVERT(decimal(10,8), SUBSTRING(LMapCoordonates, CHARINDEX(',',LMapCoordonates) + 1, 100)) as Longitude
                    ,tblAddress.*
              FROM tblAddress) AS A
        WHERE      
            ACOS((SIN(@Latitude*@R)* SIN(Latitude*@R)) + (COS(@Latitude*@R)* COS(Latitude*@R) * COS(Longitude*@R - @Longitude*@R))) * 6378.137 <= @Radius
    END

We will apply Google map’s new Latitude and Longitude value and radius area to the sql server’s stored procedure and it will return only those records which are satisfy that criteria.

Read More

jQuery 1.3 Cheat Sheet

Download jQuery 1.3 Cheat Sheet from http://oscarotero.com/jquery/

it is also link to its example.

Read More

Open ThickBox dialogbox without “HREF”

I have seen many times that Thickbox normal works with <a href=””></a> syntax,

Ex :

Inner Page Content Syntex :

<a href="#TB_inline?height=200&width=200&inlineId=hiddenModalContentID&modal=true"
class="thickbox">Click here to show hidden modal content.</a>

IFrame Syntex :

<a href="testPage.aspx?keepThis=false&TB_iframe=true&height=200&width=200"
title="saActionPage" class="thickbox">Click here</a>   

But what happen when you need to open ThickBox by click event? Here is its solution.

You can to use same syntax of HREF  with “tb_show” function.

Ex :

<script language="javascript" type="text/javascript">

    function showTB()  {

       var newURL = "#TB_inline?height=200&width=300&inlineId=hiddenModalContentID";

        tb_show("ThickBox Title Here", newURL);

    }

</script>

It means you can also open thick box by any other event also.

Read More

Search Google Map Location by Address

Normally we have to pass Latitude and Longitude to get location, but Using Google API “geocoder.getLatLng()” we can get location by passing address. thanks to one of my friend Dhiren Javia to find this solution for me.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>Google Maps API Example: Simple Geocoding</title>

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script>

    <script type="text/javascript">

        var map = null;
        var geocoder = null;

        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(22.18, 70.56), 4);
                geocoder = new GClientGeocoder();
            }
        }

        function showAddress(address) {
            if (geocoder) {
                geocoder.getLatLng(
                address,
                function(point) {
                    if (!point) {
                        alert("Location not found : " + address);
                    } else {
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(address);
                    }
                }
                );
            }
        }

        showAddress(this.address.value);
    </script>

</head>
<body onload="initialize();" onunload="GUnload()">
    <form action="#" onsubmit="showAddress(this.address.value); return false">
    <p>
        <input type="text" size="60" name="address" value="Rajkot" />
        <input type="submit" value="Go!" />
    </p>
    <div id="map_canvas" style="width: 500px; height: 300px">
    </div>
    </form>
</body>
</html>

Read More

Thumbnail image zoom to original perview using JavaScript

Let create cool JavaScript thumbnail zoom effect.

The concept is that there will be thumbnail on page user can see it and original image will be hidden at the same time and when user rollover on that thumbnail hidden main image will smoothly resize on the same place.

<script src="thumbscreen.js" type="text/javascript"></script>

<div>

<img src="saAction Real.jpg" alt="saAction" id="screen1" 
onmouseout="reducethumb(1); return false;" style="position: absolute;
display: none;" width="240" border="0" height="269">

<img src="saAction Thumb.jpg" alt="saAction" id="thumb1" 
onmouseover="expandthumb(1, 500, 300);">

</div>

Settings :

Thumbnail Image

• id must be "thimbN", N means number example : thumb1, thumb2 etc.
• add "onmouseover" event and cell "expandthumb" function
• "expandthumb" have three arguments (thumbnail ID last number, main image width, main image height)

Mani Image

• id must be "screenN", N means number example : screen1, screen2 etc.
• Style="display:none;"
• add "onmouseout" event and cell "reducethumb" function
• "reducethumb" function take one argument (main image ID last number)
  

thats all when you will mouse over on thumbnail it will show main mage on same plase with smooth scrool effect.

Isn't it cool download demo.

Read More