Tuesday 17 January 2012

How to Make Floating Menu Or Cart on Your Browser Screen?

Some Times we needs some contents on the screen when we scroll down our window screen. For that we can create Floating Div. Given below steps Explain that how can we implement.


1. Put The Given Below Script Inside <Head> tag.




     <script type="text/javascript"> 
     floatingMenu.add('floatdiv'
         { 
             // Represents distance from left or right browser window 
             // border depending upon property used. Only one should be 
             // specified. 
             // targetLeft: 0, 
             targetRight: 10, 
   
             // Represents distance from top or bottom browser window 
             // border depending upon property used. Only one should be 
             // specified. 
             targetTop: 10, 
             // targetBottom: 0, 
  
             // Uncomment one of those if you need centering on 
             // X- or Y- axis. 
             // centerX: true, 
             // centerY: true, 
  
             // Remove this one if you don't want snap effect 
             snap: true 
         });


2. Download .js File From Given Below Link.




3. Add a Folder Name with Name Javascript in Your Project Directory. And Save Given above link File in this Directory.


4. Add the Given Link File in your .Aspx Page <head> tag as Given Below:


<script type="text/javascript" src="Javascript/FloatDiv.js"> </script>

5. Finally Add the Given Below <Div> inside your <Body> Tag.

<div id="floatdiv" style="position:absolute;width:300px;height:50px;top:3px;right:0px;background:#FFFFFF;border:1px solid #2266AA;z-index:100"> 

 Your Floating Div is here.

</div> 













No comments:

Post a Comment