self teaching javascript I wanted to create a menu sort of like Netflix where as you scroll right or left you can go through shows/movies, however, it would be with left and right arrows, i.e if I moved right, block2 would be in block1 position, block3 in block2, etc
I was thinking that I could assign each block a position in an array: var menuBar = [block1, block2, block3, block4]; then iterate through the array
for(var i=0; i < menuBar.length(); i++){
switch (e.key) {
case 'ArrowLeft':
i--;
GoThroughMenu();
break;
case 'ArrowRight':
i++;
GoThroughMenu();
break;
}
and GoThroughMenu() would move the blocks
block1.style.left = menuBar[i].style.left + 'px';
block1.style.top = menuBar[i].style.top + 'px';
Right now nothings moving, is there errors in the way I'm going about this?
left and top css properties only work with a non-position: static value (which is the default position value of all elements).
Try giving the menuBar items a position: relative;.
Just add position: relative; into #box. it will work fine.
Check here working example https://jsfiddle.net/milytulip/x52goy3s/2/
#box{
width: 1000px;
height: 200px;
background-color: black;
position: relative;
}