I'm attempting to write a horizontal slider without JQuery for a project I'm doing for my own practice/enjoyment.
Here is the relevant code:
function moveit() {
"use strict";
document.getElementById("position").style.left = window.event.clientX + "px";
}
window.onload = function () {
"use strict";
findtime();
document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
var mousemove;
document.getElementById("scrollbar").onclick = function () {
mousemove = window.setInterval("moveit()", 1000);
};
document.getElementById("scrollbar").mouseup = function () {
window.clearInterval(mousemove);
};
};
Needless to say I'm having issues with it. It constantly generates the error on Chrome, Firefox, etc.:
Uncaught TypeError: Cannot read property 'clientX' of undefined
Now if I run the following code it works, however (but is not useful for following mouse position):
document.getElementById("position").style.left = 12 + "px";
The HTML is as follows:
<?php include("header.php"); ?>
<div>
<video id="thevideo">
<source src="movie.ogv" type="video/ogg" />
</video>
</div>
<div>
<span id="currenttime" contenteditable="true">0:00</span> / <span id="totaltime"></span>
</div>
<div id="scrollbar">
<div id="position" draggable="true"></div>
</div>
<?php include("footer.php"); ?>
Here is something I made a while back, maybe you can adjust it to your program.
var scrollTimer;
function Timer(callback, delay) {
var timerId, start, remaining = delay;
this.pause = function() {
window.clearTimeout(timerId);
remaining -= new Date() - start;
};
this.resume = function() {
start = new Date();
timerId = window.setTimeout(callback, remaining);
};
this.resume();
}
function scroll(down) {
var scrollframe = document.getElementById("contentframe");
var curY = document.all?
scrollframe.contentWindow.document.body.scrollTop
: scrollframe.contentWindow.window.pageYOffset;
var delta = 5;
var newY = down? curY+delta : curY-delta;
scrollframe.contentWindow.scrollTo(0,newY);
}
function autoscroll(down) {
scroll(down);
scrollTimer = new Timer(function() {
autoscroll(down);
}, 20);
}
function stopscroll() {
scrollTimer.pause();
}
The function scroll(boolean down) causes a single delta
incremental upward or downward scroll to the iframe contentframe
. The timer is used to repeat that action, and here is how you would use it:
<a href=#>
<img src="scroller/arrowTop.png" title="Scroll Up"
onMouseOver="autoscroll(false);" onMouseOut="stopscroll();"/>
</a>
Hope this helps.
You're almost there - there's no window.event
object in standard JS. So use the DOM Event Interface :
function moveit(e) {
"use strict";
document.getElementById("position").style.left = e.clientX + "px";
}
window.onload = function (e) {
"use strict";
findtime();
document.getElementById("scrollbar").style.width = document.getElementById("thevideo").offsetWidth + "px";
var mousemove;
document.getElementById("scrollbar").onclick = function () {
mousemove = window.setInterval(moveit, 1000);
};
document.getElementById("scrollbar").mouseup = function () {
window.clearInterval(mousemove);
};
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.