<!DOCTYPE html>
<html>
<head>
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<title>Borderize - RJM Programming - May, 2015</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var was;
var lastbody=false;
var bmode='border';
var lastc=null;
var thewidth=2;
var thetype='solid';
var thecolour='red';


$(document).ready(function(){
was=document.body.innerHTML;
if (!lastc) { lastc=document.getElementById('sborder'); }
});

function analyse(ois, oisval) {
if (!lastc) { lastc=document.getElementById('sborder'); }
if (oisval != '') {
document.body.innerHTML=was;
if (oisval.indexOf("body") != -1) {
eval('$("' + oisval + '").css({"color": "' + thecolour + '", "' + bmode + '": "' + thewidth + 'px ' + thetype + ' ' + thecolour + '"})');
lastbody=true;
} else {
if (lastbody) {
eval('$("body").css({"color": "black", "' + bmode + '": "' + thewidth + 'px ' + thetype + ' black"})');
document.body.style.border=null;
lastbody=false;
}
eval('$("body").find("' + oisval + '").css({"color": "' + thecolour + '", "' + bmode + '": "' + thewidth + 'px ' + thetype + ' ' + thecolour + '"})');
}
toggle(lastc.innerHTML.toLowerCase());
}
}

function titlesuffix() {
document.getElementById('selwidth').title+=' ... ' + thewidth;
document.getElementById('seltype').title+=' ... ' + thetype.toLowerCase();
document.getElementById('icolour').title+=' ... ' + thecolour;
}

function toggle(insuffix) {
lastc=document.getElementById('s' + insuffix);
lastc.style.backgroundColor='yellow';
if (insuffix == 'outline') {
document.getElementById('sborder').style.backgroundColor='white';
} else {
document.getElementById('soutline').style.backgroundColor='white';
}
document.getElementById('selwidth').value='-' + thewidth;
document.getElementById('seltype').value='' + thetype.toUpperCase();
document.getElementById('icolour').value='' + thecolour.toLowerCase().replace('red','#ff0000');
titlesuffix();
return insuffix;
}
</script>
</head>

<body id='ibody' class='cbody' align='center' style='background-color: #f0f0f0;'>
<h1 id='ih1' class='ch1' align='center'>Put <select id=seltype title="Border or outline type" onchange="thetype=this.value.toLowerCase(); document.getElementById('toptypeopt').value=thetype.toUpperCase(); this.value='' + thetype.toUpperCase(); titlesuffix();"><option id=toptypeopt value=SOLID>a</option><option value=solid>solid</option><option value=dashed>dashed</option><option value=dotted>dotted</option><option value=groove>groove</option><option value=ridge>ridge</option><option value=none>none</option><option value=hidden>hidden</option><option value=double>double</option><option value=inset>inset</option><option value=outset>outset</option><option value=initial>initial</option><option value=inherit>inherit</option></select> <input id=icolour onchange="thecolour=this.value.toLowerCase(); titlesuffix();" title="Border or outline colour" type=color value='#ff0000'></input> <span onclick="bmode=toggle('border');" id=sborder style='background-color:yellow;cursor:pointer;'>Border</span> <select id=selwidth title="Border or outline pixel width" onchange="thewidth=Math.abs(eval('' + this.value)); document.getElementById('topopt').value='-' + thewidth; this.value='' + eval(0 - thewidth); titlesuffix();"><option id=topopt value=-2> or </option><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option><option value=7>7</option><option value=8>8</option><option value=9>9</option><option value=10>10</option><option value=11>11</option><option value=12>12</option><option value=13>13</option><option value=14>14</option><option value=15>15</option><option value=16>16</option><option value=17>17</option><option value=18>18</option><option value=19>19</option></select> <span onclick="bmode=toggle('outline');" id=soutline style='background-color:white;cursor:pointer;'>Outline</span> Around HTML Element Type or .Class or #ID</h1>
<h4 id='ih4' class='ch4' align='center'>RJM Programming - May, 2015 and December, 2020</h4>
<div align='center' id='idiv1' class='cdiv'>
I am a div tag #idiv1 .cdiv
<select id='iselect1' class='cselect' onchange='analyse(this,this.value);'><option value=''>Please choose from a select tag #iselect1 .cselect ...</option><option value='p'>p</option><option value='span'>span</option><option value='div'>div</option><option value='select'>select</option><option value='img'>img</option><option value='h1'>h1</option><option value='h4'>h4</option><option value='body'>body</option><option value='.cp'>.cp</option><option value='.cspan'>.cspan</option><option value='.cdiv'>.cdiv</option><option value='.cselect'>.cselect</option><option value='.cimg'>.cimg</option><option value='.ch1'>.ch1</option><option value='.ch4'>.ch4</option><option value='.cbody'>.cbody</option><option value='#ih1'>#ih1</option><option value='#ih4'>#ih4</option><option value='#ibody'>#ibody</option><option value='#ip1'>#ip1</option><option value='#ispan1'>#ispan1</option><option value='#idiv1'>#idiv1</option><option value='#iselect1'>#iselect1</option><option value='#iimg1'>#iimg1</option><option value='#ip2'>#ip2</option><option value='#ispan2'>#ispan2</option><option value='#idiv2'>#idiv2</option><option value='#iselect2'>#iselect2</option><option value='#iimg2'>#iimg2</option><option value='#ispan3'>#ispan3</option></select>
<p id='ip1' class='cp'>
I am a p tag #ip1 .cp
</p>
<img id='iimg1' class='cimg' src='http://www.rjmprogramming.com.au/PHP/one.jpg' style="height:75px;width:100px;">I am an img tag #iimg1 .cimg</img><br>
<span id='ispan1' class='cspan'>
I am a span tag #ispan1 .cspan
</span><br><br>
<span id='ispan2' class='cspan' align='center'>------------- #ispan2 .cspan ------------------------------</span><br><br>
</div>
<div align='center' id='idiv2' class='cdiv'>
I am a (second) div tag #idiv2 .cdiv
<select id='iselect2' class='cselect' onchange='analyse(this,this.value);'><option value=''>Please choose from a (second) select tag #iselect2 .cselect ...</option><option value='p'>p</option><option value='span'>span</option><option value='div'>div</option><option value='select'>select</option><option value='img'>img</option><option value='h1'>h1</option><option value='h4'>h4</option><option value='body'>body</option><option value='.cp'>.cp</option><option value='.cspan'>.cspan</option><option value='.cdiv'>.cdiv</option><option value='.cselect'>.cselect</option><option value='.cimg'>.cimg</option><option value='.ch1'>.ch1</option><option value='.ch4'>.ch4</option><option value='.cbody'>.cbody</option><option value='#ih1'>#ih1</option><option value='#ih4'>#ih4</option><option value='#ibody'>#ibody</option><option value='#ip1'>#ip1</option><option value='#ispan1'>#ispan1</option><option value='#idiv1'>#idiv1</option><option value='#iselect1'>#iselect1</option><option value='#iimg1'>#iimg1</option><option value='#ip2'>#ip2</option><option value='#ispan2'>#ispan2</option><option value='#idiv2'>#idiv2</option><option value='#iselect2'>#iselect2</option><option value='#iimg2'>#iimg2</option><option value='#ispan3'>#ispan3</option></select>
<p id='ip2' class='cp'>
I am a (second) p tag #ip2 .cp
</p>
<img id='iimg2' class='cimg' src='http://www.rjmprogramming.com.au/PHP/two.jpg' style="height:75px;width:100px;">I am a (second) img tag #iimg2 .cimg</img><br>
<span id='ispan3' class='cspan'>
I am a (second) span tag #ispan3 .cspan
</span><br><br>
</div>
</body>
</html>