www.webdeveloper.com
Results 1 to 3 of 3

Thread: IE7 Overflow problem

Threaded 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

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