My code below:
JavaScript:
function showMenu(){
var t = setInterval(move, 5);
var menu = document.getElementById("menu");
var pos = 0;
function move(){
if(pos>=150){
clearInterval(t);
}
else{
pos += 1;
menu.style.left = pos + "px";
}
}
}
function hideMenu(){
var t = setInterval(move, 10);
var menu = document.getElementById("menu");
var pos = menu.getAttribute("left");
function move(){
if(pos<=0){
clearInterval(t);
}
else{
pos -= 1;
menu.style.left = pos + "px";
}
}
}
HTML:
<div id="menu-field" onmouseover="showMenu()" onmouseout="hideMenu()" >
<div id="menu"></div>
</div>
I want the div element to move right on mouse over and start moving back to starting position on mouse out. This does the showMenu function even on mouse out.
This might be better accomplished natively with CSS and no JavaScript. This looks like it will accomplish what you're trying to do:
#menu-field {
background: #eee;
height: 200px;
width: 80px;
}
#menu {
background: #aaa;
height: 100px;
width: 80px;
transition: transform 1s;
}
#menu-field:hover #menu {
transform: translateX(80px);
}
<div id="menu-field">
<div id="menu">Menu</div>
</div>
Related
I was tasked with creating an animation in javascript using an existing code and altering to do two things. Switch modes, and go on until the person closes the program. The four modes are:
mode 0 - left to right
mode 1 - top to bottom
mode 2 - right to left
mode 3 - bottom to top
Switching from mode 0 - 1 is where the trouble starts. It's supposed to slide, but it jumps when I get there.
Below is my code as is.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 350;
var id = setInterval(frame, 5);
}
function frame() {
if (pos == 0) {
pos++;
elem.style.bottom= pos + 'px';
} else {
pos--;
elem.style.left = pos + "px";
if (pos == 49.985) {
pos++;
elem.style.left = pos + "px";
}
}
I suggest you use two variables for both x and y, and replace posBottom with a variable for top style.
The issue before was that when pos was equal to 0 and thus triggered the if statement, it immediately incremented, causing it to instead trigger the else, and then decremented, going back to if, and so on. It jumped because the style.bottom = 0px was causing it to go straight down to the bottom.
function myMove() {
var elem = document.getElementById("animate");
var posLeft = 350;
var posTop = 0;
var id = setInterval(frame, 5);
function frame() {
if (posLeft == 0 && posTop != 350) {
stage=1;
posTop++;
elem.style.top= posTop + 'px';
} else if (posTop == 0) {
posLeft--;
elem.style.left = posLeft + "px";
} else if (posLeft != 350) {
posLeft++;
elem.style.left = posLeft + "px";
} else if (posTop != 0) {
posTop--;
elem.style.top= posTop + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
I am trying to reverse the direction of this codepen, but have been unsuccessful.
Looking to make a HTML jQuery Ticker message that goes from left to right.
This is the codepen I am trying to reverse:
https://codepen.io/haydmills/pen/jEZzdW
This didn't work:
var width = $('.ticker-text').width(),
containerwidth = $('.ticker-container').width(),
left = containerwidth;
$(document).ready(function(e){
function tick() {
if(--left < -width){
left = containerwidth;
}
$(".ticker-text").css("margin-right", left + "px");
setTimeout(tick, 8);
}
tick();
});
It seam to work fine!
var width, containerwidth, left, way = 0;
$(document).ready(function(e){
width = $('.ticker-text').width();
containerwidth = $('.ticker-container').width();
left = containerwidth;
tick();
});
function tick() {
if (way) {
if (--left < -width){
left = containerwidth;
}
} else {
if (++left > containerwidth){
left = -width;
}
}
$(".ticker-text").css("margin-left", left + "px");
setTimeout(tick, 8);
}
function toggle () {
way = (way+1)%2;
}
body{
margin: 0 auto;
}
.ticker-container {
background: tomato;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
.ticker-text {
height: 150%;
color: #fafafa;
white-space:nowrap;
display:inline-block;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class = "ticker-container">
<div class = "ticker-text">
<h3>Hello! Welcome to my website.</h3>
</div>
</div>
<button onclick="toggle();">Change direction</button>
javascript beginner here! so i'm trying to do a box(that is inside a larger box) move from the top to the edge of the box. Here's the code:
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 320) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
The problem is that the small box doesn't exactly ends up at the edge, it goes more to the right. I tried doing
boxcont.style.left = (loc - 0.5) + "px";
but doesn't work. pretty sure the solution is simple but as a newbie here it's confusing me :p. Oh and i also tried doing ++ to the 0.5 and Number(0.5) so it reads it as a decimal but still doesn't work!
the big gray box is not set to the correct height and width that corresponds with the small red box's movement. You have it going down 1 and to the right 1 every 5 however, your actually going across a rectangle, not a square. set your width and height the same for the gray box and slightly adjust the stopping point to a little bit less.
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5); // every five milliseconds
function boxmove() {
if (loc == 290) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox" style = "height: 320px; width: 320px">
<div id="boxcont" ></div>
</div>
<button id="boxbtn">Move the box</button>
if (loc == 270) {
instead of
if (loc == 320) {
Gets you there.
300px is the width of the containing div and the moving div is 30px wide so 300-30=270px
var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");
boxbtn.addEventListener("click", function() {
var loc = 0;
var timebox = setInterval(boxmove, 5);
function boxmove() {
if (loc == 270) {
clearInterval(timebox);
} else {
loc++;
boxcont.style.top = loc + "px";
boxcont.style.left = loc + "px";
}
}
});
#movebox {
width: 300px;
height: 350px;
background-color: grey;
}
#boxcont {
width: 30px;
height: 30px;
background-color: indianred;
position: relative;
}
<div id="movebox">
<div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>
So I'm trying to make simple animation. When you press somewhere inside blue container, a circle should be created in this place and then go up. After some research I found how to put JS values into keyframes, but it's changing values for every object not just for freshly created. If you run snipped and press somewhere high and then somewhere low you will see what I'm talking about.
I found some AWESOME solution with Raphael library, but I'm a beginner and I'm trying to make something like this in JS. Is it even possible? How?
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
var ss = document.styleSheets;
var keyframesRule = [];
function findAnimation(animName) { //function to find keyframes and insert replace values in them
for (var i = 0; i < ss.length; i++) {
for (var j = 0; j < ss[i].cssRules.length; j++) {
if (window.CSSRule.KEYFRAMES_RULE == ss[i].cssRules[j].type && ss[i].cssRules[j].name == animName) {
keyframesRule.push(ss[i].cssRules[j]);
}
}
}
return keyframesRule;
}
function changeAnimation (nameAnim) { //changing top value to cursor position when clicked
var keyframesArr = findAnimation(nameAnim);
for (var i = 0; i < keyframesArr.length; i++) {
keyframesArr[i].deleteRule("0%");
keyframesArr[i].appendRule("0% {top: " + bubble.posY + "px}");
}
}
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
//bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
changeAnimation("moveUp");
bubbleCircle.className += " animate";
}
aquarium.addEventListener("click", createBubble);
//console.log(bubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20,255,200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250,250,250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
-webkit-animation: moveUp 5s linear;//cubic-bezier(1, 0, 1, 1);
}
#keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp{
0% {
top: 400px;
}
100% {
top: 80px;
}
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Here is a possible solution. What I did:
Remove your functions changeAnimation () and findAnimation() - we don't need them
Update the keyframe to look like - only take care for the 100%
#keyframes moveUp { 100% {top: 80px;} }
Assign top of the new bubble with the clientY value
After 5 seconds set top of the bubble to the offset of the #container(80px) - exactly when animation is over to keep the position of the bubble, otherwise it will return to initial position
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.className = "bubble";
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
bubbleCircle.className += " animate";
// The following code will take care to reset top to the top
// offset of #container which is 80px, otherwise circle will return to
// the position of which it was created
(function(style) {
setTimeout(function() {
style.top = '80px';
}, 5000);
})(bubbleStyle);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
}
.animate {
animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
-webkit-animation: moveUp 5s linear;
/*cubic-bezier(1, 0, 1, 1);*/
}
#keyframes moveUp {
100% {
top: 80px;
}
}
#-webkit-keyframes moveUp {
100% {
top: 80px;
}
}
<body>
<div id="container"></div>
<div id="surface"></div>
</body>
The problem about your code was that it is globally changing the #keyframes moveUp which is causing all the bubbles to move.
The problem with your code is that you're updating keyframes which are applied to all bubbles. I tried another way of doing it by using transition and changing the top position after the element was added to the DOM (otherwise it wouldn't be animated).
The main problem here is to wait the element to be added to the DOM. I tried using MutationObserver but it seems to be called before the element is actually added to the DOM (or at least rendered). So the only way I found is using a timeout which will simulate this waiting, although there must be a better one (because it may be called too early, causing the bubble to directly stick to the top), which I would be happy to hear about.
var bubble = {
posX: 0,
posY: 0,
size: 0
};
var aquarium = document.getElementById("container");
function createBubble(e) {
"use strict";
bubble.posX = e.clientX;
bubble.posY = e.clientY;
bubble.size = Math.round(Math.random() * 100);
var bubbleCircle = document.createElement("div");
aquarium.appendChild(bubbleCircle);
bubbleCircle.classList.add("bubble");
var bubbleStyle = bubbleCircle.style;
bubbleStyle.width = bubble.size + "px";
bubbleStyle.height = bubble.size + "px";
bubbleStyle.borderRadius = (bubble.size / 2) + "px";
bubbleStyle.top = bubble.posY - (bubble.size / 2) + "px";
bubbleStyle.left = bubble.posX - (bubble.size / 2) + "px";
setTimeout(function() {
bubbleCircle.classList.add("moveUp");
}, 50);
}
aquarium.addEventListener("click", createBubble);
body {
background-color: red;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
position: fixed;
top: 80px;
left: 0;
background-color: rgb(20, 255, 200);
}
#surface {
width: 100%;
height: 40px;
position: fixed;
top: 40px;
opacity: 0.5;
background-color: rgb(250, 250, 250);
}
.bubble {
position: fixed;
border: 1px solid blue;
transition: 5s;
}
.moveUp {
top: 80px !important;
}
<body>
<div id="container">
</div>
<div id="surface">
</div>
</body>
Also, I used the classList object instead of className += ... because it is more reliable.
I need to make a colored div move horizontally to the right and when it hits the edge it should double in size and twice the speed rotating around the center.
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
++leftPosition;
if (leftPosition == 800){
--leftPosition;
it stops at 800 px like I told it but it wont go back
Let's clean the code up a bit and implement what you want. In order:
Move to 800px
When 1 is done, go back, twice as fast, and double in size.
We'll do this using one scoped variable: speed. speed will be the default speed and direction.
I have also separated your code in setInterval in order to not block execution of the page.
function move() {
var elem = document.getElementById("box"),
speed = 1,
currentPos = 0;
// Reset the element
elem.style.left = 0+"px";
elem.style.right = "auto";
var motionInterval = setInterval(function() {
currentPos += speed;
if (currentPos >= 800 && speed > 0) {
currentPos = 800;
speed = -2 * speed;
elem.style.width = parseInt(elem.style.width)*2+"px";
elem.style.height = parseInt(elem.style.height)*2+"px";
}
if (currentPos <= 0 && speed < 0) {
clearInterval(motionInterval);
}
elem.style.left = currentPos+"px";
},20);
}
Fiddle: http://tinker.io/7d393 . You'll see, it works.
Think about what happens as soon as leftPosition has reached 799:
++leftPosition; #leftPostion == 800
if (leftPosition == 800){ #This becomes true
--leftPosition; #leftPostion == 799
So you start where you left off, and this will repeat on the next time you call move()
To fix this, you need to add a direction to the movement:
var topPosition = 50;
var leftPosition = 250;
var rightPosition = 800;
var direction = 1;
function move(){
var go = document.getElementById("box");
go.style.left = leftPosition + "px";
go.style.right = rightPosition + "px";
go.style.visibility = "visible";
leftPosition += direction;
if (leftPosition == 800){
direction = -1;
Here's a (mostly) CSS solution: http://tinker.io/7d393/6
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
#box.move{
-webkit-animation: myanim 5s;
animation: myanim 5s;
}
#-webkit-keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
#keyframes myanim
{
0% {top:0;left:0; width: 100px; height: 100px;}
66% {top:0;left:800px; width:100px;height:100px;}
67% {top:0;left:800px; width:200px; height: 200px;}
100% {top:0; left:0; width: 200px; height:200px;}
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box').toggleClass('move')});
});
Here is a mostly jQuery solution: http://tinker.io/7d393/7
HTML:
<div id="box"></div>
<div style="position: absolute; top: 200px"><button>Move it</button></div>
CSS:
#box {
background: blue;
position: absolute;
width:100px;
height: 100px;
}
JS:
//jQuery as I do not know what nav you are using.
$(function() {
$("button").click(function(){
$('#box')
.css({left:0,top:0,width:'100px',height:'100px'})
.animate({left:'800px',top:0,width:'100px',height:'100px'},3000)
.animate({left:'800px',top:0,width:'200px',height:'200px'},20)
.animate({left:0,top:0,width:'200px',height:'200px'},1500);
});
});