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…</span></td>
</tr>
</table>
<!----- TEXTAREA ------>
<textarea id="canvas" name="ta" onkeydown="countclik(document.f.ta);" wrap="soft" spellcheck="false">
<h2>HTML Instant : Real-Time HTML Editor!</h2>
<p>Start typing in the left frame, and it will update in real-time to the right frame.</p>
</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> · <a style="color: #fff;" title="chrome extension" target="_Blank" href="http://bit.ly/fiAkZr">Chrome Extension</a> · <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÷rs=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…</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÷rs=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