var $output; var $result; var $html; var name = "test"; var myTimer; var header = Array(); var css = Array(); var text = '
You know the day destroys the night
'+ 'Night divides the day
'+ 'Tried to run
'+ 'Tried to hide
'+ 'Break on through to the other side
'+ 'Break on through to the other side
'+ 'Break on through to the other side, yeah
'+ 'We chased our pleasures here
'+ 'Dug our treasures there
'+ 'But can you still recall
'+ 'The time we cried
'+ 'Break on through to the other side
'+ 'Break on through to the other side

'+ 'Yeah!
'+ 'C\'mon, yeah
'+ 'Everybody loves my baby
'+ 'Everybody loves my baby
'+ 'She get
'+ 'She get
'+ 'She get
'+ 'She get high

'+ 'I found an island in your arms
'+ 'Country in your eyes
'+ 'Arms that chain us
'+ 'Eyes that lie
'+ 'Break on through to the other side
'+ 'Break on through to the other side
'+ 'Break on through, oww!
'+ 'Oh, yeah!

'+ 'Made the scene
'+ 'Week to week
'+ 'Day to day
'+ 'Hour to hour
'+ 'The gate is straight
'+ 'Deep and wide
'+ 'Break on through to the other side
'+ 'Break on through to the other side
'+ 'Break on through
'+ 'Break on through
'+ 'Break on through
'+ 'Break on through
'+ 'Yeah, yeah, yeah, yeah
'+ 'Yeah, yeah, yeah, yeah, yeah
'; header["default"] = '\n'+ '\n'+ ' CSSFly - Design HTML & CSS on the fly!\n'+ '\n'+ '\n'+ ' \n'+ '

Play with HTML and CSS with live Preview or transform your poem to CSSLyrics...

'+text+'
\n'+ ' \n'+ '\n'+ '\n'; css["default"] = 'body,html{\n'+ ' background:0;\n'+ ' font-family:Verdana,Arial,sans;\n'+ ' font-size:21px;\n'+ ' margin:0; padding:0;\n'+ '}\n'+ 'a{ color:#900; }\n'+ '.poem{ font-size:12px; text-align:center;}\n'+ '#header{ \n'+ ' background:#212121; \n'+ ' color:#ccc; \n'+ ' padding:10px 0px; \n'+ ' min-height:30px; \n'+ ' text-align:center; \n'+ '}\n'+ '#content{ background:#fff; padding:20px; min-height:500px; }\n'+ '#footer{ \n'+ ' background:#666; \n'+ ' color:#fff; \n'+ ' height:30px;\n'+ ' font-size:11px; \n'+ ' text-align:center; \n'+ ' padding-top:10px; \n'+ '}\n'; $(document).ready( function() { $html = $("#htmloutput"); $output = $("#cssoutput"); $result = $("#result"); $html.val(header["default"]); $output.val(css["default"]); $("#btnconvert").bind("click" , renderHTML); $("#btnconvert").trigger("click"); $("#cssoutput,#htmloutput").keyup(d); }); function cssToggle() { $("#wrapper").toggle(); } function htmlToggle() { $(".htmloutput").show(); $(".cssoutput").hide(); $("#togglehtml").addClass("active"); $("#togglecss").removeClass("active"); } function cssToggle2() { $("#togglehtml").removeClass("active"); $("#togglecss").addClass("active"); $(".cssoutput").show(); $(".htmloutput").hide(); } function d() { clearInterval(myTimer); myTimer = setInterval(renderHTML , 1000); } function renderHTML() { var stamp = Math.random()*100000 + ""; var str = stamp.substr(0,10); var htmlStr = $html.val(); var fcss = $output.val(); fcss = fcss.replace(/body,html/g, "#result"). replace(/body /g, "#result"). replace(/body\{/g, "#result{"). replace(/html /g, "#result"). replace(/html\{/g, "#result{"); $("head style").text(fcss); var cont = htmlStr.split("")[1].split("")[0].replace(/\$\.post/gi,'\\$\\.post').replace(/\$\.put/gi,'\\$\\.put').replace(/\$\.delete/gi,'\\$\\.delete').replace(/\$\.ajax/gi,'\\$\\.ajax'); var tit = htmlStr.split("")[1].split("")[0]; $result.html(cont); $("title").text(tit); }