Develop Reference

How to start another animation on current position?

So this is my box
<div class="mybox"></div>
And i have a animation
.mybox{
animation:right 5s;
animation-fill-mode:forwards;
padding:50px;
width:0px;
height:0px;
display:block;
background-color:black;
}
#keyframes
right{from{left:0px;}to{left:300px
;}}
#keyframes
left{from{right:0px;}to{right:300p
x;}}
And i have two button
<button onclick="leftFunction">left</button>
<button onclick="rightFunction">right</button>
Then if i click left it will go left while it is going left then i click right i want to stop the left animation and go right but the right animation must start on current position and not teleport and go right.
Please help :(
Im new to stack overflow
Here is the js
function leftFunction() {
document.getElementById("myDIV").style.animation
= "left 4s";
}
function rightFunction() {
document.getElementById("myDIV").style.
animation = "right 4s";
}

There were a number of issues I found with the code that you posted, but you were on the right track.
Your DOM method was looking for an element with an ID of myDIV which does not exist, I changed it to document.querySelector(".mybox") since that is the class name of your div.
You weren't invoking the function call on your onclick handler, not sure you were getting anything to happen at all... Add the () invoke it onclick.
Your code layout was not following normal spacing conventions, but it is difficult to write code into stack overflow, so I understand. I made the changes I saw necessary.
You were setting position values to your div, but there was no position property declared. Position is static by default which doesn't respond to left or right. I used relative as that will keep the div in the document flow.
Changing left on one animation and right on another will maintain the previous left or right values, respectively and could cause your div to shrink or grow unexpectedly. I changed it to only affect the left property.
And now for the solution
Change your keyframes to only update the left property. Call the function from onclick and pass in the event object. This will allow you to have just one function to handle the change in animation, and can take the event target's innerHTML to set the name of the animation desired.
Make use of CSS custom properties, so that value can be mutated in javascript, and make your from properties start at the custom property. In this case --cur-pos.
When the function is called, get the div element, and find it's computed left value with document.getComputedStyle(), then update the custom property --cur-pos with that value. That way the animation always starts where the div is currently positioned.
Et voila! You should be good to go. You might have to tweak the starting --cur-pos value to have the div start where you want, and also update the to values to end where you want, just make sure to choose either left or right for updating horizontal position, not both.
function changeAnimation(e) {
const box = document.querySelector(".mybox")
const pos = window.getComputedStyle(box).left
box.style.setProperty("--cur-pos", pos)
box.style.animationName = e.target.innerHTML
}
.mybox {
--cur-pos: 150px;
width: 100px;
height: 100px;
background-color: black;
position: relative;
animation: right 4s forwards;
}
#keyframes right {
from { left: var(--cur-pos); }
to { left: 300px; }
}
#keyframes left {
from { left: var(--cur-pos); }
to { left: 0px; }
}
<div class="mybox"></div>
<button onclick="changeAnimation(event)">left</button>
<button onclick="changeAnimation(event)">right</button>

Change Text Align On Click

I am looking to have a button that shifts the text alignment to the left side whenever it is clicked. This is the function I currently have that doesn't seem to be working:
function myFunctionLeft() {
document.getElementById("myAnchor").style.left = "-15px";
document.getElementById("myAnchor").style.align = left;
Is there a different way I should be trying to move the text align to the left?

left, right, top, and bottom, only works if the element is position: absolute || relative. Just make #myAnchor position: relative.
See here for more info on positioning.

align is not a valid CSS property. Instead of .style.align = left;, you should be using .style.textAlign = "left";.

There are a few ways to go about something of this proportion, and the best (In my honest opinion) is to make a CSS class to manipulate values. I would go about doing this in using the class .align-left. The CSS would go something like the below:
.align-left {
text-align: left;
left: -15px;
}
And you could toggle the class via the following Javascript:
document.getElementById("myAnchor").classList.toggle("align-left");
This should do what you were attempting to achieve with the above code. I don't know if myAnchor is what you are aligning or if it is the button or what, but you should be able to use my code for whatever.
Anyways, I hope it helps, try it out and see how it goes. Try the developer tools equipped in your browser to see if there is issue in your inclusion and good luck!

Animate div from middle of div to bottom right of screen into a fixed position

What I am trying to figure out is how to animate a div that will start out in the middle of a div that is in the middle of a page. The div originally should not have a position: absolute. Unless it is not possible, I would like it not to start with that because it seems very tough to have any data below it. It's not going to be that big of a box. I am guessing anywhere between the height of 100px and 600px, with a width between 400px and 800px.
I originally found this JsFiddle Example that does a great job and almost exactly what I need. But the div starts with an absolute position and it is already located at the bottom right of the page to be animated.
Once the div is at the bottom right of the page, it needs to be fixed there so that I can scroll up and down the page without it moving. At this point I am not worried about being able to push it back up to the spot in which it came.
A couple things I tried: Lining it up in the position I desired, and then on the click of a button, add a class with the attribute position: absolute and calling the animate function like this:
chatWindow.stop().animate({
bottom: 0
, right: 0
}, 2000);
But my guess is that it originally needs to the the position set as in top: 0; left: 0 and that's why it won't work.
I already have it working without any animation and would love to be able to figure out how to animate this thing. Without animation, it's as simple as toggling a class with it's normal positions attributes with one that has a position: fixed; bottom: 0; right: 0.
Here is a Codepen Example that I created to show really what I need other than right animation part not being there. Any help would be awesome as I've been toying with this for quite some time now.

If you want an animation from left to right, you will have to play with left and top values. But the negative point is that will cause a weird animation because you want to keep a relative position of the box in the beginning.
So when you will do the animation, it will start from the very top left on the window, which is not good.
Like this
To avoid that, you will have to use absolute position in the beginning state. You said in your question you doesn't want it but I think it is required to get the wanted visual effect.
See here the live example with good effect
However, to keep a pretty nice animation, but I know it is not what you want, you can play with right and bottom values. It will make the box appears from the right and bottom corners of the window.
Like this

One possibility, still using absolute positioning, based on what's going on in your codepen example, would be to fake the current positioning by adding the following CSS:
.container {
padding-top: 250px;
}
.center-window {
position: absolute;
right: 50%;
margin-right: -200px; /* i.e. half of its width */
bottom: 100%;
margin-bottom: -250px; /* i.e. its height */
}
Then you could animate the right, bottom, and margin properties accordingly. See https://codepen.io/anon/pen/RaOJYY (though it doesn't currently do anything with the padding). Of course, if your not sure of the dimensions of .center-window, perhaps this solution won't quite work.

What changes when appending a relative element?

I've noticed that when I append a relative element to another element something changes and the subsequent elements are always added to the right of the previous, so it seems that at some point during the append a left value is changed but I can't figure out which?
A small example would be adding 5 spans to a div and placing them all at left:10 and top:10
To have them on top of each other you'd have to take the amount of items added from the left value. i.e once you add 5 items the following item's left will be 10-5*10
Are there any other ways to find out what the left value of the appended item should be so it goes on top of the previous?
Here's some code examples and a jsfiddle link
Html
<div id="container"></div>
<span id="el" class="drag"></span>
Javascript
for(var i=0;i<5;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
$('#container').append(element);
$(element).css({
left: 10,
top: 10,
position: 'relative',
marginRight: 0
});
}
$('.drag').draggable();
Update:
I'm not so much looking for a "fix" as I have it working I'd just like to know if there's a value change in the element once a relative element is appended or removed from it

I'm not so much looking for a "fix" as I have it working I'd just like
to know if there's a value change in the element once a relative
element is appended or removed from it
The css from an element doesn't change if you add another element to it if that is what you are asking. The behaviour you see is caused by the browser fitting the elements like you asked it to. Since 'left: 10; top: 10;' is already occupied, it tries to fit it somewhere near there. That said, there is nothing stopping you from counting the amount of elements that a certain element contains. ($('#container').children().length), or the offset of an element on the page (the actual position; $('#el4').offset().left or $('#container .drag:last-child').offset().left). Because relative elements position themselves always relative to other elements, this is most likely not going to help you much.
To have them on top of each other you'd have to take the amount of
items added from the left value. i.e once you add 5 items the
following item's left will be 10-5*10
Are there any other ways to find out what the left value of the
appended item should be so it goes on top of the previous?
If you want the elements to actually stack, you probably need to alter the code so they are properly displayed next to each other, then use margin-left to move the left border into the element, so they are displayed over each other. .draggable() will calculate the position from there, and as long as you don't alter the DOM after you've made the elements draggable you should be fine.
Example jsfiddle: http://jsfiddle.net/LmW8T/2/
for(var i=0;i<80;i++)
{
var element=$('#el').clone();
$(element).html(i);
$(element).attr("id","el"+i);
//$element.addClass('element');
$('#container').append(element);
}
$('#el').remove();
$('.drag').draggable();
With CSS:
.drag {
width: 40px;
height: 40px;
border: 1px dotted blue;
background: #FEEFEF;
display: block;
float: left;
margin-left: -25px;
}
#container {
padding-left: 25px;
width: 200px;
}

This happens because when you use position:relative the element still occupies its space on the page, affecting the other elements. That's why each 10px left property you add, pushes the next element to the left also.
As already pointed out on the comments, using position:absolute solves the issue, as the "absolute" value makes the element float out from the page, and it doesn't occupies its space anymore, also it does not affect other elements.

Interactive HTML webpage

EDIT: Thanks for a lot of great examples on how to solve these. I cant decide between who to accept yet, but I will go though all examples and see which I like the most. Great feedback guys! =D
I normally do these kind of things in flash, but this time it has to be compatible with mac, iPads and all those units too.
So, what do I need help with?
I've got a picture, with some "hotspots" on. I want to be able to click any of those hotspots to show some information.
This should be fairly basic and easy to achieve, but since I've never done this in html before I have to ask you guys =)
So, what would be the best way to do this? It have to be compatible with any browser and device, and it doesnt need to be very advanced. If it's possible to add effects to the box (sliding out, fading in, or anything like that) then thats a nice bonus, but not something I need.
Any help would be great!
BREAKDOWN:
I have a background image with some "hotspots" (numbers 1 and 2 in my example). The users should be able to either hover the mouse over any of these or click it to get more information, as seen in picture #2
This is that happens when you hover/click any of these hotspots.
Text and image is displayed inside a nice little info box.
If the user clicks "more information" it will open up even further to display more information if available. Like in this img:

I don't think the Javascript approach is really necessary here. I created a little CSS-only mock-up for you on JSBin.
Basically the point is that you enclose the image in a relatively positioned div, then absolute position the hotspots inside the same div. Inside the hotspots divs you will have the more info elements, showing only on :hover of their parents.
This makes it simple, and far more accessible.
Update: cropping the image equally from both sides
If you want to keep the image centered and still not use any javascript, you could set the required image as a background-image of the container, and setting its background-position parameters to center center.
You would have to make sure that the width of this div is set to the width of your image, and the max-width to 100%, so that when the window gets resized below the image width it stays at the center.
Now, a problem that I encountered here is how to make the hotspots stay center relatively to the image. I solved it this way:
I created a wrapper div for the hotspots with these characteristics:
margin: 0 auto;
position: relative;
width: 0px;
This basically makes sure that the wrapper div finds the center of our image. Then, you would position the hotspots relatively to the top-center position of the image, instead of the top-left as a starting point.
Then you have what you are looking for.
Working demo

Here's another approach, and in my opinion far superior to using a map or excessive JS. Place <div> elements on top of the element with the background-image and have HTML and CSS do the heavy lifting for you.
See it on JSFiddle
HTML
The HTML should seem pretty each enough to understand, we create <div>s with the class hotspot and rely on certain things being present. Namely .text (to show digit), .hover-popup (to show on hover) and .click-popup (which is inside .hover-popup and is shown when clicked).
<div id="hotspot1" class="hotspot">
<div class="text">1</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
<div id="hotspot2" class="hotspot">
<div class="text">2</div>
<div class="hover-popup">
I was hovered!
<div class="click-popup">
I was clicked on!
</div>
</div>
</div>
CSS
This is where most of the magic happens, see the comments for further explanation.
/* These two position each hotspot */
#hotspot1 {
left:15%; /* we could use px or position right or bottom also */
top:20%;
}
#hotspot2 {
left:35%;
top:25%;
}
/* General styles on the hotspot */
.hotspot {
border-radius:50%;
width:40px;
height:40px;
line-height:40px;
text-align:center;
background-color:#CCC;
position:absolute;
}
.hotspot .text {
width:40px;
height:40px;
}
/* Show the pointer on hover to signify a click event */
.hotspot .text:hover {
cursor:pointer;
}
/* hide them by default and bring them to the front */
.hover-popup,
.click-popup {
display:none;
z-index:1;
}
/* show when clicked */
.hotspot.clicked .click-popup {
display:block;
}
/* show and position when clicked */
.hotspot:hover .hover-popup {
display:block;
position:absolute;
left:100%;
top:0;
width:300px;
background-color:#BBB;
border:1px solid #000;
}
JavaScript (with jQuery)
Unfortunately you're going to have to use some JavaScript for the clicking part as CSS doesn't have a 'clicked' state (outside of hacks with checkboxes). I'm using jQuery because it's dead easy to do what I want.
$(document).ready(function () {
$('.hotspot').click(function () {
$(this).toggleClass('clicked');
});
});
Creating the arrow
Over at css-tricks you can find a tutorial for attaching an arrow to a element using the :before and/or :after pseudo-elements. You can even 'simulate' a border around them by placing the :after element on top of the :before. But yea, lots of resources on how to do this.

You should be able to use the onclick or OnMouseOver event in the map area (define the href as "").
An example using OnMouseOver is here: http://www.omegagrafix.com/mouseover/mousimap.html

Give a class for that image in html (Ex: imgclass). And in javascript(using jquery), build that hover box in html format and bind it to 'mouseover' event of that image.
For example:
function bindhtmltoimage() {
myimg = $('body').find('.imgclass');
divSlot.each(function (index) {
$(this).bind('mouseover', function () {
try {
//position the hover box on image. you can customize the y and x axis to place it left or right.
var x = $(this).offset().left;
var y = $(this).offset().top;
var position = $(window).height() - ($("#divHover").height() + y);
var widthposition = $(window).width() - ($("#divHover").width() + x);
if (position < 0 || widthposition < 0) {
if (position < 0) {
$("#divHover").css({
position: 'absolute',
left: x + 20,
top: y - $("#divHover").height() - 20
});
}
if (widthposition < 0) {
$("#divHover").css({
position: 'absolute',
left: x - $("#divHover").width(),
top: y + 20
});
}
}
//build your html string for that hover box and apply to it.
$('#divHover').html("your Html content for that box goes here");
$('#divHover').show();
//if you want the box dynamically generated. create the html content and append to the dom.
}
catch (e) {
alert(e)
}
});
});
}
it will work fine in desktop and mobile. if you face any problem in touch devices, bind the function to click event instead of 'mouseover'.
Also, for map approach, i strongly recommend SVG instead of images.