bar graph js widget test

[Jeff Thies]

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

[Louis Somers]

"Jeff Thies" <no****@nospam.net> 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

[Martin Honnen]

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/

[Evertjan.]

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

"Jeff Thies" <no****@nospam.net> 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)

[Jeff Thies]

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)

[Richard]

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.