Displaying Twitch Streamer Information ( 150 views...no replies?!?! )

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…

I’m guessing from your title edit that you still need help. Here are some tips on getting help from the forums:

  1. The more you write, the more people need to read and the less likely you are to get help, so keep it as simple as possible
  2. If the first thing people read when clicking on your topic is “The following problem has been solved”, then most everyone is going to move on.
  3. In keeping with points 1) and 2), if your problem has been solved and you have another problem, make a new topic. At the very least, delete all of the text for the first problem.
  4. Generally, do everything you can to make it easy for people to help you.

Also, think about what it means when you have a “list of bugs” for people. This is your project, so try not to give people lists of things to do for you. Yeah, these bugs might be connected, but if you have good reason to believe that, then you should be able to figure out where that problem is and, if needed, ask a more specific question.

Now, I can see some issues in your code that should get you working in the right direction. First, you’ll want to start using console.log to check that element references are what you’re expecting. For instance, in your ‘all’, ‘offline’, and ‘online’ click handlers (starting on line 171), add console.log(streamers) and see if the element that pops up in the console is what you think it should be. Second, your mouseenter and mouseleave handlers are being bound before many of the elements have been rendered by the AJAX call. You’ll want to use event delegation to target those. Something like:

$('.streamers').on('mouseover', '.channelRow', function(event) {
    // hide/show stuff here
})

Now you don’t have to worry about binding directly to .channelRow.

That should get you started.