Thursday, 21 May 2015

Auto Suggest Java Script File


Most of the Web Designers are really suffering to find an easy way to input javascript tools into their pages. One of the best tool is the auto suggestion like we see in google search box which automatically display matching items that may be what we are searching for. Most of the script files found today are very difficult to understand and use. So I've created a Javascript file to help you achieve the autosuggestion very easily. In this Javascript method the suggestion are added as items in a list. You can apply css style to it to customize and make it better.

The basic syntax is very simple:

 autoSuggest(input_selector,list_id,max_suggestion,data_array);
  • input_selector: selector for the input type to which autosuggest is to be enabled.
  • list_id : id of the list which holds suggestions.
  • max_suggestion: maximum no. of suggestions to appear.
  • data_array: The array which holds the suggestions.

Note:The data_array takes the value 'default' and the suggestion are taken from an inbuilt dictionary.

Example:

Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="autoSuggest.js"></script>
<script>
 ARR = ['apple','ball','cup','dog','engine','food','ginger','hook','ink','joker','kite'];
 autoSuggest('#sText','autoC',10,ARR);
</script>
</head>

<body>
<input id='sText' type='search'/>
<ul id='autoC'>
 <li><a>Hai</a></li>
</ul>
</body>
</html>

Output:

Download the file :
Download

Link to your website using the code snippet: 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="https://googledrive.com/host/0B9LZUJ9ROeSrb2VCUHpqNk9SY1E" type="text/javascript"></script>

Tuesday, 5 May 2015

Sunday, 3 May 2015

Creating a Dropdown Navigation Bar Using just HTML and CSS


 

First of all start with the html

Create the basic syntax

<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Drop down Navigation Bar</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>

Create the Navigation Bar

Inside the body element add the following code:
 <div class='navBar'>
 <ul>
 <li><a href="#">Home</a></li>
    <li><a href="http://shuttereditz.blogspot.com">Shutter</a></li>
    <li><a href="#link1">Link</a></li>
    <li><a href="#dropdown">Dropdown</a>
     <ul class='dropDown'> <!--the drop down menu -->
         <li><a href="http://www.facebook.com/shuttereditz">Facebook</a></li>
            <li><a href="#sub1">Sublink</a></li>
            <li><a href="#sub2">Sublink</a></li>
            <li><a href="#sub3">Sublink</a></li>
        </ul>
    </li>
 </ul>
 </div>

Now create the css

Inside the style tag add the following css code.
.navBar {
 display:block;
 padding:0;
 clear:both !important;
}
.navBar ul{
 list-style-type:none !important;
 display:inline-block !important; /*Removes the indent*/
 margin:0;
 padding:0;
 border-bottom:3px solid #A80059;
 background:#EDEDED;
}
.navBar ul li{
 float:left; /*align the links towards left in navBar Since it is Horizontal*/ 
 display:block;
 transition-duration:1s; /*CSS3 transition effect*/
}

Designing the Navigation links

To Design our navigation links add the following css.
.navBar ul li a{
 display:block;
 padding:5px;
 text-align:center;
 min-width:100px;
 height:30px;
 font-variant:small-caps;
 font-weight:bold;
 text-decoration:none; /*Removes Underline*/
 color:#292929;
 transition-duration:1s;
}
/*You can also give the font-family or any other css styles into this*/

.navBar li:hover >a{
 color:#fff;
 background:#A80059;
}

Creating Dropdown Effect

Let's Create the dropdown effect now. To do this add the following css.
.navBar ul.dropDown {
 height:0px; /*The height and */
 opacity:0; /* the opacity is used to hide the dropdown menu*/
    /*You can also use*/
    /*display:none;*/
    /*but this will alter your transition effect*/
 overflow:hidden !important;/*This also plays a major role in hiding the dropdown*/
    /*YOu don't need to use this if you are using the display:none; option*/
 position:absolute !important; /*This will make the dropdown menu to float over the rest of the web page*/
 transition-duration:1s;
}
.navBar ul.dropDown li{
 float:none !important;/*Removes the float from dropdown menu*/
}
.navBar li:hover >.dropDown{
 height:auto; /*Makes the dropdown menu visible on hovering the list item*/
 opacity:1; /*If you are using display:none; option change this to */
    /*display:inline-block;*/
}
Your Navigation bar is ready Enjoy...
DEMO PDF
Subscribe to: Posts (Atom)