How to reduce duplication in this small JS script

R

RichardOnRails

Hi,

I want to draw geometric figures in my webpages. I found a nice
example at
http://www.codeproject.com/KB/scripting/drawConnectorsJL.aspx
which included the following 7 lines:

<style type="text/css">
body {font-size:8pt; font-family:Arial;}
..treeItem {display:block; margin:0px; padding:1px; padding-left:5px;
white-space:nowrap; border-bottom:solid 1px #999999; cursor:pointer;}
..treeItem_hi {display:block; margin:0px; padding:1px; padding-left:
5px; white-space:nowrap; border-bottom:solid 1px #999999;
cursor:pointer; background-color:#0099cc;}
..treeItem_set {display:block; margin:0px; padding:1px; padding-left:
5px; white-space:nowrap; border-bottom:solid 1px #999999;
cursor:pointer; background-color:#d8ebf5;}
</style>
<script type="text/javascript">

Lines 3-5 include the specs:
display:block; margin:0px; padding:1px; padding-left:5px; white-
space:nowrap; border-bottom:solid 1px #999999; cursor:pointer;

I should be able to factor this out into a logically higher level item
from which these three lines could derive this common stuff. But I'm
a JS newbie, so I'd like help in doing that.

Thanks in Advance,
Richard
 
J

Jukka K. Korpela

I want to draw geometric figures in my webpages. I found a nice
example at
http://www.codeproject.com/KB/scripting/drawConnectorsJL.aspx
which included the following 7 lines:

<style type="text/css">
body {font-size:8pt; font-family:Arial;}
.treeItem {display:block; margin:0px; padding:1px; padding-left:5px;
white-space:nowrap; border-bottom:solid 1px #999999; cursor:pointer;}
.treeItem_hi {display:block; margin:0px; padding:1px; padding-left:
5px; white-space:nowrap; border-bottom:solid 1px #999999;
cursor:pointer; background-color:#0099cc;}
.treeItem_set {display:block; margin:0px; padding:1px; padding-left:
5px; white-space:nowrap; border-bottom:solid 1px #999999;
cursor:pointer; background-color:#d8ebf5;}
</style>
That's 9 lines of code - CSS code, which is as such off-topic here.
<script type="text/javascript">

That's just an HTML tag, with no code after it-
I should be able to factor this out into a logically higher level item
from which these three lines could derive this common stuff.

Sense that does not make. Please explain what you really wish to
accomplish. To present figures on web pages, images (embedded using
<img> tags) have been the way to go. You would need to have a special
reason to consider other approaches. What might that be?
 
R

RichardOnRails

Are you aware of SVG support
(https://developer.mozilla.org/en/SVG/Tutorial) in most modern browsers?
Are you aware of Canvas support
(https://developer.mozilla.org/en/canvas_tutorial) in most modern browsers?

Hi Martin,

Thanks for you excellent response.
Are you aware of SVG support
I've heard of Structured Vector Graphics, but didn't think the had
anything to do with browsers. I'll check that out!!
Are you aware of Canvas support
I have "HTML5 Canvas" (O'Reilly) and checked its TOC to no avail.
Pursuant to your suggestion, I'm embarrassed to find report that
drawing lines by specifying a path nodes is there :-( It' actually
referenced in the index. Ugh!

I'm trying to send a derivation of the Law of Cosines to my teenage
granddaughter, which means aside from drawing the lines with a path, I
need to be able to label sides and vertices. Are SVG and Canvass
equally good?

Again, thanks for pointing me in the right direction.
Richard
 
R

RichardOnRails

 > That's 9 lines of code - CSS code, which is as such off-topic here.


That's just an HTML tag, with no code after it-


Sense that does not make. Please explain what you really wish to
accomplish. To present figures on web pages, images (embedded using
<img> tags) have been the way to go. You would need to have a special
reason to consider other approaches. What might that be?

Hi Yucca,

Thanks for you interest in my problem. My reply to Martin spells out
my goal. I looked briefly at your website and see that you've
addressed a lot of issues I'm interest in as I get into creating
mathematical graphics on the web.

Best wishes,
Richard
 
T

Tim Streater

RichardOnRails said:
Hi Yucca,

Thanks for you interest in my problem. My reply to Martin spells out
my goal. I looked briefly at your website and see that you've
addressed a lot of issues I'm interest in as I get into creating
mathematical graphics on the web.

Hmmm, having just reread this thread, I still don't have the slightest
idea what you are talking about. You show us some CSS and then talk
about being a JS newbie without showing us any JavaScript. What are you
doing?
 
R

RichardOnRails

Hmmm, having just reread this thread, I still don't have the slightest
idea what you are talking about. You show us some CSS and then talk
about being a JS newbie without showing us any JavaScript. What are you
doing?

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted"  --  Bill of Rights 1689

My earlier response to Martin spelled out clearly what I wanted to
do. I realized after posting that I really was asking about factoring
CSI code rather than JS. So, I cross-posted on the CSS NG.
--Richard
 
S

Swifty

T

Thomas 'PointedEars' Lahn

Swifty said:
Ah, but is there a Javascript library which uses SVG in browsers that
support SVG and Canvas in the browsers that support Canvas?

I do not know. What would be the point of this? What can Canvas do that
SVG cannot?
I started writing my own graphics library, which would work by
building a simple GIF, since all browsers seem to support those.

Apples and oranges. Have you ever tried to scale a GIF image? Have you
ever tried to let it display more than 256 colors at once? Have you ever
tried to add an alpha channel? IMHO, GIF is good for simple Web icons only.


PointedEars
 
G

Gregor Kofler

Am 2011-08-21 11:40, Thomas 'PointedEars' Lahn meinte:
I do not know. What would be the point of this? What can Canvas do that
SVG cannot?
Apples and oranges. Have you ever tried to scale a GIF image? Have you
ever tried to let it display more than 256 colors at once? Have you ever
tried to add an alpha channel? IMHO, GIF is good for simple Web icons only.

In addition I can't remember any situation where PNG would not be
superior to GIF.

Gregor
 
T

Thomas 'PointedEars' Lahn

Gregor said:
Thomas 'PointedEars' Lahn meinte:
Swifty said:
[SVG, Canvas]
I started writing my own graphics library, which would work by
building a simple GIF, since all browsers seem to support those.
Apples and oranges. Have you ever tried to scale a GIF image? Have you
ever tried to let it display more than 256 colors at once? Have you ever
tried to add an alpha channel? IMHO, GIF is good for simple Web icons
only.

In addition I can't remember any situation where PNG would not be
superior to GIF.

I can: Size, occasionally.

<http://en.wikipedia.org/wiki/Portable_Network_Graphics#File_size_and_optimization_software>


PointedEars
 
G

Gregor Kofler

Am 2011-08-21 12:30, Thomas 'PointedEars' Lahn meinte:
Gregor said:
Thomas 'PointedEars' Lahn meinte:
Swifty wrote:
[SVG, Canvas]
I started writing my own graphics library, which would work by
building a simple GIF, since all browsers seem to support those.
Apples and oranges. Have you ever tried to scale a GIF image? Have you
ever tried to let it display more than 256 colors at once? Have you ever
tried to add an alpha channel? IMHO, GIF is good for simple Web icons
only.

In addition I can't remember any situation where PNG would not be
superior to GIF.

I can: Size, occasionally.

<http://en.wikipedia.org/wiki/Portable_Network_Graphics#File_size_and_optimization_software>

Or "transparency support" in IE <= IE6 (I never checked, whether IE6
doesn't support PNG transparency at all, or whether only the more
"fancy" 8bit alpha masks are affected)...

Gregor
 
T

Thomas 'PointedEars' Lahn

Thomas said:
I do not know. What would be the point of this? What can Canvas do that
SVG cannot?

If you meant "is there a Javascript library which uses SVG in browsers that
support SVG, and Canvas in the browsers that support Canvas?", then I still
do not know. Google is your friend. [psf 6.1]

The main problem is that it is still apples and oranges. SVG is *Scalable*
*Vector* Graphics. Canvas is an implementation of a *bitmap* canvas. For
such a library to be useful, it needs to implement vector graphics using
Canvas.

IE/MSHTML being the only major browser/layout engine to lack native SVG
support, it makes more sense to support VML there, not Canvas, for an SVG
fallback. Raphaël is a script library that does that, but I have only
scanned its source code.

Where Canvas features are lacking, there is e. g. ExplorerCanvas. The
source code of r3 looks surprisingly clean for Google software at first
sight (although they couldn't help the browser sniffing and attachEvent),
but it also uses VML, which I think is much to be preferred to drawing
hundreds, maybe thousands of DIV elements for a curve, at least in MSHTML.


PointedEars
 
R

RichardOnRails

Ah, but is there a Javascript library which uses SVG in browsers that
support SVG and Canvas in the browsers that support Canvas?

I started writing my own graphics library, which would work by
building a simple GIF, since all browsers seem to support those.

Hi Swifty,

Thanks for the Canvas and SVG links to tutorials. I've got O'Reilly's
"HTML5 Camvas", but I was slow in getting into it. But with the help
of the many responses on this thread, so I'm on a roll now.

So from a U.S. guy, thanks to you in the U.K.,
Richard
 
S

Swifty

In addition I can't remember any situation where PNG would not be
superior to GIF.

It depends if the PNG format is simple enough for me to be able to
build one dynamically. I'll take a look. GIF, being an old format
(with even older versions) can be very simple to create.
 
S

Swifty

I do not know. What would be the point of this? What can Canvas do that
SVG cannot?

The last time I looked, SVG could not run in some browsers that appear
frequently in our server logs; the same goes for Canvas.

So, all of my code which uses graphics would have to detect the
browser, and use the appropriate mechanism. It was at this point that
I jokingly suggested that a JavaScript library would help, knowing how
much the folks around here enjoy lambasting such creations.
 
J

John Nagle

Am 2011-08-21 12:30, Thomas 'PointedEars' Lahn meinte:

Or "transparency support" in IE<= IE6 (I never checked, whether IE6
doesn't support PNG transparency at all, or whether only the more
"fancy" 8bit alpha masks are affected)...

Yes. IE6 is finally down to around 4% of browsers seen, but it took
a long time. I converted my last transparent GIF icons to PNG late
last year.

John Nagle
 
S

SAM

Le 21/08/11 16:27, RichardOnRails a écrit :
Hi Swifty,

Thanks for the Canvas and SVG links to tutorials.

??? are you sure that's Swifty who gave you those links ?
with the help of the many responses on this thread,
so I'm on a roll now.

Did you see that (not really new ... year 2001) in "pure" JavaScript :
<http://www.lutanho.net/diagram/pixel_object.html>
?

<http://www.lutanho.net/diagram/introduction.html>
<http://www.lutanho.net/diagram/browser_support.html>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top