dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE7 Overflow problem

Hybrid View

  1. #1
    Join Date
    Dec 2008
    Posts
    488

    Question IE7 Overflow problem

    Hi,

    I'm building a Jquery/CSS graph for the sales department to pull reports. The problem I'm having is that when the person hovers over one of the bars of data, the value is supposed to appear over the bar. This works great in every browser except the IE7 version of IE8 (using developer tools). I haven't been able to test in an actual IE7 browser, so I'm not sure if it's just that.

    Anyway, what happens is the value gets cut off by the width of the bar. No matter what z-index I use, it won't come out on front and show all of it's content. I'll show an example from both a working browser and IE7 so you can see what I mean.

    Here's the actual HTML:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    .graph {
        height: 300px;
        width: 300px;
        margin: 0;
        padding: 0px;
        border: 1px solid #666666;
        position: relative;
    }
    .graphcontainer {
        margin: 20px;
        padding:20px;
    }
    .graphwrapper {
        margin: 0 0 0 50px;
        font-size: 12px;
        color: #666666;
    }
    .bar {
        position: absolute;
        bottom: 0;
        margin: 0;
        display: none;
        -moz-box-shadow: -2px -2px 4px #000;
        -webkit-box-shadow: -2px -2px 4px #000;
        box-shadow: -2px -2px 4px #000;
        overflow: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=315, Color='#000000')";
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=315, Color='#000000');
    }
    .bar span {
        background: #ffffff;
        border: 1px solid #ccc;
        display: none;
        left: 5px;
        padding: 3px;
        position: absolute;
        top: 6px;
        z-index: 99999999999999;
    }
    .bar:hover span {
        display: inline;
    }
    .labelsleft {
        position: absolute;
        height: 320px;
        width: 50px;
        left: -55px;
        top: -9px;
        text-align: right;
        padding: 0 5px 0 0;
        display: none;
        z-index: 9999999;
    }
    .labelsleft span {
        display: block;
        z-index: 999999999;
    }
    .labelsleft span.last {
        margin-bottom: 0;
    }
    .labelsbottom {
        margin: 0;
        padding: 0 0 0 10px;
        width: 300px;
        display: none;
    }
    .labelsbottom span {
        display: inline-block;
        text-align: center;
    }
    .graphcontainer div.data ul.scale {
        display: none;
    }
    .labelsbottom div {
        color:#000000;
        font-size:14px;
        text-align:center;
    }
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
    var isIE8, shadowOffset;
    isIE8 = $.browser.msie && /^8($|\.)/.test($.browser.version);
    shadowOffset = isIE8?4:0;
    
    function graphData() {
        var keysCount = 0, gdv, rng, ct, rndCol, inc, mx, mn, mgn, ht, ost, graph, labelsleft, labelsbottom, pre = "", ycurrency;
        if (arguments.length > 0) {
            if (arguments.length === 1) {
                graph = arguments[0];
                if (typeof(graph) === 'object' && graph.length === undefined) {
                    labelsleft = graph.container.children().children('.graph').children('.labelsleft');
                    labelsbottom = graph.container.children().children('.labelsbottom');
                    gdv = graph.container.children().children('.graph');
                    if (graph.scale) {
                        inc = parseFloat(graph.scale.increment);
                        mx = parseFloat(graph.scale.maximum);
                        mn = parseFloat(graph.scale.minimum);
                        rng = mx - mn;
                        graph.scale.barWidth = parseFloat(graph.scale.barWidth);
                        graph.scale.graphHeight = parseFloat(graph.scale.graphHeight);
                        mgn = Math.round((graph.scale.graphHeight / (rng / inc)) - 18);
                        for (ct = mx; ct >= mn; ct -= inc) {
                            if (graph.scale.yaxisFormat === "number") {
                                ycurrency = "";
                            }
                            else if (/currency/.test(graph.scale.yaxisFormat)) {
                                ycurrency = graph.scale.yaxisFormat.replace("currency", "");
                            }
                            else {
                                ycurrency = "";
                            }
                            pre = ycurrency + (ct * Math.pow(10,parseFloat(graph.scale.yaxisPrecision.split(".")[0]))).toFixed(graph.scale.yaxisPrecision.split(".")[1]) + graph.scale.yaxisUnits;
                            labelsleft.append('<span style="margin-top:' + (ct === mx ? 0 : mgn) + 'px;">' + pre + '</span>');
                        }
                    }
                    if (graph.values) {
                        $.each(graph.values, function (keys, vals) {
                            keysCount += 1;
                            rndCol = "RGB(" + (256 - Math.floor(Math.random() * 150)) + "," + (256 - Math.floor(Math.random() * 150)) + "," + (256 - Math.floor(Math.random() * 150)) + ")";
                            ht = (parseFloat(vals.replace(/[^\d\.]/g, '')) / rng) * graph.scale.graphHeight + "px";
                            ost = (keysCount * (graph.scale.barWidth + 20)) - (graph.scale.barWidth + shadowOffset) + "px";
                            gdv.append('<div id="' + keys + '" class="bar" style="height:' + ht + '; left:' + ost + '; bottom: ' + shadowOffset + 'px; background-color:' + rndCol + '; width:' + graph.scale.barWidth + 'px;"><span>' + vals + '</span></div>');
                            labelsbottom.append('<span>' + keys + '</span>');
                        });
                        labelsbottom.append('<div>' + graph.scale.xaxisLabel + '</div>');
                        gdv.width((keysCount * (graph.scale.barWidth + 20)) + 22);
                        labelsbottom.width((keysCount * (graph.scale.barWidth + 20)) + 22);
                        labelsbottom.children('span').width(graph.scale.barWidth + 20);
                    }
                }
            }
        }
    }
    function getGraphData(containerDiv) {
        var dataParams = {
            container : containerDiv,
            values :  {},
            scale : {
                increment : 50,
                maximum : 300,
                minimum : 0,
                yaxisUnits : "",
                yaxisFormat : "number",
                yaxisPrecision : "0.0",
                xaxisFormat : "text",
                graphHeight : 300,
                barWidth : 40
            }
        };
        containerDiv.children('.data').children('ul').each(function () {
            var thisul = $(this);
            thisul.children('li').each(function () {
                var thisparam = $(this).text().replace(/\s{0,1}[\:\=]\s{0,1}/, '#$%#$%').split('#$%#$%');
                if (thisparam.length === 2) {
                    dataParams[thisul.attr("class")][thisparam[0]] = thisparam[1];
                }
            });
        });
        return dataParams;
    }
    function findGraphs() {
        if ($('.graphcontainer')) {
            $('.graphcontainer div.data ul').hide();        
            $('.graphcontainer').each(function () {
                var containerSelector = $(this);
                containerSelector.css('display', 'inline-block');
                containerSelector.children('.data').children('h3').css("text-align", "center");
                containerSelector.append('<div class="graphwrapper"><div class="graph"><div class="labelsleft"></div></div><div class="labelsbottom"></div></div>');
                graphData(getGraphData(containerSelector));
            });
            $('.bar').slideDown('slow', function () {
                $('.labelsbottom').fadeIn('slow');
                $('.labelsleft').fadeIn('slow');
            });
        }
    }
    $(document).ready(findGraphs);
    </script>
    
    </head>
    
    <body>
    <span class="graphcontainer">
        <div class="data">
            <h3>December Sales</h3>
            <ul class="values">
                <li>James : $65,231.00</li>
                <li>Joe : $100,000.00</li>
                <li>Jack : $23,650.00</li>
                <li>Jerry : $43,250.00</li>
                <li>Jones : $12,432.00</li>
            </ul>
            <ul class="scale">
                <li>minimum : 0</li>
                <li>maximum : 100000</li>
                <li>increment : 20000</li>
                <li>yaxisFormat : currency$</li>
                <li>yaxisUnits : K</li>
                <li>yaxisPrecision : -3.0</li>
                <li>xaxisLabel : Salesperson</li>
                <li>barWidth : 40</li>
            </ul>
        </div>
    </span>
    </body>
    </html>
    And here are the screenshots I promised:
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2008
    Posts
    488
    Just in case you don't want to attach jQuery to see what the output looks like, here's the output HTML once the data is parsed:
    HTML Code:
    <body>
    <span class="graphcontainer" style="display: inline-block;">
        <div class="data">
            <h3 style="text-align: center;">December Sales</h3>
            <ul class="values" style="display: none;">
                <li>James : $65,231.00</li>
                <li>Joe : $100,000.00</li>
                <li>Jack : $23,650.00</li>
                <li>Jerry : $43,250.00</li>
                <li>Jones : $12,432.00</li>
            </ul>
            <ul class="scale" style="display: none;">
                <li>minimum : 0</li>
                <li>maximum : 100000</li>
                <li>increment : 20000</li>
                <li>yaxisFormat : currency$</li>
                <li>yaxisUnits : K</li>
                <li>yaxisPrecision : -3.0</li>
                <li>xaxisLabel : Salesperson</li>
                <li>barWidth : 40</li>
            </ul>
        </div>
        <div class="graphwrapper">
            <div class="graph" style="width: 322px;">
                <div class="labelsleft" style="display: block;">
                    <span style="margin-top: 0px;">$100K</span>
                    <span style="margin-top: 42px;">$80K</span>
                    <span style="margin-top: 42px;">$60K</span>
                    <span style="margin-top: 42px;">$40K</span>
                    <span style="margin-top: 42px;">$20K</span>
                    <span style="margin-top: 42px;">$0K</span>
                </div>
                <div style="height: 195.693px; left: 20px; bottom: 0px; background-color: rgb(220, 202, 219); width: 40px; display: block;" class="bar" id="James">
                    <span>$65,231.00</span>
                </div>
                <div style="height: 300px; left: 80px; bottom: 0px; background-color: rgb(230, 172, 128); width: 40px; display: block;" class="bar" id="Joe">
                    <span>$100,000.00</span>
                </div>
                <div style="height: 70.95px; left: 140px; bottom: 0px; background-color: rgb(150, 208, 189); width: 40px; display: block;" class="bar" id="Jack">
                    <span>$23,650.00</span>
                </div>
                <div style="height: 129.75px; left: 200px; bottom: 0px; background-color: rgb(121, 255, 191); width: 40px; display: block;" class="bar" id="Jerry">
                    <span>$43,250.00</span>
                </div>
                <div style="height: 37.296px; left: 260px; bottom: 0px; background-color: rgb(181, 170, 246); width: 40px; display: block;" class="bar" id="Jones">
                    <span>$12,432.00</span>
                </div>
            </div>
            <div class="labelsbottom" style="width: 322px; display: block;">
                <span style="width: 60px;">James</span>
                <span style="width: 60px;">Joe</span>
                <span style="width: 60px;">Jack</span>
                <span style="width: 60px;">Jerry</span>
                <span style="width: 60px;">Jones</span>
                <div>Salesperson</div>
            </div>
        </div>
    </span>
    </body>

  3. #3
    Join Date
    Dec 2008
    Posts
    488
    Never mind, I figured it out. I had a Span with position:absolute inside a Div with position:absolute, so this canceled out the top-level placement. I changed it so the value span is inserted adjacent to the bar div rather than inside it. I had to make some adjustments to the positioning and add a $.hover() event as well.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    .graph {
        height: 300px;
        width: 300px;
        margin: 0;
        padding: 0px;
        border: 1px solid #666666;
        position: relative;
    }
    .graphcontainer {
        margin: 20px;
        padding:20px;
    }
    .graphwrapper {
        margin: 0 0 0 50px;
        font-size: 12px;
        color: #666666;
    }
    .bar {
        position: absolute;
        bottom: 0;
        margin: 0;
        display: none;
        -moz-box-shadow: -2px -2px 4px #000;
        -webkit-box-shadow: -2px -2px 4px #000;
        box-shadow: -2px -2px 4px #000;
        overflow: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=315, Color='#000000')";
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=315, Color='#000000');
    }
    .barvalue {
        background: #ffffff;
        border: 1px solid #ccc;
        display: none;
        padding: 3px;
        position: absolute;
        z-index: 99999999999999;
    }
    .bar:hover span {
        display: inline;
    }
    .labelsleft {
        position: absolute;
        height: 320px;
        width: 50px;
        left: -55px;
        top: -9px;
        text-align: right;
        padding: 0 5px 0 0;
        display: none;
        z-index: 9999999;
    }
    .labelsleft span {
        display: block;
        z-index: 999999999;
    }
    .labelsleft span.last {
        margin-bottom: 0;
    }
    .labelsbottom {
        margin: 0;
        padding: 0 0 0 10px;
        width: 300px;
        display: none;
    }
    .labelsbottom span {
        display: inline-block;
        text-align: center;
    }
    .graphcontainer div.data ul.scale {
        display: none;
    }
    .labelsbottom div {
        color:#000000;
        font-size:14px;
        text-align:center;
    }
    </style>
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript">
    var isIE8, shadowOffset;
    isIE8 = $.browser.msie && /^8($|\.)/.test($.browser.version);
    shadowOffset = isIE8?4:0;
    
    function graphData() {
        var keysCount = 0, gdv, rng, ct, rndCol, inc, mx, mn, mgn, ht, ost, graph, labelsleft, labelsbottom, pre = "", ycurrency;
        if (arguments.length > 0) {
            if (arguments.length === 1) {
                graph = arguments[0];
                if (typeof(graph) === 'object' && graph.length === undefined) {
                    labelsleft = graph.container.children().children('.graph').children('.labelsleft');
                    labelsbottom = graph.container.children().children('.labelsbottom');
                    gdv = graph.container.children().children('.graph');
                    if (graph.scale) {
                        inc = parseFloat(graph.scale.increment);
                        mx = parseFloat(graph.scale.maximum);
                        mn = parseFloat(graph.scale.minimum);
                        rng = mx - mn;
                        graph.scale.barWidth = parseFloat(graph.scale.barWidth);
                        graph.scale.graphHeight = parseFloat(graph.scale.graphHeight);
                        mgn = Math.round((graph.scale.graphHeight / (rng / inc)) - 18);
                        for (ct = mx; ct >= mn; ct -= inc) {
                            if (graph.scale.yaxisFormat === "number") {
                                ycurrency = "";
                            }
                            else if (/currency/.test(graph.scale.yaxisFormat)) {
                                ycurrency = graph.scale.yaxisFormat.replace("currency", "");
                            }
                            else {
                                ycurrency = "";
                            }
                            pre = ycurrency + (ct * Math.pow(10,parseFloat(graph.scale.yaxisPrecision.split(".")[0]))).toFixed(graph.scale.yaxisPrecision.split(".")[1]) + graph.scale.yaxisUnits;
                            labelsleft.append('<span style="margin-top:' + (ct === mx ? 0 : mgn) + 'px;">' + pre + '</span>');
                        }
                    }
                    if (graph.values) {
                        $.each(graph.values, function (keys, vals) {
                            keysCount += 1;
                            rndCol = "RGB(" + (256 - Math.floor(Math.random() * 150)) + "," + (256 - Math.floor(Math.random() * 150)) + "," + (256 - Math.floor(Math.random() * 150)) + ")";
                            ht = (parseFloat(vals.replace(/[^\d\.]/g, '')) / rng) * graph.scale.graphHeight;
                            ost = (keysCount * (graph.scale.barWidth + 20)) - (graph.scale.barWidth + shadowOffset);
                            gdv.append('<div id="' + keys + '" class="bar" style="height:' + ht + 'px; left:' + ost + 'px; bottom: ' + shadowOffset + 'px; background-color:' + rndCol + '; width:' + graph.scale.barWidth + 'px;"></div>');
                            gdv.append('<span class="barvalue" id="val_' + keys + '" style="left:' + (ost + 8) + 'px; bottom: ' + ((shadowOffset + ht) - 30) + 'px;">' + vals + '</span>')
                            labelsbottom.append('<span>' + keys + '</span>');
                        });
                        labelsbottom.append('<div>' + graph.scale.xaxisLabel + '</div>');
                        gdv.width((keysCount * (graph.scale.barWidth + 20)) + 22);
                        labelsbottom.width((keysCount * (graph.scale.barWidth + 20)) + 22);
                        labelsbottom.children('span').width(graph.scale.barWidth + 20);
                    }
                }
            }
        }
    }
    function getGraphData(containerDiv) {
        var dataParams = {
            container : containerDiv,
            values :  {},
            scale : {
                increment : 50,
                maximum : 300,
                minimum : 0,
                yaxisUnits : "",
                yaxisFormat : "number",
                yaxisPrecision : "0.0",
                xaxisFormat : "text",
                graphHeight : 300,
                barWidth : 40
            }
        };
        containerDiv.children('.data').children('ul').each(function () {
            var thisul = $(this);
            thisul.children('li').each(function () {
                var thisparam = $(this).text().replace(/\s{0,1}[\:\=]\s{0,1}/, '#$&#37;#$%').split('#$%#$%');
                if (thisparam.length === 2) {
                    dataParams[thisul.attr("class")][thisparam[0]] = thisparam[1];
                }
            });
        });
        return dataParams;
    }
    function findGraphs() {
        if ($('.graphcontainer')) {
            $('.graphcontainer div.data ul').hide();        
            $('.graphcontainer').each(function () {
                var containerSelector = $(this);
                containerSelector.css('display', 'inline-block');
                containerSelector.children('.data').children('h3').css("text-align", "center");
                containerSelector.append('<div class="graphwrapper"><div class="graph"><div class="labelsleft"></div></div><div class="labelsbottom"></div></div>');
                graphData(getGraphData(containerSelector));
            });
            $('.bar').each(function (obj, value) {
                var thisbarid = '#val_' + $(this).attr('id');
                $(this).hover(function () {
                    $(thisbarid).show();
                }, function () {
                    $(thisbarid).hide();
                });
                $(thisbarid).hover(function () {
                    $(thisbarid).show();
                }, function () {
                    $(thisbarid).hide();
                });
            });
            $('.bar').slideDown('slow', function () {
                $('.labelsbottom').fadeIn('slow');
                $('.labelsleft').fadeIn('slow');
            });
        }
    }
    $(document).ready(findGraphs);
    </script>
    
    </head>
    
    <body>
    <span class="graphcontainer">
        <div class="data">
            <h3>December Sales</h3>
            <ul class="values">
                <li>James : $65,231.00</li>
                <li>Joe : $100,000.00</li>
                <li>Jack : $23,650.00</li>
                <li>Jerry : $43,250.00</li>
                <li>Jones : $12,432.00</li>
            </ul>
            <ul class="scale">
                <li>minimum : 0</li>
                <li>maximum : 100000</li>
                <li>increment : 20000</li>
                <li>yaxisFormat : currency$</li>
                <li>yaxisUnits : K</li>
                <li>yaxisPrecision : -3.0</li>
                <li>xaxisLabel : Salesperson</li>
                <li>barWidth : 40</li>
            </ul>
        </div>
    </span>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles