6 Replies - 593 Views - Last Post: 07 August 2012 - 09:28 AM

#1 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

.click function not working properly

Posted 06 August 2012 - 10:21 AM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: .click function not working properly

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,995
  • Joined: 08-June 10

Re: .click function not working properly

Posted 06 August 2012 - 11:02 AM

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?
Was This Post Helpful? 0
  • +
  • -

#3 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

Re: .click function not working properly

Posted 06 August 2012 - 11:12 AM

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

Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,995
  • Joined: 08-June 10

Re: .click function not working properly

Posted 06 August 2012 - 11:32 AM

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

View Postrbflowers, 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.
Was This Post Helpful? 0
  • +
  • -

#5 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

Re: .click function not working properly

Posted 07 August 2012 - 08:43 AM

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?
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,995
  • Joined: 08-June 10

Re: .click function not working properly

Posted 07 August 2012 - 09:17 AM

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.
Was This Post Helpful? 0
  • +
  • -

#7 rbflowers  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 10-February 12

Re: .click function not working properly

Posted 07 August 2012 - 09:28 AM

Works perfectly for now, thanks!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1