H I O X INDIA
FREE Javascript
 HOME  ||  Scripts  ||  Purchase  ||  Tutorials  ||  Images  ||  Tools  ||  Templates 
  :-)  Send Page   :-)   Feedback   :-)   Register   :-)   Links   :-)   Support   :-)
Español Français 中文 Deutsch Portuguese Japanese தமிழ்
 Forums   Hosting   Internet Stats   Easy Calculation   FUN Games 

Java Script Source
List All
Date & Time
Calendar
Stop Watch script
Slide Show
Ad Display
Animated Image Effects
Image Effect
Mouse Effects
Color Picker Tool
Dynamic Color
Random Generator
Select All
Form Validation
Formatting Forms
Textbox Counter
Dynamic Form select
Bookmark
Window / User Info
Pagination
Security / Authenticate
Status Bar
Title Bar
Cursor Position
Country List
Calculators
Delete Repeated Values
Alphanumeric
Free Games





Tagination script


About
This javascript will help you for navigating menus. When you click on a specific menu its content gets displayed on the same page without reloading. The tabination links are automatically created for every request. This script is ideal for showing multi-page contents without reloading the rest of the page each time.


Features
a) By using this javascript, we can create navigation menus.
b) Supports the tabination of multiple menus on the same page.
c) Easy to customize.
d) Flexibility in rendering tabination links.
e) Just copy the code and use it into your page.

Preview
Menu 1 Menu 2 Menu 3
Catbirds produce a wide variety of sounds including cat-like barks.



Code
Javascript Code
 <!-- Script by hscripts.com -->
 <!-- Copyright of HIOXINDIA -->
 <!-- More scripts @www.hscripts.com -->
 <script type="text/javascript">
var arr=new Array('img1','img2','img3');
var arr1=new Array();
  //set the number of menu
 var cnt=3;
 var tt;
Array.prototype.inArray = function (value)
{
// Returns true if the passed value is found in the
// array. Returns false if it is not.
var i;
for (i=0; i < this.length; i++) 
{
        if (this[i] == value) 
        {
        return true;
        }
}
return false;
};
function Show(Click_Menu)
{
    tt=Click_Menu.id;
    for(i=1;i<=cnt;i++)
    {
        var tmp="display"+i;
        if(tmp==tt)
        {
           if(Click_Menu.style.display=="none")
           {
              Click_Menu.style.display="";
           }  
        }
        else
        {
            document.getElementById(tmp).style.display ="none";
        }
    }
}
function change_color(iid)
{
   arr1.splice(0,arr1.length); 
    for(var i=0;i<=arr.length;i++)
     {
          if(arr[i]==iid) {      
          }
         else
         {
            if(arr.inArray(arr[i]))
                arr1.push(arr[i]);
         }
      }    
      document.getElementById(iid).style.backgroundColor="#008000";
       for(var i=0;i<arr1.length;i++)
       {
          document.getElementById(arr1[i]).style.backgroundColor="#8AC452";   
       }
}
function disp()
{
    document.getElementById('display1').style.display="";
    document.getElementById('display2').style.display="none";
    document.getElementById('display3').style.display="none";
}
function ctck()
{
    var sds = document.getElementById("dum");
    if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
    var sdss = document.getElementById("dumdiv");
    if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
}
</script>
<!--   Script by hscripts.com    -->


HTML Code
  <!-- Script by hscripts.com -->
  <!-- Copyright of HIOXINDIA -->
  <!-- More scripts @www.hscripts.com -->
  <body onload='disp()'>
  <table width=250 cellspacing=0 cellpadding=0><tr>
  <td><a id="img1" href="javascript:Show(display1);javascript:change_color('img1');" style="background-color:#008000;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;"> Menu 1</a>
  <a id="img2" href="javascript:Show(display2);javascript:change_color('img2');" style="background-color:#8AC452;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;">Menu 2 </a>
  <a id="img3" href="javascript:Show(display3);javascript:change_color('img3');" style="background-color:#8AC452;text-decoration:none;color:white;border:1px solid navy;padding-left:10px;padding-right:9px;font-family:arial,verdana;font-size:12px;">Menu 3</a>
  </td></tr>
  <tr><td>
  <span id="display1">
  <table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
  <tr><td>
  <img src="htabination/images/catbird.gif"></td>
  <td>Catbirds produce a wide variety of sounds including cat-like barks.</td>
  </tr>
  <tr><td colspan=2>
  <div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
  <a href="http://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
  </div>
  </table>
  </span>
  <span id="display2" style="display:none">
  <table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
  <tr><td>
  <img src="htabination/images/loon.jpg"></td>
  <td>The common loon is one of the earth's oldest living bird species.</td>
  </tr>
  <tr><td colspan=2>
  <div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
  <a href="http://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
  </div>
  </table>
  </span>
  <span id="display3" style="display:none">
  <table height=150 width=190 cellspacing=0 cellpadding=0 bgcolor="#FFFFCC" style="font-family:arial,verdana;font-size:13px;border:solid 1px navy;">
  <tr><td>
  <img src="htabination/images/indigo.gif"></td>
  <td>The Indigo Bunting communicates through vocalizations and visual cues.</td>
  </tr>
  <tr><td colspan=2>
  <div align=center style="font-size: 10px; color: #dadada;" id="dumdiv">
  <script language="javascript">document.onload = ctck();</script>
  <a href="http://www.hscripts.com" id="dum" style="text-decoration:none; color: #dadada;">© hscripts.com</a>
  </div>
  </table>
  </span>
  </td></tr>
  </table>
 <!--   Script by hscripts.com    -->
  


Downloads Version 1.0 - tabination.zip

Release Date - 27-08-2008

Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com


Usage
a) This script is used for tabination without refreshing and also for creating navigation menu.
b) Unzip the tabination.zip, extract the tabination.html file to execute.
c) Add any number of menus as you wish.
d) Set the count(cnt) value, which is equal to number of menus added.
e) Right click and save the images.
f) For example, If you add 5 menus then set the count value to 5.
Example:
<a href="javascript:Show(display4)">Menu4</a>
In Show() function pass the id of an span tag as an argument.
<span id="display4">
//Give the content
</span>
g) The contents gets changed dynamically according to the navigation menu selection without refresh.


License
- This javascript (misspelled as java script)/HTML code is given under GPL License
- i.e. Free use for those who use it as it is.
- Free, if your modification does not remove our copyright information and links.
- Detailed License information can be found here
- You can purchase the script if your requirements does not meet GPL License terms.


privacy policy     license     sitemap
© 2004-2010 HIOX INDIA

Others