1

I have to write a steped progressbar which need to work with all browsers, even IE7+. This progressbar is already written but prior to incorporating it to a bigger project, i have noticed that it was not working with firefox but all the others browsers have a good behavior.

I have reduced the code until the beggining of my work on it, where i still have my display problem with firefox.

So i have tryed my code with some tools:

  1. Jslint
  2. Firebug addon
  3. w3c validator

I have changed a bit of my code.

I have understood that my problem is in relation with the DOM.

This Moz Foundation getElementById is maybe the explanation.

So here is the css :

<style type="text/css">
  #outside {
    height: 18px;
    background-color: #cccacd;
    z-index: 5;
    position: relative; 
    border-style:solid;
    border-color:#24242d;
    border-width: 1px;
  }
  #inside {
    width: 0px;
    height: 100%;
    background-color: #0089cf;
    overflow: visible;
    color: white;
    white-space: nowrap;
    z-index: 10;
    position: relative; 
  }             
</style>

The small html code in the body tag 

<form id="form1" runat="server" action="ProgressBar.aspx">
<div>

        <div id="outside" runat="server">
            <div id="inside" style="width: 50%;" runat="server"></div>
        </div>
</div>
</form>

And finally my script

    <script type="text/javascript">

    /*jslint browser: true*/
    /*global $, jQuery, document, Modernizr*/

    function bindEvent(el, eventName, eventHandler) {
        "use strict";
        if (el.addEventListener) {
            // IE 9+, Chrome, Opéra, Safari, Firefox
            el.addEventListener(eventName, eventHandler, false);
    } else if (el.attachEvent) {
        // IE7, IE8
        el.attachEvent('on' + eventName, eventHandler);
    }
}

window.onload = function () {
    "use strict";

    var outside, inside;
    outside = document.getElementById("outside");
    inside = document.getElementById("inside");

bindEvent(outside, 'click', function (e) {

    var position = (e.offsetX / outside.offsetWidth) * 100;

    if (position >= 0 && position <= 10) {
        inside.style.width = "0%";
    }
    if (position > 10 && position <= 35) {
        inside.style.width = "25%";
    }
    if (position > 35 && position <= 65) {
        inside.style.width = "50%";
    }
    if (position > 65 && position <= 85) {
        inside.style.width = "75%";
    }
    if (position > 85 && position <= 100) {
        inside.style.width = "100%";
    }
    });
};

</script>

I know i'm close to make it work with Firefox but now i need your help :)

Corto.R
  • 47
  • 4

3 Answers3

0

offsetX is not supported in Firefox, and that's why it doesn't work.

You should be using e.pageX instead.

var position = ((e.pageX - outside.offsetLeft) / outside.offsetWidth) * 100;
adeneo
  • 312,895
  • 29
  • 395
  • 388
0

E.Offsetx not support in firefox use e.clientX instead and try

Indranil.Bharambe
  • 1,462
  • 3
  • 14
  • 25
0

As adeneo said: there is no offsetX but also no reliable offsetWidth so I used some more jQuery (which works cross browser and was noted in your code comment.

var outside, inside;
outside = $("#outside");    
inside = $("#inside");

$("#outside").on('click', function (e) {
    var ofx =  e.offsetX==undefined?e.pageX:e.offsetX;
    var position = (ofx / outside.outerWidth()) * 100;

    if (position >= 0 && position <= 10) {
        inside.css("width", "0%");
    }
    // etc.

working jsfiddle

Community
  • 1
  • 1
JP Hellemons
  • 5,977
  • 11
  • 63
  • 128