To start off, I’ll give you guys the codepen.
The following problem has been solved, see below this blockquote
The project has already been completed, but I’m trying to make it better. Basically, when a channel is streaming, I grab a preview of their stream, but I don’t show it. I only want a preview of the stream to pop up when the user hovers over the channel’s row of information.
The problem is, both the channel rows and the video previews are grouped in a class. I figured out how to select a specific row from the class by using the following code:
channelRow.mouseover(function(){ $(this)... }); channelRow.mouseout(function(){ $(this)... });
Notice I am using the mouseover and mouseout functions, because I want the preview of the stream to disappear once the user’s mouse is not hovering over the channel. The only part that I am stuck on is displaying the preview of the stream. I only want to display one of the elements in the class of previews, and I want the preview to be relevant to the channel that I am hovering over. Since the stream preview is located inside the channel row, I tried this.
channelVideo = $('.channelVideos'); channelRow = $('.channelRow'); channelRow.mouseover(function(){ if($(this).hasClass('streaming')){ $(this).children(".channelVideos").css('display', 'block'); } }); channelRow.mouseout(function(){ $(this).children(".channelVideos").css('display', 'none'); });
*However, this doesn’t seem to be working. (this snippet can be found at the bottom of my JavaScript code)
Any suggestions would be appreciated. Whether my code is wrong, or whether there is a better way of approaching the situation, I would love it if you guys could help me out. Thanks guys.
*Solution has been found, but new bugs have arisen. See blockquote below.
The problem was solved using the following code:
channelRow.mouseenter(function(){
if($(this).hasClass(‘streaming’)){
$(this).find('.channelVideos').show();
}
});
channelRow.mouseleave(function(){
if($(this).hasClass(‘streaming’)){$(this).find('.channelVideos').hide()
}
});
(notice that mouseenter and mouseleave was used to prevent the function from running multiple times while the mouse was hovering over it.)
List of bugs I need help with:
All rows should have a little animation when you hover over them. Currently, some of the rows are not having this effect.
Rows that are streaming should get bigger and display a preview of the stream when they are hovered over. They do this, but it’s really buggy. You’ll see what I mean if you hover over it several times really quickly. Also, the animation sometimes occurs when I hover over the channel below it.
When I add a channel to the list using the button on the bottom, the animations that display previews of the stream all stop working together. This one really confuses me.
My all, offline, and online buttons aren’t working.
Something is telling me that all these bugs are connected in some way…