14c14
< <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
---
> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
17,25d16
< 
< //&lt;style&gt;<br>
< //.box {<br>
< //  margin: 20px;  padding: 10px;<br>
< //  height: 150px; width: 500px;<br>
< //  border: 1px solid black; }<br>
< //&lt;/style&gt;<br>
< 
< 
205d195
<   var hides, ihides=0;
207d196
<    if (tv.trim() == tv) {
209,237d197
<     document.getElementById(selector.replace('#','')).style.backgroundRepeat='repeat';
<    } else {
<     if (tv.indexOf(tv.trim() + '   ') != -1) {
<     document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';
<     document.getElementById(selector.replace('#','')).style.backgroundSize='cover';
<     document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
<     } else if (tv.indexOf(tv.trim() + '  ') != -1) {
<     document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';
<     document.getElementById(selector.replace('#','')).style.backgroundSize='contain';
<     document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
<     } else {
<     document.getElementById(selector.replace('#','')).style.background='URL(' + tv.trim() + ')';
<     document.getElementById(selector.replace('#','')).style.backgroundRepeat='no-repeat';
<     }
<    }
<    if (tv.indexOf('#') != -1) {
<      hides=document.getElementsByTagName('h1');
<      for (ihides=0; ihides<hides.length; ihides++) {
<        hides[ihides].style.visibility='hidden';
<      }
<      hides=document.getElementsByTagName('h3');
<      for (ihides=0; ihides<hides.length; ihides++) {
<        hides[ihides].style.visibility='hidden';
<      }
<      hides=document.getElementsByTagName('p');
<      for (ihides=0; ihides<hides.length; ihides++) {
<        hides[ihides].style.visibility='hidden';
<      }
<    }
240,283d199
< 
< function fixstyle(stih) {
<   var idivs=0, boxrect=null, kdivs=0;
<   stih=stih.replace(/\&amp\;lt\;/g, '<').replace(/\&amp\;gt\;/g, '>').replace(/\&lt\;/g, '<').replace(/\&gt\;/g, '>');
<   //alert('0:' + stih);
<   if (stih.indexOf('<style>') != -1 && stih.indexOf('</style>') != -1) {
<     document.getElementById('dstyle').innerHTML='<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>';
<     //alert('<Style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
<     var divs=document.getElementsByTagName('div');
<     for (var jdivs=0; jdivs<2; jdivs++) {
<     if (kdivs == 0) {
<     for (idivs=0; idivs<divs.length; idivs++) {
<       if (('' + divs[idivs].className).indexOf('ui-draggable') != -1) {
<         if (boxrect) {
<           if (kdivs == 0) {
<             kdivs++;
<             divs[idivs].style.left=('' + boxrect.left) + 'px';
<             divs[idivs].style.top=('' + boxrect.top) + 'px';
<           } else if (kdivs == 1) {
<             kdivs++;
<             divs[idivs].style.left=('' + boxrect.left) + 'px';
<             divs[idivs].style.top=('' + boxrect.bottom) + 'px';
<           } else if (kdivs == 2) {
<             kdivs++;
<             divs[idivs].style.left=('' + boxrect.right) + 'px';
<             divs[idivs].style.top=('' + boxrect.top) + 'px';
<           } else if (kdivs == 3) {
<             kdivs++;
<             divs[idivs].style.left=('' + boxrect.right) + 'px';
<             divs[idivs].style.top=('' + boxrect.bottom) + 'px';
<             //alert('<stylE>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
<             location.href=document.URL.split('?')[0].split('#')[0] + '?styling=' + encodeURIComponent('<style>' + stih.split('</style>')[0].split('<style>')[1] + '</style>');
<           }
<         }
<       } else if (('' + divs[idivs].className).indexOf('box') != -1 && !boxrect) {
<         boxrect=divs[idivs].getBoundingClientRect();
<       }
<     }
<     }
<     }
<   } //else {
<     //alert(stih);
<   //}
< }
286,293c202
< <div id=dstyle style='display:none;'>
< <script type='text/javascript'>
<   var styis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
<   if (styis != '') {
<     document.write(styis);
<   }
< </script>
< </div>
---
> 
295c204
< <h3>RJM Programming <a target=_blank title=Reset href='./more_transform.html'>-</a> September, 2017</h3>
---
> <h3>RJM Programming - September, 2017</h3>
297,311c206,209
< <p>Optional Background Image URL for Box Below: <input style="width:530px;" type='text' id='iurl' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover, and include hash # for top element invisibility' value='http://www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg'></input>&nbsp;<input type='button' style='background-color:yellow;' title='Optionally append space to this image URL to not have it repeat, two spaces for contain and three spaces for cover, and include hash # for top element invisibility' onclick=" applythis(document.getElementById('iurl').value); " value="Apply Below"></input><br></p>
< <div id="img" class="box" contenteditable=true onblur="fixstyle((this.innerText || this.contentWindow || this.contentDocument).replace(/\<br\>/g, ' ').replace(/\&amp\;lt\;/g, '<').replace(/\&amp\;gt\;/g, '>').replace(/\&lt\;/g, '<').replace(/\&gt\;/g, '>'));">
<     Drag the points to transform the box!  Optionally change styling below.<br>
< <script type='text/javascript'>
<   var xstyis=location.search.split('styling=')[1] ? decodeURIComponent(location.search.split('styling=')[1].split('&')[0]) : '';
<   if (xstyis != '') {
<     while (xstyis.indexOf(String.fromCharCode(10)) != -1) {
<       xstyis=xstyis.replace(String.fromCharCode(10), '<br>');
<     }
<     //alert(xstyis.replace(/\</g,'&lt;').replace(/\>/g,'&gt;'));
<     document.write(xstyis.replace(/\<s/g,'&lt;s').replace(/\<\//g,'&lt;/').replace(/e\>/g,'e&gt;'));
<   } else {
<     document.write('&lt;style&gt;<br>.box {<br>margin: 20px;  padding: 10px;<br>height: 150px; width: 500px;<br>border: 1px solid black; }<br>&lt;/style&gt;<br>');
<   }
< </script>
---
> Optional Background Image URL for Box Below: <input style="width:430px;" type='text' id='iurl' value='http://www.rjmprogramming.com.au/MyBusinessUnidad/Welcome_files/logo.jpg'></input>&nbsp;<input type='button' onclick=" applythis(document.getElementById('iurl').value); " value="Apply Below"></input><br>
> 
> <div id="img" class="box">
>     Drag the points to transform the box!
312a211
>