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]

Re: bar graph js widget test

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

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]

Re: bar graph js widget test



Jeff Thies wrote:
[color=blue]
> 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.[/color]

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

--

Martin Honnen

http://JavaScript.FAQTs.com/

[Evertjan.]

Re: bar graph js widget test

Louis Somers wrote on 02 dec 2003 in comp.lang.javas cript:
[color=blue]
> "Jeff Thies" <nospam@nospam. net> wrote in news:uy3zb.1305 $Oe5.89
> @newsread2.news .atl.earthlink. net:
>[color=green]
>> http://thelimit.com/test/test_width.htm[/color][/color]

<script>
function changeBar(x){
var w = window.event.of fsetX
if (x.id == 'b1'){
x.style.pixelWi dth = w
document.getEle mentById('b2'). style.pixelWidt h = 500-w
} else {
w = x.style.pixelWi dth -= w
document.getEle mentById('b1'). style.pixelWidt h = 500-w
}
}
</script>

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

IE6 tested

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[Jeff Thies]

Re: bar graph js widget test

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
[color=blue]
> <script>
> function changeBar(x){
> var w = window.event.of fsetX
> if (x.id == 'b1'){
> x.style.pixelWi dth = w
> document.getEle mentById('b2'). style.pixelWidt h = 500-w
> } else {
> w = x.style.pixelWi dth -= w
> document.getEle mentById('b1'). style.pixelWidt h = 500-w
> }
> }
> </script>
>
> <div style="display: inline;width:25 0px;background-color:red;"
> id="b1" onclick="change Bar(this)"></div>
> <div style="display: inline;width:25 0px;background-color:green;"
> id="b2" onclick="change Bar(this)"></div>
>
> IE6 tested
>
> --
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)[/color]

[Richard]

Re: bar graph js widget test

Jeff! wrote:
[color=blue]
> 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.[/color]
[color=blue]
> Here's what I've mocked up (it's rough):[/color]
[color=blue]
> http://thelimit.com/test/test_width.htm[/color]
[color=blue]
> How does that work in your environment? I think Opera will get the first
> two wrong, but am not sure.[/color]
[color=blue]
> I would imagine this could be done with flash? Any advantage?[/color]
[color=blue]
> Jeff[/color]

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.