[rbflowers]

On my webpage I have 20 or so different boxes that display a gauge. When the user clicks inside the box, it's suppose to open and display various statistics, graphs, etc.

html:

 <div class="box" id="a">
        <div class="boxTitle" id="middle">TITLE</div>
        <div class="shownGauge"><div id="MTPM"></div></div>
        <div class="hidGauge"><div id="MTPQ"></div></div>
        <div class="hidGauge"><div id="MTPY"></div></div>
        <div class="runChart"></div>
        <div class="metricOwners">Metric owner: , Data provider: </div>
        <div class="L2">
            <h1>L2/L3 Drivers:</h1>
            <div class="multiBreakdowns" id="good">Driver 1</div><div class="multiBreakdowns" id="good">Driver 2</div><div class="multiBreakdowns" id="middle">Driver 3</div>
            <div class="multiBreakdowns" id="bad">Driver 4</div><div class="multiBreakdowns" id="bad">Driver 5</div><div class="multiBreakdowns" id="middle">Driver 6</div>
        </div>
       
        <div class="extras">
            <h1>Operational Definition:</h1>
                <p>Definition</p>
            <h1>Strategy:</h1><p>Strategy text goes here.</p>
        </div>
        <div class="extras"><h1>Key Improvements:</h1><ol><li>Improvement 1</li><li>Improvement 2</li><li>Improvement 3</li></ol></div>
        <div class="extras"><h1>Key issues:</h1><ol><li>Issue 1</li><li>Issue 2</li><li>Issue 3</li></ol></div>
    </div>

When the user clicks anywhere in the div id = "a", the box should open:

JS code:

    $("div#a").click(function () {
        //if height is normal
        if (open[1] == 'n') {
            moveToTop('div#a');
            openBox('div#a');
            open[1] = 'y';
        }
        //height is bigger
        else {
            moveToTop('div.summary');
            closeBox('div#a');
            open[1] = 'n';
        }
    });

However, when the user clicks the div id="MTPM", which is inside div id="a", it doesn't work.

Any idea as to why?

[Atli]

Testing your code over here, I can't seem to replicate that problem. Whatever it is, I'm guessing it has something to do with another part of the Javascript and/or CSS that we aren't seeing.

Do you have any other click handlers attacked to the #MTPM div? If at any point such a handler called the event.stopPropagation() function, that would cause an issue like this.

Do you have this on a live host somewhere we can take a look?

[rbflowers]

I think it has something to do with the gauge code. If I delete this part (the part that loads the gauge):

<div id="MTPM"></div>

I can click anywhere in the box and get it to open correctly.

I don't have any other click handlers on the MTPM id.

Is it possible to have something like this:


$("div#a" || "div#MTPM").click(function () {

Then I could just make this work-around.

But no, the site is through my company's intranet and :. can't be shown live

Here's the css:

/*The box that everything goes in*/
div.box {text-align:left;display:inline-block; margin:2.5px; height:230px; width:255px; border: thin groove black; cursor:pointer; overflow:hidden;}
/*Below are all of the elements that go inside the boxes*/
div.shownGauge {display:inline-block; height:200px; width:255px; margin-right:9px; margin-bottom:9px; overflow:hidden; vertical-align:top;}
div.hidGauge {display:inline-block; height:200px; width:255px;  margin:9px; overflow:hidden; vertical-align:top;}
div.runChart {display:inline-block; height:200px; width:495px; margin:9px;vertical-align:top; }
div.stratObject {display:block; height:100%; width:100%; margin: 8px; padding:5px; }
div.extras {display:inline-block; position:relative; height:100%; width:410px; border: thin groove black; margin: 8px; padding:5px; vertical-align:top;position:relative; top:-40px;  color:#084482;}
/*use below if a metric is a summation of individual metrics*/
div.L2 {display:block; height:100%; width:100%; margin: 8px; padding:5px; position:relative; top:-40px; color:#084482;}
div.multiBreakdowns {display:inline-block; height:20px; border:thin groove black; margin:5px; padding: 5px; position:relative; top:-20px;}
 /*Moves the disclaimer box up to make it look better*/

This post has been edited by rbflowers: 06 August 2012 - 11:13 AM

[Atli]

Without seeing the whole thing it'll be hard to debug. I added the CSS but it still works fine over here.

rbflowers, on 06 August 2012 - 06:12 PM, said:

Is it possible to have something like this:


$("div#a" || "div#MTPM").click(function () {

Sure. you can specify multiple selectors in the jQuery call:

$("#a, #MTPM").click(function() { ... });

But be careful about doing this, because events pass through to parent elements. The #MTPM div is a child of #a, so when you click #MTPM it will travel through to #a and trigger the callback function twice. - Or it would under normal circumstances. Since I don't know what is causing your problem I can't really predict how this will behave.


By the way, the div in div#a is unnecessary. By definition, an "id" attribute must be unique across all elements in the document, so unlike with class selectors, specifying the type of element on an ID selector is kind of pointless.

[rbflowers]

Ya, adding the other parameter prevented it from opening.

If you download highcharts beta 2.3, or link these:
<script src="http://code.highcharts.com/v2.3Beta/highcharts.js"></script>
<script src="http://code.highcharts.com/v2.3Beta/highcharts-more.js"></script>

the:

<div id="MTPM"></div>

Will call the gauge found in gauge.js here:

$(document).ready(function () {
    //MTPGauge
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'MTPM',
            type: 'gauge',
            height: 200,
            width: 255
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Monthly Progress',
            style: {
                fontSize: '16px'
            }
        },

        pane: {
            center: ['50%', '80%'],
            size: '155%',
            startAngle: -100,
            endAngle: 100
        },

        yAxis: {
            min: 0,
            max: 200,
            lineWidth: 0,

            minorTickInterval: 'none',

            tickPixelInterval: 30,
            tickPosition: 'inside',
            labels: {
                step: 5,
                rotation: 'auto',
                distance: -30,
                style: {
                    fontSize: '16px'
                }
            },
            title: {
                text: 'Baseline:' + ' 40 <br /> Goal:' + ' 120',
                y: 20,
                style: {
                    fontSize: '14px'
                }
            },
            plotBands: [{
                from: 0,
                to: 40,
                color: 'red'
            }, {
                from: 40,
                to: 120,
                color: 'yellow'
            }, {
                from: 120,
                to: 200,
                color: 'green'
            }]
        },

        series: [{
            name: 'Speed',
            data: [80],
            dataLabels: {
                enabled: true,
                color: 'black',
                y: 35,
                style: {
                    fontSize: '16px'
                }
            }
        }]
    });
});

Perhaps that will help reproducing the problem?

[Atli]

Yep, that's where the problem is. When examining the additional elements that this highcharts.js code added to the #MTMP div, it appears that it does in fact set a click even on it, and prevents it from traveling up the DOM to where it could reach your own click handlers.

On line 8747 of the highcharts.js script, a click handler is set on a "container" element, which is the element the scripts adds into the #MTMP div to display the graphic. A few lines later, on line 8753, it does e.cancelBubble = true;, which effectively blocks the event from traveling up.

You can try making a copy of the file and remove that line. However I haven't examined the entire source, so I don't know if there is some reason why they block the event from bubbling up. You could be causing other issues.

[rbflowers]

Works perfectly for now, thanks!