Page 1 of 1

javascript object location

Posted: Sat Jan 27, 2007 8:05 am
by jyhm
  • Summery:
    1) Making a PopUp info Box.
    2) PopUp displayed at location of anchors
    3) Works in FF mac
    4) IE6 Win anchor Locations are null
    5) Need to know haw to troubleshoot this.
I'm making one of those pop-up info boxes with ajax that
displays information when your mouse goes over the link.
However, In IE 6 on my windows box the popUp boxes did
not appear in the proper locations.

To debug this I wrote javascripts to display an alert as to
the location of each anchor. In IE Win The left anchor
positions are null and the top and bottom positions are
exactly the same! Does anyone know what the next step
in trouble shooting this is?

Below is a basic illustration along with my styles. Let me
know if you need to see the code. I will show the output
only to avoid confusion.

Any advice will be great! :D

Code: Select all

My_Page
 _________________________________________________________
| _________    __________________________________________ |
|| #left   |  |               #title                     ||
||   bar   |  |__________________________________________||
||         |   __________________________________________ |
||         |  |                 #copy                    ||
||         |  |                                          ||
||         |  | <----------------400px-----------------> ||
||         |  |                                          ||
||         |  |                                          ||
||         |  |    anchor#1                              ||
||         |  |                                          ||
||         |  |                                          ||
||         |  |                                          ||
||         |  |                                          ||
||         |  |                                          ||
||         |  |    anchor#2                              ||
||         |  |                                          ||
||         |  |                                          ||
||_________|  |__________________________________________||
|_________________________________________________________|

Code: Select all

#leftbar{ 
		position: absolute;
		left: 5px;
		top: 150px;
		right: auto;
		width: 50px;
		height: 100%;
		margin: 150px, 150px, 150px, 150px;
		padding: 20px;
		font: sans-sarif;
		}
		
		
		
		
#title	{
		
		position: absolute;
		left: 125px;
		top: 150px;
		right: auto;
		width: 400px;
		height: 40px;
		margin: 0px, 0px, 0px, 0px;
		padding: 2px 2px 2px 5px;
		font: sans-sarif;
		
		}
		
		
		

#copy	{
		position: absolute;
		left: 125px;
		top: 190px;
		right: auto;
		width: 400px;
		height: 200px;
		margin: 0px, 0px, 1px, 1px;
		padding: 2px 2px 2px 5px;
		font: sans-sarif;
		}

Posted: Sat Jan 27, 2007 5:39 pm
by jyhm
Ok, maybe I won't get to many responses for this
post but I pinned down what IE had a problem with.

1) I made a page to test object.offsetLeft and
object.offsetTop. It was just a single paragraph of
'lorem ipsum' with hyperlinked words scattered
through out. Each hyperlink had its own object id
and would trigger an alert message as to the
objects pixel position. It worked fine in IE.

2) But when I took those same test functions to test
on the page I originally intended for production,
each object returned a null value for its left pixel
position. So I Commented out all code around each
object and whala! It worked! Back tracing each tag
one by one I re-initiated the tags out of the
comment section. When I got to the fieldset tag the
error happened again. When the link was pressed
up to the left side within the field set tag it returned
null for a left value.

So now I have to figure some sort of work around.
Why in the worl IE has a problem with the fieldset
tag is beyond me, anyone :?:

Posted: Sat Jan 27, 2007 6:02 pm
by superdezign
I reread this a few times and I'm not sure if your still having a problem or not...?

Umm.. I created a javascript "popup" box on my website when you mouseover the "Services" links

Took me forever and a day to make, considering I hadn't done much of anything with javascript prior to it, but you're welcome to use the code as a guide. I had problems nonstop with IE.

The method is that I use a hidden div that follows the mouse and displays itself on the mouseover. Efficient? Maybe not. My computer's not slow enough for me to know. But that div is the only reason I've yet to make my website pure CSS. That, and the fact I'm working on projects that I get paid from.

If this isn't what you're looking for though, you're also welcome to ignore this.

Posted: Sun Jan 28, 2007 2:00 am
by jyhm
Thank you superdezign,

I am still having trouble. To update its not a fieldset tag problem. I replaced the tags with table and div and the problem still occurs when ever the object is pressed up against the side of the bounding area. For some reason, my padding and margins are not creating a buffer between the two.

I would be interested in your solution if you feel like posting the code. Maybe a link with an example if it is still up? Thank you for your reply.

Posted: Sun Jan 28, 2007 3:44 am
by superdezign
I would post it as a few functions for you, but it took me about a week to write the script. It's actually about 20 functions that I wrote in order to debug (except now I've got firebug!) and get that done properly.

I could give you the method I finally ended up with though. (example on http://www.superdezign.com when you mouseover the "Services" links to the right)


I created a div, sized it, and hid it. I created an onmousemove capturer and made the hidden div's position equal the mouse's (plus an offset) whenever the mouse position changed.
(A good piece of advice... clientX for document.all, pageX for all else.)
I set up a function that changed the innerHTML (or document.write in NS) and then displayed the div, which was trigger onmouseover, and a function to hide the div again onmouseout

It sounds simple, but it was a complete hassle to debug, especially with the little bitof javascript knowledge I had. Making the script, however, taught me an extremely good portion of it.

Posted: Sun Jan 28, 2007 8:29 am
by jyhm
Thank you Superdezine,

Very nice and smooth popups. I am looking at your scripts and I see how you have written for:

Code: Select all

*/
var DOM	= document.getElementById;	// DOM browser
var IE	= document.all;				// IE browser
var NS	= document.layers;			// Netscape browser


/*
I don't know if I will need to have the popup chase my cursor but I am considering it as a possible alternative for object location. It is just that I have read that the object.offsetLeft and object.offsetTop are pretty much cross-compatible. As my error only occurs in IE while it is flush up against some type of bounding box. Of course IE 6 is the oldest browser I have tested on, make that IE 5.5 on mac, which stinks by the way. :D [/quote]