Setting HTML element's "coordinates"

[Zurompeta]

Hi all,

Having a strange issue here. To help explain my situation, I have some images I'd like to include.

This first image is of one of two user input forms. Notice in the top left of the picture, the second tab is selected.
[IMG]http://www.abexal.org/image_1.jpg[/IMG]
The arrow is pointing to the little calendar icon. This icon, when clicked, will display a calendar date-picker tool right beside the icon.

To achieve this, I'm using the following code:

calendar = document.getElementById("calendar_popup");
icon = document.getElementById(icon);
//alert(icon.offsetParent.tagName);

if (icon.offsetParent) {
    do {
        coordsLeft += icon.offsetLeft;
        coordsTop += icon.offsetTop;
    } while (icon = icon.offsetParent);
}

calendar.style.marginLeft = 20 + "px";
calendar.style.left = coordsLeft + "px";
calendar.style.top  = coordsTop + "px";

This works wonderfully in THIS form, as shown below:
[IMG]http://www.abexal.org/image_2.jpg[/IMG]

However, when I go to the tab to the right (3rd from the right of all 3 tabs). I come to another form that's identical to the one shown above. When I click on the calendar icon though, the calendar popup is displayed in the incorrect area.
[IMG]http://www.abexal.org/image_3.jpg[/IMG]
In this case, the popup is covering the calendar button. This will occur all the time between the two. It doesn't matter if one icon is selected prior to the other one.

The icons both have different ID to prevent cross-id issues.

[Airshow]

Mmmmm, hard to say.

Is there an independent page for each of the two tabs or one "template" page?

If the pages are independant then look for differences in the structure and CSS of all containing elements from body down to the calendar element.

If the pages arise from a template, with identical HTML structure and CSS then ... mmmmmmm ... maybe the size/content of some element or other is driving the calendar to a different position.

Not much to go on really, but maybe enough to track it down. Good luck.

Airshow

[essential]

You could try this variation:

<script type="text/javascript">
<!--
var ie = Boolean((( !!document.all === true && !!!document.getElementById ) ? 1 : 0 ));

var eCoordinates = ( function( icon ) {
   var coordsLeft = 0;
   var coordsTop = 0;
   var element = ( function( elementID ) {
      var elementID = (( ie ) ? document.all[ elementID ] : document.getElementById( elementID ));
      return (( elementID ) ? elementID : 0 );
   } );
   var calendar = element( "calendar_popup" );
   var icon = element( icon );
   if ( calendar || icon ) {
      if ( icon.offsetParent ) {
         var posY = icon.offsetTop;
         var posX = icon.offsetLeft;
         do {
            coordsTop += posY;
            coordsLeft += posX;
         } while ( icon = icon.offsetParent )
      } calendar.style.position = "absolute"; // Absolute positioning has been added to the element.
      calendar.style.left = coordsLeft + "px";
      calendar.style.top = coordsTop + "px";
      calendar.style.margin = 20 + "px";      
      return;
   } alert( "Please update your browser with the latest patch, before viewing back to this feature" );
   return false; // EXIT Function
} ); 
// -->
</script>

you can call out this function on the following format : <img src="icon.png" id="icon0" onmouseover="eCoordinates( this.id )" /> let us know how it goes.

[Zurompeta]

Looks like the code you provided has the same effect. Thanks for the attempt though.

Also, I forgot to mention, the tabs shown in the pictures are AJAX tabs.

[Zurompeta]

If it helps at all, these are the coordinates I get when I click the icon in each form.

Form 1: x=761 y=470 (Works)
Form 2: x=704 y=471 (Doesn't work)

Also, here's an added picture to show the table layout of each form:
[IMG]http://www.abexal.org/image_4.jpg[/IMG]

[essential]

Hi

i thought that you might just forgot to position your element absolutely in the page. So that's why i've provided the same instance of code and enhanced some of its lines over the whole statements. I'l see what i can do and post back when i get your answers.

Good day to you...

essential

[Zurompeta]

Sounds good. I'm currently sifting through the page code right now to see if there's something causing a problem

[essential]

You might get it work before me. Doing dynamic content on a PDA is quite hard, since it can only provide static results and a limited capabilities to react on a hover events. So it'l take me some time before i can figure it out.

[Zurompeta]

Not a problem. The fact you're trying to help is highly appreciated.

What is odd, though. Is when I enabled table borders for both tables, this slightly changes the layout of the table to compensate for the borders. So naturally the coordinates of the popup location are expected to change. Which they do on the working form.

However, the coordinates remain the same on the non-working form. It's very bizzare, it's almost like there's a floating element somewhere on the page I can't find.

[essential]

Have you tried to implement it, using a getComputedStyle method?

I'l try to simmulate the codes and post it back to you later.

Of to work...
essential

[essential]

This one goes wel with opera providing the exact results i need on my target element.

Here's what i have so far:

var ie = Boolean((( !!document.all === true && !!!document.getElementById === false ) ? 1 : 0 )); 

var findXY = function( xElement ) { 
   var xElement = xElement || null;
   var $ = ( function( elementID ) {
      var elementID = (( ie ) ? document.all[ elementID ] : document.getElementById( elementID ));
      return (( elementID ) ? elementID : 0 );
   } ); // Fast and efficient way of getting the elements in the page.
   var XAndY = ( function( pos ) { // Provides easy access to the relative position of an element in the page.
   var mode = { offsetTop : "y", offsetLeft : "x" };

/* http://www.daniweb.com/
   essential's easy tricks

 - Quirksmode Implemention 
   of finding the absolute -
   position of an element in
   the page.

 - This block may not 
   provide accurate results 
   when running in SAFARI mode. */
      var coords = 0;
      var obj = $( xElement );
      var xOffset = (( obj.offsetParent ) ? obj.offsetParent : "break" ); // Eliminates infinite loop -
      if ( xOffset ) {
         do {
         coords += obj[ pos ] 
         } while ((( typeof( xOffset ) !== "string" ) ? obj = obj.offsetParent : eval( xOffset )));
      } else if ( mode[ pos ] in obj ) { // Defeat SAFARI bug
         coords += obj[ mode[ pos ] ];
      } return coords; // It's better if we do not add any strings value next to it.
   } );
   // $( "calendar_popup" ).style.margin = "20px 0 20px 0"; // Maybe this margin style is the one who is causing you the problem. 
   $( "calendar_popup" ).style.position = "absolute";
   $( "calendar_popup" ).style.left = XAndY( "offsetLeft" );
   $( "calendar_popup" ).style.top = ((( XAndY( "offsetTop" )) + $( xElement ).height ) + "px" )  ;  

};

i hope even if it does not work, you could still find it useful...

essential

[Zurompeta]

Well it looks like your code did the trick :)

It's still odd to think about though, because I downloaded Chrome and Safari and both of them worked perfectly, however the table was oddly shaped.

This picture is the "working" table.
[IMG]http://www.abexal.org/image_5.jpg[/IMG]

This picture is the "non-working" table.
[IMG]http://www.abexal.org/image_6.jpg[/IMG]

Notice how there some extra space on the right? It's extremely bizarre as the code for each table is mostly identical (aside from the different id names of course).

Any ideas? (Before I mark this solved)
Thanks a ton up to this point btw :D

[essential]

Hi,

I can't open those images, but il try to apply some workaround to make the layout stable. I'l post back again when i am done to it.

essential

[Zurompeta]

OMG! I FIGURED IT OUT!

After 20+ hours of trying to figure what the hell was going on. It turned out non-working table had the CSS property of "display" set to "block". Apparently this caused all sorts of alignment issues and setting the value to nothing ("") returned it back to normal.

The fact that its was something so small and insignificant that caused the problem for as long as it lasted is so frustrating lol!

Anyways, thanks much for the help/code/inside! :)

[essential]

Hi,

You migth also want to try this, this script will center your element in the page, horizontally and vertically.
I've rush this, so it might need some minor modifiction on the lines.

var xJustify = function( w, h, elemX ) {
      var w = w || 0;
      var h = h || 0;
      var elemX = elemX || null;
      var ieStandard = (( document.body ) ? document.body : document.documentElement );
      var posY = 0;
      var posX = 0;
      if ( ieStandard ) {
         posY = ieStandard.scrollHeight;
         posX = ieStandard.scrollWidth;
      } else {
         try {
         posY = (( "scrollMaxY" in window ) ? window.scrollMaxY : (( "scrollY" in window ) ? window.scrollY : undefined ));
         posX = (( "scrollMaxX" in window ) ? window.scrollMaxX : (( "scrollX" in window ) ? window.scrollX : undefined ));
         } catch( e ) { 
            posY = screen.availHeight;
            posX = screen.availWidth;
         }
      } var eWidth = (( posX * w ) / 100 ); 
      var eHeight = (( posY * h ) / 100 );
     // You can alter all the rule set from here, or even add additional style rules for the elemX. elemX is your table.
      elemX.style.margin = "0";
      elemX.style.width = eWidth + "px";
      elemX.style.height = eHeight + "px";
      elemX.style.position = "absolute";
      elemX.style.left = Math.ceil((( posX - eWidth ) / 2 )) + "px";
      elemX.style.top = Math.ceil((( posY - eHeight ) / 2 )) + "px";
      return;
   }

you can call this instance by doing this:

xJustify( 50 /* width by percentage*/, 50 /* height by percentage */, elementID );

hope you find it useful

essential

[Zurompeta]

Looks very useful, thanks :)

[Airshow]

OMG! I FIGURED IT OUT!

After 20+ hours of trying to figure what the hell was going on. It turned out non-working table had the CSS property of "display" set to "block". Apparently this caused all sorts of alignment issues and setting the value to nothing ("") returned it back to normal.

I am struggling hard not to say "told you so".

Airshow