Jump to content

hidden images lose CSS structure on reposition before showing the image


craigtussey
 Share

Recommended Posts

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>
 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>";
 

        

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

<!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

Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...