Using coordinates to place an abolutely postioned element on a page may seem like a bit of an overkill when you can just assign the top, bottom, right, and left values in the CSS but believe me is not. I have used this effect in combination with the Text-Resize Detection script published on A List Apart to re-position an element next to another at all times (the project demanded this effect) regardless of window or text resizing. The things you can do with this nifty trick are only limited by your imagination. Look at a demo of the “trick” at work if you wish to see it before reading the tutorial. Enough rumbling, let’s begin.
Gathering Neccesary Information
There are a couple of things we are going to need to know before beginning to write the script and they are:
- The name (id or class) of the element we are trying to get the coordinates of, which I will call “static_box (id name)” during this tutorial.
- And, the name (id or class) of the element we are moving around, which I will call “moving_box (id name)” during this tutorial.
Now we can begin recreating what you saw on the demo. First, let’s start by creating the functions we will need in order to position the moving box to either the left or right of the static box. In this step we will write the commands for the main function only. In other words, we will absolutely position the moving box and give it top and left values.
function position_left()
{
/* code will go here */
}
function position_right()
{
/* code will go here */
}
function position(x,y)
{
var moving_box = $("#moving_box");
moving_box.css("position","absolute");
moving_box.css("top",y);
moving_box.css("left",x);
}
Now we need to record the coordinates of the static box and apply them to the moving box. However the actual X and Y coordinates will need to change a bit if we want things to line up correctly. We need to take padding and border into consideration and make them part of our equation. So with a bit of addition and subtraction involved in the equation, our empty functions should look something like this.
function position_left()
{
var static_box = $("#static_box");
var moving_box = $("#moving_box");
var mb_width = moving_box.width();
var coordinates = static_box.offset()
var x = coordinates.left - mb_width;
var y = coordinates.top;
position(x,y);
}
function position_right()
{
var static_box = $("#static_box");
var sb_width = static_box.width() + ["static_box total padding + total border"];
var coordinates = static_box.offset()
var x = coordinates.left + sb_width;
var y = coordinates.top;
position(x,y);
}
function position(x,y)
{
var moving_box = $(”#moving_box”);
moving_box.css(”position”,”absolute”);
moving_box.css(”top”,y);
moving_box.css(”left”,x);
}
That is all the code you need to recreate what you saw on the demo. However, you will need to call either function position_right or position_left for things to work. In the case of the demo, the functions are being called by an “onclick” function attached to the link elements.
Download
Please feel free to play around with the code and make any tweaks to it. If you have any questions or something is not working right for you, leave a comment and I will try to answer your question(s).
Download Demo
The header says it all: “I am transfering my domain name.” When I registered the domain name bedrichrios.com several months ago, I was unaware of Yahoo’s domain registrar annoyances. The main one being that you cannot renew an account (domain) manually, instead, Yahoo will do it automatically for you, unless you cancel it of course. This means that if you have the “crazy” thought of securing your domain name for, say, 3 years in one payment, you cannot do so. I find this very annoying because it affects your Google rank. The search engine giant has been known to dismiss many sites whose domain name are registered for only one year. So, after some looking around and advise gathering, I have decided to transfer my domain name to dyndns.com. I am really excited about the move but at the same time a little nervous. I have heard really bad stories from people trying to move away from Yahoo domains. Hopefully the transaction will go smoothly and I will be back posting about web design and other things soon.
