old newspaper issue, javascript answer?

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • :o)

    old newspaper issue, javascript answer?

    Does anyone know a (better) way to automatically adjust "newspape
    style" columns to window-resize? See old discussion o
    stylesheets-forum:

    -
    :o

  • Richard Cornford

    #2
    Re: old newspaper issue, javascript answer?

    :o) wrote:[color=blue]
    > Does anyone know a (better) way to automatically adjust
    > "newspaper style" columns to window-resize? See old
    > discussion on stylesheets-forum:
    > http://www.forum4designers.com/showthr ...[/color]
    <snip>

    forum4designers .com is not a forum it is a web-based access to Usenet
    system, and an extremely poor, dishonest and incomplete one at that
    (best avoided at all costs).

    Richard.


    Comment

    • Andrew Thompson

      #3
      Re: old newspaper issue, javascript answer?

      On Tue, 13 Jul 2004 15:17:08 GMT, :o) wrote:
      [color=blue]
      > http://www.forum4designers.com/showt...ight=newspaper[/color]

      Intriguingly, also available on usenet,..
      <http://google.com/groups?thl=0,96 1403397,9613967 37,961293589,96 1002654,9609921 20,960987870,96 0980759,9609844 39,960744832,96 0697766,9609847 00>

      --
      Andrew Thompson
      http://www.PhySci.org/ Open-source software suite
      http://www.PhySci.org/codes/ Web & IT Help
      http://www.1point1C.org/ Science & Technology

      Comment

      • Fox

        #4
        Re: old newspaper issue, javascript answer?


        ":o)" wrote:[color=blue]
        >
        > Does anyone know a (better) way to automatically adjust "newspaper
        > style" columns to window-resize? See old discussion on
        > stylesheets-forum:
        > http://www.forum4designers.com/showt...ight=newspaper
        > --
        > :o)
        >[/color]

        Older versions of Netscape [since v3, i think] had an html tag called
        multicol that would flow text in newspaper-like columns... it is
        deprecated and no longer available in more "standards compliant"
        browsers [mozillas] and never was available in IE:

        <multicol
        width=1200
        cols = 8
        gutter=15[color=blue]
        >[/color]
        ....
        </multicol>

        width and gutter in px values. A 1200 wide layout divided by 6 columns
        results in a column 200 minus gutter width.

        If you still have NN4.x, here's a demo:



        otherwise, don't bother. You can't really style this tag -- anything
        like borders results in one long column... background colors results in
        a "highlighti ng" effect and layer-background-color simply does not
        work... font characteristics , however, do work (including line-height,
        and text-align: justify!!!). BTW, this tag works better on a Mac than on
        a PC - Macs will display bolded text, whereas PC's won't.

        It's too bad this tag basically died...it really needed a chance for
        further development.

        Fox
        *************

        Comment

        • :o)

          #5
          Re: old newspaper issue, javascript answer?

          Thanks Fox, I'm aware of multicol and all that. The question is whethe
          there is a scripting workaround, such as the one in the previou
          attachment. This scirpt seems to do the trick under IE6, but it'
          terribly slow, compared with web-sites as www.refdag.nl and www.iht.co
          that use resizable multicolumn lay-out already. Cheers
          -
          :o

          Comment

          • Richard Cornford

            #6
            Re: old newspaper issue, javascript answer?

            Andrew Thompson wrote:
            <snip>[color=blue]
            > Intriguingly, also available on usenet,..
            > <http://google.com/groupsthl=0,961403397,961396737,
            > 961293589,96100 2654,960992120, 960987870,96098 0759,
            > 960984439,96074 4832,960697766, 960984700>[/color]

            In their ongoing effort to deserve their reputation as the worst
            provider of web based access to Usenet, forum4designers have re-produced
            your message on their web site without the body text or the google URL.

            Richard.


            Comment

            • Richard Cornford

              #7
              Re: old newspaper issue, javascript answer?

              :o) wrote:
              <snip>[color=blue]
              > ... , such as the one in the
              > previous attachment. ...[/color]
              <snip>

              Attachments are explicitly forbidden in comp.lang.javas cript (see the
              FAQ), it is a plain text only newsgroup. As such many new servers do not
              accept, or propagate, attachments associated with this group so the
              majority of the people reading your posts probably will not see one
              anyway.

              Incidentally, your news posting software appears to be defective in that
              it is not sending References headers with messages that appear to be
              intended as follow-ups to an existing message. In addition the Lines
              header is erroneously reporting 1 in a message that clearly has multiple
              lines. You should correct these faults or find alternative posting
              software (adequate software is available free of charge for most OSs).

              Richard.


              Comment

              • Andrew Thompson

                #8
                Re: old newspaper issue, javascript answer?

                On Wed, 14 Jul 2004 18:56:09 +0100, Richard Cornford wrote:[color=blue]
                > Andrew Thompson wrote:
                > <snip>[color=green]
                >> Intriguingly, also available on usenet,..[/color][/color]
                ....[color=blue]
                > In their ongoing effort to deserve their reputation as the worst
                > provider of web based access to Usenet..[/color]
                <bleep>[color=blue]
                > .. have re-produced your message on their web site
                > without the body text or the google URL.[/color]

                LOL. for'em four designers? What absolute losers!

                [ and ftr 'groups . google . com' is but
                one possible alternative ]

                ...and they can stick that up their
                'intuitive, web-based interface'

                Comment

                • :o

                  #9
                  Re: old newspaper issue, javascript answer?

                  Apologies to you all; getting to the grips with this. The attached file is on

                  Latest news coverage, email, free stock quotes, live scores and video are just the beginning. Discover more every day at Yahoo!


                  and pasted below:

                  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
                  <HTML><HEAD><TI TLE>test</TITLE>
                  <SCRIPT>
                  function make_columns(){
                  document.body.s tyle.background Color = "black"
                  var columnWidth = 200
                  var columnHeight = document.body.c lientHeight-100
                  var columnGap = 20

                  var x = document.getEle mentById("stuff ")
                  var i = 0
                  var k = 0

                  while(k<x.child Nodes.length){
                  var new_column = document.create Element("div")
                  new_column.styl e.position = "absolute";
                  new_column.styl e.left = i*(columnWidth+ columnGap)+50+" px";
                  new_column.styl e.top = 50+"px";
                  new_column.styl e.width = columnWidth+"px ";
                  new_column.styl e.color = "white";
                  new_column.styl e.fontSize = "8pt";
                  new_column.styl e.fontFamily = "verdana, arial, helvetica, sans-serif";
                  new_column.styl e.lineHeight = "9pt";
                  new_column.styl e.padding = "3px";
                  new_column.styl e.textAlign = "justify";
                  document.body.a ppendChild(new_ column)

                  if(i==0){
                  var c = x.childNodes[k].nodeValue
                  var b = document.create Element("div")
                  b.innerText = c.substring(0,1 )
                  b.style.color = "white"
                  b.style.fontSiz e = "40pt"
                  b.style.height = b.style.fontSiz e.split("pt")[0]/2+"pt"
                  b.style.fontFam ily = "verdana, arial, helvetica, sans-serif"
                  b.style.float = "left"
                  b.setAttribute( "align","center ")
                  new_column.appe ndChild(b)
                  c = c.substring(1,c .length)
                  x.childNodes[k].nodeValue = c
                  }

                  new_column.inne rHTML = new_column.inne rHTML+""

                  while(new_colum n.offsetHeight< columnHeight&&k <x.childNodes.l ength){
                  node_clone = x.childNodes[k].cloneNode(true )
                  new_column.appe ndChild(node_cl one)
                  k++
                  }

                  if(new_column.o ffsetHeight>col umnHeight){
                  k--
                  if(node_clone.n odeType!==3)
                  var cnode = node_clone.chil dNodes[0]
                  else
                  var cnode = node_clone
                  if(cnode.nodeTy pe!==3) alert("cnode is geen tekst node!")

                  var indx,ccnode
                  var dd = ""
                  while(new_colum n.offsetHeight> columnHeight){
                  indx = cnode.nodeValue .lastIndexOf(" ")
                  if(indx==-1) {
                  dd = cnode.nodeValue +dd
                  cnode.nodeValue = ""
                  }
                  else {
                  cnode.splitText (indx)
                  ccnode = cnode.nextSibli ng
                  dd = ccnode.nodeValu e+dd
                  cnode.parentNod e.removeChild(c cnode)
                  }
                  }

                  if(node_clone.n odeType!==3)
                  x.childNodes[k].childNodes[0].nodeValue = dd
                  else
                  x.childNodes[k].nodeValue = dd

                  var b = document.create Element("span")
                  b.style.visibil ity = "hidden"
                  b.innerText = " someverylongwor d"
                  new_column.appe ndChild(b)

                  i++
                  }
                  }
                  }
                  </SCRIPT>
                  </HEAD>
                  <BODY onresize=window .location.reloa d() onload="make_co lumns();return false;">
                  <DIV id=stuff style="DISPLAY: none">Lorem ipsum dolor sit amet, consectetuer
                  adipiscing elit. Vestibulum nisl leo, faucibus varius, venenatis quis, faucibus
                  non, pede. Aliquam diam eros, fringilla ut, gravida ut, bibendum non, erat.
                  Aliquam porttitor faucibus justo. Morbi justo nisl, euismod vel, tincidunt at,
                  sagittis et, sapien. Vestibulum ante ipsum primis in faucibus orci luctus et
                  ultrices posuere cubilia Curae; Nullam scelerisque elit. Nullam dictum, arcu sit
                  amet adipiscing sodales, felis arcu sagittis odio, eget mattis mi leo sit amet
                  augue. Nulla sit amet wisi ac eros ornare molestie. Vivamus luctus tellus in
                  diam. Nullam lacinia massa vitae augue. Maecenas iaculis, nibh eu accumsan
                  tempus, dolor sapien volutpat lacus, sed semper felis pede at diam. Pellentesque
                  libero mauris, consequat non, imperdiet eu, egestas nec, dui. In ut leo. Nullam
                  mattis commodo justo. Donec est. Integer bibendum viverra felis. In porttitor
                  nibh vitae lorem. Pellentesque porttitor. Sed vestibulum, nulla eu euismod
                  consectetuer, magna dolor commodo sem, id nonummy erat ipsum a nulla. Fusce
                  laoreet magna nec sem. Proin sagittis odio vitae odio. Suspendisse potenti.
                  Mauris sit amet lacus. Maecenas quam. Pellentesque habitant morbi tristique
                  senectus et netus et malesuada fames ac turpis egestas. Morbi mauris tortor,
                  dignissim sit amet, elementum quis, mattis at, quam. Phasellus varius orci.
                  Pellentesque venenatis, diam et suscipit porttitor, mi massa porta tortor, a
                  dignissim ante neque quis massa. Morbi viverra dolor. In vitae dolor vitae
                  sapien molestie tincidunt. Integer eu eros. Duis vel nisl nec felis fringilla
                  tempor. Sed porttitor. Morbi et sem quis arcu porta rhoncus. In at arcu sed
                  mauris interdum convallis. Proin adipiscing commodo mi. Ut vestibulum augue
                  vitae arcu. Suspendisse lacus erat, facilisis vitae, dapibus eget, aliquam non,
                  libero. Ut sem. Praesent fringilla est quis erat. Duis nec quam. Vestibulum sed
                  eros lacinia ante faucibus fermentum. Etiam ac orci non pede fermentum
                  porttitor. Mauris dolor nulla, vestibulum egestas, consectetuer non, sodales in,
                  velit. Curabitur blandit eros non sem. In mi sem, semper id, tempor nec,
                  hendrerit vitae, nisl. Phasellus diam leo, varius vel, pretium sed, elementum
                  commodo, odio. Curabitur vitae justo cursus justo iaculis fringilla. Cras ligula
                  eros, cursus et, ornare et, tristique non, tellus. Nam non diam. Morbi mauris
                  justo, nonummy sit amet, ultrices id, consectetuer et, justo. Quisque non ipsum.
                  Aenean lacus felis, vulputate in, dignissim pulvinar, scelerisque eget, wisi.
                  Aenean lectus mauris, egestas ac, sollicitudin at, cursus in, ligula. Mauris
                  adipiscing, ipsum eget tincidunt convallis, magna dolor consequat lacus, vitae
                  pretium mi massa sit amet pede. Donec et nibh eget ligula facilisis vulputate.
                  Ut sodales dui nec metus. Quisque vitae dui. Proin rhoncus suscipit dolor. Sed
                  aliquam. Sed ipsum erat, placerat non, dignissim vitae, rutrum non, purus. Donec
                  vel erat. Vestibulum pharetra, risus vel facilisis euismod, mi urna feugiat
                  nibh, eu mollis erat lectus eget odio. Proin ipsum felis, laoreet a, consequat
                  vel, laoreet ut, nibh. Sed consequat, nisl a accumsan bibendum, metus arcu
                  iaculis magna, ut commodo erat lorem quis massa. Pellentesque habitant morbi
                  tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam felis.
                  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
                  hymenaeos.
                  </DIV></BODY></HTML>

                  Comment

                  • Thomas 'PointedEars' Lahn

                    #10
                    Re: old newspaper issue, javascript answer?

                    :o wrote:
                    ^^
                    Who?
                    [color=blue]
                    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">[/color]

                    The system identifier is missing to make that Valid HTML.
                    See comp.infosystem s.www.authoring.html.
                    [color=blue]
                    > <HTML><HEAD><TI TLE>test</TITLE>[/color]

                    <http://www.w3.org/QA/Tips/good-titles>
                    [color=blue]
                    > <SCRIPT>[/color]

                    This "script" element lacks the "type" attribute which is mandatory:

                    <script type="text/javascript">
                    [color=blue]
                    > function make_columns(){
                    > document.body.s tyle.background Color = "black"[/color]

                    You do not check for the DOM of the UA before you use it.
                    This is error-prone:

                    <http://pointedears.de/scripts/test/whatami>
                    [color=blue]
                    > var columnWidth = 200
                    > var columnHeight = document.body.c lientHeight-100[/color]

                    See above.
                    [color=blue]
                    > var columnGap = 20
                    >
                    > var x = document.getEle mentById("stuff ")[/color]

                    See above.
                    [color=blue]
                    > var i = 0
                    > var k = 0
                    >
                    > while(k<x.child Nodes.length){[/color]

                    You do not check if `x' is a valid object reference before
                    you access its supposed properties, and you do not check
                    if those properties are references before you refer to them.
                    See above.

                    And a C-style for-loop would IMHO suit much better here and
                    further below.
                    [color=blue]
                    > var new_column = document.create Element("div")
                    > new_column.styl e.position = "absolute";[/color]

                    Same here about not checking anything prior to access.
                    [color=blue]
                    > new_column.styl e.left = i*(columnWidth+ columnGap)+50+" px";
                    > new_column.styl e.top = 50+"px";
                    > new_column.styl e.width = columnWidth+"px ";
                    > new_column.styl e.color = "white";
                    > new_column.styl e.fontSize = "8pt";[/color]

                    Do not use "pt" for font size outside of stylesheets for printing.
                    Default font resolution on display devices differs between screen
                    resolutions, graphics servers and platforms which most certainly
                    renders a pt-sized font legible on one system but illegible on
                    many others. Use "px" or "em" instead.
                    [color=blue]
                    > new_column.styl e.fontFamily = "verdana, arial, helvetica, sans-serif";
                    > new_column.styl e.lineHeight = "9pt";[/color]

                    The same here. Use "em" for line-height (1em = default height),
                    not "pt".
                    [color=blue]
                    > new_column.styl e.padding = "3px";
                    > new_column.styl e.textAlign = "justify";[/color]

                    Again, nothing is checked for. And it is unperformant to look up
                    a reference repeatedly:

                    var s;
                    if ((s = new_column.styl e))
                    {
                    if (typeof s.left != "undefined" )
                    {
                    s.left = ...;
                    }
                    ...
                    }
                    [color=blue]
                    > document.body.a ppendChild(new_ column)
                    > [...][/color]

                    See above.
                    [color=blue]
                    > new_column.inne rHTML = new_column.inne rHTML+""[/color]

                    `innerHTML' ist a property of proprietary DOMs. To rely on it while
                    using standards compliant DOM Level 1+ methods just because the
                    programmer's favorite UAs support both is utter nonsense. See above.
                    [color=blue]
                    > [...]
                    > var indx,ccnode
                    > var dd = ""
                    > while(new_colum n.offsetHeight> columnHeight){
                    > indx = cnode.nodeValue .lastIndexOf(" ")
                    > if(indx==-1) {
                    > dd = cnode.nodeValue +dd
                    > cnode.nodeValue = ""
                    > }
                    > else {
                    > cnode.splitText (indx)
                    > ccnode = cnode.nextSibli ng
                    > dd = ccnode.nodeValu e+dd
                    > cnode.parentNod e.removeChild(c cnode)
                    > }
                    > }[/color]

                    This indentation is hardly legible. And tab characters should not be
                    used for indentation since they are interpreted differently on different
                    devices.
                    [color=blue]
                    > if(node_clone.n odeType!==3)
                    > x.childNodes[k].childNodes[0].nodeValue = dd
                    > else
                    > x.childNodes[k].nodeValue = dd[/color]

                    Same here.
                    [color=blue]
                    > var b = document.create Element("span")
                    > b.style.visibil ity = "hidden"[/color]
                    [color=blue]
                    > b.innerText = " someverylongwor d"
                    > new_column.appe ndChild(b)[/color]

                    `innerText' is a proprietary property of the IE 4+ DOMs only. It is
                    not present in other DOMs and thus the script will work only in IE, UAs
                    based on it (using its browser component) or imitating its behavior
                    (namely possibly Opera).

                    DOM Level 3 Core provides the Node interface with a standards compliant
                    textContent attribute. It is available in recent versions of
                    Mozilla/5.0; a user-defined serialization method must be used for other UAs.
                    [color=blue]
                    > i++
                    > }
                    > }[/color]

                    See above.
                    [color=blue]
                    > }
                    > </SCRIPT>
                    > </HEAD>
                    > <BODY onresize=window .location.reloa d()[/color]

                    This is invalid HTML and thus very likely to fail. The characters "("
                    and ")" must not occur in unquoted attribute values. As there are more
                    exceptions to this rule that maybe are hard to keep in mind, attribute
                    values should be quoted always, using single or double quotes (in XHTML
                    this is mandatory).
                    [color=blue]
                    > onload="make_co lumns();return false;">[/color]

                    What do you think that returning `false' to the onload handler would
                    do? This is but an example of further scriptkiddie coding, that is,
                    to use programming patters without thinking, often because of a lack
                    of a minimum clue.
                    [color=blue]
                    > <DIV id=stuff style="DISPLAY: none">Lorem ipsum [...]
                    > </DIV></BODY></HTML>[/color]

                    You could have posted the source code with less example text.
                    Bandwidth is a precious good and must not be wasted. Some
                    people even pay for every additional byte they cause to be
                    transmitted to/from their machines.


                    PointedEars

                    Comment

                    • :o

                      #11
                      Re: old newspaper issue, javascript answer?

                      Thanks PointedEars; some polishing up to do to make it cross-browser
                      (and PointedEars) friendly, but it was never intended to work on
                      anything but my browser.

                      Looking forward to a thoughtful scriptadult coding that has the same
                      functionality, namely client-side rendering of a piece of HTML into
                      columns; which was the main question, really.

                      :o

                      Comment

                      • Andrew Thompson

                        #12
                        Re: old newspaper issue, javascript answer?

                        On Wed, 14 Jul 2004 18:56:09 +0100, Richard Cornford wrote:
                        [color=blue]
                        > Andrew Thompson wrote:
                        > <snip>[color=green]
                        >> Intriguingly, also available on usenet,..
                        >> <http://google.com/groupsthl=0,961403397,961396737,
                        >> 961293589,96100 2654,960992120, 960987870,96098 0759,
                        >> 960984439,96074 4832,960697766, 960984700>[/color]
                        >
                        > In their ongoing effort to deserve their reputation as the worst
                        > provider of web based access to Usenet, forum4designers have re-produced
                        > your message on their web site without the body text or the google URL.[/color]

                        It seems they are rather challenged at
                        rendering Geocities URL's as well..

                        <http://www.forum4desig ners.com/showthread.php? s=1301e7e77a602 21c26bb6d3abb8c a0da&threadid=9 5672&perpage=10 &pagenumber= 2>
                        Let us see if they can reproduce their
                        *own* URL reliably..

                        Grrr. I would prefer people post URL's,
                        but it does not help having these 'web-based
                        interfaces' butcher the links.

                        --
                        Andrew Thompson
                        http://www.PhySci.org/ Open-source software suite
                        http://www.PhySci.org/codes/ Web & IT Help
                        http://www.1point1C.org/ Science & Technology

                        Comment

                        Working...