Are you running the script before the DOM has finished loading? e.g. binding the events before the actual DOM-elements have been created. If so, then try placing your JS code inside a Window.onload or document.ready clause
Hey man thanks but I’m not quite sure how to do that. I Google dunno it but from my understanding that will run the function once everything is loaded. I only want to run the script upon mouse hover. Am I correct??
var vid = document.getElementsByClassName("windows");
[].forEach.call(vid, function (item) {
item.addEventListener('mouseover', hoverVideo, false);
item.addEventListener('mouseout', hideVideo, false);
});
function hoverVideo(e)
{
this.play();
}
function hideVideo(e)
{
this.pause();
}
AWESOME MAN THANKS…it works but it doesnt play the video, gonna have to work on that.
Mayu i ask that you explain your code to me???
This is my try at understanding it.
var vid = document.getElementsByClassName(“windows”); //places windows element as vid
.forEach.call(vid, function (item) { //calls each item as an array element and then returns its function
item.addEventListener(‘mouseover’, hoverVideo, false);
item.addEventListener(‘mouseout’, hideVideo, false);
});
function hoverVideo(e)
{
this.play();
}
function hideVideo(e)
{
this.pause();
}
yes vid is the collection of “windows” and the foreach just loops through and sets the eventlistener. If your going down the html5 route then you may want to change to using video tags… this is always a useful site for me http://www.w3schools.com/html/html5_video.asp
It’s the video… I put an alert in the hovervideo method and it displays on mouse over and I put one in hidevideo which also displays when the mouse goes off the frame again. It’s the video or the tag or the this.play()
the alerts work so obviously the class Is accessed. Been googling but cannot find anything