More Basic Javascript Animation Problems - javascript

So now I've tried to implement sideways movement:
<!DOCTYPE html>
<html>
<head>
<title>Animation Bullshit</title>
<link rel="stylesheet" href="animation.css"/>
</head>
<body>
<div id="div">
</div>
<script type="text/javascript">
div = document.getElementById("div")
div.onmouseover = move, left;
div.onmouseout = up;
var cHeight = div.style.height | 150;
var cLeft = div.style.marginLeft | 0;
function move() {
if (cHeight < 300) {
cHeight += 10;
div.style.height = cHeight + "px";
setTimeout (move, 20);
}
}
function slide() {
if (cLeft < 400) {
cLeft += 10;
div.style.marginLeft = cLeft + "px";
setTimeout (slide, 20);
}
}
function up() {
if (cHeight > 150) {
cHeight -= 10;
div.style.height = cHeight + "px";
setTimeout (up, 20);
}
}
</script>
</body>
</html>
Everything loads, but when I mouse over the div, nothing happens. It doesn't even expand down. Suggestions?
It's telling me to add more details... Uh... The div is black, with an initial margin-left of 0px.

I just used your code.
Is this what you are looking for?
http://jsfiddle.net/tz2vcote/
I think its because you have not declared variable div with var. you should have checked firebug console.
checkout the updated one
http://jsfiddle.net/tz2vcote/2/
click on the div for slide effect.

Related

how to move element with arrow using Javascript

I'm still learning JS and I'm trying to move this div with arrows using Javascript but it moves only 1 step per click can someone please help me how to make it moves more steps
check my code please
let
div = document.getElementById("test");
function move(e){
if(e.keyCode ==40){
div.style.top = 10+"px"
}
if(e.keyCode ==38){
div.style.top = -10+"px" }
if(e.keyCode==39){
div.style.left = 10 +"px"
}
if(e.keyCode==37){
div.style.left = -10 +"px"
}
}
window.onkeydown = move;
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="test"></div>
<script src="test.js"></script>
</body>
</html>
Try this code, you need the current position
I use getBoundingClientRect
You might also look at code instead of keyCode
const div = document.getElementById("test");
function move(e) {
const pos = div.getBoundingClientRect()
let top = pos.top;
let left = pos.left;
const code = e.code;
switch (code) {
case "ArrowRight": left += 10; break;
case "ArrowLeft" : left -= 10; break;
case "ArrowUp" : top -= 10; break;
case "ArrowDown" : top += 10; break;
}
div.style.top = `${top}px`;
div.style.left = `${left}px`;
}
window.addEventListener("keydown",move);
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
<div id="test"></div>
You can save the current position then move it again, set an offset and add/remove distance at every keydown
const div = document.getElementById("test");
let position = 0
const offset = 10;
function move(e) {
if (e.keyCode == 40) {
position += offset;
div.style.top = position + "px"
}
if (e.keyCode == 38) {
position -= offset;
div.style.top = position + "px"
}
if (e.keyCode == 39) {
position += offset;
div.style.left = position + "px"
}
if (e.keyCode == 37) {
position -= offset;
div.style.left = position + "px"
}
}
document.onkeydown = move;
div {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title>index</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="test"></div>
<script src="test.js"></script>
</body>
</html>
You are setting its offset to a fixed value of 10 or -10.
You need to store the current position somehow and offset the new position based on the current one.
//Intiate once at the beginning of the script
let currentVerticalPosition = 0;
if(e.keyCode ==40){
currentVerticalPosition += 10;
div.style.top = currentVerticalPosition +"px";
}

resizable and draggable div with fixed surface area

Is it possible to make a resizable and draggable div with a fixed surface area?
Example: I have a square div with a surface area of 10000px² (100 x 100px) and then I change the width (with the mouse on the corner or on the edge) to 50px, the heigth should now change automaticly to 200px so the surface area stays 10000px².
Then I´d like to drag it all over the page, resize it again etc...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-
ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-
ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; border:
1px solid;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable().resizable();
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>
ok, so here is the code, I have resizable and draggable div but now I need the fixed surface area (eg 10000px²) as I mentioned before...
you can use jquery's UI to do all of this.
use http://jqueryui.com/draggable/ to allow for dragging,
use http://jqueryui.com/resizable/ to allow for resizing
using the resize event, you can have jquery modify the div so it will follow any height/width rules you want.
Try this:
(function(draggable) {
var elm = document.getElementById(draggable);
elm.onmousedown = drag;
function stop() {
document.onmouseup = null;
document.onmousemove = null;
}
function drag(e) {
if (e.target == elm) {
var absX = e.clientX;
var absY = e.clientY;
var left = parseInt(getComputedStyle(elm).left, 10);
var top = parseInt(getComputedStyle(elm).top, 10);
var relX = absX - left;
var relY = absY - top;
document.onmouseup = stop;
document.onmousemove = function(e) {
var absX = e.clientX;
var absY = e.clientY;
elm.style.left = absX - relX + "px";
elm.style.top = absY - relY + "px";
}
}
}
})("box");
(function(resizeable) {
var elm = document.getElementById(resizeable);
var wHandler = elm.childNodes[1];
var hHandler = elm.childNodes[3];
wHandler.onmousedown = resizeW;
hHandler.onmousedown = resizeH;
function stop() {
elm.style.cursor = "";
document.body.style.cursor = "";
document.onmouseup = null;
document.onmousemove = null;
}
var w = 100;
var h = 100;
var area = w * h;
function resizeW(e) {
elm.style.cursor = "w-resize";
document.body.style.cursor = "w-resize";
var left = parseInt(window.getComputedStyle(elm, null)["left"], 10);
document.onmouseup = stop;
document.onmousemove = function(e) {
var absX = e.clientX;
var width = absX - left;
var height = area / width;
elm.style.width = width + "px";
elm.style.height = height + "px";
}
}
function resizeH(e) {
elm.style.cursor = "n-resize";
document.body.style.cursor = "n-resize";
var top = parseInt(window.getComputedStyle(elm, null)["top"], 10);
document.onmouseup = stop;
document.onmousemove = function(e) {
var absY = e.clientY;
var height = absY - top;
var width = area / height;
elm.style.height = height + "px";
elm.style.width = width + "px";
}
}
})("box");
Fiddle
Though there's a small bug, I think. Couldn't fix it. When you resize the width it's ok, but when you resize the height, and then move the div, it lags or w/e. Check the fiddle. Other than this, it's working fine.

Make image jump to random spots on screen, and loop x10? HTML and javascript

This is what i have so far, it makes my red circle appear and then when clicked it moves from the top left of the screen to the coodinates x, y(300, 800)
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:#000080;
}
h1
{
</style>
<title>Mouse click game</title>
<h1 style="text-align:center;color:white;font-family:verdana;font-size:50px;">Left click on the dots!</h1>
</br>
</br>
<script type="text/javascript">
function red_circleClick()
{
var red_circle = document.getElementById('red_circle');
red_circle.hidden = true;
red_circle.style.top = 300 + "px";
red_circle.style.left = 800 + "px";
red_circle.hidden = false;
}
</script>
</head>
<body>
<img src="/Users/lorraine/Desktop/MOUSE/red_circle.png" id="red_circle" onclick="red_circleClick();" style="position:absolute; left: 400; top: 100; width: 200; height: 200;"/>
</body>
</html>
What i need it to do is move to a random spot on the screen and do that 10 times.
So I need it to appear, user clicks on it. When they click it jumps to another spot onscreen. when they click it again in its new location it jumps to an new spot onscreen, and repeat a certain amount of times(10)
Is it possible that the circle could appear in a location outside the current screen? Like x,y(1000, 1000)
Found this code, just not 100% on how/where to insert it.
<script type="text/javascript">
function changeImg()
{
var x = Math.floor(Math.random()*300);
var y = Math.floor(Math.random()*300);
var obj = document.getElementById("emotion");
obj.style.top = x + "px";
obj.style.left = y + "px";
obj.onclick= "changeImg();"
}
New enough to Javascript and html!
Thanks very much for the help in advance!
This function gets run whenever you click the dot
function red_circleClick()
{
var red_circle = document.getElementById('red_circle');
red_circle.hidden = true;
red_circle.style.top = 300 + "px";
red_circle.style.left = 800 + "px";
red_circle.hidden = false;
}
All you have to do is randomize your numbers
red_circle.style.top = 300 + "px";
red_circle.style.left = 800 + "px";
Open up a console in chrome or what have you and run Math.random() Then try Math.floor(.1433) Then maybe Math.floor(.019231*100) See what you can get. Replace 300 and 800 with whatever you come up with.
As for making it stop at 10 times, just use an if statement and a counter.

Moving an image with 360° angle in Javascript

I am trying to make an image move 360° (not rotate) back it's course, but so far I was able to move only to a specific direction, if I add left & bottom course, then the image going diagonal to left & bottom. Here are the properties:
CSS
#circle{
background:red;
border-radius:100px;
height:100px; width:100px;
position:absolute;
}
JavaSript
(function() {
var speed = 10,
moveBox = function(){
var el = document.getElementById("circle"),
left = el.offsetLeft,
moveBy = 3;
el.style.left = left + moveBy + "px";
if(left > 200){
clearTimeout(timer);
}
};
var timer = setInterval(moveBox, speed);
}());
HTML:
<div id='circle'></div>
JsFiddle Online Demo
The problem is looping back the red circle, I want it to move to left > bottom > right > up
in a circular manner.
thanks for the help.
Using Math.sin and Math.cos to describe the circle: http://jsfiddle.net/E3peq/7/
(function() {
var speed = 10,
moveX = 0.1,
moveY = 0.1,
increment = 0.1,
amp = 10,
moveBox = function(){
var el = document.getElementById("circle"),
left = el.offsetLeft,
top = el.offsetTop;
moveX += increment;
moveY += increment;
var moveXBy = Math.cos(moveX) * amp;
var moveYBy = Math.sin(moveY) * amp;
el.style.left = (left + moveXBy) + "px";
el.style.top = (top + moveYBy) + "px";
if(left > 200){
clearTimeout(timer);
}
};
var timer = setInterval(moveBox, speed);
}());
Edit: Abraham's answer in the comments is actually a lot nicer looking than this...

Trying to move boxes

I have a random amount of boxes, randomly on a page of random colors. I am trying to be able to get them to move from one place to another.
Essentially, I am not familiar at all with mouse move events so this is quite the challenge. Even though it is quite simple.
Heres the code for the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ramdom Boxes</title>
<script src="A2Q1.js"></script>
</head>
<body>
</body>
</html>
Javascript:
window.onload = init;
function init() {
//when page is loaded create a bunch of boxes randomly throughout the page
//get the body element of the document
var body = document.getElementsByTagName("body")[0];
//store width and height of boxes
var boxWidth = 50;
var boxHeight = 50;
//create the random number for the boxes
var randNum = Math.floor(Math.random() * 500 + 1);
//create the boxes
for(var i=0;i<randNum;i++){
//create the random color and random positions
var colour = Math.round(0xffffff * Math.random()).toString(16);
var pos1 = Math.floor(Math.random() * window.innerWidth)
var pos2 = Math.floor(Math.random() * window.innerHeight)
// Define an array of css attributes
var attr =[
// Assign a colour to the box
'background-color:#' + colour,
// Place the box somewhere inside the window
'left:' + pos1 + 'px',
'top:' + pos2 + 'px',
// Set the box size
'width:' + boxWidth + 'px',
'height:' + boxHeight + 'px',
'cursor: pointer;',
'position:absolute;'
];
//join the attributes together
var attributes = attr.join(';');
//create a new div tag
var div = document.createElement("div");
//gives the box a unique id
div.setAttribute("id","box"+i)
//create the design of the box
div.setAttribute("style",attributes);
//add to the body
body.appendChild(div);
}
}
I really have no idea where to start...
Well a start would certainly be getting the mouse position, after that the world is your oyster.
var mousex = 0;
var mousey = 0;
function getXY(e){
if (!e) e = window.event;
if (e)
{
if (e.pageX || e.pageY)
{ // this doesn't work on IE6!! (works on FF,Moz,Opera7)
mousex = e.pageX;
mousey = e.pageY;
go = '[e.pageX]';
if (e.clientX || e.clientY) go += ' [e.clientX] '
}
else if (e.clientX || e.clientY)
{ // works on IE6,FF,Moz,Opera7
mousex = e.clientX + document.body.scrollLeft;
mousey = e.clientY + document.body.scrollTop;
go = '[e.clientX]';
if (e.pageX || e.pageY) go += ' [e.pageX] '
}
}
}
With the mouse info you can then do this in another function.
function moveBoxes(){
document.body.onmousemove = updater; //or some container div!
updater();
}
function updater(e){
getXY(e);
document.getElementById('aboxid').style.left=mousex+'px';
}
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>MouseDown MouseUp</title>
<meta charset="UTF-8">
<style>
#insideBox{
height: 100px;
width: 100px;
background-color: black;
left:300px;
top:300px;
position:absolute;
}
</style>
<script>
var mouseFire = null;
window.onload = init;
function init(){
var div = document.getElementById("insideBox");
div.addEventListener("mousedown",mouseDrag,false);
}
function mouseDrag(e){
var evt = e || window.event;
mouseFire = evt.target || evt.srcElement;
document.addEventListener("mousemove",mouseMove,false);
document.addEventListener("mouseup",mouseDrop,false);
}
function mouseMove(e){
var evt = e || window.event;
var mouseX = evt.clientX;
var mouseY = evt.clientY;
mouseFire.style.left = mouseX-50+"px";
mouseFire.style.top = mouseY-50+"px";
}
function mouseDrop(e){
mouseFire = null;
document.removeEventListener("mousemove",mouseMove,false);
}
</script>
</head>
<body>
<div id="insideBox"></div>
</body>
</html>

Categories

Resources