By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,599 Members | 1,872 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,599 IT Pros & Developers. It's quick & easy.

bar graph js widget test

P: n/a
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


Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
"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
Jul 20 '05 #2

P: n/a


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/

Jul 20 '05 #3

P: n/a
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)
Jul 20 '05 #4

P: n/a
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)

Jul 20 '05 #5

P: n/a
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.


Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.