JQuery auto positioning element

JQuery auto positioning element

JQuery is a very useful JavaScript library. This library has some very quick tools and syntax that come very handy to developers. JQuery auto positioning is nothing but changing an element’s position dynamically when another event is fired. This particularly comes to use when we need to beautify the user interface and experience. The user feels that the software is responding to his or her actions. This gives a very positive feel and also looks good.

Let’s start our JQuery auto positioning implementation

First of all we must decide where to implement it. There are several places where you could implement this technique and get great results. Suppose you want to add a floating div on a side pane of your website. So, as you scroll down your div must scroll down with your page. One option is to keep its CSS positioning fixed. But in that way your div would not look like its coming down on scroll. It would be fixed as it is.

To make it good to the eye, just add some JQuery auto positioning and the div would slide down with the scroll. Another instance where you could apply JQuery auto positioning is a div that changes its height frequently. Whenever it changes its height attribute, its alignment on the screen is sure to go wrong. To centre the vertical or horizontal alignment you could implement JQuery auto positioning. In this article I would sketch out the procedure of positioning a login window that changes height on click of a button.

JQuery auto positioning – the setup

What we would do is have a single HTML file with the structures, CSS and the JQuery together. Since this article focuses on JQuery I have omitted any PHP section. So, the input fields are all unset. They won’t work. First we design this page. Here is the HTML for it (I have ignored the CSS code here. You can collect it from the download icon or from the GitHub link) –

<body>
 <div id="container">
 <form action="" method="POST">
 <input type="text" name="username" size="50" class="inputs"/><br/>
 <input type="password" name="password" size="50" class="inputs"/><br/>
 <input type="submit" value="Submit" name="submit" class="submit"/>
 <a href="#" class="links">Forgot Password</a>
 </form>
 <form action="" method="POST" id="forgot_password_panel">
 <input type="text" name="username" size="50" class="inputs"/><br/>
 <input type="password" name="password" size="50" class="inputs"/><br/>
 <input type="submit" value="Get Password" name="get-password" class="submit"/>                
 </form>            
 </div>
</body>

In the JQuery code section we make the actual calculations. The idea is that the div will initially show the “login” panel. The “forgot password” panel is hidden. Once the user clicks the “forgot password” link, the hidden div will appear thus increasing the container’s height. This increased height disturbs the container’s vertical position. We will implement JQuery auto positioning to cure this. So the JQuery code goes like this. What is does is basically calculate some math. It stores the initial position of the container. Once the height increases, it sends the container to a position where the top margin is half of what it was before. Let’s have a look –

$(document).ready(function(){      
      var orig_pos = $(document).height() - $('#container').height();
            orig_pos = orig_pos/2;

$(".links").click(function(){
if($("#forgot_password_panel").is(':hidden')){
$("#forgot_password_panel").fadeIn("1500");
var new_pos = $(document).height() - $('#container').height();
new_pos = new_pos/2;
$('#container').animate({"margin-top":new_pos}, 500);
}
else{
$("#forgot_password_panel").fadeOut("1500",function(){
$('#container').animate({"margin-top":orig_pos}, 500);	});					
	}				
});

           });

This way you can implement some good positioning effects with JQuery auto positioning. Just view the demo to have a better look and don’t forget to share what you have liked.

Comments are closed.