Monthly Archives: June 2018

Clip Objects II

Leave a comment


This update adds many features:
It adds more objects, including objects with image backgrounds.
The size of the object can be changed with key presses, with the text scrolling to fit the new size.
The object can be moved with the mouse.
A popup displays the code, so it can be pasted into a new HTML document.
On a key press the page can be reset.
A rounded border can be created.

Here is an example of a key resized object with a rounded image border:

Here is a popup with the code. The first line has the new position and size:

In this case the object was not moved after resizing, so there are no new position values.

To try click here

Here is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Heart</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal 700 18px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
input{width: 100px}
#ch1{width: 15px}
</style>
</head>
<body>
<di id=”frame” style=”position: absolute; top: 0; width: 100%; height: 100%; left: 0; “></di>
<di id=”cp” style = “position: absolute; left: 50%; margin-left: -35%; top: 10px; height: 500px; width: 70%; background: #eeeeee; white-space: pre-wrap; padding: 0 0 0 20px”>
<select id=”func” name=”func” onchange=’go();’><option >Choose Object</option><option >heart</option><option >sunburst</option></option><option >leaf</option><option >pumpkin</option><option >bird</option><option >butterfly</option><option >gingerbread</option></select> <input type=”text” id=”width” name=”width” value=”width” /> <input type=”text” id=”height” name=”height” value=”height” /> <input type=”text” id=”left” name=”left” value=”left” /> <input type=”text” id=”top” name=”top” value=”top” /> Object BKG<input type=’color’ id=’color1′ value= simple color /> <input type=”checkbox” id=”ch1″ name=”ch1″ value=” ” />rounded
<textarea id=”ta1″ name=”ta1″ rows = “25” cols = “98”></textarea>
<textarea id=”ta2″ name=”ta2″ style=”position: absolute; visibility: hidden; left: 20px; top: 20px; width: 70%; height: 60%”></textarea>
</di>

var tp = “”; var wd = “”; var ht = “”; var pd = “”; var pd1 = 0; var pd2 = 0; var pd3 = 0; var pd4 = 0; var lft = screen.width/2 + “px”; var clr = “”;
var objwd = 500; var objht = 500; var lft2 = screen.width/2; var tp2 = 20; var ob = “”; var wd2 = “”; var ht2 = “”; var tp2a = “”; var lft2a = “”; var marg2 = “”;
var txt = “”; var mv = false; var txt2 = “”; var mvd = false;

var posX;var posY;
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.ondblclick = getMouse2;
document.onmousemove = getMouseXY;
document.onkeyup = key;

function key(e) {

if (e.keyCode == 27) {
location.reload();
}

if (e.keyCode == 18) {
txt = txt.replace(wd2, document.getElementById(“obj1”).style.width);
txt = txt.replace(ht2, document.getElementById(“obj1”).style.height);
txt = txt.replace(lft2a, document.getElementById(“obj1”).style.left);
txt = txt.replace(tp2a, document.getElementById(“obj1”).style.top);
if (mvd) txt = txt.replace(marg2, “0”);
txt = txt.replace(txt2, document.getElementById(“obj1”).innerHTML);
document.getElementById(“ta2”).style.visibility = “visible”;
document.getElementById(“ta2″).value = objwd + ” ” + objht + ” ” + posX + ” ” + (posY – 22 + “\n\n” + txt);
mv = false;
document.getElementById(“obj1”).style.visibility = “hidden”;
document.getElementById(“ta2”).focus();
document.getElementById(“ta2”).select();
}

if (e.keyCode == 39) {
objwd += 4;
lft2 -= 2;
document.getElementById(“obj1”).style.left = lft2 + “px”;
document.getElementById(“obj1”).style.width = objwd + “px”;
document.getElementById(“obj1”).style.height = objht + “px”;
if (ob == “heart” || ob == “sunburst” || ob == “leaf”) {
wd = (objwd – pd2 – pd4)+ “px”;
document.getElementById(“heart”).style.width = wd;
document.getElementById(“im”).style.width = “100%”;
}

}

if (e.keyCode == 37) {
objwd -= 4;
lft2 += 2;
document.getElementById(“obj1”).style.left = lft2 + “px”;
document.getElementById(“obj1”).style.width = objwd + “px”;
document.getElementById(“obj1”).style.height = objht + “px”;
if (ob == “heart” || ob == “sunburst” || ob == “leaf”) {
wd = (objwd – pd2 – pd4)+ “px”;
document.getElementById(“heart”).style.width = wd;
document.getElementById(“im”).style.width = “100%”;
}
}

if (e.keyCode == 40) {
objht -= 4;
tp2 += 2;
document.getElementById(“obj1”).style.top= tp2 + “px”;
document.getElementById(“obj1”).style.width = objwd + “px”;
document.getElementById(“obj1”).style.height = objht + “px”;
if (ob == “heart” || ob == “sunburst” || ob == “leaf”) {
ht = (objht – pd1) + “px”;
document.getElementById(“heart”).style.height = ht;
document.getElementById(“im”).style.width = “100%”;
}
}

if (e.keyCode == 38) {
objht += 4;
tp2 -= 2;

document.getElementById(“obj1”).style.top= tp2 + “px”;
document.getElementById(“obj1”).style.width = objwd + “px”;
document.getElementById(“obj1”).style.height = objht + “px”;
if (ob == “heart” || ob == “sunburst” || ob == “leaf”) {
ht = (objht – pd1) + “px”;
document.getElementById(“heart”).style.height = ht;
document.getElementById(“im”).style.width = “100%”;
}
}
}

function getMouse2(e) {
if (! mv) {
mv = true;
} else {
mv = false;
}
}

function getMouseXY(e) {
if (mv) {
mvd = true;
document.getElementById(“obj1”).style.marginLeft = “0”;
if (IE) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
else {
posX = e.pageX -10;
posY = e.pageY – 50;
}
lft2 = posX;
document.getElementById(“obj1”).style.left = posX + “px”;
document.getElementById(“obj1”).style.top = posY + “px”;
}
objmarg = 0;
}

function go() {
mv = false;
ob = document.getElementById(“func”).value;
if (document.getElementById(“top”).value != “top”) document.getElementById(“frame”).style.top = parseInt(document.getElementById(“top”).value) + “px”;
if (document.getElementById(“ta1”).value != “”) txt = document.getElementById(“ta1”).value;
// document.getElementById(“cp”).style.visibility = “hidden”;
if (ob == “heart”) heartobj(“heartobj.gif”, “#ff5588” );
if (ob == “sunburst”) heartobj(“sunburstobj.gif”, “#ffffcc”);
if (ob == “leaf”) heartobj(“leafobj.gif”, “#ffffcc”,);
if (ob == “pumpkin”) pumpkinobj(“pumpkin-bk.png”, “#ffdd99”);
if (ob == “bird”) pumpkinobj(“robinbk.png”, “#eeeeee”);
if (ob == “butterfly”) pumpkinobj(“butterflybk.png”, “#eeffe8”);
if (ob == “gingerbread”) pumpkinobj(“gingerbreadbk.png”, “#ffcc99”);
document.getElementById(“cp”).style.visibility = “hidden”;
}

function heartobj(imag, bkgd) {
if (txt == “” && ob == “heart”) txt = “This is a test to see about the creation of a heart shaped object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (txt == “” && ob == “sunburst”) txt = “This is a test to see about the creation of a sunburst shaped object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (txt == “” && ob == “leaf”) txt = “This is a test to see about the creation of a leaf bordered object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (document.getElementById(“color1”).value == “#000000”) document.getElementById(“color1”).value = bkgd;
if (document.getElementById(“width”).value != “width”) objwd = parseInt(document.getElementById(“width”).value);
if (document.getElementById(“height”).value != “height”) objht = parseInt(document.getElementById(“height”).value); var objmarg = -objwd/2;
if (ob == “heart”) pd1 = objht / 10 + 30; pd2 = objwd / 10; pd3 = 0; pd4 = objwd / 10;
if (ob == “sunburst”) pd1 = objht / 3.2; pd2 = objwd / 10; pd3 = 0; pd4 = objwd / 10;
if (ob == “leaf”) pd1 = .1*objht + 10; pd2 = .1 *objwd +10; pd3 = 0; pd4 = .1*objwd + 10;
wd = (objwd – pd2 – pd4)+ “px”; tp = “20px”; ht = (objht – pd1) + “px”; pd = pd1 + “px ” + pd2 + “px ” + pd3 + “px ” + pd4 + “px”;
clr = document.getElementById(“color1”).value;

if (document.getElementById(“left”).value != “left”) {
lft = document.getElementById(“left”).value + “px”;
lft2 = parseInt(document.getElementById(“left”).value);
objmarg = 0;
}

document.getElementById(“frame”).innerHTML += ” + txt + ‘ ‘;
txt2 = document.getElementById(“obj1”).innerHTML;
txt = document.getElementById(“frame”).innerHTML;
wd2 = document.getElementById(“obj1”).style.width;
ht2 = document.getElementById(“obj1”).style.height;
lft2a = document.getElementById(“obj1”).style.left;
tp2a = document.getElementById(“obj1”).style.top;
marg2 = document.getElementById(“obj1”).style.marginLeft;
}

function pumpkinobj(imag, bkgd) {
objmarg = -objwd/2;
if (document.getElementById(“color1”).value == “#000000” && ob == “pumpkin”) document.getElementById(“color1”).value = bkgd;
if (document.getElementById(“color1”).value == “#000000” && ob == “bird”) document.getElementById(“color1”).value = bkgd;
if (document.getElementById(“color1”).value == “#000000” && ob == “butterfly”) document.getElementById(“color1”).value = bkgd;
if (document.getElementById(“color1”).value == “#000000” && ob == “gingerbread”) document.getElementById(“color1”).value = bkgd;
if (document.getElementById(“width”).value != “width”) objwd = parseInt(document.getElementById(“width”).value);
if (document.getElementById(“height”).value != “height”) objht = parseInt(document.getElementById(“height”).value);
if (document.getElementById(“left”).value != “left”) {
lft = document.getElementById(“left”).value + “px”;
objmarg = 0;
}
clr = document.getElementById(“color1”).value;
if (txt == “” && ob == “pumpkin”) txt = “This is a test to see about the creation of a pumpkin bordered object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (txt == “” && ob == “bird”) txt = “This is a test to see about the creation of a bird bordered object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (txt == “” && ob == “butterfly”) txt = “This is a test to see about the creation of a butterfly bordered object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (txt == “” && ob == “gingerbread”) txt = “This is a test to see about the creation of a gingerbread bordered object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
document.getElementById(“frame”).innerHTML += ” + txt + ”;

if (document.getElementById(“ch1”).checked) {
document.getElementById(“obj1”).style.borderRadius = “30px 30px 30px 30px”;
}

txt2 = document.getElementById(“obj1”).innerHTML;
txt = document.getElementById(“frame”).innerHTML;
wd2 = document.getElementById(“obj1”).style.width;
ht2 = document.getElementById(“obj1”).style.height;
lft2a = document.getElementById(“obj1”).style.left;
tp2a = document.getElementById(“obj1”).style.top;
marg2 = document.getElementById(“obj1”).style.marginLeft;
}

</body></html>


mouse and key listeners are initiated:
var posX;var posY;
var IE = document.all?true:false;
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.ondblclick = getMouse2;
document.onmousemove = getMouseXY;
document.onkeyup = key;

Arrow keys are used for resizing. The left arrow reduces the width:
if (e.keyCode == 37) {
objwd -= 4;
lft2 += 2;
document.getElementById(“obj1”).style.left = lft2 + “px”;
document.getElementById(“obj1”).style.width = objwd + “px”;
document.getElementById(“obj1”).style.height = objht + “px”;
if (ob == “heart” || ob == “sunburst” || ob == “leaf”) {
wd = (objwd – pd2 – pd4)+ “px”;
document.getElementById(“heart”).style.width = wd;
document.getElementById(“im”).style.width = “100%”;
}
}

To keep from changing the relative position, the left is simultaneously changed with the width;

The other arrow keys work similarly.

On hitting the alt key, a string, txt receives the new size and position values and if the object has been moved, the centering value is removed:
if (e.keyCode == 18) {
txt = txt.replace(wd2, document.getElementById(“obj1”).style.width);
txt = txt.replace(ht2, document.getElementById(“obj1”).style.height);
txt = txt.replace(lft2a, document.getElementById(“obj1”).style.left);
txt = txt.replace(tp2a, document.getElementById(“obj1”).style.top);
if (mvd) txt = txt.replace(marg2, “0”);
txt = txt.replace(txt2, document.getElementById(“obj1”).innerHTML);
document.getElementById(“ta2”).style.visibility = “visible”;
document.getElementById(“ta2″).value = objwd + ” ” + objht + ” ” + posX + ” ” + (posY – 22 + “\n\n” + txt);
mv = false;
document.getElementById(“obj1”).style.visibility = “hidden”;
document.getElementById(“ta2”).focus();
document.getElementById(“ta2”).select();
}

The popup is made visible and given the new values.

The function getMouse2(e), called by a double click, toggles the movement of the object:
document.ondblclick = getMouse2;
function getMouse2(e) {
if (! mv) {
mv = true;
} else {
mv = false;
}
}

If mv is true the object is moved by changing the mouse position; dragging is not necessary:
function getMouseXY(e) {
if (mv) {
mvd = true;
document.getElementById(“obj1”).style.marginLeft = “0”;
if (IE) {
posX = event.clientX + document.body.scrollLeft;
posY = event.clientY + document.body.scrollTop;
}
else {
posX = e.pageX -10;
posY = e.pageY – 50;
}
lft2 = posX;
document.getElementById(“obj1”).style.left = posX + “px”;
document.getElementById(“obj1”).style.top = posY + “px”;
}
objmarg = 0;
}

The moving continues until there is another double click.

As before, clicking the button starts the drawing.

Closing Blinds Slideshow Transition

Leave a comment


This transition simulates the opening and closing of blinds.

Here is how it looks with the blind partially closed:

To try Click Here
Here is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Fade</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
td{position:relative ; width:100% ;height: 600px; left: 0; top: 0; }
</style>
</head>
<body onload=’init();’>
<table style= “position:absolute ; width:100% ; height:100% ; left:0 ; top:0 ; “>
<tr><td valign=”center”>
<center><di id=”frame” style= “position: relative ; width:400px ; height: 400px ; overflow: hidden “><img src= “images/aloe.png” style=”position: absolute; width: 400px; top: 0; left: 0″ /></di></center>
</td></tr></table>

var si; var vpos = -400; var drp = true; var cnt = 0; var blindl = -20; var blindlft = “”; var yrot = 90;

function init() {
for (var i=1; i ‘;
}
setInterval(“control()”,6000);
}

function control() {
drp = true;
cnt ++;
si = setInterval(“drop()”,50);
}

function drop() {

if (yrot > 0 && drp ) {
yrot -= 1;
}
if (yrot ‘;
for (var i=1; i ‘;
}
} else {
document.getElementById(“frame”).innerHTML = ‘‘;
for (var i=1; i ‘;
}
}
drp = false;
}

if (yrot 90) {
clearInteval(si);
drp = true;
}

for (var i=1; i
</body></html>


The images are contained by a division named frame:
<center><di id=”frame” style= “position: relative ; width:400px ; height: 400px ; overflow: hidden “><img src= “images/aloe.png” style=”position: absolute; width: 400px; top: 0; left: 0″ /></di></center>

Loading calls a function called init() which creates 20 brown divisions and starts a timer which sets the slide interval:
function init() {
for (var i=1; i<=20; i++) {
blindl += 20;
blindlft = blindl + “px”;
document.getElementById(“frame”).innerHTML += ‘<di id=”blind’ + i + ‘” style= “position:absolute; left: ‘ + blindlft + ‘; top: 0; width:20px ; height:600px ; background: brown; border: 1px solid white ; -webkit-transform: rotateY(90deg);”> </di>’;
}
setInterval(“control()”,6000);
}

control starts a second timer which sets the blind motion interval:
function control() {
drp = true;
cnt ++;
si = setInterval(“drop()”,50);
}

The slide interval does not have to be altered, so it is not necessary to set it equal to a value that can be cleared.

The blind motion is done by a combination of blind layer y-rotation and left position.

the slide change is done while the blinds are closed:
if (yrot < 3) {
blindl = -20;
if (cnt % 2 == 0) {
document.getElementById(“frame”).innerHTML = ‘<img src= “images/aloe.png” style=”position: absolute; width: 400px; left: 0; top: 0″ />’;
for (var i=1; i<=20; i++) {
blindl += 20;
blindlft = blindl + “px”;
document.getElementById(“frame”).innerHTML += ‘<di id=”blind’ + i + ‘” style= “position:absolute; left: ‘ + blindlft + ‘; top: 0; width:20px ; height:600px ; background: brown; border: 1px solid white ; -webkit-transform: rotateY(90deg);”> </di>’;
}

}

HTML Clip Objects

Leave a comment


There are times when you want to put text or images into a shaped division. This post allows the customization of containers that can be stored and used when needed. I call them clip objects.

Here is an example:

The height, width, position, background and text can be modified. Here is an object made longer and narrower, with a different background and different text:

This is the interface for the last object:

Here is a sunburst object:

This post introduces the concept and has only two objects, but I will greatly elaborate in future posts.
Here is the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head profile=”http://gmpg.org/xfn/11″&gt;
<title>Heart</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal 700 18px Arial;}
a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
input{width: 100px}
</style>
</head>
<body>
<di id=”frame” style=”position: absolute; top: 0; width: 100%; height: 100%; left: 0; ” onclick=’location.reload();’ ></di>
<di id=”cp” style = “position: absolute; left: 50%; margin-left: -30%; top: 10px; height: 500px; width: 60%; background: #eeeeee; white-space: pre-wrap; padding: 0 0 0 20px”>
<select id=”func” name=”func” onchange=’go();’><option >Choose Object</option><option >heart</option><option >sunburst</option></select> <input type=”text” id=”width” name=”width” value=”width” /> <input type=”text” id=”height” name=”height” value=”height” /> <input type=”text” id=”left” name=”left” value=”left” /> <input type=”text” id=”top” name=”top” value=”top” /> Object BKG<input type=’color’ id=’color1′ value= simple color />

<textarea id=”ta1″ name=”ta1″ rows = “25” cols = “98”></textarea>
</di>

var tp = “”; var wd = “”; var ht = “”; var pd = “”; var pd1 = 0; var pd2 = 0; var pd3 = 0; var pd4 = 0; var lft = “50%”; var clr = “”;
var objwd = 500; var objht = 500;
var txt = “”;

function go() {
if (document.getElementById(“top”).value != “top”) document.getElementById(“frame”).style.top = parseInt(document.getElementById(“top”).value) + “px”;
if (document.getElementById(“ta1”).value != “”) txt = document.getElementById(“ta1”).value;
// document.getElementById(“cp”).style.visibility = “hidden”;
if (document.getElementById(“func”).value == “heart”) heartobj();
if (document.getElementById(“func”).value == “sunburst”) sunburstobj();
document.getElementById(“cp”).style.visibility = “hidden”;
}

function heartobj() {
txt = “This is a test to see about the creation of a heart shaped object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (document.getElementById(“color1”).value == “#000000”) document.getElementById(“color1”).value = “#ff5588”;
if (document.getElementById(“width”).value != “width”) objwd = parseInt(document.getElementById(“width”).value);
if (document.getElementById(“height”).value != “height”) objht = parseInt(document.getElementById(“height”).value); var objmarg = -objwd/2;
pd1 = objht / 10 + 30; pd2 = objwd / 10; pd3 = 0; pd4 = objwd / 10;
wd = (objwd – pd2 – pd4)+ “px”; tp = “20px”; ht = (objht – pd1) + “px”; pd = pd1 + “px ” + pd2 + “px ” + pd3 + “px ” + pd4 + “px”;
clr = document.getElementById(“color1”).value;

if (document.getElementById(“left”).value != “left”) {
lft = document.getElementById(“left”).value + “px”;
objmarg = 0;
}

document.getElementById(“frame”).innerHTML += ” + txt + ‘<img src=”images/heartobj.gif” style=”position:absolute;top:0;width:100%;height:100%;” /> ‘;
}

function sunburstobj() {
txt = “This is a test to see about the creation of a sunburst shaped object to be used in HTML. I will continue entering text until I get to where I want to go.

There will now be a break and the text will continue further.”;
if (document.getElementById(“color1”).value == “#000000”) document.getElementById(“color1”).value = “#ffffcc”;
if (document.getElementById(“width”).value != “width”) objwd = parseInt(document.getElementById(“width”).value);
if (document.getElementById(“height”).value != “height”) objht = parseInt(document.getElementById(“height”).value); var objmarg = -objwd/2;
pd1 = objht / 3.2; pd2 = objwd / 10; pd3 = 0; pd4 = objwd / 10;
wd = (objwd – pd2 – pd4)+ “px”; tp = “20px”; ht = (objht – pd1) + “px”; pd = pd1 + “px ” + pd2 + “px ” + pd3 + “px ” + pd4 + “px”;
clr = document.getElementById(“color1”).value;

if (document.getElementById(“left”).value != “left”) {
lft = document.getElementById(“left”).value + “px”;
objmarg = 0;
}

document.getElementById(“frame”).innerHTML += ” + txt + ‘<img src=”images/sunburstobj.gif” style=”position:absolute;top:0;width:100%;height:100%;” /> ‘;
}

</body></html>


When an object is selected, a few variables are set and one of two functions is called:
function go() {
if (document.getElementById(“top”).value != “top”) document.getElementById(“frame”).style.top = parseInt(document.getElementById(“top”).value) + “px”;
if (document.getElementById(“ta1”).value != “”) txt = document.getElementById(“ta1”).value;
// document.getElementById(“cp”).style.visibility = “hidden”;
if (document.getElementById(“func”).value == “heart”) heartobj();
if (document.getElementById(“func”).value == “sunburst”) sunburstobj();
document.getElementById(“cp”).style.visibility = “hidden”;
}

There is a function for each object. They are similar except some of the variable values are different.

When all variables have been set, the innerHTML of the “frame” is appended to create the object:
document.getElementById(“frame”).innerHTML += ‘<di id=”obj1″ style=”position: absolute; top: 20px; width: ‘ + objwd + ‘px; height: ‘ + objht + ‘px; left: ‘ + lft + ‘; margin-left: ‘ + objmarg + ‘px”><di id=”heart” style=”position: absolute; top: 0; width:’ + wd + ‘; height: ‘ + ht + ‘; padding: ‘ + pd + ‘; background:’ + clr + ‘” >’ + txt + ‘</di><img src= “images/sunburstobj.gif” style=”position: absolute; top: 0; width: 100%; height: 100%” /> </di> ‘;

Customized Boston Marathon Pace Band Generator

Leave a comment


This is a pace band generator that is customized for the elevation profile of the Boston Marathon, although it can be used for other races by manually entering a distance and elevation profile.

When the split list is created, the print dialog is automatically opened.

to try click here

Here is the code:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'&gt;
<html xmlns='http://www.w3.org/1999/xhtml'&gt;
<head profile='http://gmpg.org/xfn/11'&gt;
<title>Pace</title>
<style>
body {margin-left:0;margin-right:0;font:normal normal normal 15pt Arial;}a{ text-decoration: }:link { color: rgb(0, 0, 255) }:visited {color :rgb(100, 0,100) }:hover { }:active { }
#t1, #t2{position: relative}
td{position: relative; padding: 5px}
#r1, #r2, #c1 {width: 15px}
#hours, #minutes, #seconds, #remain{width: 55px}
#dist{width: 100px}
#split{width: 250px; font:normal normal 800 18pt Arial; text-align: left}
#remain2{width: 64px}
</style>
</head>
<body>
<table id = “t1″ align=”center”>
<tr>
<td valign = “top”><select id=”dist” name=”dist” onchange=’document.getElementById(“hours”).focus(); document.getElementById(“hours”).select();’ >
<option >Distance</option>
<option >5K</option>
<option >8K</option>
<option >5Mi</option>
<option >10K</option>
<option >12K</option>
<option >15K</option>
<option >10Mi</option>
<option >20K</option>
<option >Half Marathon</option>
<option >25K</option>
<option >30K</option>
<option >20Mi</option>
<option >Marathon</option>
<option >50K</option>
<option >50Mi</option>
<option >100K</option>
<option >100Mi</option>
</select> </td>
<td valign = “top”><input type=”text” id=”hours” name=”hours” value=”Hours” /></td><td valign = “top”><input type=”text” id=”minutes” name=”minutes” value=”Minutes” /></td><td valign = “top”><input type=”text” id=”seconds” name=”seconds” value=”Seconds” /></td><td valign = “top”>&nbsp&nbsp&nbspsplits (miles or km) <input type=”radio” id=”r1″ name=”r1″ value=”Mi” checked />Miles<input type=”radio” id=”r1″ name=”r1″ value=”Km” />Km&nbsp&nbsp&nbsp</td>
<td valign = “top”><input type=”checkbox” id=”c1″ name=”c1″ value=”custom” />Custom</td><td valign = “top”><textarea id=”split” name=”split” rows=” ” cols=” ” onclick=’viw();’ ></textarea></td><td valign = “top”><input type=”text” id=”remain” name = “remain” Value=”Remain” /> <input type=”text” id=”remain2″ name = “remain2″ Value=”Av Rem” /></td><td valign = “top”><input type=”button” id=”calc” name=”calc” value=”Calculate” onclick=’calc();’ /> <!– <input type=”button” id=”fs” name=”fs” value=”Reduce Font” onclick=’fsize();’ />–></td></tr>
</table>
<table id=”t1″>
<tr><td><input type=”radio” id=”r2″ name=”r2″ value=”Ti” checked />Time<input type=”radio” id=”r2″ name=”r2″ value=”Pa” />Pace<input type=”radio” id=”r2″ name=”r2″ value=”Bo” />Both<input type=”radio” id=”r2″ name=”r2″ value=”2Pa” />2Pace</td> <td><input type=”text” id=”el” style= “position: ; width:900px ; height: ; left: ; top: ; ” name=”el” value=”480,350,300,250,180,190,175,160,160,149,165,190,140,148,135,160,52,102,145,105,145,225,150,120,28,26,15,” /></td>
</tr>
<table>

var ht = 0; var tm; var dst; var dst2; var splt; var pace1 = 0; var pace2 = 0; var secs = 0; var hrs = 0; var kms = false; var custsplt; var j = 0; var str = “”; var secs2; var hrs1; var mins1; var secs1; var fsze = 18; var remsplit; var remsecs; var remmins; var remsplit2; var str2 = “”; var tim = false; var pce = false; var bth = false; var pces = false; var echange = [0,20,2,1,0,-2,1,-3,-3,-7,-7,1,-3]; var a = 0; var b = -1; echange2 = new Array(); var a1; var a2; var arno = 0;

alert(“Instructions:\nIf Choosing Race Other than Boston Marathon, Enter Elevations and Choose Distance\nEnter Overall Time\nLeaving Text Equivalent to Entering 0\nHit Enter or Click Calculate to Get Even Splits\n\nCustomized Splits:\nCheck Custom\nHit Calculate or Enter again\nIf there is a significant elevation change in the fraction after the last split, compensate by adjusting the overall time, eg: if the last near mile in an 8K has a significant uphill, lower the overall time to allow for the slowing.\n\nWhen all splits hace been displayed, the page can be printed.\nTo do another time, click the pace list\n\nFor KM Splits Check Km box before Entering Anything\n\nListing Choice:\nCheck Box with Listing Choice Before Entries\nTimes Only\nAverage Pace Only\nBoth\nAverage Pace and Average Pace for Remaining Splits to Get Desired Time”);
document.onkeyup = keyaction; var sb;

function keyaction(e) {
if (e.keyCode == 13) calc();
if (e.keyCode == 16) fsize();
if (e.keyCode == 18) chck();
}

document.getElementById(“dist”).value = “Marathon”;
document.getElementById(“hours”).focus(); document.getElementById(“hours”).select();

function viw() {
document.getElementById(“t1”).style.visibility = “visible”;
//document.getElementById(“fs”).style.visibility = “visible”;
}

function chck() {
document.getElementById(“c1”).checked = true;
document.getElementById(“minutes”).value = “”;
}

/*function fsize() {
fsze -= 1;
document.getElementById(“split”).style.fontSize = fsze + “pt”;
}*/

function calc() {

var doc = document.getElementById(“el”).value;

for (var i = 0; i -1){
dst = dst.substr(0, dst.length – 1) + “.0”;
if (kms) dst2 = parseFloat(dst);
if (! kms) dst2 = .621*parseFloat(dst);
}

else if (dst.indexOf(“Mi”) > -1){
dst2 = parseFloat(dst.substr(0, dst.length – 2) + “.0”);
if (kms) dst2 = parseFloat(dst.substr(0, dst.length – 2) + “.0”) / .621;
}

else if (dst.indexOf(“alf”) > -1){
if (! kms) dst2 = 13.105;
if (kms) dst2 = 21.05;
}

else {
if (! kms) dst2 = 26.21;
if (kms) dst2 = 42.1;
}

if (document.getElementById(“c1”).checked) {
document.getElementById(“hours”).value = “0”;
for (var i=1; i secs) secs1 = secs2 – secs;

if (remsplit2 >= j) {
remsecs = Math.floor(secs1/remsplit);
remmins = Math.floor(remsecs/60);
remsecs -= 60*remmins;

if (remsecs.toString().length == 1) {
document.getElementById(“remain2”).value = remmins.toString() + “:0” + remsecs.toString();
} else {
document.getElementById(“remain2”).value = remmins.toString() + “:” + remsecs.toString();
}

// }
hrs1 = Math.floor(secs1/3600);
hrs1 = hrs1.toString();
secs1 -= 3600 * hrs1;
mins1 = Math.floor(secs1/60);
mins1 = mins1.toString();
if(mins1.length == 1) mins1 = “0” + mins1;
secs1 -= 60 * mins1;
secs1 = secs1.toString();
if(secs1.length == 1) secs1 = “0” + secs1;
document.getElementById(“remain”).value = hrs1 + “:” + mins1 + “:” + secs1;
pace1 = Math.floor(secs/60);
pace2 = Math.floor((secs – pace1 * 60) );
pace2 = pace2.toString();
if (pace2 == “0” || pace2 == “1” || pace2 == “2” || pace2 == “3” ||pace2 == “4” || pace2 == “5” || pace2 == “6” ||pace2 == “7” || pace2 == “8” || pace2 == “9”) pace2 = “0” + pace2;

if (pace1 > 59) {
hrs = Math.floor(pace1 /60);
if (secs2 > secs) secs1 = secs2 – secs;

if (remsplit2 >= j) {
remsecs = Math.floor(secs1/remsplit);
remmins = Math.floor(remsecs/60);
remsecs -= 60*remmins;

if (remsecs.toString().length == 1) {
document.getElementById(“remain2”).value = remmins.toString() + “:0” + remsecs.toString();
} else {
document.getElementById(“remain2”).value = remmins.toString() + “:” + remsecs.toString();
}

}
hrs1 = Math.floor(secs1/3600);
hrs1 = hrs1.toString();
secs1 -= 3600 * hrs1;
mins1 = Math.floor(secs1/60);
mins1 = mins1.toString();
if(mins1.length == 1) mins1 = “0” + mins1;
secs1 -= 60 * mins1;
secs1 = secs1.toString();
if(secs1.length == 1) secs1 = “0” + secs1;
document.getElementById(“remain”).value = hrs1 + “:” + mins1 + “:” + secs1;
sb = parseInt(document.getElementById(“minutes”).value);
var pace5 = ((60*pace1 + parseInt(pace2)) / j – 60 * sb).toString();
pace1 -= hrs * 60;
pace5 = Math.floor(pace5);
if (pace5 > 59) pace5 = Math.floor(pace5 – 60);
if (pace5 59) pace5 = Math.floor(pace5 – 60);
if (pace5 0) {
pace1 = parseInt(pace1) + (60 * hrs);
}
var pace4 = Math.floor((pace1/j)).toString() + “:” + pace5;
if (bth) str += splt + ” ” + pace4 + “\n”;
if (tim) str += splt + “\n”;
if (pce) str += j.toString() + ” ” + pace4 + “\n”;

if(document.getElementById(“remain2”).value.indexOf(“NaN”) > 0) document.getElementById(“remain2″).value = pace4;
if (pces) str += j.toString() + ” ” + pace4 + ” ” + document.getElementById(“remain2”).value + “\n”;
document.getElementById(“split”).value = str;
//document.getElementById(“split”).style.height = ht.toString() + “pt”;
document.getElementById(“split”).style.height = “2000px”;
if (kms) {
var meas = “km”;
} else {
meas = “miles”;
}
if (remsplit2 == j) str2 = “Done\n” + (dst2 – j).toFixed(3) + ” ” + meas + ” to go at ” + pace4 + ” pace”;
}
if (remsplit2 59) {
hrs = Math.floor(pace1 /60);
pace1 -= hrs * 60;
pace1 = pace1.toString();
if (pace1 == “0” || pace1 == “1” || pace1 == “2” || pace1 == “3” ||pace1 == “4” || pace1 == “5” || pace1 == “6” ||pace1 == “7” || pace1 == “8” || pace1 == “9”) pace1 = “0” + pace1;
splt = i.toString() + ” ” + hrs.toString() + “:” + pace1 + “:” + pace2;
} else {
pace1 = pace1.toString();
if (pace1 == “0” || pace1 == “1” || pace1 == “2” || pace1 == “3” ||pace1 == “4” || pace1 == “5” || pace1 == “6” ||pace1 == “7” || pace1 == “8” || pace1 == “9”) pace1 = “0” + pace1;
splt = i.toString() + ” ” + pace1 + “:” + pace2;
if (i == 1) {
document.getElementById(“minutes”).value = pace1;
document.getElementById(“seconds”).value = pace2;
}
}
ht += 25;
//document.getElementById(“remain”).value = hrs.toString() + “:” + pace1 + “:” + pace2;
document.getElementById(“split”).value += splt.toString() + “\n”;
//document.getElementById(“split”).style.height = ht.toString() + “pt”;
document.getElementById(“split”).style.height = “2000px”;
}
secs2 = hrs * 3600 + parseInt(pace1) * 60 + parseInt(pace2);
}

if (! document.getElementById(“c1”).checked) {
ht = 0;
tm = 0;
secs = 0;
hrs = 0;
rem = “”;
j = 0;
str=””;
str2 = “”;
}
document.getElementById(“split”).style.borderWidth = “0”;
}

</body></html>