Bottom button does not shift video to bottom where as left and right is working fine

Question

I've put video inside div, one zoom bar to zoom video and four buttons on each side to move video accordingly in left, right, top, bottom side after zooming.

The problem is, left and right button is working but top and bottom buttons do not move video. In Example, the video panning is not working on top and bottom side.

if (parseFloat(document.getElementById("MyVideo").style.top)<=0)
        {
        console.log(parseFloat(document.getElementById("MyVideo").style.top));
        $("#MyVideo").css({"top":parseFloat(document.getElementById("MyVideo").style.top)+1+"%"});

Code link-

https://pastebin.com/Kk6XZuLU

check the code in TOP and BOTTOM Functions.

Answer 1

You're missing some parentheses, otherwise you'd be concatenating that 1 as a string, ending up with 30 + 1 + '%' gives you "301%" etc.

Try a more verbose approach, where you remove unwanted characters from the styles, parse them and add to them properly, and then use them

var top = document.getElementById("MyVideo").style.top.replace(/\D+/g,'');
var num = parseFloat(top) + 1;

$("#MyVideo").css({"top": num + "%"});