Header menu

_________________________________________________________________________________

Wednesday 5 March 2014

How to create Fixed left sidebar in html ?


To create a fixed left sidebar in html we need to make its position fixed in css and float left so that sidebar remain left aligned.

 float:left;
 position:fixed; 

These two lines will do the magic for you. To understand more run the below example:
<html>
           <head>
                      <style>
                                 .left-sidebar{
                                                        float:left;
                                                        position:fixed;
                                                        width:200px;
                                                        background-color:#47D7ED;
                                                     }
                                 .left-sidebar p {
                                                         width:700px;
                                                         text-align:justify;
                                                      }
                                 .container1{
                                                        position:relative;
                                                        width:84%;
                                                        background-color:#FFFFFF;
                                                        border:1px solid;
                                                        min-height:1500px;
                                                        height:auto;
                                                        margin-left: 205px;
                                                      }
                         </style>
            </head>
<body>
           <div class='left-sidebar' id='left-sidebar'>
                     <ul>
                            <li id='li-banner'>Banners</li>
                            <li id='li-banner1'>Banners</li>
                           <li id='li-banner2'>Banners</li
                     </ul>
             </div>
             <div id='container' class='container1'>
                      <h1>My Left Side bar is fixed.</h1>
                      <h1>Its not gonna move :)</h1>
             </div>
</body>
</html>


Posted by at No comments:
Labels: ,

Monday 3 March 2014

Highlight/Blink effect using jquery



We often use blink in html to get users attention but it makes our info unreadable and irritating. So today i am sharing a small jquery code which will produce same effect. And can be easily edit according to need.


 function blink(){
      $("#box").fadeTo(100, 0.1).fadeTo(200, 1.0);
      }
 self.setInterval(function(){blink()},1000);

This is small code which can do the whole thing work. Self.setInterval() is function which will call itself after 1 sec and call blink function. 

For more details run the below example : 

Read more »
Posted by at No comments:
Labels: ,

Saturday 1 March 2014

Iteration through array with delay in jquery


What my problem is I have an array and i have to pass array element to some function with some delay between each call. Now if i iterate using loop the iteration has already been completed before calling function and i am only able to pass last value of my array to function. To deal with this i found a way using recursion such that there is delay between my each call to function.

Now in my example :
l is length of array
arr is array
k is index
tex is my function i am calling

Example:


 var k=0;
 var arr=[1,2,3,4,5,6,7,8];
 function tex(arr,k,l){
                    if(k<l){ 
                                 alert(arr[k]);
                                 setTimeout(function() { k++; tex(arr,k,l); },3000);
                               }
                }
  tex(arr,k,8);    

This is basic structure of code and it will call tex() after each 3 sec and tex will alert array elements one by one.

To understand more run below example:

Read more »
Posted by at No comments:
Labels: , , ,
Subscribe to: Posts (Atom)