/ * http : / / meyerweb . com / eric / tools / css / reset /
v2 . 0 | 20110126
License : none ( public domain )
* /
html , body , div , span , applet , object , iframe ,
h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,
a , abbr , acronym , address , big , cite , code ,
del , dfn , em , img , ins , kbd , q , s , samp ,
small , strike , strong , sub , sup , tt , var ,
b , u , i , center ,
dl , dt , dd , ol , ul , li ,
fieldset , form , label , legend ,
table , caption , tbody , tfoot , thead , tr , th , td ,
article , aside , canvas , details , embed ,
figure , figcaption , footer , header , hgroup ,
menu , nav , output , ruby , section , summary ,
time , mark , audio , video {
margin : 0 ;
padding : 0 ;
border : 0 ;
font-size : 100 % ;
font : inherit ;
vertical-align : baseline ;
}
/* HTML5 display-role reset for older browsers */
article , aside , details , figcaption , figure ,
footer , header , hgroup , menu , nav , section {
display : block ;
}
body {
line-height : 1 ;
}
ol , ul {
list-style : none ;
}
blockquote , q {
quotes : none ;
}
blockquote : before , blockquote : after ,
q : before , q : after {
content : '' ;
content : none ;
}
table {
border-collapse : collapse ;
border-spacing : 0 ;
}
< hr / >
< script type = "text/javascript" >
function changeColor ( ) {
document . getElementById ( "submit" ) . style . borderColor = document . getElementById ( "msg" ) . style . borderColor = document . getElementById ( "name" ) . style . borderColor = document . getElementById ( "col" ) . style . borderColor = document . getElementById ( "col" ) . options [ document . getElementById ( "col" ) . selectedIndex ] . text
}
function submit ( ) {
document . getElementById ( "submit" ) . disabled =
document . getElementById ( "name" ) . disabled =
document . getElementById ( "col" ) . disabled =
document . getElementById ( "msg" ) . disabled = true ;
fetch ( "/COMMENTS?submit=true&article=reset.css.comment&message=" + encodeURIComponent ( document . getElementById ( "msg" ) . value ) + "&name="
+ encodeURIComponent ( document . getElementById ( "name" ) . value ) + "&color="
+ encodeURIComponent ( document . getElementById ( "col" ) . options [ document . getElementById ( "col" ) . selectedIndex ] . text )
) . then ( ( data ) = > data . text ( ) )
. then ( ( data ) = > {
document . getElementById ( "msg" ) . value = ""
document . getElementById ( "name" ) . value = ""
document . getElementById ( "submit" ) . disabled =
document . getElementById ( "name" ) . disabled =
document . getElementById ( "col" ) . disabled =
document . getElementById ( "msg" ) . disabled = false ;
fetchComments ( )
} )
}
function insert ( c1 , c2 ) {
if ( document . getElementById ( "msg" ) . selectionStart = = document . getElementById ( "msg" ) . selectionEnd ) {
/ / No highlighting . Insert here .
if ( c2 ! = undefined ) {
document . getElementById ( "msg" ) . value = document . getElementById ( "msg" ) . value . substring ( 0 , document . getElementById ( "msg" ) . selectionStart ) + c1 + c2 + document . getElementById ( "msg" ) . value . substring ( document . getElementById ( "msg" ) . selectionStart )
} else {
document . getElementById ( "msg" ) . value = document . getElementById ( "msg" ) . value . substring ( 0 , document . getElementById ( "msg" ) . selectionStart ) + c1 + document . getElementById ( "msg" ) . value . substring ( document . getElementById ( "msg" ) . selectionStart )
}
} else {
if ( c2 ! = undefined ) {
document . getElementById ( "msg" ) . value = document . getElementById ( "msg" ) . value . substring ( 0 , document . getElementById ( "msg" ) . selectionStart ) + c1 + document . getElementById ( "msg" ) . value . substring ( document . getElementById ( "msg" ) . selectionStart , document . getElementById ( "msg" ) . selectionEnd ) + c2 + document . getElementById ( "msg" ) . value . substring ( document . getElementById ( "msg" ) . selectionEnd )
} else {
document . getElementById ( "msg" ) . value = document . getElementById ( "msg" ) . value . substring ( 0 , document . getElementById ( "msg" ) . selectionStart ) + c1 + document . getElementById ( "msg" ) . value . substring ( document . getElementById ( "msg" ) . selectionStart )
}
}
}
< / script >
< div id = "commentForm" >
< b > Leave a comment ! < / b > < br / > < br / >
< label for = "name" > Display Name : < / label > < input id = "name" > < / input > < br / > < br / >
< label for = "col" > Display Color : < / label > < select id = "col" onchange = "changeColor()" >
< option value = "RED" > RED < / option >
< option value = "GREEN" selected > GREEN < / option >
< option value = "YELLOW" > YELLOW < / option >
< option value = "BLUE" > BLUE < / option >
< option value = "MAGENTA" > MAGENTA < / option >
< option value = "CYAN" > CYAN < / option >
< option value = "WHITE" > WHITE < / option >
< / select > < br / > < br / >
< label for = "msg" style = "vertical-align:top;display:inline;" > Message : < / label >
< div >
< div class = "toolbar" >
< span class = "toolbarItem" onclick = "insert('^^','^^')" title = "Bold" > & nbsp ; < b > B < / b > & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('**','**')" title = "Italics" > & nbsp ; < i > I < / i > & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('__','__')" title = "Underline" > & nbsp ; < u > U < / u > & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('~~','~~')" title = "Code" > & nbsp ; & lt ; code & gt ; & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('[[',']]')" title = "Link" > & nbsp ; & lt ; http : / / & gt ; & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('😊')" title = "Smiley Face Emoji" > & nbsp ; 😊 & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('😔')" title = "Sad Face Emoji" > & nbsp ; 😔 & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('👍')" title = "Thumbs Up Emoji" > & nbsp ; 👍 & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('❤️ ')" title = "Heart Emoji" > & nbsp ; ❤ ️ & nbsp ; < / span >
< span class = "toolbarItem" onclick = "insert('😡')" title = "Pouting Emoji" > & nbsp ; 😡 & nbsp ; < / span >
< / div >
< textarea id = "msg" > < / textarea >
< / div > < br / > < br / >
< button id = "submit" onclick = "submit()" > POST < / button >
< / div > < br / > < br / >
< div id = "commentContainer" style = "visibility:hidden;" >
< h2 > Comments < sub > ( < span class = "commentCounter" id = "commentCounter" > 0 < / span > ) < / sub > < / h2 >
< div class = "comments" id = "comments" > < / div >
< / div >
< script type = "text/javascript" >
function fetchComments ( ) {
fetch ( "/COMMENTS?article=reset.css.comment" ) . then ( ( data ) = > data . text ( ) )
. then ( ( data ) = > {
data = data . split ( "\n" ) ;
document . getElementById ( "comments" ) . innerHTML = "" ;
document . getElementById ( "commentCounter" ) . innerText = data [ 0 ]
for ( var i = data . length-3 ; i > = 1 ; i- = 2 ) {
if ( data [ i ] . trim ( ) . length > 0 & & data [ i + 1 ] . trim ( ) . length > 0 ) {
document . getElementById ( "comments" ) . innerHTML + = "<div id=\"msg" + ( ( i + 1 ) / 2 ) + "\" class=\"commentDisplayer\"><div class=\"commentData\">" + decodeURIComponent ( data [ i ] ) + "</div><br>"
data2 = data [ i + 1 ] . split ( ";" ) ;
document . getElementById ( "msg" + ( ( i + 1 ) / 2 ) ) . style . borderColor = data2 [ 1 ]
document . getElementById ( "comments" ) . innerHTML + = "<div class=\"commentInfo\"><sup>- " + decodeURIComponent ( data2 [ 0 ] ) + "</sup></div></div><br>"
}
}
document . getElementById ( "commentContainer" ) . style . visibility = "visible"
} )
}
fetchComments ( )
changeColor ( )
< / script >