old newspaper issue, javascript answer?

[:o)]

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

http://www.forum4designers.com/showthread.php?s=&threadid=55571&highlight=newspape

-
:o

[Richard Cornford]

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.

[Andrew Thompson]

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

[Fox]

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:

http://fxmahoney.com/demo/multicol.htm

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
*************

[:o)]

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

[Richard Cornford]

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.

[Richard Cornford]

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.

[Andrew Thompson]

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'

[:o]

Re: old newspaper issue, javascript answer?

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

http://www.geocities.com/myjavascriptstuff/multicolTest.htm

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>

[Thomas 'PointedEars' Lahn]

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

[:o]

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

[Andrew Thompson]

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