Faltu Funda

Admin and announcement forums

30 Mar 2008


kumar rakesh

create and manage free online surveys with unlimited responses
Online surveys are now basic requirement of everyone who want to review there products or to make studies about anything. But finding a solution who can provide esurveys efficiently is really a big pain. creating an online survey with inefficient tool as irritating and getting survey conducted with limitations on responses is even worse.
cont..

30 Mar 2008


kumar rakesh

practice interviews and prepare for interviews
in todays changing world every one want to increase there salaries very quickly.
Changes your employer is an very efficient solution for this. But changing employer and company is not so easy.
cont..

Viewed 174 times

Help

Rules

Total posts : 0

23 Oct 2007


Sumit Sain
His other forums

Draggable Floating layer

Floating / Draggable layer

Now a days nearly every website contains floating or draggable layer. Draggable layer can be present in any format. it can be a flyout menus in website, an inline popup, a layer moving with the mouse pointer or in the format of tooltip and in many more formats. There are unlimited possibilities to find the usabilities of a draggable or floating layer, it all depends upon your imagination and understanding of this concept.

A draggable / floating layer can be made by knowledge of css and a bit of javascript. CSS will make a layer floating, or make if free from normal html document flow and javascript can be used to provide this layer capability of dragging. Now layer can be dragged with the use of mouse or keyboard.

Now i'll try to explain, how to create this layer and make it draggable or floating.

Suppose you have a written paper. Now if you want to draw a rectangle page over this page and want to put some contents in this rectangle then you have to adjust content of this written paper. You can understand this from following images

Above image is an image of simple paper. Now if you put a simple "<div>" here then this layer will be like drawing a rectangle in this page, and the content below this page have to adjust, to give place to the new "div". You can see this from the following image.

So we can say this layer is not draggable or floating, because it is taking space in the original paper. This type of layer can be made by simple code:

<div style="width:100px;height:100px;border:1px solid #aabbcc;background:#aaffcc;">Some content here for you.</div>

This layer is like writing on a paper in a good styled box. Floating / draggable layer is like having a small small piece of paper separately, written something, now this small paper can be placed anywhere on the original paper without have to adjust it's original contents and there positions.

You can see in the following image :

So, to make a floating layer we have to put a layer, out of flow of the document. For this also we'll use "div". We have to add some style to make if floating, and bring it out of normal flow of the document.. See this code:

<div style="width:100px;height:100px;border:1px solid #aabbcc;background:#aaffcc;position:absolute;top:50px;left:50px;">Some content here for you.</div>

Read this code carefully. here we have added
"position:absolute"
This makes the layer, floating, and with this, layer becomes out of flow of paper, or you can say, it become that small piece of paper. Now you have to tell it externally that, where it will be placed on the document. for that purpose we have added position information in the style :
top:50px
left:50px;

Now this layer becomes floating, and we will next make it draggable. Just like we can move piece of paper. we need to hold paper with hand to move it. In the same way we need some way to hold our layer, then give it power to move and stop.
What does "move layer" means, it just means to change position of layer. so, if somehow we would be able to change "top" and "left" property of the layer then we can say it can be dragged. To change any property of any html element dynamically or on the fly we have to javascript.

we can change the properties of layer with javascript in the following way:

<script language="javascript">

</script>

After executing this code, layer will now be placed on different location on the page. If we want to change position of layer continuously, we have to change it's positions continuously. We can use mouse events for this purpose.

Mouse click ( button down) can be used like holding piece of paper, then mouse movement can be used like movement of piece of paper. Means get new position of mouse, and assign that position to layer, every time mouse is moved.
So, in this way layer will become draggable, and "Mouse up " event can be used like leaving piece of paper back on original paper on some new location. So algorithm for dragging layer will be like following :

<script language="javascript">

</script>

That's all for now. Complete examples with source code can be found on internet or i'll try to search my code, and place here in my next post.

Enjoy!!

Be first to reply this discussion.

jump to :

Legends

	Forums tagged		Forums tagged. But locked for further reply
	Forums locked. can not accept further replies		General forum

Name :
Email :
Comments :