Dynamically resizing div width

Question

I'm trying to create a custom HTML5 video slider (looks like youtube with the red line). It's composed of two divs one on top of the other, and the width of the red div needs to change according to the current video position.

I succeed catching the video position, but am unable to change the red div's width. what am I doing wrong?

HTML:

<video id="VideoWindow" src="../html/media/homepage.mp4" ontimeupdate="VideoTimeUpdated()"/>
<div id="PlaybackIndicatorProgress" style="left: 0%; width: 30%; display: block; background-color: red; height: 3px">

JS:

function VideoTimeUpdated() {
    var myVideo = document.getElementById("VideoWindow");
    var myVideoSlider = document.getElementById("PlaybackIndicatorProgress");
    var CurrentPosition;

    CurrentPosition = Math.round(parseInt(myVideo.currentTime / myVideo.duration * 100));
    CurrentPosition = CurrentPosition + '%'; 
    myVideoSlider.css("width", "CurrentPosition");
}

Thanks!

Jeni.

score 1 · Accepted Answer · 2016-03-13 22:42:07Z

1

To me it looks like you are mixing jQuery and normal javascript here, try this for line 8 in your code:

myVideoSlider.style.width = CurrentPosition;

Explanation: the .css() method is a jQuery method, but you are getting your DOM node (The element you want to change) via the native getElementById() method, so you cannot use .css().

Dimitar is also partially right, since you want to use an variable you cannot set it into quotion marks, otherwise it would be interpreted as a string.

For line 6 to 8 i can say that you are casting (changing) a lot of "data types" around and use rounding which is not really needed, if you use a percentage for the width you can actually use float numbers. You can save two lines of code at the same time by merging line 6, 7 and 8 together:

myVideoSlider.style.width = (myVideo.currentTime / myVideo.duration * 100) + "%";

Please note that i put the calculations into brakets to separate them from the concatination (+ sign), otherwise it could be unclear if you read the code what is happening here since in javascript the plus sign is used for calculations and concatination of strings depending of the "data types" you use.

edited Mar 13, 2016 at 22:42

answered Mar 13, 2016 at 22:03

user2948666

Sign up to request clarification or add additional context in comments.

2 Comments

user2948666 Over a year ago

thanx for the fiddle!

JeniOst Over a year ago

Thanks everyone! TimeWaster - this works perfectly. Now I have to figure out how to be able to drag this 'slider' in a 'goto' manner.

Dimitar Popov · Accepted Answer · 2016-03-13 22:03:53Z

0

CurrentPosition needs to be outside "", because your way "CurrentPosition" is just a string, not a variable.

It should be myVideoSlider.css("width", CurrentPosition);

answered Mar 13, 2016 at 22:03

Dimitar Popov

6845 silver badges13 bronze badges

Collectives™ on Stack Overflow

Dynamically resizing div width

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related