Preserved Topic: May 20lines Javascript contest - Enhancing markup $Pages that link to <a href="https://ozoneasylum.com/backlink?for=21632" title="Pages that link to Preserved Topic: May 20lines Javascript contest - Enhancing markup" rel="nofollow" >Preserved Topic: May 20lines Javascript contest - Enhancing markup\$

Author	Thread
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 05-02-2004 05:24 The topic of this month is to add some value to a basic markup ( it would be great if the markup was in valid HTML or XHTML ). The added value can be : stylistic : by eventually touching the markup to beautify it or fix some browser bugs functionnal : adding some features like those around the textarea below or anything else As usual, the main rule is to make your script in 20 lines of (effective) code. Comas shouldn't be used to execute several instructions on the same line See the code sample below to illustrate the basic rules : code: <script type="text/javascript"> document.body.onclick = function() { /* 01 / val = prompt( 'enter a number' ); / 02 / for( i=0; i<10; i++ ) { / 03 / alert( stupidFunction( val, i ) ) } } function stupidFunction( a, b ) { / 04 / return a>b?a:b; // I said it was a stupid function } </script> The document.body.onclick = function()* does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ). The declaration of the stupidFunction() does not count either for the same reasons. The coma in the line /* 03 */ is ok, since it simply separates the parameters of a function. In the way of the Sig contest, the comments should be posted in May 20lines Javascript contest - Enhancing markup - comments Whatever, we're just doing it for fun and the rules are made to be bent. Hope you'll enjoy that topic.
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 05-03-2004 11:50 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
norm Paranoid (IV) Inmate From: [s]underwater[/s] under-snow in Juneau Insane since: Sep 2002	posted 05-03-2004 16:24 InI: So how about explaining what this is suposed to do, just for those of us who don't happen to be on a Windows box using IE. For some strange reason ActiveXObject and Microsoft.XMLDOM don't do much on my Mac, and when I get in to work I have a feeling I won't have any better luck on Linux.......
poi Paranoid (IV) Inmate From: France Insane since: Jun 2002	posted 05-03-2004 16:41 Could we try to keep the comments and critics in the thread: May 20lines Javascript contest - Enhancing markup - comments and put only the entries here, at least until June. Thanks in advance.
InI Paranoid (IV) Mad Scientist From: Somewhere over the rainbow Insane since: Mar 2001	posted 05-04-2004 12:47 The poster has demanded we remove all his contributions, less he takes legal action. We have done so. Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future. Don't follow his example - seek real life help first.
wrayal Bipolar (III) Inmate From: Cranleigh, Surrey, England Insane since: May 2003	posted 05-25-2004 21:22 Debatable whether this qualifies, but hey, it manipulates HTML tags to form a menu, and a menu was quoted as an example in the other thread, so hey... <html> <script> var viewArray=new Array("Asylum","990011","FAQs,window.location.href='http://www.ozoneasylum.com/faq',Forums,window.location.href='http://www.ozoneasylum.com/forums'","00ff00","Geek Stuff","0000ff","Slashdot,window.location.href='http://slashdot.org/',ThinkGeek,window.location.href='http://www.thinkgeek.com/index.shtml'","00ffff") //Format: loop(Main Title, Main Title BG color, loop(sub menu option; action onClick), colour of sub-menus) /* I feel a qualification is in order: the above variable does NOT count as a line as it is what you change - it is specifically there for the page editor - it is the below lines that are the actual useful code. Also, on line 13 there is an unfair semi-colon. Well, that depends how u define the rules because, as it exists, it is not actually a line break; it has yet to be evaluated. But anyway, it is encosed inside quotes and it would take too much effort to remove it (feel free to DQ me if you want - its only a bit of fun anyway. Also, this is by no means a great bit of coding: it is pure kludge, through and through - hence, although you may feel free to, I strongly advise you not to use it on a site - you'd want a far more elegant one than this one But anyway, I like it for its nice little slidey-fadey effects. Finally, does this qualify for the competition? Considering the fact that there is actually no HTML code, you might suspect not. I would disagree - it is all based on the manipulation of HTML tags. In fact, a good portion of the code below is to make those HTML tags and save the user of this script from having to mod the code - he can just modify the variable above. Anyway, have fun! Wrayal / / 1 / function menToMove(input) {curmov=input} / 2 / function set(input) {curout=input} function setRemove() { / 3 / curout="that" / 4 / setTimeout("remove()",30) } / 5 / var curmov="mine" / 6 / var curout="that" / 7 / var menus=new Array() function remove() { / 8 / for (var i=0;i<menus.length;i++) if (menus[i]!=curout) eval("setTimeout('"+menus[i]+".style.posLeft=-100',10)") } function display() { / 9 / if (curmov!=curout) { / 10 / eval(curmov+".style.posLeft=20") / 11 / curout=curmov / 12 / slide() } } function slide(input) { / 13 / eval("if ("+curmov+".style.posLeft<110) {"+curmov+".style.posLeft+=3;"+curmov+".filters.alpha.opacity=("+curmov+".style.posLeft-30);setTimeout('slide()',3)}") } / 14 / for (var i=0; i<viewArray.length; i+=4) { / 15 / document.write('<div id="other'+i+'" onMouseOut="setRemove()" style="z-index:10;filter:alpha(opacity=100);top:'+(i8+10)+';height:20;background-color:'+viewArray[i+1]+';position:absolute;border-color:000033;width:100;text-align:center" onMouseOver="menToMove(\'min'+i+'\');display()" onMouseOut="remove()">'+viewArray[i]+'</div>'+'<div id="min'+i+'" onMouseOut="setRemove()" style="z-index:5;filter:alpha(opacity=100);height:20;position:absolute;top:'+(i8+10)+';left:-100;background-color:000000;width:100;text-align:center">'+'<table onMouseOver="set(\'min'+i+'\')" width=100 style="background-color:'+viewArray[i+3]+';text-align:center" cellpadding=0 cellspacing=0 border=1>') / 16 / menus[menus.length]="min"+i / 17 / var parseArray=viewArray[i+2].split(",") / 18 / for (var f=0; f<parseArray.length; f+=2) { / 19 / document.write('<td onClick="'+parseArray[f+1]+'">'+parseArray[f]+'</td><tr>') } / 20 */ document.write("</table></div>") } </script> </html> or http://www.wrayal.4t.com/menu.html Go to kimber-ja.demon.co.uk and click on the link to the raytracer! (Edited by wrayal on 05-25-2004 21:40)
Virbatem Nervous Wreck (II) Inmate From: Perth Western Australia Insane since: May 2004	posted 05-26-2004 17:18 There seems to be a little confusion about exactly what the competion rules are and what constitutes a valid modification to an HTML tag. After reading the above I am more confused but will submit my competition entry regardless. http://www.iinet.net.au/~htjs/textbox_history1.htm As the filename suggests, I've given a textbox a history. The HTML is: <input type="text" name="tb" history=true> To retrieve a previous value from the history requires holding CTRL and clickng the textbox. The javascript is 7 lines. That is unless you count the compound function in one line then there are actually 10 lines total. Hmmmm, 10 lines left over, maybe I gould add a rollover for the textbox?

Preserved Topic: May 20lines Javascript contest - Enhancing markup\$

Author

Thread

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 05-02-2004 05:24

The topic of this month is to add some value to a basic markup ( it would be great if the markup was in valid HTML or XHTML ). The added value can be :

stylistic : by eventually touching the markup to beautify it or fix some browser bugs
functionnal : adding some features like those around the textarea below
or anything else

As usual, the main rule is to make your script in 20 lines of (effective) code.
Comas shouldn't be used to execute several instructions on the same line
See the code sample below to illustrate the basic rules :

code:

<script type="text/javascript">



            document.body.onclick = function()

            {

/* 01 */        val = prompt( 'enter a number' );

/* 02 */        for( i=0; i<10; i++ )

                {

/* 03 */            alert( stupidFunction( val, i ) )

                }

            }



            function stupidFunction( a, b )

            {

/* 04 */        return a>b?a:b; // I said it was a stupid function

            }



</script>

The document.body.onclick = function() does not count as a line as it's not some effective code and the function call could be put in the BODY tag ( or anyother HTML tag ).
The declaration of the stupidFunction() does not count either for the same reasons.
The coma in the line /* 03 */ is ok, since it simply separates the parameters of a function.

In the way of the Sig contest, the comments should be posted in May 20lines Javascript contest - Enhancing markup - comments

Whatever, we're just doing it for fun and the rules are made to be bent.
Hope you'll enjoy that topic.

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 05-03-2004 11:50

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

norm
Paranoid (IV) Inmate

From: [s]underwater[/s] under-snow in Juneau
Insane since: Sep 2002

posted 05-03-2004 16:24

InI:

So how about explaining what this is suposed to do, just for those of us who don't happen to be on a Windows box using IE.

For some strange reason ActiveXObject and Microsoft.XMLDOM don't do much on my Mac, and when I get in to work I have a feeling I won't have any better luck on Linux.......

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

posted 05-03-2004 16:41

Could we try to keep the comments and critics in the thread: May 20lines Javascript contest - Enhancing markup - comments and put only the entries here, at least until June. Thanks in advance.

InI
Paranoid (IV) Mad Scientist

From: Somewhere over the rainbow
Insane since: Mar 2001

posted 05-04-2004 12:47

wrayal
Bipolar (III) Inmate

From: Cranleigh, Surrey, England
Insane since: May 2003

posted 05-25-2004 21:22

Debatable whether this qualifies, but hey, it manipulates HTML tags to form a menu, and a menu was quoted as an example in the other thread, so hey...

<html>
<script>
var viewArray=new Array("Asylum","990011","FAQs,window.location.href='http://www.ozoneasylum.com/faq',Forums,window.location.href='http://www.ozoneasylum.com/forums'","00ff00","Geek Stuff","0000ff","Slashdot,window.location.href='http://slashdot.org/',ThinkGeek,window.location.href='http://www.thinkgeek.com/index.shtml'","00ffff")

//Format: loop(Main Title, Main Title BG color, loop(sub menu option; action onClick), colour of sub-menus)

/* I feel a qualification is in order: the above variable does NOT count as a line
as it is what you change - it is specifically there for the page editor - it is the
below lines that are the actual useful code.
Also, on line 13 there is an unfair semi-colon. Well, that depends how u define the
rules because, as it exists, it is not actually a line break; it has yet to be evaluated.
But anyway, it is encosed inside quotes and it would take too much effort to remove
it (feel free to DQ me if you want - its only a bit of fun anyway.
Also, this is by no means a great bit of coding: it is pure kludge, through and through - hence,
although you may feel free to, I strongly advise you not to use it on a site - you'd want
a far more elegant one than this one
But anyway, I like it for its nice little slidey-fadey effects.
Finally, does this qualify for the competition? Considering the fact that there is actually no
HTML code, you might suspect not. I would disagree - it is all based on the manipulation of HTML
tags. In fact, a good portion of the code below is to make those HTML tags and save the user of
this script from having to mod the code - he can just modify the variable above.
Anyway, have fun!

Wrayal
*/

/* 1 */ function menToMove(input) {curmov=input}
/* 2 */ function set(input) {curout=input}
function setRemove() {
/* 3 */ curout="that"
/* 4 */ setTimeout("remove()",30)
}
/* 5 */ var curmov="mine"
/* 6 */ var curout="that"
/* 7 */ var menus=new Array()
function remove() {
/* 8 */ for (var i=0;i<menus.length;i++) if (menus[i]!=curout) eval("setTimeout('"+menus[i]+".style.posLeft=-100',10)")
}
function display() {
/* 9 */ if (curmov!=curout) {
/* 10 */ eval(curmov+".style.posLeft=20")
/* 11 */ curout=curmov
/* 12 */ slide()
}
}
function slide(input) {
/* 13 */ eval("if ("+curmov+".style.posLeft<110) {"+curmov+".style.posLeft+=3;"+curmov+".filters.alpha.opacity=("+curmov+".style.posLeft-30);setTimeout('slide()',3)}")
}
/* 14 */ for (var i=0; i<viewArray.length; i+=4) {
/* 15 */ document.write('<div id="other'+i+'" onMouseOut="setRemove()" style="z-index:10;filter:alpha(opacity=100);top:'+(i*8+10)+';height:20;background-color:'+viewArray[i+1]+';position:absolute;border-color:000033;width:100;text-align:center" onMouseOver="menToMove(\'min'+i+'\');display()" onMouseOut="remove()">'+viewArray[i]+'</div>'+'<div id="min'+i+'" onMouseOut="setRemove()" style="z-index:5;filter:alpha(opacity=100);height:20;position:absolute;top:'+(i*8+10)+';left:-100;background-color:000000;width:100;text-align:center">'+'<table onMouseOver="set(\'min'+i+'\')" width=100 style="background-color:'+viewArray[i+3]+';text-align:center" cellpadding=0 cellspacing=0 border=1>')
/* 16 */ menus[menus.length]="min"+i
/* 17 */ var parseArray=viewArray[i+2].split(",")
/* 18 */ for (var f=0; f<parseArray.length; f+=2) {
/* 19 */ document.write('<td onClick="'+parseArray[f+1]+'">'+parseArray[f]+'</td><tr>')
}
/* 20 */ document.write("</table></div>")
}
</script>
</html>

or http://www.wrayal.4t.com/menu.html

Go to kimber-ja.demon.co.uk and click on the link to the raytracer!

(Edited by wrayal on 05-25-2004 21:40)

Virbatem
Nervous Wreck (II) Inmate

From: Perth Western Australia
Insane since: May 2004

posted 05-26-2004 17:18

There seems to be a little confusion about exactly what the competion rules are and what constitutes a valid modification to an HTML tag. After reading the above I am more confused but will submit my competition entry regardless.

http://www.iinet.net.au/~htjs/textbox_history1.htm

As the filename suggests, I've given a textbox a history. The HTML is:

<input type="text" name="tb" history=true>

To retrieve a previous value from the history requires holding CTRL and clickng the textbox.

The javascript is 7 lines. That is unless you count the compound function in one line then there are actually 10 lines total. Hmmmm, 10 lines left over, maybe I gould add a rollover for the textbox?