Drawing squares within squares in JS

Drawing squares within squares in JS - javascript

I am trying to run a script to draw a pattern of squares within squares.
var bodyNode = document.getElementsByTagName("body")[0];
var width = 600, height = 600;
var top = 10, left = 10;
while(width > 30) {
var divNode = document.createElement("div");
divNode.style.position = "absolute";
divNode.style.marginLeft = left;
divNode.style.marginTop = top;
divNode.style.width = width;
divNode.style.height = height;
divNode.style.background = randomColor();
bodyNode.appendChild(divNode);
width -= 10;
height -= 10;
top += 10;
left += 10;
}
function randomColor()
{
var color = "#";
for(var i =0; i < 6; i++)
{
var number = Math.floor(Math.random() * 10);
color += number;
}
return color;
}
But the properties which get added to the div are:
{
position: absolute;
margin-left: 260px;
width: 350px;
height: 350px;
background: rgb(88, 88, 5);
}
I am trying to achieve this pattern but I get a different pattern as shown in the image below.
What am I missing?

you are missing "px" suffix of Top,Left,Width,Height
See your corrected code here - https://jsfiddle.net/jw2rohr5/
Your corrected code -
var bodyNode = document.getElementsByTagName("body")[0];
var width = 600, height = 600;
var top = 10, left = 10;
while(width > 30)
{
var divNode = document.createElement("div");
divNode.style.position = "absolute";
divNode.style.marginLeft = left + "px";
divNode.style.marginTop = top + "px";
divNode.style.width = width + "px";
divNode.style.height = height + "px";
divNode.style.background = randomColor();
bodyNode.appendChild(divNode);
width -= 10;
height -= 10;
top += 10;
left += 10;
}
function randomColor()
{
var color = "#";
for(var i =0; i < 6; i++)
{
var number = Math.floor(Math.random() * 10);
color += number;
}
return color;
}
You should give suffix like "%","px" etc..

Try
body{
position: relative;
}
When the content have a position by default(static) the margin of node children not work correctly

Related

Different scroll speeds for elements in array

I have different randomly-styled stars in an array and I would like them to each have different scroll speeds between -.2 and -.8. The idea is to have them do a parallax effect, and it'd be cool to have everything a little random.
This was the original scroll speed code using images:
var starsOne = document.querySelector("#starsOne");
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + ", " + yPos + "px, 0)";
}
var xScrollPosition;
var yScrollPosition;
function scrollLoop() {
xScrollPosition = window.scrollX;
yScrollPosition = window.scrollY;
setTranslate(0, yScrollPosition * -0.6, starsOne);
requestAnimationFrame(scrollLoop);
}
window.addEventListener("load", scrollLoop, false);
I've been trying to integrate the above code somehow for the array:
let starScrollMin = 2;
let starScrollMax = 8;
var starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
function starScroll() {
for (i = 0; i < starDivvyArr.length; i++) {
yScrollPos = window.scrollY;
starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starScrollSpeed + "px, 0)";
}
requestAnimationFrame(starScroll);
}
window.addEventListener("load", starScroll, false);
If starScrollSpeed is global, then all the stars move in a big chunk. If it's within the starScroll() function, the values are at least different per star, but it gets crazy as it keeps randomizing and multiplying.
Any ideas on how to randomize the scroll speed for each star so it looks like a parallax effect, without them moving in one single chunk or going crazy? Or is it a safer bet to make a bunch of css lines and then randomly assign classes?
jsfiddle

It's a bit unclear what exactly you're after.
If you're trying to set a random scroll speed for each star, and not change it every time the startScroll triggers.
you could set a speed for each start separately inside the loop and use that in the startScroll function instead:
...
starDivvyArr[i].starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
...
starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starDivvyArr[i].starScrollSpeed + "px, 0)";
var starCount = 25;
let starContain = document.getElementById('starContain');
/*Create star divs*/
for (var i = 0; i < starCount; i++) {
var starDiv = document.createElement("div");
starDiv.className = 'star';
starContain.append(starDiv);
}
/*Make an array from the star divs*/
var starDivvy = document.querySelectorAll(".star");
var starDivvyArr = Array.from(starDivvy);
/*Create some possible styles*/
var starColor = ['yellow', 'blue', 'white'];
var starSizeMin = 5;
var starSizeMax = 25;
let starContainWidth = starContain.offsetWidth;
let starContainHeight = starContain.offsetHeight;
let starScrollMin = 2;
let starScrollMax = 8;
/*Give the star array some different styles*/
for (i = 0; i < starDivvyArr.length; i++) {
/*Change star color*/
starDivvyArr[i].style.backgroundColor = starColor[Math.floor(Math.random() * starColor.length)];
/*Change star position within container*/
starDivvyArr[i].style.left = Math.floor((Math.random() * starContainWidth) + 1) + "px";
starDivvyArr[i].style.top = Math.floor((Math.random() * starContainHeight) + 1) + "px";
/*Change star size*/
starDivvyArr[i].style.width = Math.floor(Math.random() * (starSizeMax - starSizeMin + 1)) + starSizeMin + "px";
starDivvyArr[i].style.height = starDivvyArr[i].style.width;
starDivvyArr[i].starScrollSpeed = -Math.abs((Math.floor(Math.random() * (starScrollMax - starScrollMin + 1)) + starScrollMin) / 10);
}
/*>>>>>>>POINT OF CONFUSION<<<<<<<*/
/*Randomize scroll speed between -0.2 and -0.8*/
/*Give the stars a scrolling function*/
function starScroll() {
for (i = 0; i < starDivvyArr.length; i++) {
yScrollPos = window.scrollY;
starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starDivvyArr[i].starScrollSpeed + "px, 0)";
}
requestAnimationFrame(starScroll);
}
window.addEventListener("load", starScroll, false);
*{
margin:0 auto;
}
section{
width:100vw;
height:150vh;
}
.section1{
background-color:#000;
}
.section2{
background-color:#202;
}
h2{
text-align:center;
color:#ccc;
}
#starContain{
width:100vw;
height:500px;
position:absolute;
top:50vh;
z-index:2;
background-color:rgba(255,255,255,0.2);
}
.star{
background-color:green;
position:absolute;
z-index:100;
border-radius:50%;
}
<main>
<section class="section1">
<h2>
Section 1
</h2>
</section>
<div id="starContain">
</div>
<section class="section2">
<h2>
Section 2
</h2>
</section>
</main>

You could create an array for the randomly created numbers and push a value from a function that returns the randomly created speed into that array with in the loop and then use that array to get a random value for each element.
var starCount = 25;
let starContain = document.getElementById('starContain');
/*Create star divs*/
for (var i = 0; i < starCount; i++) {
var starDiv = document.createElement("div");
starDiv.className = 'star';
starContain.append(starDiv);
}
/*Make an array from the star divs*/
var starDivvy = document.querySelectorAll(".star");
var starDivvyArr = Array.from(starDivvy);
/*Create some possible styles*/
var starColor = ['yellow', 'blue', 'white'];
var starSizeMin = 5;
var starSizeMax = 25;
let starContainWidth = starContain.offsetWidth;
let starContainHeight = starContain.offsetHeight;
/*Give the star array some different styles*/
for (i = 0; i < starDivvyArr.length; i++) {
/*Change star color*/
starDivvyArr[i].style.backgroundColor = starColor[Math.floor(Math.random() * starColor.length)];
/*Change star position within container*/
starDivvyArr[i].style.left = Math.floor((Math.random() * starContainWidth) + 1) + "px";
starDivvyArr[i].style.top = Math.floor((Math.random() * starContainHeight) + 1) + "px";
/*Change star size*/
starDivvyArr[i].style.width = Math.floor(Math.random() * (starSizeMax - starSizeMin + 1)) + starSizeMin + "px";
starDivvyArr[i].style.height = starDivvyArr[i].style.width;
}
/*>>>>>>>POINT OF CONFUSION<<<<<<<*/
/*Randomize scroll speed between -0.2 and -0.8*/
let starScrollMin = 2;
let starScrollMax = 8;
//function for creating random scroll speed
const starScrollSpeed = (min,max) => {
return -Math.abs((Math.floor(Math.random() * (min - max + 1)) + min) / 10);
}
//==> added array
const starArray = [];
/*Give the stars a scrolling function*/
function starScroll() {
for (i = 0; i < starDivvyArr.length; i++) {
// array to hold randomly created scroll speeds
starArray.push(starScrollSpeed(starScrollMin,starScrollMax))
yScrollPos = window.scrollY;
starDivvyArr[i].style.transform = "translate3d(" + 0 + "px, " + yScrollPos * starArray[i] + "px, 0)";
}
requestAnimationFrame(starScroll);
}
window.addEventListener("load", starScroll, false);
* {
margin: 0 auto;
}
section {
width: 100vw;
height: 150vh;
}
.section1 {
background-color: #000;
}
.section2 {
background-color: #202;
}
h2 {
text-align: center;
color: #ccc;
}
#starContain {
width: 100vw;
height: 500px;
position: absolute;
top: 50vh;
z-index: 2;
background-color: rgba(255, 255, 255, 0.2);
}
.star {
background-color: green;
position: absolute;
z-index: 100;
border-radius: 50%;
}
<main>
<section class="section1">
<h2>
Section 1
</h2>
</section>
<div id="starContain">
</div>
<section class="section2">
<h2>
Section 2
</h2>
</section>
</main>

How to call Wordpress post featured image instead of static url

Trying to add this image hover effect to the featured image in a blog post template in Wordpress. Currently the JS is calling an image URL, but I want the effect to target the featured image of the post template. I think it may be possible using PHP in the JS file but im not sure how to do it, can anyone help me out please?
// options
var options = {
imgSrc : "https://unsplash.it/g/1024/768?image=887",
containerName : "tileContainer",
grid : false,
tileWidth : 80,
tileHeight : 80,
mouseTrail:true
}
// ----------------------------------------------------------
var tileWidth, tileHeight, numTiles, tileHolder, tileContainer;
var directionX, directionY;
var imgOriginalWidth, imgOriginalHeight;
var imgCoverWidth, imgCoverHeight;
var imageLoaded = false;
numTiles=0;
tileWidth = options.tileWidth;
tileHeight = options.tileHeight;
tileContainer = document.getElementsByClassName(options.containerName)[0];
function init(){
if(options.grid == false)tileContainer.className += " noGrid";
//preload image and get original image size, then create tiles
var image = new Image();
image.src = options.imgSrc;
image.onload = function(e){
imageLoaded = true;
imgOriginalWidth = e.currentTarget.width;
imgOriginalHeight = e.currentTarget.height;
createTileHolder();
checkTileNumber();
positionImage();
addListeners();
};
}
function resizeHandler()
{
if(imageLoaded == false)return;
//not working yet
checkTileNumber();
positionImage();
}
function createTileHolder(){
tileHolder = document.createElement('div');
tileHolder.className = "tileHolder";
tileHolder.style.position = "absolute";
tileHolder.style.top = "50%";
tileHolder.style.left = "50%";
tileHolder.style.transform = "translate(-50%, -50%)";
tileContainer.appendChild(tileHolder);
}
function checkTileNumber()
{
tileHolder.style.width = Math.ceil(tileContainer.offsetWidth / tileWidth) * tileWidth + "px";
tileHolder.style.height = Math.ceil(tileContainer.offsetHeight / tileHeight) * tileHeight + "px";
var tilesFitInWindow = Math.ceil(tileContainer.offsetWidth / tileWidth) * Math.ceil(tileContainer.offsetHeight / tileHeight);
if(numTiles < tilesFitInWindow){
for (var i=0, l=tilesFitInWindow-numTiles; i < l; i++){
addTiles();
}
}else if(numTiles > tilesFitInWindow){
for (var i=0, l=numTiles-tilesFitInWindow; i < l; i++){
removeTiles();
}
}
}
function addTiles()
{
var tile = document.createElement('div');
tile.className = "tile";
//maintain aspect ratio
imgCoverWidth = tileContainer.offsetWidth;
imgCoverHeight = tileContainer.offsetHeight;
if(imgOriginalWidth > imgOriginalHeight){
imgCoverHeight = imgOriginalHeight / imgOriginalWidth * imgCoverWidth;
}else{
imgCoverWidth = imgOriginalWidth / imgOriginalHeight * imgCoverHeight;
}
tile.style.background = 'url("'+options.imgSrc+'") no-repeat';
tile.style.backgroundSize = imgCoverWidth + "px " + imgCoverHeight + "px";
tile.style.width = tileWidth + "px";
tile.style.height = tileHeight + "px";
document.querySelectorAll(".tileHolder")[0].appendChild(tile);
tile.addEventListener("mouseover", moveImage);
numTiles++;
}
function removeTiles()
{
var tileToRemove = document.querySelectorAll(".tile")[0];
tileToRemove.removeEventListener("mouseover", moveImage);
TweenMax.killTweensOf(tileToRemove);
tileToRemove.parentNode.removeChild(tileToRemove);
numTiles--;
}
function addListeners(){
if(options.mouseTrail){
document.addEventListener('mousemove', function (event) {
directionX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
directionY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
});
}
}
function positionImage(){
for(var t=0, l=numTiles; t < l; t++)
{
var nowTile = document.querySelectorAll(".tile")[t];
var left = (-nowTile.offsetLeft - (tileHolder.offsetLeft - (tileHolder.offsetWidth/2)));
var top = (-nowTile.offsetTop - (tileHolder.offsetTop - (tileHolder.offsetHeight/2)));
nowTile.style.backgroundPosition = left + "px " + top + "px";
}
}
function resetImage(nowTile){
var left = (-nowTile.offsetLeft - (tileHolder.offsetLeft - (tileHolder.offsetWidth/2)));
var top = (-nowTile.offsetTop - (tileHolder.offsetTop - (tileHolder.offsetHeight/2)));
TweenMax.to(nowTile, 1, {backgroundPosition:left + "px " + top + "px", ease:Power1.easeInOut});
}
function moveImage(e){
var nowTile = e.currentTarget
var minWidth = -tileContainer.offsetWidth+nowTile.offsetWidth;
var minHeight = -tileContainer.offsetHeight+nowTile.offsetHeight;
var nowLeftPos = (-nowTile.offsetLeft - (tileHolder.offsetLeft - (tileHolder.offsetWidth/2)));
var nowTopPos = (-nowTile.offsetTop - (tileHolder.offsetTop - (tileHolder.offsetHeight/2)))
var offset = 60;
var left = nowLeftPos;
var top = nowTopPos;
if(options.mouseTrail){
//direction-aware movement
if(directionX > 0){
left = nowLeftPos + offset;
}else if(directionX < 0){
left = nowLeftPos - offset;
}
if(directionY > 0){
top = nowTopPos + offset;
}else if(directionY < 0){
top = nowTopPos - offset;
}
}else{
//random movement
left = getRandomInt(nowLeftPos - offset , nowLeftPos + offset);
top = getRandomInt(nowTopPos - offset, nowTopPos + offset);
}
// bounds
if(left < minWidth)left=minWidth;
if(left > 0)left=0;
if(top < minHeight)top=minHeight;
if(top > 0)top=0;
//tween
TweenMax.to(nowTile, 1.5, {backgroundPosition:left + "px " + top + "px", ease:Power1.easeOut, onComplete:resetImage, onCompleteParams:[nowTile]});
}
///////////////////////////////////////////////////////////////////
init();
// handle event
//window.addEventListener("optimizedResize", resizeHandler);
////////////////////////UTILS//////////////////////////////////////
//////////////////////////////////////////////////////////////////
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
(function() {
var throttle = function(type, name, obj) {
obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle("resize", "optimizedResize");
})();
body{background-color:#1A1919;text-align:center;}
.tileContainer{
border:10px solid black;
display:inline-block;
position:relative;
width:1024px;
height:768px;
overflow:hidden;
box-sizing:border-box;
}
.tile{
position:relative;
vertical-align:top;
display:inline-block;
border-right:1px solid rgba(0, 0, 0, 0.5);
border-bottom:1px solid rgba(0, 0, 0, 0.5);
box-sizing:border-box;
}
.tile:after{
content:"";
background-color:#cc1c32;
width:6px;
height:6px;
position:absolute;
top:100%;
right:0px;
transform:translate(50%, -50%);
z-index:2;
line-height:1;
}
/*-- no grid --*/
.noGrid .tile{
border-right:0px solid rgba(0, 0, 0, 0.5);
border-bottom:0px solid rgba(0, 0, 0, 0.5);
}
.noGrid .tile:after{
content:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tileContainer">
</div>

How to set css width or left attributes to get pixel perfect result?

I just started experimenting with JS/CSS a bit and I came across this problem I couldn't find an answer for on the forum.
I wonder how I could get rid off the white line in the middle of the window (picture attached). It doesn't appear all the time but at certain scalings.
Many thanks
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.d {
position: fixed;
margin: 0;
padding: 0;
border: 0px;
background-color: #A1F1F1;
text-align: center;
}
</style>
</head>
<body>
<script>
var numOfDivsHor = 10;
var numOfDivsVer = 10;
function setCubeSize() {
document.body.innerHTML = '';
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var fs = h/numOfDivsVer/3;
for (i=0; i < numOfDivsHor; i++) {
for (j=0; j < numOfDivsVer; j++) {
var d = document.createElement('div');
document.getElementsByTagName('body')[0].appendChild(d);
d.id = i + '' + j;
d.className = 'd';
d.innerHTML = i + '' + j;
setLayout(i + '' + j, w, h, fs);
d.style.left = j * w/numOfDivsHor + 'px';
d.style.top = i * h/numOfDivsVer + 'px';
d.style.backgroundColor = 'rgb(120, ' + Math.round(i * 25.5) + ', ' + Math.round(j * 25.5) + ')';
}
}
}
function setLayout(divId, w, h, fs) {
var d = document.getElementById(divId);
d.style.width = 100/numOfDivsHor + '%';
d.style.height = 100/numOfDivsVer + '%';
d.style.fontSize = fs + 'px';
d.style.paddingTop = (h/numOfDivsVer - fs)/2 + 'px';
}
document.addEventListener('DOMContentLoaded', function() {;
setCubeSize();
});
window.addEventListener('resize', function() {
setCubeSize();
});
</script>
</body>
</html>
white line in the middle

This a rounding issue that is common when dealing with graphics and floating point numbers. You more or less just need to floor values when you divide.
Specifically, this change fixes the problem in the code that you posted. Change:
d.style.left = j * w/numOfDivsHor + 'px';
d.style.top = i * h/numOfDivsVer + 'px';
to:
d.style.left = j * Math.floor(w/numOfDivsHor) + 'px';
d.style.top = i * Math.floor(h/numOfDivsVer) + 'px';
Note that you will be left with whitespace on one edge of the grid. This is because the size of the window is not a perfect multiple of the size of a cell. You have to choose either between keeping the sizes of the cells the same, as above, or having varying sizes of cell, which would take a bit more work.

Adding an element to not be overlapped

I've read this question about how to randomly position elements, and it works perfectly.
Positioning multiple, random sized, absolutely positioned elements so they don't overlap
How do I make the circles to not overlap the logo in the center when they position themselves randomly?
JSFiddle: http://jsfiddle.net/2h8783ba/
var maxSearchIterations = 10;
var min_x = 110;
var max_x = window.innerWidth - 310;
var min_y = 110;
var max_y = window.innerHeight - 310;
var filled_areas = [];
function calc_overlap(a1) {
var overlap = 0;
for (i = 0; i < filled_areas.length; i++) {
var a2 = filled_areas[i];
// no intersection cases
if (a1.x + a1.width < a2.x) {
continue;
}
if (a2.x + a2.width < a1.x) {
continue;
}
if (a1.y + a1.height < a2.y) {
continue;
}
if (a2.y + a2.height < a1.y) {
continue;
}
// intersection exists : calculate it !
var x1 = Math.max(a1.x, a2.x);
var y1 = Math.max(a1.y, a2.y);
var x2 = Math.min(a1.x + a1.width, a2.x + a2.width);
var y2 = Math.min(a1.y + a1.height, a2.y + a2.height);
var intersection = ((x1 - x2) * (y1 - y2));
overlap += intersection;
}
return overlap;
}
function randomize() {
filled_areas.splice(0, filled_areas.length);
var index = 0;
$('.c1, .c2, .c3, .c4').each(function() {
var rand_x = 0;
var rand_y = 0;
var i = 0;
var smallest_overlap = 9007199254740992;
var best_choice;
var area;
for (i = 0; i < maxSearchIterations; i++) {
rand_x = Math.round(min_x + ((max_x - min_x) * (Math.random() % 1)));
rand_y = Math.round(min_y + ((max_y - min_y) * (Math.random() % 1)));
area = {
x: rand_x,
y: rand_y,
width: $(this).width(),
height: $(this).height()
};
var overlap = calc_overlap(area);
if (overlap < smallest_overlap) {
smallest_overlap = overlap;
best_choice = area;
}
if (overlap === 0) {
break;
}
}
filled_areas.push(best_choice);
$(this).css({
position: "absolute",
"z-index": index++
});
$(this).animate({
left: rand_x,
top: rand_y
});
});
return false;
}

Here is the solution.
Css
#logo-content{
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
z-index: 10;
}
Html
<div id="wrapper">
<div id="logo-content">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 93.7 93.7" enable-background="new 0 0 93.7 93.7" xml:space="preserve"></svg>
<div>
</div>

Changing a div attribute using a function?

I am not sure why my move function, is not changing the style.left or style.top attributes of my 'toy'
Any tips, or general information/links on how to animate a div? I'm pulling my hair out over here. :)
var ref;
var timer;
var velocity = 50;
var deltaX = 5;
var deltaY = 5;
var left = 0;
var top = 0;
//var moveX = math.random() * velocity;
//var moveY = math.random() * velocity;
function init() {
alert("in init fucntion");
ref = document.getElementById("toy");
alert("ref = " + ref.valueOf());
timer = setInterval(move, 50);
}
function move() {
alert("called move");
var left = parseInt(ref.style.left);
var top = parseInt(ref.style.top);
alert("left = " + left.valueOf() + " top = " + top.valueOf());
left += 5;
top += 5;
alert("left =" + left.valueOf() + "top = " + top.valueOf());
ref.style.left += left;
ref.style.top += 5;
alert("ref.style.left = " + ref.style.left.valueOf() + " ref.style.top = " + ref.style.top.valueOf());
ref.style.left = (left + deltaX) % posEnd;
}
var posEnd = 0;
var objWidth = 100;
if (window.innerWidth) {
posEnd = window.innerWidth
} else if (window.document.body.clientWidth) {
posEnd = window.document.body.clientWidth
}
<body onload="init()">
<div style="width: 100px; height: 100px; position:absolute; left: 0px; top: 0px;" id="toy">
<img src="http://images.all-free-download.com/images/graphiclarge/mouse_clip_art_6054.jpg" style="max-height: 100%; max-width: 100%;">
</div>

You just need to specify the units the position is in. For example, style.left = 10 won't work - you need style.left = '10px';
Here is a slightly simplified version of your move() function showing this:
function move() {
var left = parseInt(ref.style.left);
var top = parseInt(ref.style.top);
left += 5;
top += 5;
ref.style.left = left + 'px';
ref.style.top = top + 'px';
}
And a fully working snippet:
var ref;
var timer;
var velocity = 50;
var deltaX = 5;
var deltaY = 5;
var left = 0;
var top = 0;
function init() {
ref = document.getElementById("toy");
timer = setInterval(move, 500);
}
function move() {
var left = parseInt(ref.style.left);
var top = parseInt(ref.style.top);
left += 5;
top += 5;
ref.style.left = left + 'px';
ref.style.top = top + 'px';
}
var posEnd = 0;
var objWidth = 100;
if (window.innerWidth) {
posEnd = window.innerWidth
} else if (window.document.body.clientWidth) {
posEnd = window.document.body.clientWidth
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init()">
<div style="width: 100px; height: 100px; position:absolute; left: 0px; top: 0px;" id="toy">
<img src="http://images.all-free-download.com/images/graphiclarge/mouse_clip_art_6054.jpg" style="max-height: 100%; max-width: 100%;">
</div>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Drawing squares within squares in JS - javascript

Try body{ position: relative; } When the content have a position by default(static) the margin of node children not work correctly

Related

Different scroll speeds for elements in array

How to call Wordpress post featured image instead of static url

How to set css width or left attributes to get pixel perfect result?

Adding an element to not be overlapped

Changing a div attribute using a function?

Categories

Resources