bar graph js widget test

Discussion in 'HTML' started by Jeff Thies, Dec 2, 2003.

  1. Jeff Thies

    Jeff Thies Guest

    I need a clickable/setable bar graph for a project (an image size editor).
    I'd like this to work in modern js enabled browsers.

    Here's what I've mocked up (it's rough):

    http://thelimit.com/test/test_width.htm

    How does that work in your environment? I think Opera will get the first two
    wrong, but am not sure.

    I would imagine this could be done with flash? Any advantage?

    Jeff
     
    Jeff Thies, Dec 2, 2003
    #1
    1. Advertisements

  2. Jeff Thies

    Louis Somers Guest

    "Jeff Thies" <> wrote in news:uy3zb.1305$Oe5.89
    @newsread2.news.atl.earthlink.net:

    > http://thelimit.com/test/test_width.htm


    Opra gets the 1'st and the 2nd right. but the bars don't show up.

    In IE6 I find the bars stick ferther out than the marks above them. (width
    is wider) Not sure if it's supposed to be?

    --
    News Updater, No scripts, No Database
    http://www.xmlssoftware.com/NUpdater
     
    Louis Somers, Dec 2, 2003
    #2
    1. Advertisements

  3. Jeff Thies wrote:

    > I need a clickable/setable bar graph for a project (an image size editor).
    > I'd like this to work in modern js enabled browsers.
    >
    > Here's what I've mocked up (it's rough):
    >
    > http://thelimit.com/test/test_width.htm
    >
    > How does that work in your environment? I think Opera will get the first two
    > wrong, but am not sure.


    Clicking the bars causes script errors with Mozilla/Netscape as
    parent_node.childNodes(j)
    is not the right way to index childNodes with JavaScript. Use square
    brackets
    parent_node.childNodes[j]
    or use the item method
    parent_node.childNodes.item(j)

    --

    Martin Honnen
    http://JavaScript.FAQTs.com/
     
    Martin Honnen, Dec 2, 2003
    #3
  4. Jeff Thies

    Evertjan. Guest

    Louis Somers wrote on 02 dec 2003 in comp.lang.javascript:

    > "Jeff Thies" <> wrote in news:uy3zb.1305$Oe5.89
    > @newsread2.news.atl.earthlink.net:
    >
    >> http://thelimit.com/test/test_width.htm


    <script>
    function changeBar(x){
    var w = window.event.offsetX
    if (x.id == 'b1'){
    x.style.pixelWidth = w
    document.getElementById('b2').style.pixelWidth = 500-w
    } else {
    w = x.style.pixelWidth -= w
    document.getElementById('b1').style.pixelWidth = 500-w
    }
    }
    </script>

    <div style="display:inline;width:250px;background-color:red;"
    id="b1" onclick="changeBar(this)"></div>
    <div style="display:inline;width:250px;background-color:green;"
    id="b2" onclick="changeBar(this)"></div>

    IE6 tested

    --
    Evertjan.
    The Netherlands.
    (Please change the x'es to dots in my emailaddress)
     
    Evertjan., Dec 2, 2003
    #4
  5. Jeff Thies

    Jeff Thies Guest

    Thanks to all!

    I've updated with Martin's fix.

    The float: left version works correctly in NS7, as NS7 (rightly,
    probably) does not like widths/heights for inline elements.

    Evertjan's code below looks like a better alternative. Unsure of the event
    handling outside of IE though. Why does event handling follow no standards.

    Cheers,
    Jeff

    > <script>
    > function changeBar(x){
    > var w = window.event.offsetX
    > if (x.id == 'b1'){
    > x.style.pixelWidth = w
    > document.getElementById('b2').style.pixelWidth = 500-w
    > } else {
    > w = x.style.pixelWidth -= w
    > document.getElementById('b1').style.pixelWidth = 500-w
    > }
    > }
    > </script>
    >
    > <div style="display:inline;width:250px;background-color:red;"
    > id="b1" onclick="changeBar(this)"></div>
    > <div style="display:inline;width:250px;background-color:green;"
    > id="b2" onclick="changeBar(this)"></div>
    >
    > IE6 tested
    >
    > --
    > Evertjan.
    > The Netherlands.
    > (Please change the x'es to dots in my emailaddress)
     
    Jeff Thies, Dec 2, 2003
    #5
  6. Jeff Thies

    Richard Guest

    Jeff! wrote:

    > I need a clickable/setable bar graph for a project (an image size
    > editor). I'd like this to work in modern js enabled browsers.


    > Here's what I've mocked up (it's rough):


    > http://thelimit.com/test/test_width.htm


    > How does that work in your environment? I think Opera will get the first
    > two wrong, but am not sure.


    > I would imagine this could be done with flash? Any advantage?


    > Jeff


    Worked fine for me in IE6. Bar changed a tad length wise when clicked on
    though. No big deal.
    No way to reset the color to original status.
     
    Richard, Dec 3, 2003
    #6
    1. Advertisements

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt
    Replies:
    0
    Views:
    3,681
  2. John Hann
    Replies:
    0
    Views:
    6,257
    John Hann
    Aug 21, 2004
  3. Matt
    Replies:
    9
    Views:
    71,608
  4. Matt
    Replies:
    9
    Views:
    735
    kaeli
    Aug 23, 2004
  5. Emilio Mayorga
    Replies:
    6
    Views:
    424
    Martien Verbruggen
    Oct 8, 2003
Loading...

Share This Page