jQuery – Positioning Elements

G07L0093 If you’ve ever needed to write a pop-up layer or a tooltip that needed to be positioned on the screen at a specific location, you know how hard it is to do this in such a way that it works on every browser.

You also realize that every time a new browser comes out, this code needs to be tweaked.  I remember back in 2000 when I had to get a pop-up working that had been working because a new round of browser versions had just come out.  It wasn’t fun.

With jQuery, all that changes.  At least, the initial code development is much easier.  And when the new browsers come out, getting it to work again is a problem for the jQuery developers to solve.  Not us.

To position a tooltip or layer, there are several tasks we need to accomplish.  I’ll refer to tooltip through the rest of this article, but the steps would be similar for a layer.

First, we need to determine the position of the element the mouse is over.  We can do this with the offset method, which returns a point:

eleOffset = $(this).offset();

notice the $(this) statement.  This is because the code this came from was an event handler and the element we are over is what got passed into the event handler.

Once we have the offset, we can get the left and top positions using:

eleOffset.left;
eleOffset.top;

We will also want to retrieve the width and height of the tooltip once we’ve added our information to it.  This is because we are going to place the tooltip over the element and if we want to center it, we’ll need the actual size of the tooltip to do this correctly.

So once you’ve retrieved the element, you can get the height and width using the height() and width() methods.  BTW, you can also use this method to set the height and width by passing an integer in as a parameter to each method:

$(this).width();
$(this).height();

Last, we’ll need to position the tooltip.  You can easily do this by using the CSS method.  This method takes two parameters: the CSS property you want to change and the value you want to change it to.  To change the left position of an element, you would use:

element.css('left', 200);

and to change the top position:

element.css('top', 200);

of course, where we’ve put 200, you’ll want to put a computed value.

If you’ve ever written or maintained a tooltip, you immediately recognize just how much easier this is.

 

Other post in jQuery

Related Post

  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the work has...
  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – EventsjQuery – Events As well as being able to change the class associated with an element or a set of elements on a screen, jQuery also allows you to fire events.  You might want to do this, for example, if you want to...
  • jQuery – The Man, The Myth, The LegendjQuery – The Man, The Myth, The Legend I admit it.  I've been ignoring jQuery for quite a while.  But I have a tendency to do that with most new things.  I generally don't work with beta software and I wait for critical m...
  • jQuery – Modal DialogjQuery – Modal Dialog Last week I introduced the jQuery Dialog plugin, which allows us to put various dialogs on the screen. I only gave out the basics of this flexible widget to keep things simple.  Today, I wan...