Twitch TV: How Do I Get Information Appended to Display Screen To Not Show on Buttons Mouseout?

Hi folks,

Here’s my scenario, I have enabled some features to cause the display screen to change from blue to black when the “online”, “offline”, and “All” are moused over or clicked, and then change from black back to blue on mouseout. However, because after you click anyone of the buttons, information is left on the screen, so on mouseout, the screen is blue, and left with the information displayed on there. But, because I want the blue screen to function only as a video screen, I don’t want any information to display on the screen when it is blue aka video-state. I’d appreciate it if someone could help me achieve this! Thanks so much in advance!

Here is my Code Pen: https://codepen.io/IDCoder/pen/mXMqGV?editors=0010

Here is my current code that enables display to change colores upon mouseover and mouseout:

`
//…change video screen to tv state…
//for “Online” button
var tvStuff = document.querySelector(".online-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

//for “Offline” button
var tvStuff = document.querySelector(".offline-status");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

//for “All” button
var tvStuff = document.querySelector(".online-and-offline");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});

// for “searchbox field”
var tvStuff = document.querySelector(".searchbox");
tvStuff.addEventListener(“mouseover”, function(){
$(".displayOutPutHere").addClass(“on”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".displayOutPutHere").removeClass(“on”);
});
tvStuff.addEventListener(“mouseover”, function(){
$(".TV-screen").addClass(“on2”);
});
tvStuff.addEventListener(“mouseout”, function(){
$(".TV-screen").removeClass(“on2”);
});
`

You are using $(item).hide(), which sets the style prop. And that overrides every other selector. Meaning you can’t select them and give a higher specificity style.

Instead, remove all $(item).hide() calls, and set a class on the items so that you can hide them on mouseOut, and show them on mouseEnter.

.hideItems {
  display: none;
}

/* then, use the relevant one... */
$('.online, .all').removeClass('hideItems')
$('.online, .all').addClass('hideItems')

Hi @JM-Mendez, thanks for the help…this is kind of tricky :neutral_face::thinking::persevere: can you do a fork? If possible?

Actually, you don’t have to delete all the item.hide() calls. I was mistaken. All you have to do is hide and show the actual items on mouse events. Also, you can define all your similar mouse events together.

//for "Online" button
var tvStuff = document.querySelector(".online-status");
  tvStuff.addEventListener("mouseover", function(){
    $(".displayOutPutHere").addClass("on");
    $(".TV-screen").addClass("on2");
    $('.online, .all').show()
  });

  tvStuff.addEventListener("mouseout", function(){ 
    $(".displayOutPutHere").removeClass("on"); 
    $(".TV-screen").removeClass("on2"); 
    $('.online, .all').hide()
  });



//for "Offline" button
var tvStuff = document.querySelector(".offline-status");
  tvStuff.addEventListener("mouseover", function(){
    $(".displayOutPutHere").addClass("on");
    $(".TV-screen").addClass("on2");
    $('.offline, .all').show()
  });

  tvStuff.addEventListener("mouseout", function(){ 
    $(".displayOutPutHere").removeClass("on"); 
    $(".TV-screen").removeClass("on2");
    $('.offline, .all').hide()
  });



//for "All" button
var tvStuff = document.querySelector(".online-and-offline");
  tvStuff.addEventListener("mouseover", function(){
    $(".displayOutPutHere").addClass("on");
    $(".TV-screen").addClass("on2");
    $('.offline, .all').show()
    $('.online, .all').show()
  });
  tvStuff.addEventListener("mouseout", function(){ 
    $(".displayOutPutHere").removeClass("on"); 
    $(".TV-screen").removeClass("on2"); 
    $('.offline, .all').hide()
    $('.online, .all').hide()
  });


forgot the link to the fork

Wow! @JM-Mendez, I’m grateful! I’m going to go over this response in depth. Now I just need to strip out the words, “Press Buttons Below” and the blinking symbol, while the screen is black.

I’m just trying to make web apps that have a user experience close to a physical electronic device. …trying to create innovative javascript interactions to showcase to potential employers. My moto is I either go big or go home!

That’s the spirit! It’s my motto too!

1 Like