tag:blogger.com,1999:blog-18740145717790412882014-11-06T18:17:25.096-08:00HTML Instant : Real-Time HTML EditorHTML Instant is a real-time HTML WYSIWYG online editor for web developers and designers. Provides instant results as you're typing.I might be warpedhttp://www.blogger.com/profile/15030854403864976218noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-1874014571779041288.post-45482447284955699902010-11-24T05:01:00.001-08:002011-02-21T16:11:35.498-08:00live html editor<script src='https://s3.amazonaws.com/htmlinstant/js/qtags.js' type='text/javascript'/></script> <script src='http://htmlinstant.s3.amazonaws.com/js/cookie.js' type='text/javascript'/></script> <script src='http://htmlinstant.s3.amazonaws.com/js/auto.save.js' type='text/javascript'/></script> <style type="text/css"> /* begin */ html {overflow: hidden;} body { font-family: Arial, sans-serif; font-size: 100%; *font-size: 0.8em; /* IE 6/7 only */ padding: 0; border: 0; overflow: hidden; margin: 0; background: none; text-align: left; color: #000; } button { line-height: normal; } #container { margin: 0; background: none; width:100%; height:100%; border: none; padding: 0; position: absolute; left:0; text-align: center; background: none; overflow:hidden; } .ui-layout-east, .ui-layout-content { background: #ffffff; } .ui-layout-resizer { background: #ddd; } .ui-layout-resizer-open-hover, .ui-layout-resizer-dragging { background: none repeat scroll 0 0 #A8AD12; } .ui-layout-north, .ui-layout-pane, .ui-layout-pane-north { padding:0px;} .ui-layout-pane-north { border: 0; } .ui-layout-north {background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/nav-bg-1.png) repeat-x;height:63px;position:absolute;top:0;width:100%; overflow: hidden;} .ui-layout-center {overflow: hidden; padding: 0 0 0 1px; margin: 0; border-top: 0;} .ui-layout-east {overflow: hidden; padding: 0; margin: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 2px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;} .ui-layout-south { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/nav-bg-2.png) repeat-x center bottom; height: 23px; overflow: hidden; width: 100%; } /* custom toggler-button styles */ .ui-layout-toggler-east, .ui-layout-toggler-south, .ui-layout-toggler-north { border: 0; } .ui-layout-toggler-east div { width: 6px; height: 35px; /* 3x 35 = 105 total height */ } .ui-layout-toggler-south div { width: 35px; height: 6px; float: left; /* keep on 1-line */ } /*.btnToggler { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4.png) no-repeat left center #fff; } .btnReset { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/stock_equals.png) no-repeat center center transparent; } .btnExpand { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1.png) no-repeat right center #fff; }*/ .ui-layout-toggler-south { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat top center transparent; } .ui-layout-toggler-north { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat bottom center transparent; } .ui-layout-toggler-north-closed { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat top center transparent; } .ui-layout-toggler-south-closed { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat bottom center transparent; } .btnToggler { background: #00C; } .btnExpand { background: #090; } .btnReset { background: #C00; } table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 13px; vertical-align: baseline; background: transparent; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; color: #cccccc; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size: 13px; } td { vertical-align: middle; } form { margin: 0 !important; } iframe#cse-search { width: 100%; height:100%; display: none; z-index: 100; position: absolute; top:0; left:0; background: none; text-align: left; } #cse { width: 100%; height:100%; display: none; z-index: 100; position: absolute; top:0; left:0; background: none; text-align: left; } #q { background:url("http://i529.photobucket.com/albums/dd333/hightimesellers/google_icon-1.png") no-repeat scroll 2px center #FFFFFF; border:1px solid #bbb; color:#333; font-size:13px; font-weight:normal; height:25px; padding:1px 0 0 30px; position:absolute; right:3px; top:2px; width:250px; z-index: 100; } #submit { position:absolute; right:10px; top:7px; z-index: 100; } .close { display: none; z-index: 1000; position: absolute; right: 20px; top:1; cursor: pointer; font-size: 16px; font-weight: bold; color: #CC0000;} .open { display: none; position:absolute; right: 10px; bottom: 20px; color: #090; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} #cse-search-box {position:absolute;right:0;top:0;z-index:1000;} textarea#canvas { margin-top:0; border:none; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 2px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; height:100%; width:100%; position:relative; overflow:auto; padding:30px 0 0 10px; font-size: 12px; } #ed_toolbar_canvas { background:transparent; z-index:1000; position:absolute; top:2px; left:0; text-align:left; width:100%; padding:0; height: 27px; } #ed_bold_canvas { background-image:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif); background-repeat:no-repeat; background-color:transparent; background-position:2px 1px; height:22px; width:22px; position:absolute; left:0; top:0; } #ed_italic_canvas { font-style:italic; background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 2px -35px transparent; height:22px; width:22px; position:absolute; left:24px; top:0; } #ed_ins_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -71px transparent; height:22px; width:21px; position:absolute; left:48px; top:0; } #ed_del_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -107px transparent; height:22px; width:21px; position:absolute; left:72px; top:0; } #ed_link_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -791px transparent; height:22px; width:21px; position:absolute; left:96px; top:0; } #ed_img_canvas { background-image:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif); background-repeat:no-repeat; background-color:transparent; background-position:2px -754px; height:22px; width:22px; position:absolute; left:120px; top:0; } #ed_ul_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -465px transparent; height:22px; width:21px; position:absolute; left:144px; top:0; } #ed_ol_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -501px transparent; height:22px; width:21px; position:absolute; left:168px; top:0; } #ed_close_canvas { display:none; } .ed_button { /*border-color:#CCCCCC #BBBBBB #A0A0A0; border-left:1px solid #BBBBBB; border-right:1px solid #BBBBBB; border-style:solid; border-width:1px;*/ border: none; font: normal normal normal 75%/normal arial, sans-serif; background: url(http://lh6.ggpht.com/_fl6XHA3kjqQ/TPEzqriG23I/AAAAAAAABOw/uxy4-FdDoRw/gradient.png) repeat-x; font-weight:700; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin:0 0 0 1px; height: 22px; } .ed_button2, .autosave, .autosave_restore { border-color:#CCCCCC #BBBBBB #A0A0A0; border-left:1px solid #BBBBBB; border-right:1px solid #BBBBBB; border-style:solid; border-width:1px; font: normal normal normal 75%/normal arial, sans-serif; background: url(http://lh6.ggpht.com/_fl6XHA3kjqQ/TPEzqriG23I/AAAAAAAABOw/uxy4-FdDoRw/gradient.png) repeat-x; font-weight:700; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin:0 0 0 1px; height: 20px; } #ed_extra_show_canvas { position:absolute; left:270px; top:0; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat center center; height:22px; width:23px; } #ed_extra_hide_canvas { position:absolute; left:270px; top:-30px; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat center center; height:22px; width:23px; } #ed_spell_canvas { position:absolute; left: 192px; top:0; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/164.png) no-repeat center center; height:22px; width:23px; background-color:transparent; } #ed_extra_buttons_canvas { display:block; position:absolute; top:30px; left:0; text-align:left; width:100%; padding:0; } .toggle-buttons-open {display: none; position:absolute; left: 1px; bottom: 3px; z-index: 1000; background: #fff; color: #090; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} .toggle-buttons-close {position:absolute; left: 1px; bottom: 3px; color: #CC0000; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} .photo { display: none; position: absolute; width: 400px; left: 5px; top: 110px; z-index: 1000; -moz-box-shadow: 2px 4px 12px #333; -webkit-box-shadow: 2px 4px 12px #333; } table.gsc-completion-container { z-index: 10000 !important; font-size : 17px !important; background:none repeat scroll 0 0 white !important; border-color:#777 #ddd #ddd #777 !important; border-style:solid !important; border-width:1px !important; line-height: 22px !important; color: #000 !important; } input { margin: 0; outline: 0; } input:focus, input:active { -moz-box-shadow: #06f 0 0 2px; -webkit-box-shadow: #06f 0 0 2px; box-shadow: #06f 0 0 2px; /* for Opera */ z-index: 1; } #imageshack { display:none; position:absolute; width:300px; left:5px; top:100px; z-index:1000; -moz-box-shadow:2px 4px 12px #333; -webkit-box-shadow:2px 4px 12px #333; } .autosave_saving { font-weight: bold; color: #f34105; margin-left: 3px; display: none; } </style> <script type="text/javascript"> var setFrameUrl = function(url) { if (!url || url == 'undefined') return; if (!url.match('^https?://')) { url = 'http://' + url; } $('#url').val(url); $('#frame1').attr('src',url); }; $(function(){ $('#submit').click(function(){ $('#cse-search').show(); }); $('#q').keydown(function(){ $('#cse-search').show(); }); $('#submit').click(function(){ $('#cse').show(); }); $('#submit').click(function(){ $('.close').show(); }); $('#q').keydown(function(){ $('#cse').show(); }); $('.close').click(function(){ $('#cse').slideToggle(); return false; }); $('#submit').click(function(){ $('.close').show(); }); $('.close').click(function(){ $('.close').hide(); }); $('#q').keydown(function(){ $('.close').show(); }); $('.open').click(function(){ $('#cse').show(); }); $('.open').click(function(){ $('#cse-search').show(); }); $('.close').click(function(){ $('.open').show(); }); $('.open').click(function(){ $('.close').show(); }); $('#q').keydown(function(){ $('.open').hide(); }); $('.open').click(function(){ $('.open').hide(); }); $('.toggle-buttons-close').click(function(){ $('#buttons').slideToggle(); return false; }); $('.toggle-buttons-open').click(function(){ $('#buttons').slideToggle(); return false; }); $('.toggle-buttons-close').click(function(){ $('.toggle-buttons-open').show(); }); $('.toggle-buttons-open').click(function(){ $('.toggle-buttons-open').hide(); }); $('.toggle-canvas').click(function(){ $('.hide-canvas').slideToggle(); return false; }); $('#toggle-canvas').click(function(){ $('.hide-canvas').slideToggle(); return false; }); $('#canvas').keydown(function(){ $('.share').hide(); }); $('#showit').click(function(){ $('.share').show(); }); $('#canvas').keydown(function(){ $('.share-link').show(); }); $('#bucket').click(function(){ $('.photo').slideToggle(); return false; }); $('#showshack').click(function(){ $('#imageshack').slideToggle(); return false; }); $('#canvas').click(function(){ $('.photo').hide(); }); }); </script> <script type="text/javascript"> // TOGGLER CUSTOMIZATION SETTINGS var eastDefaultSize = "50%" , southDefaultSize = "auto" , toggleButtons = '<div class="btnToggler"></div>' + '<div class="btnReset"></div>' + '<div class="btnExpand"></div>' , myLayout ; $(document).ready(function(){ // CREATE THE LAYOUT myLayout = $('#container').layout({ resizeWhileDragging: false , fxName: "none" , east__size: eastDefaultSize , south__size: southDefaultSize , spacing_open: 6 , spacing_closed: 6 , north__resizable: true , north__closable: true , north__maxSize: 63 , south__maxSize: 23 /* , south__initClosed: true */ , east__togglerLength_closed: 105 , east__togglerLength_open: 105 , east__togglerContent_closed: toggleButtons , east__togglerContent_open: toggleButtons , south__closable: true , useStateCookie: true }); // SET OBJECT POINTERS FOR CONVENIENCE var $eastToggler = myLayout.togglers.east ; // UN-BIND DEFAULT TOGGLER FUNCTIONALITY $eastToggler.unbind("click"); // BIND CUSTOM EAST METHODS $eastToggler.find(".btnToggler") .click( toggleEast ); $eastToggler.find(".btnExpand") .click( expandEast ); $eastToggler.find(".btnReset") .click( resetEast ); // ADD TOOLTIPS TO CUSTOM BUTTONS $(".btnToggler").attr("title", "Expand left frame"); $(".btnExpand").attr("title", "Expand right frame"); $(".btnReset") .attr("title", "Reset size to default"); }); // CUSTOM EAST METHODS function toggleEast (evt) { myLayout.toggle("east"); evt.stopPropagation(); }; function expandEast (evt) { sizePane("east", 9999); }; function resetEast (evt) { sizePane("east", eastDefaultSize); }; // GENERIC HELPER FUNCTION function sizePane (pane, size) { myLayout.sizePane(pane, size); myLayout.open(pane); // open pane if not already }; </script> <script type="text/javascript"> $(function () { $('form *').autosave(); }); </script> <script type="text/javascript"> var extraStuff = ''; var old = ''; function instant() { var textarea = document.f.ta; var d = dynamicframe.document; if (old != textarea.value) { old = textarea.value; d.open(); d.write(old); if (old.replace(/[\r\n]/g,'') == textarea.value.replace(/[\r\n]/g,'')) d.write(extraStuff); d.close(); } window.setTimeout(instant, 150); } function iObject() { this.i; return this; } var myObject=new iObject(); myObject.i=0; var myObject2=new iObject(); myObject2.i=0; store_text=new Array(); //store_text[0] store initial textarea value store_text[0]=""; function countclik(tag) { myObject.i++; var y=myObject.i; var x=tag.value; store_text[y]=x; } function undo(tag) { if ((myObject2.i)<(myObject.i)) { myObject2.i++; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } function redo(tag) { if((myObject2.i)>1) { myObject2.i--; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } </script> <body onload="instant();"> <div id="container"> <div class="ui-layout-east"> <iframe name="dynamicframe" frameborder="0" style="height:100%; width:100%; position: relative;"></iframe> <div id="cse"> <p title="hide search box" alt="html editor" class="close">[x]</p> <iframe id="cse-search" frameborder="0" name="searchbox"></iframe> <!--- /cse ---></div> <!--- /ui-layout-east ---></div> <div class="ui-layout-center"> <form name="f" method="post" target="dynamicframe"> <div class="hide-canvas"><script type="text/javascript">edToolbar('canvas');</script> <p title="close editor" alt="hide html editor" class="toggle-canvas" style="cursor: pointer; z-index: 1000; position:absolute; font-size: 13px; font-weight: bold; color: #CC0000; right: 17px; top: 6px;"></p> <img id="bucket" title="Photobucket" src="http://4.bp.blogspot.com/_qcP7EjcYXUk/TNZQKNBb20I/AAAAAAAAKdU/_x6FOJLia04/s200/photobucket.gif" alt="photobucktet" style="left:245px;position:absolute;top:3px;padding:2px;z-index: 1000;height:16px;width:16px;background: none;border:none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;"> <img id="showshack" title="Imageshack" src="http://lh4.ggpht.com/_fl6XHA3kjqQ/TPWEPfBFiRI/AAAAAAAABPA/AaFoOjW0QRU/ishack.gif" alt="photobucktet" style="left:220px;position:absolute;top:4px;padding:2px;z-index: 1000;height:14px;width:14px;background:none;border:none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;"> </div> <table style="position: absolute; bottom: 5; left: 0px; padding: 0; vertical-align: baseline; border-collapse: collapse; border-spacing: 0;z-index:1000;"><tr><td> <p title="hide buttons" class="toggle-buttons-close">X</p> <p title="show buttons" class="toggle-buttons-open">+</p> </td></tr></table> <table id="buttons" cellpadding="0" style="z-index:1000;position: absolute; bottom: 5; left: 15; padding: 0; vertical-align: baseline; border-collapse: collapse; border-spacing: 0;"> <tr> <td><input title="select all and copy" class="ed_button2" type="button" value="SELECT CODE" onClick="javascript:this.form.ta.focus();this.form.ta.select();"></td> <td><input title="Undo" class="ed_button2" type="button" value="UNDO" onmousedown="undo(document.f.ta);"></td> <td><input title="Redo" class="ed_button2" type="button" value="REDO" onmousedown="redo(document.f.ta);"></td> <td><input id="showit" title="Reset" class="ed_button2" type="button" value="RESET" onClick="this.form.reset()"></td> <td><button class="autosave">SAVE</button></td> <td><button class="autosave_restore">RESTORE</button></td> <td><span class="autosave_saving">Saving&#8230;</span></td> </tr> </table> <!----- TEXTAREA ------> <textarea id="canvas" name="ta" onkeydown="countclik(document.f.ta);" wrap="soft" spellcheck="false"> &lt;h2&gt;HTML Instant : Real-Time HTML Editor!&lt;/h2&gt; &lt;p&gt;Start typing in the left frame, and it will update in real-time to the right frame.&lt;/p&gt; </textarea> </form> <!--- /ui-layout-center ---></div> <div class="ui-layout-north"> <div style="height:63px;"> <a href="http://www.htmlinstant.com" alt="htmlinstant.com"><img src="http://i529.photobucket.com/albums/dd333/hightimesellers/HTMLInstant.png" style="position:absolute;top:15px;left:10px;border:none;"></a> <div style="width:478px;height:60px;margin: 0 auto;border:0;position:relative;top:0;"> <script type="text/javascript"> <!-- google_ad_client = "pub-9413604915893153"; /* 468x60, created 10/3/10 */ google_ad_slot = "8840189778"; google_ad_width = 468; google_ad_height = 60; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div> <form id="cse-search-box" action="http://www.htmlinstant.com/p/search-results.html" target="searchbox"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function() { google.search.CustomSearchControl.attachAutoCompletion( 'partner-pub-9413604915893153:9p5e58-azf8', document.getElementById('q'), 'cse-search-box'); }); </script> <div> <input type="hidden" name="cx" value="partner-pub-9413604915893153:9p5e58-azf8" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" id="nwc" name="newwindow" value="1"/> <input type="text" name="q" id="q" autocomplete="off" size="30" onfocus="if(this.value==this.defaultValue)value=''" onblur="if(this.value=='')value=this.defaultValue;" value="Find templates, tutorials, & tips" /> <input type="image" src="http://4.bp.blogspot.com/_fl6XHA3kjqQ/Skwu6OKt5hI/AAAAAAAAAls/gEN5EIsqaQU/s400/magnifying_glass.png" id="submit" name="sa"> </div> </form> <p title="open previous search" class="open">[+]</p> </div> <!--- /ui-layout-north ---></div> <div class="ui-layout-south"> <div style="position:absolute;left:8;top:3px;height:23px;color: #fff; font-weight: bold;"> <font size="-1"><a style="color: #fff;" title="CONTACT US" target="_Blank" href="http://bit.ly/a92mrr" alt="contact html instant">Feedback</a> &middot; <a style="color: #fff;" title="chrome extension" target="_Blank" href="http://bit.ly/fiAkZr">Chrome Extension</a> &middot; <a style="color: #fff;" title="share this page" href="javascript:var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('src','http://wd.sharethis.com/button/toolbar');document.body.appendChild(e);void(0);">Share</a></font> </div> <div style="width:90px; height:23px; margin: 2px auto 0 auto; text-align: center; position: relative;"> </div> <table style="position:absolute;right:0px;top:0px;margin:0;border:0;height:23px;"><tr><td> </td></tr></table> <!--- /ui-layout-south ---></div> <!---IMAGESHACK----> <div id="imageshack"> <script src="http://imageshack.us/scripts/syndicate/widget.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">new ImageShackSyndicateWidget({width: "300",height: "110",theme: {shell: {buttonColor: "#3cbbfa",color: "#111111",backgroundColor: "#cccccc",backgroundImage: "",text: "Select photos and videos to upload."}}}).render();</script> </div> <!---PHOTOBUCKET---> <iframe class="photo" name=FRAME1 style='background-color: #ffffff' src=http://photobucket.com/svc/jwidget.php?pbaffsite=154&width=400&height=400&largeThumb=true&bg=%23ffffff&linkType=tag&border=false&dividers=true&textcolor=%23000000&linkcolor=%230000ff bgcolor=ffffff width=401 height=438 frameborder=1 marginheight=0 marginwidth=0 scrolling=no allowtransparency=true></iframe> <!--- /container ---></div> </body> I might be warpedhttp://www.blogger.com/profile/15030854403864976218noreply@blogger.comtag:blogger.com,1999:blog-1874014571779041288.post-67880269097418702112010-11-23T06:14:00.000-08:002011-02-21T16:12:05.464-08:00real time html editor<script src='https://s3.amazonaws.com/htmlinstant/js/qtags.js' type='text/javascript'/></script> <script src='http://htmlinstant.s3.amazonaws.com/js/cookie.js' type='text/javascript'/></script> <script src='http://htmlinstant.s3.amazonaws.com/js/auto.save.js' type='text/javascript'/></script> <style type="text/css"> /* begin */ html {overflow: hidden;} body { font-family: Arial, sans-serif; font-size: 100%; *font-size: 0.8em; /* IE 6/7 only */ padding: 0; border: 0; overflow: hidden; margin: 0; background: none; text-align: left; color: #000; } button { line-height: normal; } #container { margin: 0; background: none; width:100%; height:100%; border: none; padding: 0; position: absolute; left:0; text-align: center; background: none; overflow:hidden; } .ui-layout-east, .ui-layout-content { background: #ffffff; } .ui-layout-resizer { background: #ddd; } .ui-layout-resizer-open-hover, .ui-layout-resizer-dragging { background: none repeat scroll 0 0 #C4E1A4; } .ui-layout-north, .ui-layout-pane, .ui-layout-pane-north { padding:0px;} .ui-layout-pane-north { border: 0; } .ui-layout-north {background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/jsbin-bg.gif) repeat-x;height:61px;position:absolute;top:0;width:100%; overflow: hidden;} .ui-layout-center {overflow: hidden; padding: 0 0 0 1px; margin: 0; border-top: 0;} .ui-layout-east {overflow: hidden; padding: 0; margin: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 2px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;} .ui-layout-south { height: 20px; overflow: hidden; width: 100%; background: #fff; } /* custom toggler-button styles */ .ui-layout-toggler-east, .ui-layout-toggler-south, .ui-layout-toggler-north { border: 0; } .ui-layout-toggler-east div { width: 6px; height: 35px; /* 3x 35 = 105 total height */ } .ui-layout-toggler-south div { width: 35px; height: 6px; float: left; /* keep on 1-line */ } /*.btnToggler { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4.png) no-repeat left center #fff; } .btnReset { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/stock_equals.png) no-repeat center center transparent; } .btnExpand { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1.png) no-repeat right center #fff; }*/ .ui-layout-toggler-south { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat top center transparent; } .ui-layout-toggler-north { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat bottom center transparent; } .ui-layout-toggler-north-closed { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat top center transparent; } .ui-layout-toggler-south-closed { background: url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat bottom center transparent; } .btnToggler { background: #00C; } .btnExpand { background: #090; } .btnReset { background: #C00; } table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 13px; vertical-align: baseline; background: transparent; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; color: #cccccc; font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif; font-size: 13px; } td { vertical-align: middle; } form { margin: 0 !important; } iframe#cse-search { width: 100%; height:100%; display: none; z-index: 100; position: absolute; top:0; left:0; background: none; text-align: left; } #cse { width: 100%; height:100%; display: none; z-index: 100; position: absolute; top:0; left:0; background: none; text-align: left; } #q { background:url("http://i529.photobucket.com/albums/dd333/hightimesellers/google_icon-1.png") no-repeat scroll 2px center #FFFFFF; border:1px solid #bbb; color:#333; font-size:13px; font-weight:normal; height:25px; padding:1px 0 0 30px; position:absolute; right:3px; top:2px; width:250px; z-index: 100; } #submit { position:absolute; right:10px; top:7px; z-index: 100; } .close { display: none; z-index: 1000; position: absolute; right: 20px; top:1; cursor: pointer; font-size: 16px; font-weight: bold; color: #CC0000;} .open { display: none; position:absolute; right: 10px; bottom: 20px; color: #090; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} #cse-search-box {position:absolute;right:0;top:0;z-index:1000;} textarea#canvas { margin-top:0; border:none; background:0; box-shadow:rgba(0,0,0,0.1) 0 0 8px; -moz-box-shadow:rgba(0,0,0,0.1) 0 0 8px; -webkit-box-shadow:rgba(0,0,0,0.1) 0 0 8px; height:100%; width:100%; position:relative; overflow:auto; padding:30px 0 0 10px; font-size: 12px; } #ed_toolbar_canvas { background:none; z-index:1000; position:absolute; top:1px; left:0; text-align:left; width:100%; padding:0; height: 27px; } #ed_italic_canvas { font-style:italic; background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 2px -35px transparent; height:22px; width:23px; position:absolute; left:24px; top:0; } #ed_bold_canvas { background-image:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif); background-repeat:no-repeat; background-color:transparent; background-position:2px 1px; height:22px; width:23px; position:absolute; left:0; top:0; } #ed_img_canvas { background-image:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif); background-repeat:no-repeat; background-color:transparent; background-position:2px -755px; height:22px; width:23px; position:absolute; left:120px; top:0; } #ed_link_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -792px transparent; height:22px; width:23px; position:absolute; left:96px; top:0; } #ed_ins_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -71px transparent; height:22px; width:23px; position:absolute; left:48px; top:0; } #ed_del_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -107px transparent; height:22px; width:23px; position:absolute; left:72px; top:0; } #ed_ul_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -467px transparent; height:22px; width:23px; position:absolute; left:144px; top:0; } #ed_ol_canvas { background:url(http://yui.yahooapis.com/2.8.1/build/editor/assets/skins/sam/editor-sprite-active.gif) repeat scroll 1px -503px transparent; height:22px; width:23px; position:absolute; left:168px; top:0; } #ed_close_canvas { display:none; } .ed_button { border:1px solid #939393; font: normal normal normal 75%/normal arial, sans-serif; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); background: -moz-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); background: gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); font-weight:700; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin:1px; } .control_buttons, .autosave, .autosave_restore { border:1px solid #939393; font: normal normal normal 75%/normal arial, sans-serif; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); background: -moz-gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); background: gradient(linear, 0% 40%, 0% 70%, from(#F9F9F9), to(#E3E3E3)); font-weight:700; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; margin:1px; height: 20px; } .autosave_saving { font-weight: bold; color: #f34105; margin-left: 3px; display: none; } #ed_extra_show_canvas { position:absolute; right:24px; top:0; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1.png) no-repeat center center; height:22px; width:23px; } #ed_extra_hide_canvas { position:absolute; right:24px; top:-30px; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/arrow-4-1-1-1.png) no-repeat center center; height:22px; width:23px; } #ed_spell_canvas { position:absolute; right: 102px; top:0; background:url(http://i529.photobucket.com/albums/dd333/hightimesellers/164.png) no-repeat center center; height:22px; width:23px; background-color:transparent; } #ed_extra_buttons_canvas { display:block; position:absolute; top:30px; left:0; text-align:left; width:100%; padding:0; } .toggle-buttons-open {display: none; position:absolute; left: 3px; bottom: 6px; z-index: 1000; background: #fff; color: #090; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} .toggle-buttons-close {position:absolute; left: 3px; bottom: 6px; color: #CC0000; font-size: 10px; font-weight: bold; cursor: pointer; z-index: 1000;} .photo { display: none; position: absolute; width: 400px; left: 5px; top: 110px; z-index: 1000; -moz-box-shadow: 2px 4px 12px #333; -webkit-box-shadow: 2px 4px 12px #333; } table.gsc-completion-container { z-index: 10000 !important; font-size : 17px !important; background:none repeat scroll 0 0 white !important; border-color:#777 #ddd #ddd #777 !important; border-style:solid !important; border-width:1px !important; line-height: 22px !important; color: #000 !important; } input { margin: 0; outline: 0; } input:focus, input:active { -moz-box-shadow: #06f 0 0 2px; -webkit-box-shadow: #06f 0 0 2px; box-shadow: #06f 0 0 2px; /* for Opera */ z-index: 1; } #imageshack { display:none; position:absolute; width:300px; left:5px; top:100px; z-index:1000; -moz-box-shadow:2px 4px 12px #333; -webkit-box-shadow:2px 4px 12px #333; } </style> <script type="text/javascript"> var setFrameUrl = function(url) { if (!url || url == 'undefined') return; if (!url.match('^https?://')) { url = 'http://' + url; } $('#url').val(url); $('#frame1').attr('src',url); }; $(function(){ $('#submit').click(function(){ $('#cse-search').show(); }); $('#q').keydown(function(){ $('#cse-search').show(); }); $('#submit').click(function(){ $('#cse').show(); }); $('#submit').click(function(){ $('.close').show(); }); $('#q').keydown(function(){ $('#cse').show(); }); $('.close').click(function(){ $('#cse').slideToggle(); return false; }); $('#submit').click(function(){ $('.close').show(); }); $('.close').click(function(){ $('.close').hide(); }); $('#q').keydown(function(){ $('.close').show(); }); $('.open').click(function(){ $('#cse').show(); }); $('.open').click(function(){ $('#cse-search').show(); }); $('.close').click(function(){ $('.open').show(); }); $('.open').click(function(){ $('.close').show(); }); $('#q').keydown(function(){ $('.open').hide(); }); $('.open').click(function(){ $('.open').hide(); }); $('.toggle-buttons-close').click(function(){ $('#buttons').slideToggle(); return false; }); $('.toggle-buttons-open').click(function(){ $('#buttons').slideToggle(); return false; }); $('.toggle-buttons-close').click(function(){ $('.toggle-buttons-open').show(); }); $('.toggle-buttons-open').click(function(){ $('.toggle-buttons-open').hide(); }); $('.toggle-canvas').click(function(){ $('.hide-canvas').slideToggle(); return false; }); $('#toggle-canvas').click(function(){ $('.hide-canvas').slideToggle(); return false; }); $('#canvas').keydown(function(){ $('.share').hide(); }); $('#showit').click(function(){ $('.share').show(); }); $('#canvas').keydown(function(){ $('.share-link').show(); }); $('#bucket').click(function(){ $('.photo').slideToggle(); return false; }); $('#showshack').click(function(){ $('#imageshack').slideToggle(); return false; }); $('#canvas').click(function(){ $('.photo').hide(); }); $('#savecookie').click(function(){ $('#cookie').slideToggle(); return false; }); }); </script> <script type="text/javascript"> // TOGGLER CUSTOMIZATION SETTINGS var eastDefaultSize = "50%" , southDefaultSize = "auto" , toggleButtons = '<div class="btnToggler"></div>' + '<div class="btnReset"></div>' + '<div class="btnExpand"></div>' , myLayout ; $(document).ready(function(){ // CREATE THE LAYOUT myLayout = $('#container').layout({ resizeWhileDragging: false , fxName: "none" , east__size: eastDefaultSize , south__size: southDefaultSize , spacing_open: 6 , spacing_closed: 6 , north__resizable: true , north__closable: true , north__maxSize: 41 , south__maxSize: 20 /* , south__initClosed: true */ , east__togglerLength_closed: 105 , east__togglerLength_open: 105 , east__togglerContent_closed: toggleButtons , east__togglerContent_open: toggleButtons , south__closable: true , useStateCookie: true }); // SET OBJECT POINTERS FOR CONVENIENCE var $eastToggler = myLayout.togglers.east ; // UN-BIND DEFAULT TOGGLER FUNCTIONALITY $eastToggler.unbind("click"); // BIND CUSTOM EAST METHODS $eastToggler.find(".btnToggler") .click( toggleEast ); $eastToggler.find(".btnExpand") .click( expandEast ); $eastToggler.find(".btnReset") .click( resetEast ); // ADD TOOLTIPS TO CUSTOM BUTTONS $(".btnToggler").attr("title", "Expand left frame"); $(".btnExpand").attr("title", "Expand right frame"); $(".btnReset") .attr("title", "Reset size to default"); }); // CUSTOM EAST METHODS function toggleEast (evt) { myLayout.toggle("east"); evt.stopPropagation(); }; function expandEast (evt) { sizePane("east", 9999); }; function resetEast (evt) { sizePane("east", eastDefaultSize); }; // GENERIC HELPER FUNCTION function sizePane (pane, size) { myLayout.sizePane(pane, size); myLayout.open(pane); // open pane if not already }; </script> <script type="text/javascript"> var extraStuff = ''; var old = ''; function instant() { var textarea = document.f.ta; var d = dynamicframe.document; if (old != textarea.value) { old = textarea.value; d.open(); d.write(old); if (old.replace(/[\r\n]/g,'') == textarea.value.replace(/[\r\n]/g,'')) d.write(extraStuff); d.close(); } window.setTimeout(instant, 150); } function iObject() { this.i; return this; } var myObject=new iObject(); myObject.i=0; var myObject2=new iObject(); myObject2.i=0; store_text=new Array(); //store_text[0] store initial textarea value store_text[0]=""; function countclik(tag) { myObject.i++; var y=myObject.i; var x=tag.value; store_text[y]=x; } function undo(tag) { if ((myObject2.i)<(myObject.i)) { myObject2.i++; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } function redo(tag) { if((myObject2.i)>1) { myObject2.i--; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } </script> <script type="text/javascript"> $(function () { $('form *').autosave(); }); </script> <body onload="instant();"> <div id="container"> <div class="ui-layout-east"> <iframe name="dynamicframe" frameborder="0" style="height:100%; width:100%; position: relative;"></iframe> <div id="cse"> <p title="hide search box" alt="html editor" class="close">x</p> <iframe id="cse-search" frameborder="0" name="searchbox"></iframe> <!--- /cse ---></div> <!--- /ui-layout-east ---></div> <div class="ui-layout-center"> <form name="f" method="post" target="dynamicframe"> <div class="hide-canvas"><script type="text/javascript">edToolbar('canvas');</script> <p title="close editor" alt="hide html editor" class="toggle-canvas" style="cursor: pointer; z-index: 1000; position:absolute; font-size: 13px; font-weight: bold; color: #CC0000; right: 17px; top: 6px;"></p> <img title="Photobucket" src="http://4.bp.blogspot.com/_qcP7EjcYXUk/TNZQKNBb20I/AAAAAAAAKdU/_x6FOJLia04/s200/photobucket.gif" alt="photobucktet" height="16" width="16" class="ed_button" id="bucket" style="position:absolute;right:50px;top:1px;padding:2px;z-index: 1000;"/> <img title="Imageshack" src="http://lh6.ggpht.com/_fl6XHA3kjqQ/TO_Rg5xXR3I/AAAAAAAABOY/S2upb3HLJ4o/ImageshackIcon.png.jpg" alt="photobucktet" height="16" width="16" class="ed_button" id="showshack" style="position:absolute;right:76px;top:1px;padding:2px;z-index: 1000;"/> </div> <table style="position: absolute; bottom: 5; left: 0px; padding: 0; vertical-align: baseline; border-collapse: collapse; border-spacing: 0;z-index:1000;"><tr><td> <p title="hide buttons" class="toggle-buttons-close">x</p> <p title="show buttons" class="toggle-buttons-open">+</p> </td></tr></table> <table id="buttons" cellpadding="0" style="z-index:1000;position: absolute; bottom: 5; left: 15; padding: 0; vertical-align: baseline; border-collapse: collapse; border-spacing: 0;"> <tr> <td><input title="select all and copy" class="control_buttons" type="button" value="SELECT CODE" onClick="javascript:this.form.ta.focus();this.form.ta.select();"></td> <td><input title="Undo" class="control_buttons" type="button" value="UNDO" onmousedown="undo(document.f.ta);"></td> <td><input title="Redo" class="control_buttons" type="button" value="REDO" onmousedown="redo(document.f.ta);"></td> <td><input id="showit" title="Reset" class="control_buttons" type="button" value="RESET" onClick="this.form.reset()"/></td> <td><button class="autosave">SAVE</button></td> <td><button class="autosave_restore">RESTORE</button></td> <td><span class="autosave_saving">Saving&#8230;</span></td> </tr> </table> <!----- TEXTAREA ------> <textarea id="canvas" name="ta" onkeydown="countclik(document.f.ta);" wrap="soft" spellcheck="false"> </textarea> </form> <!--- /ui-layout-center ---></div> <div class="ui-layout-north"> <div style="height:41px;"> <a href="http://www.htmlinstant.com" alt="htmlinstant.com"><img height="30px" src="http://i529.photobucket.com/albums/dd333/hightimesellers/HTMLInstant.png" style="position:absolute;top:10px;left:10px;border:none;"></a> <div style="width:478px;height:40px;margin: 0 auto;border:0;position:relative;top:0;"> </div> </div> <!--- /ui-layout-north ---></div> <div class="ui-layout-south"> <div style="position:absolute;left:8;top:2px;height:20px;"> <font size="-1"><span><a title="htmlinstant.com" href="http://www.htmlinstant.com" target="_Blank">full-screen</a></span></font><span style="font-size:10px;color:#777;margin-left: 5px;">Tip: select code & copy</span> </div> <div style="width:90px; height:20px; margin: 0 auto; text-align: center; position: relative;"> <form target="_Blank" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_s-xclick"> <input type="hidden" name="hosted_button_id" value="3M32EQHUZZX2Q"> <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"> <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </div> <table style="position:absolute;right:0px;bottom:0;margin:0;border:0;height:20px;"><tr><td> </td></tr></table> <!--- /ui-layout-south ---></div> <!---IMAGESHACK----> <div id="imageshack"> <script src="http://imageshack.us/scripts/syndicate/widget.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">new ImageShackSyndicateWidget({width: "300",height: "110",theme: {shell: {buttonColor: "#3cbbfa",color: "#111111",backgroundColor: "#cccccc",backgroundImage: "",text: "Select photos and videos to upload."}}}).render();</script> </div> <!---PHOTOBUCKET---> <iframe class="photo" name=FRAME1 style='background-color: #ffffff' src=http://photobucket.com/svc/jwidget.php?pbaffsite=154&width=400&height=400&largeThumb=true&bg=%23ffffff&linkType=tag&border=false&dividers=true&textcolor=%23000000&linkcolor=%230000ff bgcolor=ffffff width=401 height=438 frameborder=1 marginheight=0 marginwidth=0 scrolling=no allowtransparency=true></iframe> <!--- /container ---></div> </body>I might be warpedhttp://www.blogger.com/profile/15030854403864976218noreply@blogger.comtag:blogger.com,1999:blog-1874014571779041288.post-63017443977678177242010-10-02T10:28:00.000-07:002011-06-25T14:53:46.124-07:00html instant<link rel="stylesheet" type="text/css" href="http://htmlinstant.s3.amazonaws.com/css/css.css"/> <script type="text/javascript" src="http://htmlinstant.s3.amazonaws.com/js/jquery.markitup.js"></script> <script type="text/javascript" src="http://htmlinstant.s3.amazonaws.com/js/editor.js"></script> <script type="text/javascript"> // BEGIN LAYOUT var eastDefaultSize = "50%", southDefaultSize = 27, toggleButtons = '<div class="btnToggler"></div>' + '<div class="btnReset"></div>' + '<div class="btnExpand"></div>', myLayout; $(document).ready(function() { myLayout = $('#container').layout({ resizeWhileDragging: false, fxName: "none", east__size: eastDefaultSize, south__size: southDefaultSize, spacing_open: 8, spacing_closed: 8, west__spacing_closed: 12, west__spacing_open: 10, west__initClosed: true, north__spacing_open: 0, south__spacing_open: 0, south__resizable: false, north__maxSize: 67, west__togglerLength_closed: 120, west__togglerLength_open: 100, east__togglerLength_closed: 105, east__togglerLength_open: 105, south__togglerLength_closed: 105, south__togglerLength_open: 105, east__togglerContent_closed: toggleButtons, east__togglerContent_open: toggleButtons, south__togglerContent_closed: toggleButtons, south__togglerContent_open: toggleButtons }); // SET OBJECT POINTERS FOR CONVENIENCE var $eastToggler = myLayout.togglers.east , $southToggler = myLayout.togglers.south ; // UN-BIND DEFAULT TOGGLER FUNCTIONALITY $eastToggler.unbind("click"); $southToggler.unbind("click"); // BIND CUSTOM WEST METHODS $eastToggler.find(".btnToggler") .click( toggleEast ); $eastToggler.find(".btnExpand") .click( expandEast ); $eastToggler.find(".btnReset") .click( resetEast ); // BIND CUSTOM SOUTH METHODS $southToggler.find(".btnToggler") .click( toggleSouth ); $southToggler.find(".btnExpand") .click( expandSouth ); $southToggler.find(".btnReset") .click( resetSouth ); // ADD TOOLTIPS TO CUSTOM BUTTONS $(".btnExpand").attr("title", "Expand to full size"); $(".btnReset") .attr("title", "Reset size to default"); }); // CUSTOM WEST METHODS function toggleEast (evt) { myLayout.toggle("east"); evt.stopPropagation(); }; function expandEast (evt) { sizePane("east", 9999); }; function resetEast (evt) { sizePane("east", eastDefaultSize); }; // CUSTOM SOUTH METHODS function toggleSouth (evt) { myLayout.toggle("south"); evt.stopPropagation(); }; function expandSouth (evt) { sizePane("south", 300); }; // ie, make as big as possible function resetSouth (evt) { sizePane("south", southDefaultSize); }; // GENERIC HELPER FUNCTION function sizePane (pane, size) { myLayout.sizePane(pane, size); myLayout.open(pane); // open pane if not already }; </script> <script type="text/javascript"> // BEGIN MARKITUP $(document).ready(function() { $("textarea").markItUp(myHtmlSettings); $('.add').click(function() { $.markItUp({ openWith: '<opening tag>', closeWith: '<\/closing tag>', placeHolder: "New content" }); return false; }); $('.add2').click(function() { $.markItUp({ name: 'Table', key: '2', replaceWith: '<!DOCTYPE html>\n<html>\n<head>\n<script class="jsbin" src="http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1\/jquery.min.js"><\/script>\n<meta charset=utf-8 \/>\n<title>JS Bin<\/title>\n<!--[if IE]>\n <script src="http:\/\/html5shiv.googlecode.com\/svn\/trunk\/html5.js"><\/script>\n<![endif]-->\n<style>\n article, aside, figure, footer, header, hgroup,\n menu, nav, section { display: block; }\n<\/style>\n<\/head>\n<body>\n <p id="hello">Hello World<\/p>\n<\/body>\n<\/html>' }); return false; }); // make modules draggable dragProp = { handle: ".handle", zIndex: 100, opacity: 0.9, scroll: 1 }; $('#colorPlugin').hide().draggable(dragProp); $('#linkPlugin').hide().draggable(dragProp); $('#photoPlugin').hide().draggable(dragProp); $('#openSaved').hide().draggable(dragProp); $('#Saved').hide().draggable(dragProp); $('#openSyntax').hide().draggable(dragProp); $('.close').click(function() { $(this).parent().parent().hide(); return false; }); $('.handle').click(function() { return false; }); // accordion on modules $("#openSyntax .module .slide:gt(0)").slideToggle(); $("#openSaved .module .slide:gt(0)").slideToggle(); $("#Saved .module .slide:gt(0)").slideToggle(); $("#photoPlugin .module .slide:gt(0)").slideToggle(); $("#colorPlugin .module .slide:gt(0)").slideToggle(); $("#linkPlugin .module .slide:gt(0)").slideToggle(); $(".module h3").click(function() { $(this).next('.slide').slideToggle().siblings('.slide:visible').slideToggle(); }); // init farbtastic plugin $('#picker').farbtastic('#color'); // use markItUp! features when clicking on "add to editor" link in a module $(".module .products a").click(function() { src = $(this).attr("href"); alt = $(this).attr("title"); $.markItUp({ replaceWith: '<img src="' + src + '" alt="' + alt + '" (!( class="[![Class]!]")!) />' }); return false; }); $(".module .links a").click(function() { href = $(this).attr("href"); title = $(this).attr("title"); $.markItUp({ openWith: '<a href="' + href + '" title="' + title + '">', closeWith: '</a>', placeHolder: title }); return false; }); $(".module .colors a").eq(1).click(function() { acolor = $("#color").val(); $.markItUp({ openWith: '<span style="color:' + acolor + '">', closeWith: '</span>' }); return false; }); $('.save-item').click(function() { $('#openSaved').show(); }); $('#q').click(function() { $('#cse').show(); }); }); // END MARKITUP </script> <script type="text/javascript"> function validate() { document.forms.editor.method = 'post'; document.forms.editor.action = 'http://validator.w3.org/check#validate_by_input+with_options'; document.forms.editor.target = 'new'; document.forms.editor.submit(); } function FindAndReplaceAll() { var finda = document.editor.findThis.value; var replacea = document.editor.replaceWith.value; var fulltexta = document.editor.fragment.value; document.editor.fragment.value = fulltexta.replace(new RegExp(finda, 'gi'), replacea); } function countChar(str, f) { f.Count.value = str.length; } function doClear() { if (confirm("Are you sure you want to clear form?")) { document.forms.editor.fragment.value = "" } } var extraStuff = ''; //might use later var old = ''; function instant() { var textarea = document.editor.fragment; var d = dynamicframe.document; if (old != textarea.value) { old = textarea.value; d.open(); d.write(old); if (old.replace(/[\r\n]/g, '') == textarea.value.replace(/[\r\n]/g, '')) d.write(extraStuff); d.close(); } window.setTimeout(instant, 100); } function iObject() { this.i; return this; } var myObject=new iObject(); myObject.i=0; var myObject2=new iObject(); myObject2.i=0; store_text=new Array(); //store_text[0] store initial textarea value store_text[0]=""; function countclik(tag) { myObject.i++; var y=myObject.i; var x=tag.value; store_text[y]=x; } function undo(tag) { if ((myObject2.i)<(myObject.i)) { myObject2.i++; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } function redo(tag) { if((myObject2.i)>1) { myObject2.i--; } var z=store_text.length; z=z-myObject2.i; if (store_text[z]) { tag.value=store_text[z]; } else { tag.value=store_text[0]; } } </script> <div id="container"> <!--- PLUGINS ---> <div id="colorPlugin"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Colors</h3> <div class="colors slide" style="padding:2px;"> <p><a href="http://acko.net/dev/farbtastic">Farbtastic plugin</a> by Steven Wittens</p> <div id="picker"></div> <p style="margin: 0 auto; text-align: center;"> <input type="text" id="color" name="color" value="#6a1592" /><br/> <a href="#">add to editor</a> </p> </div> </div> </div><!-- END colorPlugin --> <!-- LINKS --> <div id="linkPlugin"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Links</h3> <div class="links slide"> </div> <h3>Pictures</h3> <div class="products slide"> </div> </div> </div><!-- END linkPlugin --> <div id="photoPlugin"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Photobucket</h3> <iframe name="plugin" src="http://photobucket.com/plugin?width=430&height=430&pbaffsite=http://www.htmlinstant.com&bg=%23FFFFFF&border=false&bordercolor=%23000000&linkType=tag&textcolor=%23000000&linkcolor=%232200c1&media=both&searchenabled=true"bgcolor="transparent"width="430"height="430" frameborder="0" scrolling="no"> </iframe> </div> </div> <!-- END photoPlugin --> <div id="Saved"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Save Current Item:</h3> <div style="padding: 5px 3px;"> <input id="lsKey" placeholder="name" type="text"/> <button onClick="writeLocal();" class="save-item" title="Save"></button> </div></div> </div><!-- END Saved --> <div id="openSaved"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Your Saved Items: </h3> <div id="lsValues" style="overflow-x:hidden !important;margin:0px !important; padding: 3px !important;background:#efefef;border: 1px solid #fff;"></div> </div> </div> <!-- END openSaved --> <!--- EDITOR ---> <div class="ui-layout-center"> <form name="editor" style="height: 100%;"> <textarea id="html" name="fragment" onfocus="highlight();" style="resize: none;" onkeyup="countChar(this.value,this.form); countclik(document.editor.fragment); doSetItem()" wrap="hard" spellcheck="false"> </textarea> <div id="openSyntax"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module"> <h3>Syntax Highlighting</h3> <div id="syntax"> <div id="numbers"></div> <pre id="output"></pre> </div> </div> </div> </div> <!--- SOUTH ---> <div class="ui-layout-south"> <table style="background: transparent; width: 595px; margin-left: 35px; height: 27px; border: 0; cursor: pointer;"> <tbody><tr> <td width="40px"><a title="Select All" onClick="document.editor.fragment.focus();document.editor.fragment.select();"><div class="save"></div></a></td> <td width="40px"><a title="Undo" value="Undo" onmousedown="undo(document.editor.fragment);"><div class="undo"></div></a> </td> <td width="40px"><a title="Reset" value="" onClick="document.editor.reset();return false"><div class="reset"></div></a></td> <td width="40px"><a title="Redo" value="Redo" onmousedown="redo(document.editor.fragment);"><div class="redo"></div></a></td> <td width="40px"><a title="Validate" onclick="validate();"><div class="validate"></div></a></td> <td width="40px"><a onclick="doClear();" title="Clear"><div class="clear"></div></a></td> <td width="250px"> <input type="text" style="width:120px;color:#BA265F;border: 1px solid #ccc;margin-right:6px;font-family:monospace;" id="findThis" name="findThis" value="Find" onblur="if(this.value=='')value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)value=''" size="12"> <input type="text" style="width:120px;color:#BA265F;border: 1px solid #ccc;font-family:monospace;" id="replaceWith" name="replaceWith" value="Replace With" onblur="if(this.value=='')value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)value=''" size="12"></td> <td width="40px"><a title="Replace" onclick="FindAndReplaceAll();"><div class="find-replace"></div></a></td> <td width="65px"><input style="width:65px;color:#BA265F;border: 1px solid #ccc;font-family:monospace;" size="3" type="text" name="Count" value="0"></td> </tr> </tbody></table> </form> </div> <!--- EAST ---> <div class="ui-layout-east"> <div style="position: relative;height:27px;"><ul><li> <p style="color: #000; text-shadow: white 0 1px 0; font-weight: bold; font-size: 10pt; font-family: monospace ;padding: 4px 0 3px 1px; line-height:1.6;"> Results:</p></li></ul></div> <iframe class="dynamicframe" frameborder="0" name="dynamicframe"></iframe> <div id="cse"> <div class="toolbar"> <a href="#" class="handle">Move</a> <a href="#" class="close">Close</a> </div> <div class="module" style="border: 0 !important;"> <h3 style="border: 0 !important;">Search Results</h3> <iframe style="height:100%; width: 100%;" frameborder="0" name="searchbox"></iframe> </div> </div> </div> <!--- NORTH ---> <div class="ui-layout-north"> <table style="height:67px;width:100%;"><tr><td> <a href="file:///C:/Documents%20and%20Settings/web%20design/Desktop/HTMLINSTANT%20v%202.0/indexx.html" alt="htmlinstant.com"><img src="https://lh4.googleusercontent.com/_fl6XHA3kjqQ/TV2yPXNdHzI/AAAAAAAABWI/9wNUoE4riTk/HTMLInstant.png" style="position:absolute;top:15px;left:10px;border:none;"></a> </td><td><a class="add2" href=""></a></td></tr></table> <form id="cse-search-box" action="http://www.htmlinstant.com/p/search-results.html" target="searchbox"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function() { google.search.CustomSearchControl.attachAutoCompletion( 'partner-pub-9413604915893153:9p5e58-azf8', document.getElementById('q'), 'cse-search-box'); }); </script> <div> <input type="hidden" name="cx" value="partner-pub-9413604915893153:9p5e58-azf8" /> <input type="hidden" name="cof" value="FORID:11" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" id="nwc" name="newwindow" value="1"/> <input type="text" name="q" id="q" autocomplete="off" size="30" onfocus="if(this.value==this.defaultValue)value=''" onblur="if(this.value=='')value=this.defaultValue;" value="Find templates, tutorials, & tips" /> <input type="image" src="http://4.bp.blogspot.com/_fl6XHA3kjqQ/Skwu6OKt5hI/AAAAAAAAAls/gEN5EIsqaQU/s400/magnifying_glass.png" id="submit" name="sa"> </div> </form> </div> <!--- WEST ---> <div class="ui-layout-west"> </div> </div> <script type="text/javascript"> // write data to the local storage function writeLocal() { var key = $('#lsKey').val(); var data = $('#html').val(); localStorage.setItem(key, data); updateItemsList(); } // remove the item from localStorage function deleteLocal(keyName) { localStorage.removeItem(keyName); updateItemsList(); } // read the actual data for the key from localStorage function readLocal(keyName) { $('#lsKey').val(keyName); $('#html').val(localStorage.getItem(keyName)); } // allow retrieval of localStorage items function updateItemsList() { var items = localStorage.length; var s = '<p class="saved-text">Saved Items</p>'; s+= '<ul class="west-bg" style="padding: 5px 0px 5px 5px;width: 98 % ;max-height: 400px;line-height: 1.7;font-family: monospace;font-size: 10pt;overflow: auto;font-weight: bold;color: #6a1592;">'; for (var i=0; i<items; i++) { var keyName = localStorage.key(i); s+= '<li class="lsdLI">' + '<div style="float:right;padding-right:5px;">' + '<button class="save" title="Load" onClick="readLocal(\'' + keyName + '\');"/></button>' + '<button class="delete" title="Delete" onClick="deleteLocal(\'' + keyName + '\');"/></button>' + '</div>' + '<strong>' + keyName + '</strong>' + '</li>'; } $('#lsValues').html(s + '</ul>'); } function doSetItem() { var name = 'previous item'; var data = document.forms.editor.fragment.value; localStorage.setItem(name, data); } function doGetItem() { var name = 'previous item'; document.forms.editor.fragment.value = localStorage.getItem(name); } function load() { updateItemsList(); instant(); doGetItem(); } window.onload = load; </script> <script type="text/javascript"> // BEGIN CODEMIRROR // Simple hack to demonstrate adding line numbers. Just pass the DOM node as // the second argument to highlightText when you don't need those function highlight() { var lineNo = 1, output = document.getElementById("output"), numbers = document.getElementById("numbers"); output.innerHTML = numbers.innerHTML = ""; function addLine(line) { numbers.appendChild(document.createTextNode(String(lineNo++))); numbers.appendChild(document.createElement("BR")); for (var i = 0; i < line.length; i++) output.appendChild(line[i]); output.appendChild(document.createElement("BR")); } highlightText(document.getElementById("html").value, addLine); } </script> I might be warpedhttp://www.blogger.com/profile/15030854403864976218noreply@blogger.com