There's a little program, that dynamically stretches words to any screen height. It is based on innerHTML. How to make it fade in and out, when the word is changing?
let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
function changeWord() {
text.innerHTML = input.value;
svg.setAttributeNS(null, "viewBox", `-4 0 16 ${text.getComputedTextLength()}`);
}
* {
padding: 0;
margin: 0;
}
svg {
height: 100vh;
font-family: roboto, sans-serif;
font-size:16px;
border:1px solid;
}
input {
position: fixed;
top: 0;
right: 0;
border: 2px solid red;
}
<svg viewBox="-4 0 16 75">
<g transform="rotate(90 0 0)">
<text id="text">Skibpidi</text>
</g>
</svg>
<input value="Skibidi" oninput="changeWord()" id="input" type="text">
I am wrapping the added characters in a <tspan> element. The tspan is animated in css from fill-opacity:0 to fill-opacity:1 for a fade in effect. Please read the comments in the code.
const SVG_NS = "http://www.w3.org/2000/svg";
let text = document.getElementById("text");
let input = document.getElementById("input");
let svg = document.querySelector("svg");
let L; //the number of letters of the input value
function setWord() {
let vals = input.value.trim().split(""); //trim for the empty spaces at the begining and the end of the string and split into an array
L = vals.length; //the length of the array == the number of letters
text.innerHTML = ""; //clear the content of the text element
// set a variable for the text content
let textcontent = "";
vals.forEach((v) => {
//add each value to the textcontent
textcontent += v;
});
text.textContent = textcontent;
//reset the viewBox value
svg.setAttributeNS(
null,
"viewBox",
`-4 0 16 ${text.getComputedTextLength()}`
);
}
setWord();
function changeWord(e) {
let vals = input.value.trim().split("");
if (vals.length == L + 1) {
// if the user is adding chars to the input
//create a new element tspan to wrap the new character in
let tspan = document.createElementNS(SVG_NS, "tspan");
//set the text content of the tspan element
tspan.textContent = vals[vals.length - 1];
//append the tspan to the text element
text.appendChild(tspan);
// reset the value of the L
L += 1;
} else {
//if the user is deleting letters
setWord();
}
//reset the viewBox value
svg.setAttributeNS(
null,
"viewBox",
`-4 0 16 ${text.getComputedTextLength()}`
);
}
input.addEventListener("input", changeWord);
* {
padding: 0;
margin: 0;
}
svg {
height: 100vh;
font-family: roboto, sans-serif;
font-size:16px;
border:1px solid;
}
input {
position: fixed;
top: 0;
right: 0;
border: 2px solid red;
}
tspan{
fill-opacity:0;
animation: fo 2s forwards;
}
#keyframes fo{
to{fill-opacity:1;}
}
<svg viewBox="-4 0 16 75">
<g transform="rotate(90 0 0)">
<text id="text">Skibpidi</text>
</g>
</svg>
<input value="Skibidi" id="input" type="text">
Is it necessary to use svg? Only you could do something along the lines of this:
let text = document.getElementById("text");
let input = document.getElementById("input");
function changeWord(event) {
let letter = document.createElement('div');
letter.className = 'letter'
// Handle delete key
if (event.key === 'Backspace' && text.childElementCount > 0) {
text.removeChild(text.lastChild);
} else {
// Assign last letter of the input to created div
letter.innerHTML = input.value.slice(input.value.length - 1,
input.value.length);
text.appendChild(letter);
}
}
* {
padding: 0;
margin: 0;
}
#text {
display: flex;
height: 100vh;
font-family: roboto, sans-serif;
font-size: 16px;
border: 1px solid;
}
.letter {
/* Allow spaces */
white-space: break-spaces;
transform: translateY(20px);
animation: slide 1s forwards cubic-bezier(0.4, 0.6, 0.8, 0.9);
}
#keyframes slide {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
input {
position: fixed;
top: 0;
right: 0;
border: 2px solid red;
}
<div id="text">
<div class="letter">S</div>
<div class="letter">k</div>
<div class="letter">i</div>
<div class="letter">b</div>
<div class="letter">p</div>
<div class="letter">i</div>
<div class="letter">d</div>
<div class="letter">i</div>
</div>
<input value="Skibidi" onkeyup="changeWord(event)" id="input" type="text">
Bearing in mind you'd have to style it how you want.
Related
for (el of chart.children) {
i++
previous__element = chart.children[i - 1]
if (el.classList.contains('rule')) {
//pass
} else {
line = el.children[0].children[0]
pos1 = previous__element.children[2].getBoundingClientRect()
position1 = {
top: pos1.top,
left: pos1.left,
}
pos2 = el.children[2].getBoundingClientRect()
console.log(previous__element.children[2])
console.log(el.children[2])
position2 = {
top: pos2.top,
left: pos2.left,
}
line.setAttribute('x1', Math.trunc(pos1.left))
line.setAttribute('y1', Math.trunc(pos1.top))
line.setAttribute('x2', Math.trunc(pos1.left))
line.setAttribute('y2', Math.trunc(pos1.top))
line.setAttribute('stroke', 'white')
}
}
html that gets output:
For some reason this does not actually show the lines, when hovering over them in dev tools it shows the height and width is 0. I'm trying to get the line to connect to the markers in the elements.
In this example I use position relative/absolute on all the elements. I don't know if that fits your solution, but the core of the example is that the SVG document is in the background of all the boxes. So, all the lines could be placed in that one SVG document.
Maybe the reason why your lines are not showing up is that they mis the stroke-width or that your SVG element does not have a width and a height.
let chart = document.querySelector('#chart');
let poschart = chart.getBoundingClientRect();
let line = chart.querySelector('svg line');
let boxs = chart.querySelectorAll('div.box');
let pos1 = boxs[0].getBoundingClientRect();
line.setAttribute('x1', pos1.x+pos1.width/2-poschart.x);
line.setAttribute('y1', pos1.y+pos1.height/2-poschart.y);
let pos2 = boxs[1].getBoundingClientRect();
line.setAttribute('x2', pos2.x+pos2.width/2-poschart.x);
line.setAttribute('y2', pos2.y+pos2.height/2-poschart.y);
#chart {
position: relative;
width: 400px;
height: 300px;
margin: 10px 20px;
border: thin solid black;
}
#chart svg {
position: absolute;
}
.box {
position: absolute;
padding: .5em;
border: thin solid black;
background-color: white;
}
<div id="chart">
<svg viewBox="0 0 400 300" width="100%" height="100%">
<line stroke="black" stroke-width="2"/>
</svg>
<div class="box" style="left:50px;top:180px">Box 1</div>
<div class="box" style="left:310px;top:100px">Box 2</div>
</div>
I'm trying to clone a tooltip div and append it to the document body while also centering around it's original parent.
window.addEventListener("load", function() {
const tooltipActivator = document.querySelectorAll("[data-onsitetooltip]");
for(let i = 0; i < tooltipActivator.length; i++) {
if(tooltipActivator[i] != undefined) {
let added = false;
tooltipActivator[i].addEventListener("mouseenter", function(e) {
const clone = tooltipActivator[i].querySelector(".onsiteTooltip").cloneNode(true),
elemRect = tooltipActivator[i].getBoundingClientRect(),
offset_top = elemRect.top - document.body.getBoundingClientRect().top,
offset_left = elemRect.left;
clone.style.visibility = "visible";
clone.style.opacity = "1";
clone.style.top = offset_top + parseInt(tooltipActivator[i].dataset.onsitetooltiptop) + "px";
clone.style.left = offset_left + "px";
clone.style.transform = "translateX(-"+tooltipActivator[i].offsetWidth/2+"px)";
clone.style.pointerEvents = "none";
document.body.appendChild(clone);
});
tooltipActivator[i].addEventListener("mouseleave", function(e) {
const tooltipToRemove = document.querySelectorAll("body > .onsiteTooltip");
for(let z = 0; z < tooltipToRemove.length; z++) {
if(tooltipToRemove[z] != undefined) {
document.body.removeChild(tooltipToRemove[z]);
}
}
});
}
}
});
.onsiteTooltip {
visibility: hidden;
opacity: 0;
width: 25em;
cursor: auto;
background: #0c1633;
padding: 1em;
#include border-radius(0.25rem);
#include box-shadow($shadow-big);
position: absolute;
z-index: 4;
border: 1px solid rgba(0, 0, 0, 0.05);
#include transition(visibility 0s, opacity 0.2s linear);
font-size: 0.9em;
}
.myDiv { height: 100px; background: red; }
<div class="myDiv" data-onsitetooltip data-onsitetooltiptop="70">
<div class="onsiteTooltip">Hello World</div>
</div>
The goal is to make it so when appended to the body, it should be below and centered around the element with the data-onsitetooltip property, without appending it as a child to that element.
Depending on the element that hold the tooltip, it works sometimes, but on other elements it sometimes isn't centered and misaligned.
Like this: http://prntscr.com/op0wuk
How can I accomplish this?
EDIT: I've tried to set the offset left to 50% of the parent and then -50% on the tooltip like you would do in CSS but that did not work either.
In my code I have two canvases where I can input text. When I write text, it fits into the canvas (the font-size is decreasing) and also I can change the color and font-family.
So when I write into the first input text it appears on the first canvas. But when I try to write on the second input text it doesn't show up on the second canvas (if I press the blue button for changing the color, only then shows up). Here is the JSFiddle code: https://jsfiddle.net/noytmwu7/24/ .I would really appreciate your help!
var canvas4 = document.getElementById("canvas4");
var ctx4 = canvas4.getContext("2d");
var clubNameFontFamily = "Arial Black";
var clubNameFontSize = "20px";
var clubNameFontStyle = "bold";
var clubNameFontColor = "#000000";
$('#clubNameTag').bind('change keyup input', redrawTextsCan4);
$('#clubNameLine1').bind('click', redrawTextsCan4);
function redrawTextsCan4() {
ctx4.clearRect(0, 0, canvas4.width, canvas4.height);
ctx4.textAlign = "center";
ctx4.fillStyle = clubNameFontColor;
clubNameFontSize = fitClubNameOnCanvas(ctx4, $('#clubNameLine1').val().toUpperCase(), clubNameFontFamily);
ctx4.font = clubNameFontStyle + " " + clubNameFontSize + "px " + clubNameFontFamily;
ctx4.fillText($('#clubNameLine1').val().toUpperCase(), canvas4.width * 0.5, 30);
}
function fitClubNameOnCanvas(ctx, text, fontface) {
var size = clubNameMeasureTextBinMethod(ctx, text, fontface, 0, 80, canvas4.width);
if (size > 18) return 18;
return size;
}
function clubNameMeasureTextBinMethod(ctx, text, fontface, min, max, desiredWidth) {
if (max - min < 1) {
return min;
}
var test = min + ((max - min) / 2); //Find half interval
ctx.font = test + "px " + fontface;
measureTest = ctx.measureText(text).width;
if (measureTest > desiredWidth) {
var found = clubNameMeasureTextBinMethod(ctx, text, fontface, min, test, desiredWidth)
} else {
var found = clubNameMeasureTextBinMethod(ctx, text, fontface, test, max, desiredWidth)
}
return found;
}
function clubNameColor(v4) {
v4 = v4.dataset.id;
switch (v4) {
case "littleblue":
clubNameFontColor = "#33ccff";
break;
case "orange":
clubNameFontColor = "#ff9900";
break;
}
redrawTextsCan4();
}
function changeClubNameFontFamily(v5) {
switch (v5) {
case "franklin":
clubNameFontFamily = "Franklin Gothic";
break;
case "impact":
clubNameFontFamily = "Impact";
break;
}
redrawTextsCan4();
}
//the second one
var canvas11 = document.getElementById("canvas11");
var ctx11 = canvas11.getContext("2d");
var selectedTextFont = "Arial Black";
var selectedFontSize1 = "20px";
var selectedFontStyle = "bold";
var selectedFontColor = "#000000";
var selectedFontSize2 = "20px";
$('#nametag2').bind('change keyup input', redrawTextsCan11);
$('#line4').bind('click', redrawTextsCan11);
function redrawTextsCan11() {
ctx11.clearRect(0, 0, canvas11.width, canvas11.height);
ctx11.textAlign = "center";
ctx11.fillStyle = selectedFontColor;
selectedFontSize1 = fitTextOnCanvas(ctx11, $('#line4').val().toUpperCase(), selectedTextFont);
ctx11.font = selectedFontStyle + " " + selectedFontSize1 + "px " + selectedTextFont;
ctx11.fillText($('#line4').val().toUpperCase(), canvas11.width * 0.5, 30);
}
function fitTextOnCanvas(ctx, text, fontface) {
var size = measureTextBinaryMethod(ctx, text, fontface, 0, 80, canvas11.width);
if (size > 18) return 18;
return size;
}
function measureTextBinaryMethod(ctx, text, fontface, min, max, desiredWidth) {
if (max - min < 1) {
return min;
}
var test = min + ((max - min) / 2); //Find half interval
ctx.font = test + "px " + fontface;
measureTest = ctx.measureText(text).width;
if (measureTest > desiredWidth) {
var found = measureTextBinaryMethod(ctx, text, fontface, min, test, desiredWidth)
} else {
var found = measureTextBinaryMethod(ctx, text, fontface, test, max, desiredWidth)
}
return found;
}
function color11(v11) {
v11 = v11.dataset.id;
switch (v11) {
case "littleblue":
selectedFontColor = "#33ccff";
break;
case "orange":
selectedFontColor = "#ff9900";
break;
}
redrawTextsCan11();
}
function chfont5(v5) {
switch (v5) {
case "franklin":
selectedTextFont = "Franklin Gothic";
break;
case "impact":
selectedTextFont = "Impact";
break;
}
redrawTextsCan11();
}
#canvas4 {
border: 2px dotted red;
border-radius: 5px;
}
#canvas11 {
border: 2px dotted red;
border-radius: 5px;
}
.littleblue {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: #33ccff;
}
.littleblue:hover,
.littleblue:active,
.littleblue:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
.orange {
border: 0.1px solid #CCC;
margin: 1px;
zoom: 3;
vertical-align: middle;
display: inline-block;
cursor: pointer;
overflow: hidden;
width: 22.5px;
height: 20px;
background-color: orange;
}
.orange:hover,
.orange:active,
.orange:focus {
border: 1px solid black;
box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.2);
opacity: 0.7;
text-decoration: none;
text-shadow: -1px -1px 0 #136a65;
-webkit-transition: all 250ms linear;
transition: all 250ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3>
<button type="button" class="littleblue" data-id="littleblue" onclick="clubNameColor(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="clubNameColor(this)"></button>
<h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3>
<select name="Font" onchange="changeClubNameFontFamily(this.value)">
<option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option>
<option value="impact" style="font-family: Impact">IMPACT</option>
</select>
<h3 style="font-size: 15px;padding-top: 10px">Write text</h3>
<form action="" method="POST" id="clubNameTag" class="nametag">
Line1:
<input type="text" id="clubNameLine1" maxlength="12" name="line1" style="width:220px; height: 30px" />
<br>
<canvas id="canvas4" width=110 height=30 style=" position: absolute; top: 20px; left: 134px; z-index: 10; "></canvas>
<!-- second one -->
<h3 style="font-size: 15px;padding-top: 10px">Text Colour</h3>
<button type="button" class="littleblue" data-id="littleblue" onclick="color11(this)"></button>
<button type="button" class="orange" data-id="orange" onclick="color11(this)"></button>
<h3 style="font-size: 15px;padding-top: 10px">Choose Font</h3>
<select name="Font" onchange="chfont5(this.value)">
<option value="franklin" style="font-family: Franklin Gothic">FRANKLIN GOTHIC</option>
<option value="impact" style="font-family: Impact">IMPACT</option>
</select>
<h3 style="font-size: 15px;padding-top: 10px">Write text</h3>
<form action="" method="POST" id="nametag2" class="nametag">
Line1:
<input type="text" id="line4" maxlength="12" name="line1" style="width:220px; height: 30px" />
<canvas id="canvas11" width=110 height=30 style=" position: absolute; top: 60px; left: 134px; z-index: 10; "></canvas>
In your HTML the closing form tags are missing, so the second form is inside the first. When I added the closing form tags on the jsFiddle things worked as expected.
The reason it was not working was because the eventHandler below to draw "Can4" was also being triggered by changes to the input on the second form (add an alert in the redrawTextsCan4 function before adding the missing form tags and you will see it appears when a character is typed in the lower input field).
$('#clubNameTag').bind('change keyup input', redrawTextsCan4);
So to summarise, the answer is to add the missing closing form tags.
I have a function which counts the number of line breaks in a div, depending on the width of the window. While the functions works fine when placed in the $(window).on('resize') function, it does not work when put in $(document).ready() function. I want it to work right on page load, and also window resize, how do I support both?
JSFiddle
Javascript/jQuery:
// functions called in both document.ready() and window.resize
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.line').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
You'll see at the start of the page, it incorrectly shows 17 lines, and then once you resize it will show the correct amount.
The issue lies in the first line of getLineCount(). Originally you had
var lineWidth = $('.line').width();
but no elements with the class "line" exist yet on your page (since they get added in your postItems() method. I changed it to
var lineWidth = $(".container").width();
instead, and now your code should be working. Snippet posted below:
$(document).ready(function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Ready");
});
$(window).on('resize', function(){
var lineCount = getLineCount();
postItems(lineCount);
$('.answer').text("Number of lines: " + lineCount);
});
// calculates the amount of lines required to hold the items
function getLineCount() {
var lineWidth = $('.container').width();
var itemWidthSum = 0;
var lineCount=1;
$('.item').each(function(index, element) {
if((lineWidth - itemWidthSum) > ($(element).outerWidth())) {
itemWidthSum = itemWidthSum + $(element).outerWidth();
} else {
lineCount++;
itemWidthSum = $(element).outerWidth();
}
});
return lineCount;
}
// overlays rows for the amount of linebreaks
function postItems(lineCount){
var container = $('<div />');;
for(var i = 1; i <= lineCount; i++) {
container.append('<div class="line">' + i + '</div>');
}
$('.line-wrap').html(container);
}
body {
text-align:center;
}
.answer {
position: fixed;
left: 0;
bottom: 0;
}
.container {
position: relative;
width: 50%;
margin: 0 auto;
border: 1px solid #e8e8e8;
display: inline-block;
}
.item {
height: 50px;
padding:0 10px;
background-color: #aef2bd;
float: left;
opacity:0.2;
white-space: nowrap;
}
.line-wrap {
position: absolute;
border: 1px solid red;
width: 100%;
height: 100%;
top:0; left: 0;
}
.line {
height: 50px;
width: 100%;
background-color: blue;
opacity:0.5;
color: white;
transition: all 0.5s ease;
}
.line:hover {
background-color: yellow;
color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item-wrap">
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
<div class="item">Computer Science</div>
<div class="item">Language</div>
<div class="item">Marketing</div>
<div class="item">Biology</div>
</div>
<div class="line-wrap">
</div>
</div>
<h1 class="answer"></h1>
How can I change the HTML background color automatically every 2 seconds? HTML5 with CSS3 fade in or fadeout?
I tried to use transition with timer and CSS target without any success
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
input[type=checkbox]:checked ~ .to-be-changed {
color: red;
}
A few changes A variation on this should work in modern browsers, if you know the colors and the number of colors in advance:
.animate-me {
-webkit-animation: bgcolorchange 4s infinite; /* Chrome, Safari, Opera */
animation: 4s infinite bgcolorchange;
}
#keyframes bgcolorchange {
0% {
background-color: red;
}
25% {
background-color: green;
}
50% {
background-color: yellow;
}
75% {
background-color: yellow;
}
100% {
background-color: red;
}
}
/* Chrome, Safari, Opera */
#-webkit-keyframes bgcolorchange {
0% {background: red;}
25% {background: yellow;}
75% {background: green;}
100% {background: blue;}
}
<div class="animate-me">Trippy! Give me a headache!</div>
http://jsfiddle.net/nnw7xza2/1/
Click to demohere!
Figure it up with:
-css3
-html5
-javascript timer
var arrColor = ["#45c1bf", "#f0593e", "#aeacd4", "#bdd630", "#4479bd", "#f5b11e"];
var footer = document.getElementById("footer");
var header = document.getElementById("header");
//helper function - get dark or lighter color
function LightenDarkenColor(col, amt) {
var usePound = false;
if (col[0] == "#") {
col = col.slice(1);
usePound = true;
}
var num = parseInt(col, 16);
var r = (num >> 16) + amt;
if (r > 255) r = 255;
else if (r < 0) r = 0;
var b = ((num >> 8) & 0x00FF) + amt;
if (b > 255) b = 255;
else if (b < 0) b = 0;
var g = (num & 0x0000FF) + amt;
if (g > 255) g = 255;
else if (g < 0) g = 0;
return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}
//random new color
function GetNewColor() {
var index = Math.floor((Math.random() * 5) + 1);
return arrColor[index];
}
// set new color
function SetNewColor(color) {
document.body.style.background = color;
var NewColor = LightenDarkenColor(color, -20);
footer.style.backgroundColor = NewColor;
header.style.backgroundColor = NewColor;
//footer.style.opacity = 1.2;
}
// on document load function start
(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
})();
//change color timer
window.setInterval(function() {
var colorSelected = GetNewColor();
SetNewColor(colorSelected);
}, 2000);
* {
margin: 0;
padding: 0;
}
body {
background: #bdd630;
transition: background-color 0.5s ease;
color: #fff;
}
#header {
background: #000;
height: 40px;
text-align: center;
}
#content {
/* Now, to activate scrollbars
and compensate #footer height: */
padding-bottom: 40px;
}
#footer {
background: #000;
position: fixed;
bottom: 0px;
width: 100%;
/* cause of fixed pos */
height: 40px;
text-align: center;
}
<div id="header">header</div>
<div id="content">
<p>content here</p>
</div>
<div id="footer">footer</div>
Enjoy
If you are looking for an easy to understand way to do this, check out Basecacti. Of course, Basecacti as of now does not include embedding of the background on to your own html page, so just look at the source code behind it. Here's an example if you need it:
var clr1 = renderColors("clr1");
var clr2 = renderColors("clr2");
var clr3 = renderColors("clr3");
var speed = renderColors("speed");
var deb = document.body;
var circle = 0;
deb.style.backgroundColor = clr1;
setInterval(function(){
if (circle == 0) {
deb.style.backgroundColor = clr2;
circle = 1;
}
else if (circle == 1) {
deb.style.backgroundColor = clr3;
circle = 2;
}
else {
deb.style.backgroundColor = clr1;
circle = 0;
}
}, speed);
To make this work for you, define 3 different colors as clr1, clr2, and clr3. Then set the speed variable to 2000 for 2 secs, and it should work. (The renderColors function that defines these values in the above code is what Basecacti uses to get the colors that users define from a different webpage.) Also, Basecacti is Open-Source for now, so you might want to hurry over to their site and get this code ASAP. If you only want the background to change once after 2 seconds, change the function from setInterval to setTimeout, but don't change anything else. Please comment on this post if the Basecacti website shuts down or stops working, or if I have an error in the code.