Reposition and show hidden images on hover

JavaScript
1

I create controls with unique IDs. I then create and hide sparklines with unique IDs. Each control and a sparkline image have a common ID part that associates them. I hide and position the sparklines so as not to disrupt the UI presentation. On hover, I pass the common part to a javascript function to reposition and show the appropriate sparklines next to the control being hover over. The sparkline shows but the repositioning is not in the right place and the sparklines are stacked one below the other instead of in a line one beside the other. It looks like the show position is off by the height of the bars at the top of the browser. Any help is appreciated. The Js function follows.

function showIt2(itx) { // Show ID.
               var slID = 'x' + itx;
               var imgID = 'z' + itx;

               var rect = document.getElementById(imgID).getBoundingClientRect();
               var Yx = Math.floor(rect.top) - 5;
               var Xx = Math.floor(rect.left) + 30;

               document.getElementById(slID).style.position = 'absolute'; 
               document.getElementById(slID).style.top = Yx;
               document.getElementById(slID).style.left = Xx;               
               
               var cmdx = 'document.all.' + slID + \".style.visibility='visible';\";
               eval(cmdx);
             }
2

Hi @ct8638, it seems you are missing the units for the style properties… .getBoundingClientRect() returns an object with numbers, but if you want to apply that as styles you’ll have to add px:

document.getElementById(slID).style.top = Yx + 'px'
3

The sparklines still shows in the wrong place and are still stacked one below the other. Before I tried the repositioning, the sparklines did show in a line as intended in the position they were initially hidden at…

4

Could you then provide a fiddle that demonstrates the problem? This was the only immediate problem I could see from that snippet alone…

5

I’m not quite sure how to do it. The module has a lot of stuff (css, javascript, and Perl) that produces the resulting UI.

6

How about a screen image?

7

Or a link.

8

Well I’m afraid in such a complex case I can only really help you debug if I can see the code in action… so the best would be if you extract the relevant bits and set up a fiddle. Trying to hone down the issue like this often helps a lot finding the bug already. :-)

BTW I just noticed another error in your code; the double quotes in the second last line are not supposed to be escaped, only when they are themselves within a quoted string. So it should be

var cmdx = 'document.all.' + slID + ".style.visibility='visible';";

Which leads me to another question… are there by chance any errors in the console? ;-)

PS: I’ll be AFK now, but I’ll have another look tomorrow (unless of course someone else chimes in until then).

PPS: Yes sure, a link would be fine too!

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.