jQuery Is My New Best Friend

I have been struggling for weeks upon weeks upon mind bending, agonizing weeks to solve what I would think to be a simple javascript problem. I needed a popup box to come up just left and center of another element. Well I searched through results provided by Google and Yahoo! and found a number of solutions that didn’t work for my particular situation. However, those examples provided a stepping stone for me to figure out how to position it where I wanted. The next problem was re-positioning the popup if it went beyond the top or bottom edge of the window viewport. This is where jQuery came to the rescue. If I had discovered this earlier, a lot of headache would have been prevented and I would have more hair.

jQuery has this: $(“#popup”).offset(), which returns the elements absolute top and left positions no matter where they are in the page and no matter how many elements they are nested in.

Thanks to smart people.


4 thoughts on “jQuery Is My New Best Friend

  1. Hi there, this post appeared in my Feed Reader, so I thought I’d check out what you have to say about jQuery. Glad to hear you’re finding it useful so far! I wrote a plugin called clueTip that deals with a lot of the positioning headaches you’re referring to. It has options for different “positioning schemes,” too. Feel free to take a look if you’re interested: http://plugins.learningjquery.com/cluetip/

  2. Thanks,Karl. I will. It was such a pain to work through this problem, but, hey, that’s why we do what we do right? The challenge. I can get the popup box to move up if it goes beyond the bottom of the viewport in both ie and ff, but I can’t get the box to move down when it overlaps the top of the window in ie. Firefox works well, so I will look at your plugin.

    Thanks again.

  3. That offset function in jquery helped me a lot too. I was working on a visio type diagram creation tool in javascript some time back, and although I wasn’t using jquery, I integrated the offset function in my code.

    It’s not perfect, had to include some checks in it myself, but it helped a lot.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s