hidden images lose CSS structure on reposition before showing the image

craigtussey · December 15, 2017

I create controls and hidden sparklines. A control is associated with a particular set of sparklines via a common ID part. I position the sparklines so as not to disrupt the UI presentation. When the user hovers over a control, the sparklines are repositioned next to the control and made visible. The repositioning works, but the sparklines are stacked one below another. If I don't reposition, the sparklines appear in a line as intended. I would like the sparklines to appear in a line one after another after I reposition instead of in a stacked configuration. Any help is appreciated. The perl code that creates the sparklines and the JavaScript that repositions and makes the sparklines visible follow.

<code>

$surtok = 'x' . $imtok;
$gstr .= "<div id='$surtok'><span class='toolTip' style='position:absolute;top:86px;left:87%;font-size:9px;background-color:#$ltappbgcolr;'>$pimtok Trends<BR></span><span ID='sls'>&nbsp<span class='inlinesparkline$j'>$values</span>&nbsp&nbsp<span class='inlinesparkline$k'>$rates</span>&nbsp&nbsp<span class='inlinesparkline$l'>$states</span>&nbsp&nbsp<span class='inlinebar$m'>$strides</span>&nbsp&nbsp</span></div><script>hideIt('$surtok');</script>";

function showIt2(itx) { // Show sparklines.
var slID = 'x' + itx;
var cntlID = 'z' + itx;
var rect = document.getElementById(cntlID).getBoundingClientRect();
var Yx = Math.floor(rect.top) - (86 + 5); // Minus the initial hidden placement + 5.
var Xx = Math.floor(rect.left) + 40;

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);
}

</code>

justsomeguy · December 15, 2017

It looks like you're also using a Javascript function to hide things that may be changing certain CSS properties, but I would start by printing the top and left position that you're telling it to go to just to verify what you're actually telling it to do. Also, you shouldn't use eval, if you need to change the style of an element then do it like you did right there with position, top, and left. document.all is a non-standard legacy feature that you should not rely on.

craigtussey · December 15, 2017

The placement of the sparkline set is right. I have verified the coordinates previously. It is the arrangement of the sparklines that is not working. The sparklines are stacked one below another after repositioning, instead of in a line, one after another. If I don't reposition, the sparklines appear in a line at the place of original positioning. I changed the code as you suggested. Why I didn't already do that is a good question. The code follows.

function showIt2(itx) { // Show sparklines.
               var slID = 'x' + itx;
               var cntlID = 'z' + itx;
               var rect = document.getElementById(cntlID).getBoundingClientRect();
               var Yx = Math.floor(rect.top) - (86 + 5); // Minus the initial hidden placement + 5.
               var Xx = Math.floor(rect.left) + 40;

               document.getElementById(slID).style.position = 'absolute';
               document.getElementById(slID).style.top = Yx;
               document.getElementById(slID).style.left = Xx;

               document.getElementById(slID).style.visibility = 'visible';
}

function hideIt2(itx) { // Hide sparklines.
document.getElementById(slID).style.visibility = 'hidden';
}

Ingolme · December 15, 2017

You need to add units to your CSS properties or else they'll be ignored.

document.getElementById(slID).style.top = Yx + "px";
document.getElementById(slID).style.left = Xx + "px";

The reason that elements may stack vertically is that there isn't enough horizontal space for them, use your DOM inspector to see the size of the element that is containing these elements. Perhaps we could diagnose the problem easier if we have a live example of the code.

craigtussey · December 15, 2017

The following 2 links show the difference. The first shows the sparklines as intended positioned where they were initially hidden. The second shows the repositioning and how the arrangement of the sparklines change. These links are executing off a Windows 10 based Apache server at my home. I hope the connectivity stays stable.

http://steepusa.no-ip.info/scx/m1.cgi

http://steepusa.no-ip.info/scx/m1new.cgi

Ingolme · December 15, 2017

I'm going to need to know what a "sparkline" even is and how to make it appear. There's a lot of stuff on that page.

craigtussey · December 15, 2017

I apologize for leaving that important bit out. I'm under the weather. The 2nd from the right whirling rectangle on each measure data line is the control to mouse over. The sparklines for the 1st line have the most data points. All data is just test stuff of course.

justsomeguy · December 16, 2017

Remove all of the positioning styles on the spans under the div. You're basically telling everything to have a left margin of 87% inside the div. You probably want it to start at the left side of the div, so just remove all of that positioning from the spans and position the one div instead of all the spans. Absolute positioning in general can get pretty problematic pretty quickly. You can play around with the browser's developer tools to see how changing the styles affects the elements.

craigtussey · December 16, 2017

I did try your suggestion I think. The modified instruction is below. You can see the result by executing m1new. The title did show up in full, but the sparklines are still stacked and the positioning of the title and sparklines is now way off.

$gstr .= "<div id='$surtok' style='position:absolute;top:86px;left:87%;background-color:#$ltappbgcolr;'><span class='tooltip'>$pimtok Trends<BR></span><span ID='sls'>&nbsp<span class='inlinesparkline$j'>$values</span>&nbsp&nbsp<span class='inlinesparkline$k'>$rates</span>&nbsp&nbsp<span class='inlinesparkline$l'>$states</span>&nbsp&nbsp<span class='inlinebar$m'>$strides</span>&nbsp&nbsp</span></div><script>hideIt('$surtok');</script>";

dsonesuk · December 16, 2017

The idea is to have it relative to the hovered element. the hovered container would be position: relative; the tooltip/sparklines container will be inside this element using position: absolute; with top: right: or left properties, the other elements within this container will not need to use any positioning just display: block; for title, with remaining display: inline;

Its impossible to get reliable positioning without this method, because the width of device will be massively different between each device, whereas the relative positioning of hover event element will be constant.

craigtussey · December 16, 2017

I think I have tried your suggestion dsonesuk. I placed the sparkline instruction at the end of the instruction that prints the measure data line to try this. The result is that it distorts the measure data line spacing because the sparklines have a greater height than the measure data line. The position of the beginning of the sparklines is correct in m1new, but the arrangement of the sparklines stacks, one under the other. I want the sparklines to show in a line, one after another. The repositioning from the place of the initial hide, shown in m1, seems to change the title and arrangement of the sparklines. Maybe I'm not understanding you. Please help me in that regard if you think I'm not.

Justsomeguy, I changed the sparkline instruction back to show dsonesuk. I hope you got to see the result of your suggestion. If not I'll change it back at your request.

dsonesuk · December 16, 2017

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0" />
        <title>Document Title</title>

        <STYLE>

            #gbnr {
                COLOR:#FFFFFF;
                FONT-SIZE:14pt;
                BACKGROUND-COLOR:#809FFF;
                TEXT-ALIGN:LEFT;
                FONT-WEIGHT:500;
                letter-spacing: 1px;
            }
            #mlcn {
                COLOR:#000099;
                FONT-FAMILY:Times New Roman;
                FONT-SIZE:12pt;
            }
            #mlnprt2 {
                BACKGROUND-COLOR:#FFFFFF;
                COLOR:#000099;
                FONT-WEIGHT:500;
                FONT-SIZE:7pt;
                FONT-FAMILY:Lucida Console;
            }
            #ffln {
                FONT-SIZE:11PT;
                FONT-FAMILY:Lucida Console;
                TEXT-ALIGN:CENTER;
                letter-spacing: 1px;
            }
            #mlnhdr {FONT-WEIGHT:500;FONT-SIZE:7pt;FONT-FAMILY:Lucida Console;COLOR:#FFFFFF;BACKGROUND-COLOR:#809FFF;}
            #ghmln {FONT-WEIGHT:900;FONT-SIZE:7pt;FONT-FAMILY:Lucida Console;letter-spacing:1px;}
            #ghmln2 {FONT-WEIGHT:500;FONT-SIZE:7pt;FONT-FAMILY:Lucida Console;}
            #ghmln3 {FONT-WEIGHT:900;FONT-SIZE:7pt;FONT-FAMILY:Lucida Console;letter-spacing:1px;TEXT-ALIGN:CENTER;position:relative;left:-12px;}

            /* #sls {position:absolute;top:98px;left:87%;background-color:#FFFFFF;border:1px dashed lightgray;}*/
            #leg {position:absolute;top:101px;left:2%;TEXT-ALIGN:CENTER;border:1px dashed lightgray;}

            BODY {
                BACKGROUND-COLOR:#E6ECFF;
                COLOR:#000099;
                FONT-WEIGHT:500;
                FONT-SIZE:14pt;
            }

            A {COLOR:#000099;}
            A.HD {
                FONT-SIZE:12PT;
                FONT-WEIGHT:500;
                letter-spacing: 1px;
            }
            A.DL {
                FONT-SIZE:7PT;
                FONT-WEIGHT:500;
                COLOR:#000099;
            }
            A.l3 {
                color:#000099;
                FONT-SIZE:12px;
                FONT-WEIGHT:500;
            }
            A.TADY {
                COLOR:#000099;
                FONT-WEIGHT:500;
                FONT-SIZE:7PT;
            }
            A.DRKR {
                COLOR:#000099;
                FONT-WEIGHT:900;
                FONT-SIZE:7PT;
            }
            A:hover {color:#0000ff}

            .tn img { border:0 }
            .tn         { border: 0px solid #0000FF; }
            .tn:hover   { border: 0px solid #660099; }

            .Fbox{BACKGROUND-COLOR:#E6ECFF;TEXT-ALIGN:center;width:7.0%;position:absolute;top:24;left:0px;FONT-SIZE:7PT;text-indent:0px}
            .Mbox{BACKGROUND-COLOR:#E6ECFF;TEXT-ALIGN:center;position:absolute;top:22;left:6.5%;FONT-SIZE:7PT;}
            .M2box{BACKGROUND-COLOR:#E6ECFF;position:absolute;top:27px;left:76%;}
            .Bbox{BACKGROUND-COLOR:#E6ECFF;TEXT-ALIGN:center;width:7%;position:absolute;top:19;left:93%;FONT-SIZE:7PT;}

            div#container {width:100%;text-align:center;FONT-SIZE:10PT;}

            #postit{
                position:absolute;
                width:155;
                padding:3px;
                background-color:#FFFFFF;
                border:1px solid navy;
                visibility:hidden;
                z-index:100;
                cursor:hand;
            }

            #postit2{
                position:absolute;
                width:40%;
                padding:5px;
                background-color:#FFFFFF;
                border:1px solid navy;
                visibility:hidden;
                z-index:100;
                cursor:hand;
            }

            .toolTip {
                padding:1px;
                background-color:#FFFFFF;
                font:9px/10px Arial, Helvetica, sans-serif;
                filter:alpha(opacity=100);
                display: block;
                white-space: nowrap;
            }
            .dsonesuk {display: inline-block; position: relative;}
            .dsonesuk_TT {position:absolute;top:0 !important;left: 140% !important; background-color:#FFFFFF; white-space: nowrap;}
            #sls > span {display: inline-block; white-space: nowrap;}
        </STYLE>

        <script type='text/javascript' src='http://steepusa.no-ip.info/scx/../stage/STEEP1.js'></script>

        <script type='text/javascript' src='http://steepusa.no-ip.info/scx/../stage/jquery141.js'></script>
        <script type='text/javascript' src='http://steepusa.no-ip.info/scx/../stage/jquerysl.js'></script>

        <script type='text/javascript'>

            function showIt2(itx) { // Show sparklines.
                var slID = 'x' + itx;
                var cntlID = 'z' + itx;
                var rect = document.getElementById(cntlID).getBoundingClientRect();
                var Yx = Math.floor(rect.top) - (86 + 5); // Minus the initial hidden placement + 5.
                var Xx = Math.floor(rect.left) + 40;

                /*document.getElementById(slID).style.position = 'absolute';
                 document.getElementById(slID).style.top = Yx + 'px';
                 document.getElementById(slID).style.left = Xx + 'px';*/

                document.getElementById(slID).style.visibility = 'visible';
            }

            // Postit functions.

            function showornot() {
                document.all.postit.style.top = '.2%';
                mvLeft = '57%';
                if (screen.width > 1280 && screen.height == 900) {
                    mvLeft = '55%';
                }
                document.all.postit.style.left = mvLeft;
                document.all.postit.style.visibility = 'visible';
            }

            $(function() { // Sparkline functions.
                /* This code runs when everything has been loaded on the page */
                /* Inline sparklines take their values from the contents of the tag */
                $('.inlinesparkline1').sparkline('html', {width: '2.0em', fillColor: '#87CEFA', lineColor: 'blue'});
                $('.inlinesparkline2').sparkline('html', {width: '2.0em', fillColor: '#FF9999', lineColor: 'red'});
                $('.inlinesparkline3').sparkline('html', {width: '2.0em', fillColor: '#99FF99', lineColor: 'green'});
                $('.inlinesparkline4').sparkline('html', {width: '2.0em', fillColor: '#87CEFA', lineColor: 'blue', chartRangeMin: 0});
                $('.inlinesparkline5').sparkline('html', {width: '2.0em', fillColor: '#FF9999', lineColor: 'red', chartRangeMin: 0});
                $('.inlinesparkline6').sparkline('html', {width: '2.0em', fillColor: '#99FF99', lineColor: 'green', chartRangeMin: 0});

                /* Sparklines can also take their values from the first argument
                 passed to the sparkline() function */
                //var myvalues = [10,8,5,7,4,4,1];
                //$('.dynamicsparkline').sparkline(myvalues);

                /* The second argument gives options such as chart type */
                //$('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

                /* Use 'html' instead of an array of values to pass options
                 to a sparkline with data in the tag */
                $('.inlinebar4').sparkline('html', {type: 'bar', width: '2.0em', barColor: 'blue', negBarColor: 'red', barWidth: 3});
                $('.inlinebar7').sparkline('html', {type: 'bar', width: '2.0em', barColor: 'blue', negBarColor: 'red', barWidth: 3, chartRangeMin: 0});
            });

            function doCAWin(formName) {
                var lnk = eval('document.' + formName + '.da2.value;');
                var x = window.open(lnk, 'doCAWin', 'fullscreen=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes,left=0,top=0,screenX=0,screenY=0', false);
            }

        </script>

    </HEAD>
    <BODY>
        <form>
            <span id="mlnprt2">&nbsp;2005       <a class="DL" title="# of births" onmouseover="setStatus('Value Dimension - # of births');" onmouseout="setStatus(' ');
                    ;">   12018        </a><a class="DL" title="% of births
                                                   US avg. = 63 / 2005
                                                   KY avg. = 58 / 2006
                                                   Current Target: 85" onmouseover="setStatus('Rate Dimension - % of births / US avg. = 63 / 2005, KY avg. = 58 / 2006');" onmouseout="setStatus(' ');">  68.30       </a>     68.3          -1.20<a title="Alert: 2 of last 5 strides and 1 of last 2 are negative" style="position:relative;left:1px;" onmouseover="setStatus(' ');" onmouseout="setStatus(' ');"><img src="http://steepusa.no-ip.info/scx/../images/flag_orange3.gif" width="8"></a>          1.50           -1.80          </span>
            <div id="ghmln"  class="dsonesuk">&nbsp;<a id="zhealthy" class="zzz tn" href="genmdash.cgi?str=1:SKY:healthy:healthy*births:4" title="v,r,s,S Trend Preview / More Detail" onmouseover="javascript:showIt2('healthy');
                    setStatus(' ');" onmouseout="javascript:hideIt('xhealthy');
                            setStatus(' ');"><img src="http://steepusa.no-ip.info/scx/../images/rhom4.gif" width="6" height="6"></a>&nbsp;<a class="zzz tn" href="ddown.cgi?str=SKY%2DC%3A%2FSteep%2FUSA%20Data%2FState%2FKY%2FMeasures%2Fhealthy%2Fhealthy%2Edes%2Dhealthy%2Dhealthy%20births%2Dlevel1%2D1" title="Looks" onmouseover="setStatus(' ');" onmouseout="setStatus(' ');"><img src="http://steepusa.no-ip.info/scx/../images/nbul.gif" width="6" height="6"></a>
                <div id='xhealthy' class="dsonesuk_TT" ><span class='tooltip'>healthy births Trends<BR></span><span ID='sls'>&nbsp<span class='inlinesparkline1'>10401,12765,11574,13078,12018</span>&nbsp&nbsp<span class='inlinesparkline2'>61,67.1,64.5,69.5,68.3</span>&nbsp&nbsp<span class='inlinesparkline3'>61,67.1,64.5,69.5,68.3</span>&nbsp&nbsp<span class='inlinebar4'>2,6.1,-2.6,5,-1.2</span>&nbsp&nbsp</span>
                </div>
                <script>hideIt('xhealthy');</script></div>



        </FORM>
    </body>
</html>

In Fact! this could be all css, without javascript

craigtussey · December 16, 2017

dsonesuk, I duplicated part of your code to form a second line like the first. For some reason the 2nd line sparklines did not hide. But notice the line spacing. The height of the hidden sparklines determine the line spacing.

http://steepusa.no-ip.info/w3test.html

It was even worse when I tried it because the sparklines were taller. However, I started to redo my code to show you the line spacing I had experienced and this time I didn't do any css. I just moved the measure data print instruction below the legend construction line, eliminated the concatenation, and placed the variable containing the sparklines ($gstr) at the end of the measure data line print instruction and ran it.

$surtok = 'x' . $imtok;
              $gstr = "<div id='$surtok'><span class='toolTip' style='position:absolute;top:86px;left:87%;font-size:9px;background-color:#$ltappbgcolr;'>$pimtok Trends<BR></span><span    ID='sls'>&nbsp<span class='inlinesparkline$j'>$values</span>&nbsp&nbsp<span class='inlinesparkline$k'>$rates</span>&nbsp&nbsp<span class='inlinesparkline$l'>$states</span>&nbsp&nbsp<span class='inlinebar$m'>$strides</span>&nbsp&nbsp</span></div><script>hideIt('$surtok');</script>";

              # Legends.

              $mdlines[9] =~ s/\<.*?\>//s; # Remove links.
              $len = length($mdlines[9]);
              $len = int(($len/2)*4) + 28;
              $surtok = 'xxl' . $imtok;
              $legstr .= "<div id='$surtok'><span class='toolTip' style='position:absolute;top:89px;left:2%;font-size:9px;background-color:#$ltappbgcolr;'>$pimtok Legend<BR></span><span id='leg' class='toolTip' style='width:$len;text-align:left;'>$mdlines[9]</span></div>";

print "<span ID='ghmln2'>$lastln</span><span ID='mlnprt2'>&nbsp$lastln2</span><span ID='ghmln'>&nbsp$lastln3</span>$gstr\n"; # Print measure line.

The result is almost what I'm looking for. Run the following link and mouse over all the controls.

http://steepusa.no-ip.info/scx/m1new2.cgi

The lines are initially spaced by the height of the sparklines. But when I moused over the controls (all 4), the spacing collapsed resulting in what I hoped for. What a surprise. If I can just get the presentation to come up in the collapsed form, its there.

Thanks very much for your work on this dsonesuk. I bumped into this because of what you did. You sure did what you did fast. I appreciate your ability. I hope I can get it to come up in the collapsed form. I'm drawing a blank at the moment. These 'profiles of best understanding' can have 50 or more measure organized in groups, so I need to keep the presentation tight.

And thanks to everyone else.

I'm going to bed now. I have a bad cold. But I'll be back in the morrow.

craigtussey · December 17, 2017

Its working as intended now. The result can be seen below. Hover over the measure description and the 2nd to last icon on the 1st measure line.

http://steepusa.no-ip.info/scx/m1new2.cgi

Again, I really appreciate the help.

hidden images lose CSS structure on reposition before showing the image

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in