How to reduce duplication in this small JS script

Discussion in 'Javascript' started by RichardOnRails, Aug 19, 2011.

  1. 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
     
    RichardOnRails, Aug 19, 2011
    #1
    1. Advertisements

  2. Martin Honnen, Aug 19, 2011
    #2
    1. Advertisements

  3. 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?
     
    Jukka K. Korpela, Aug 19, 2011
    #3
  4. Hi Martin,

    Thanks for you excellent response.
    I've heard of Structured Vector Graphics, but didn't think the had
    anything to do with browsers. I'll check that out!!
    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
     
    RichardOnRails, Aug 19, 2011
    #4
  5. 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
     
    RichardOnRails, Aug 19, 2011
    #5
  6. RichardOnRails

    Tim Streater Guest

    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 Streater, Aug 19, 2011
    #6
  7. 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
     
    RichardOnRails, Aug 20, 2011
    #7
  8. In comp.lang.javascript message <54a8c33f-0b69-4d81-9065-b73dc5687a55@h3
    g2000vbr.googlegroups.com>, Fri, 19 Aug 2011 10:08:02, RichardOnRails
    See <http://www.merlyn.demon.co.uk/js-grphx.htm>; and, in it, at the
    end, see section "2011-04-13".

    I don't use SVG.
     
    Dr J R Stockton, Aug 20, 2011
    #8
  9. RichardOnRails

    Swifty Guest

    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.
     
    Swifty, Aug 21, 2011
    #9
  10. 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.


    PointedEars
     
    Thomas 'PointedEars' Lahn, Aug 21, 2011
    #10
  11. Am 2011-08-21 11:40, Thomas 'PointedEars' Lahn meinte:
    In addition I can't remember any situation where PNG would not be
    superior to GIF.

    Gregor
     
    Gregor Kofler, Aug 21, 2011
    #11
  12. I can: Size, occasionally.

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


    PointedEars
     
    Thomas 'PointedEars' Lahn, Aug 21, 2011
    #12
  13. 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)...

    Gregor
     
    Gregor Kofler, Aug 21, 2011
    #13
  14. 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
     
    Thomas 'PointedEars' Lahn, Aug 21, 2011
    #14
  15. 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
     
    RichardOnRails, Aug 21, 2011
    #15
  16. RichardOnRails

    Swifty Guest

    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.
     
    Swifty, Aug 22, 2011
    #16
  17. RichardOnRails

    Swifty Guest

    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.
     
    Swifty, Aug 22, 2011
    #17
  18. RichardOnRails

    John Nagle Guest

    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
     
    John Nagle, Aug 22, 2011
    #18
  19. RichardOnRails

    SAM Guest

    Le 21/08/11 16:27, RichardOnRails a écrit :
    ??? are you sure that's Swifty who gave you those links ?
    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>
     
    SAM, Aug 22, 2011
    #19
  20. RichardOnRails

    SAM Guest

    SAM, Aug 22, 2011
    #20
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.