Dropdown menu in html

 
Drop down menus are the very important things when we design a website. On here we create a very user friendly and light weight drop down menu using html and CSS. You can download the source code that contains html and CSS code.

Download

Drop down menu in html and css
Drop down menu in html and css
DropDown Menu in HTML.zip
2.1 KiB
666 Downloads
Details

You can change the style and appearance of this menu according to you. You can change the height, background color or others appearance. See this Html and CSS code:

HTML Code :

<html>
<head>
    <title>DropDown menu in HTML</title>
    <link href="dropdownmenu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menus">
<ul>
     <li> 
     <a href=''>ABOUT</a>
        <ul>
	<li><a href=''>About Us</a></li> 
	<li><a href=''>Contact Us</a></li> 
	<li><a href=''>Authors</a></li> 
	<li><a href=''>EmailUs</a></li>
        </ul>
     </li>
 
     <li> 
     <a href=''>DEVELOPMENTt</a>  
        <ul>
	<li><a href=''>CSharp language</a></li>
 	<li> <a href=''>Visual Basic .Net </a> </li> 
	<li><a href=''>Visual Basic 6.0</a></li> 
	<li><a href=''>Visual C++</a></li>
	</ul>
     </li>
 
     <li> 
     <a href=''>WEB DEVEL</a> 
        <ul>
	<li><a href=''>ASP.Net</a></li>
 	<li><a href=''>JavaScrip</a></li>
        </ul>
     </li>
 
     </ul>
</div>
</body>
</html>

CSS :

#menus
{
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
}
#menus ul
{
	 margin:0px;
	 padding:0px;
 
 
}
#menus ul li
{
	list-style:none;
	display:inline-block;
	float:left;
	position:relative;
	line-height:30px;
	height:30px;
	background:url(images/navbg7.gif) repeat-x left top;
	width:150px;
	text-align:center;
	behavior: url("csshover3.htc");
}
#menus ul li ul
{
	display:none;
}
#menus ul li a
{
	color:#fff;
	 padding:0px 15px;
	 line-height:30px;
	 text-decoration:none;
	 font-size:12px;
}
#menus a:hover
{
	text-decoration:underline;
}
#menus ul li:hover ul
{
	position:absolute;
	left:0px;
	top:30px;
	display:block;
}
#menus ul li ul li
{
	 width:160px;
	 text-align:left;
	 padding-left:10px;
	 height:30px;
	 overflow:hidden;
	 background:url(images/navbg7.gif) repeat-x left top;
}

Stopwatch using JavaScript

 
Following program can be used to Stopwatch on the webpage like:

<html>
<head>
<title>Untitled Document</title>
 <script language="javascript" type="text/javascript">
var timerID = null;
var timerRunning = false;
var now = new Date();
var hours = 0;
var minutes =0;
var seconds =0
function stopclock ()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
 
function showtime () 
{
if(seconds>=59)
{
seconds=0;
minutes=minutes+1;
}
else
{
seconds=1+seconds;
}
if(minutes>=59)
{
minutes=0;
hours=hours+1;
}
var timeValue =zeroPad(hours,2)+":"+zeroPad(minutes,2)+":"+zeroPad(seconds,2);
document.getElementById("timeDisplay").innerHTML=timeValue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock() 
{
    stopclock();
    showtime();
}
// End -->
function zeroPad(num,count)
{
var numZeropad = num + '';
while(numZeropad.length < count) {
numZeropad = "0" + numZeropad;
}
return numZeropad;
}
    </script>
</head>
 
<body onload="startclock();">
   <h2 style="color: #000000; margin: left;">
                            Processing Time :: <span id="timeDisplay"></span>
</body>
</html>

Show Clock using JavaScript

 
Following program can be used to show digital clock with day on webpage like:

<html>
<head>
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var timerID = null;
var timerRunning = false;
function stopclock ()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
 
function showtime () 
{
 var dayName = new Array ("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
 var monName = new Array ("Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec")
 
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timeValue = "" + ((hours >12) ? hours -12 :hours)
if (timeValue == "0") timeValue = 12;
timeValue += ((minutes < 10) ? ":0" : ":") + minutes
timeValue += ((seconds < 10) ? ":0" : ":") + seconds
timeValue += (hours >= 12) ? " PM" : " AM"
//document.clock.face.value = timeValue;
document.getElementById("timeDisplay").innerHTML="&nbsp;<b>" + dayName[now.getDay()] + ", " + monName[now.getMonth()] + " 
 
"+now.getDate() + " " +  timeValue + "</b>";
 
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock() 
{
    stopclock();
    showtime();
}
// End -->
 
</script>
 
</head>
 
<body onload="startclock();">
<b  style="color:#000000; font-size:medium; font-family:Verdana; font-weight:bold">Clock Time</b>:: 
<span id="timeDisplay" style="color:#000000; font-size:medium; font-family:Verdana; font-weight:bold"></span>
</body>
</html>

Validate URL starts with http: in javascript

 
Regular expression for validating url that starts with http: in JavaScript such as http://www.authorcode.com.

   <html>  
      <head>  
          <script type="text/javascript">  
          var reg = /^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?$/;  
          function URLValidation(url)
          {  
            var OK = reg.exec(url.value);  
            if (!OK)  
              window.alert("URL isn't  valid");  
            else  
              window.alert("URL is  valid");  
          }  
        </script>  
      </head>  
 
      <body>  
        <p>Enter your url address then press Enter.</p>  
        <form action="">  
          <input name="txturl" onchange="URLValidation(this);">  
        </form>  
      </body>  
    </html>

Regular expression to check the currency upto 2 digit in JavaScript

 
Regular expression to check the currency upto 2 digit in JavaScript such as 34, 45.45, 567.45 etc.

    <html>  
      <head>  
          <script type="text/javascript">  
          var reg = /^\d+(\.\d\d)?$/;  
          function CurrencyValidation(Currency)
          {  
            var OK = reg.exec(Currency.value);  
            if (!OK)  
              window.alert("Currency isn't  valid");  
            else  
              window.alert("Currency is  valid");  
          }  
        </script>  
      </head>  
 
      <body>  
        <p>Enter your Currency up to two decimal numbers and then press Enter.</p>  
        <form action="">  
          <input name="txtCurrency" onchange="CurrencyValidation(this);">  
        </form>  
      </body>  
    </html>

Check all checkbox in gridview

 
if you want to check or uncheck all checkboxes of a particular column in a GridView control in asp.net, you can do this using JavaScript. this example shows that when you check checkbox on the header then all checkboxes control will be check

In this example we are using TemplateField inside the GridView control and put a CheckBox in the ItemTemplate as well as another CheckBox in the HeaderTemplate of the TemplateField, see this:

<asp:GridView ID="grdListUser" runat="server" Width="43%">
 
                        <Columns>
                            <asp:TemplateField>
                                <HeaderTemplate>
                                    <asp:CheckBox ID="chk_checkall" runat="server" Checked="false" 
                                        onclick="SelectAll(this);" Text="All" />
                                </HeaderTemplate>
                                <ItemTemplate>
                                    <asp:CheckBox ID="statusCheck" runat="server" />
                                    <asp:HiddenField ID="checkid" runat="server" Value='<%# Eval("Check") %>' />
                                </ItemTemplate>
                                <ItemStyle HorizontalAlign="Left" />
                                <HeaderStyle HorizontalAlign="Left" />
                            </asp:TemplateField>
 
                 </Columns>
 </asp:GridView>

Add this code on the load event of the page for binding gridview control:

Dim dt as new DataTable()
dt.columns.Add("UserName")
dt.Rows.Add()
dt.Rows(0).Item(1)="Ankur"
dt.Rows.Add()
dt.Rows(0).Item(1)="Author"
dt.Rows.Add()
dt.Rows(0).Item(1)="John"
grdListUser.DataSource= dt
grdListUser.Databind()

Add this JavaScript in the page’s head section:

<script language="javascript" type="text/javascript">
        function SelectAll(obj) {
            var CheckValue = obj.checked;
 
            var objCheckBoxes = document.getElementsByTagName("input");
            if (!objCheckBoxes)
                return;
            var countCheckBoxes = objCheckBoxes.length;
 
            if (countCheckBoxes == 1) {
 
                if (objCheckBoxes.name.indexOf("grdListUser") >= 0 && objCheckBoxes.name.indexOf("statusCheck") >= 0)
                    objCheckBoxes.checked = CheckValue;
            }
            else {
                // set the check value for all check boxes
                for (var i = 0; i < countCheckBoxes; i++)
                    if (objCheckBoxes[i].type == "checkbox")
                        if (objCheckBoxes[i].name.indexOf("grdListUser") >= 0 && objCheckBoxes[i].name.indexOf("statusCheck") >= 0)
                            objCheckBoxes[i].checked = CheckValue;
            }
        }
</script>

Truncate values from multiline textbox after fix length in javascript

 
Truncate values from multiline textbox after fix length in javascript or How to truncate a string to a certain number of characters,

Example

Suppose you need to update a textbox with a description. Any description over 10 characters is truncated to 10.

<html>
<head> <script language="JavaScript">
 
    function maxtitle(txt,maxlength)
      { 
        if(txt.value.length > (maxlength-1))
          { 
            txt.value = txt.value.slice(0,maxlength);
            return false;
          }
      } 
    </script></head>
  <body>
 
    <form name=form1>
    Enter Name:
    <input type="text" name="txtNumber1" onkeyup="return maxtitle(this,10);">
 
    </form>
  </body>
</html>