Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > bar graph js widget test

Reply
Thread Tools

bar graph js widget test

 
 
Jeff Thies
Guest
Posts: n/a
 
      12-02-2003
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




 
Reply With Quote
 
 
 
 
Louis Somers
Guest
Posts: n/a
 
      12-02-2003
"Jeff Thies" <(E-Mail Removed)> 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
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      12-02-2003


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/

 
Reply With Quote
 
Evertjan.
Guest
Posts: n/a
 
      12-02-2003
Louis Somers wrote on 02 dec 2003 in comp.lang.javascript:

> "Jeff Thies" <(E-Mail Removed)> 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)
 
Reply With Quote
 
Jeff Thies
Guest
Posts: n/a
 
      12-02-2003
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)



 
Reply With Quote
 
Richard
Guest
Posts: n/a
 
      12-03-2003
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.




 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
disable title bar, status bar, and address bar of a window Matt HTML 9 08-23-2004 07:49 PM
Re: disable title bar, status bar, and address bar of a browser window John Hann ASP .Net 0 08-21-2004 05:07 AM
disable title bar, status bar, and address bar of a browser window Matt ASP .Net 0 08-21-2004 03:50 AM
GD::Graph: "mixed" graph doesn't recognize "area" graph type Emilio Mayorga Perl Misc 6 10-08-2003 02:14 AM
test test test test test test test Computer Support 2 07-02-2003 06:02 PM



Advertisments