Javascript Essentials Part 3

I have selected some very very essential scripts based on javascript which are widely and mostly used in everyday website. I have been also using these for years and it seems like these will never get old and will be always wanted by web developers. I started a series of Javascript Essentials and this is the third episode regarding that. Hope everybody will find these extremely useful.

I will answer to the following most wanted requirements in javascript here:

  • Tab Content Script – Switching Menu Like Yahoo
  • External JS Switcher
  • Jump Menu Switching
    (Radio buttons select and jump menu content changes)
  • Right Click Menu-IE5.5+
  • Featureless Window – Pop up window with custom properties
  • Button Pop-Up
  • Pop-Up – Body Based
  • Pop-Up Using Head and Body of Web page
  • Pop-Up window maker
  • Pop-Up Box – On Load – Cross Browser
  • Focus (Window Focus)
  • Jump to Top Sliding Scrolling Button

Tab Content Script – switching menu like yahoo

Head CSS Section
<style type="text/css">
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
#tablist li{
list-style: none;
display: inline;
margin: 0;
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;
#tablist li a:link, #tablist li a:visited{
color: navy;
#tablist li a.current{
background: lightyellow;
width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;
</style> <script type="text/javascript">
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
if (previoustab!="")
if (aobject.blur)
return false
return true
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
for (i=0; i<tabobjlinks.length; i++)
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor"tabcontentcontainer").style.backgroundColor=themecolor
function collecttablinks(){
var tabobj=document.getElementById("tablist")
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
Body Section
<ul id="tablist">
<li><a href="" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>
</ul> <DIV id="tabcontentcontainer">
<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
<div id="sc2" class="tabcontent">
Visit our <a href="">What's New</a> section to see recently added scripts to our archive.
<div id="sc3" class="tabcontent">
Visit our <a href="">Hot</a> section for a list of DD scripts that are popular to the visitors.
<div id="sc4" class="tabcontent">
<form action="" method="get" onSubmit="this.q.value=' '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>

Script Home Page