.NET Answers

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 Related Items:

Howard Leight QM24+ Multiple Positioning Headband EarmuffUltra-lightweight for prolonged usage excellent protection for most environments. QM24+ (NRR 25) is a three-position, ultra-lightweight earmuff. Weigh... Read More >

Omron HEM-650 Wrist Blood Pressure Monitor with APS (Advanced Positioning Sensor)Wrist blood pressure monitors are portable, accurate and simple to use. They provide a convenient choice for those who want a second unit for away fro... Read More >

Garmin GSC 10 Speed/Cadence Bike SensorMonitor your pedaling cadence as you ride with this self-calibrating, wireless speed/cadence sensor. It measures and reports your pedaling strokes per minute, providing feedback for optimal performance.

Related Post

• jQuery 1.4 Released
• jQuery and ASP.NET UpdatePanel
• jQuery, Each() and Async Gets
• JQuery, Cufon, and Dynamic Content
• Flash to jQuery

Bookmark to:

Hide Sites

2 Responses to “jQuery – Positioning Elements”