Develop Reference

Javascript: How do i target selected elements in a slideshow when hovering over one element?

Alright, so I'm working on my own javascript slideshow which consist of cards. Right now I'm adding/looping through the cards and adding an eventlistener (mouseover and mouseout) to check if the user hovered over chosen card.
Now to the problem. I need to be able to target all of the cards (part 1, see image) which comes before the chosen card of the user and also all of the cards (part 2, see image) which comes after. But I have to target them individually. Basically the cards in part 1 will get one kind of styling and the cards in part 2 will get another one. The chosen card will get its own styling.
This is what I have so far. If someone could point me in the right direction, that would be great, thanks. I don't want to use any libraries, strictly javascript.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>

You can select the particular card and apply class name using jquery.
var cards = [];
cards = document.querySelectorAll('.card');
for (var i = 0; i < cards.length; i++) {
cards[i].addEventListener('mouseover', function() {
//Do something
$(this).addClass('selected');
console.log('Mouseover: Do something');
});
cards[i].addEventListener('mouseout', function() {
//Do something
$(this).removeClass('selected');
console.log('Mouseout: Do something');
});
}
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.selected{
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
you can even use simple css which will be comman for all the card.
when card class is hovered this css will execute.
.card:hover{
background-color: blue;
}

You can set class for group/part 1, current card and group/part 2 separately.
You can possibly also listen to bubbling phase of event instead of multiple listener registration.
Check.
let ul = document.querySelectorAll('ul')[0];
ul.addEventListener('mouseover', function(e) {
if(e.target.className.indexOf("card") === -1) { return; }
let currentFound = false;
document.querySelectorAll('.card').forEach(function(card) {
if(card === e.target) {
card.classList.add("current-card");
currentFound = true;
}
else
if(currentFound) {
card.classList.add("next-cards");
}
else {
card.classList.add("previous-cards");
}});
});
ul.addEventListener('mouseout', function() {
document.querySelectorAll('.card').forEach(
function(card) {
card.classList.remove("previous-cards");
card.classList.remove("next-cards");
card.classList.remove("current-card");});
});
.container {
list-style: none;
margin: 0px;
padding: 0px;
}
.card {
display: inline-block;
background-color: #fff2cc;
width: 100px;
height: 150px;
color: #000;
text-align: center;
}
.previous-cards {
background-color: crimson;
}
.next-cards {
background-color: darkred;
}
.current-card {
background-color: indianred;
}
<ul class="container">
<li class="card">Card-1</li>
<li class="card">Card-2</li>
<li class="card">Card-3</li>
<li class="card">Card-4</li>
<li class="card">Card-5</li>
</ul>
If you would like to preserve the colors until next hovering just remove the mouseout listener and put its logic to start of mouseover listener right after if block.

I would do this with CSS and it's sibling selector:
.card {
background-color: red;
}
.card:hover ~ .card {
background-color: green;
}
If you need to use JavaScript, use [...mouseEnterCard.parentElement.children].indexOf(mouseEnterCard) to get the element index and then loop over the elements with a lower/higher index.

Javascript code to expand navigation bar not working as expected

I'm working on a navigation bar for my website and I've made some Javascript to go along with the CSS. Before you run it, make sure the result window is less than 760 pixels wide.
function compressNavbar() {
var x = document.getElementById("navbar");
if (x.className === "responsive-h2") {
x.className += " responsive-h2-expand";
} else {
x.className = "responsive-h2";
}
}
ul.blue {
background-color: DodgerBlue;
}
ul.blue * {
color: white;
}
/* Horizontal navbar */
ul.horizontal-navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.horizontal-navbar li {
float: left;
}
.horizontal-navbar li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* responsive */
#media screen and (max-width: 760px) {
ul.responsive-h2 li {
display: block;
}
ul.responsive-h2 li:not(:first-child):not(:last-child) {
display: none;
/* Remove all links except home and the menu button */
}
ul.responsive-h2-expand {
position: relative;
}
.responsive-h2-expand li:last-child {
position: absolute;
right: 0;
top: 0;
}
ul.responsive-h2-expand li {
float: none !important;
display: block !important;
}
ul.responsive-h2-expand li * {
text-align: left !important;
}
ul.responsive-h2-expand li a {
padding: 10px 14px;
padding-left: 18px;
padding-bottom: 11px;
}
ul.responsive-h2-expand li {
list-style-type: none;
}
}
<ul class="responsive-h2 horizontal-navbar blue" id="navbar">
<li>Home</li>
<li>link</li>
<li>link</li>
<li>
<a href="javascript:void(0)" onclick="compressNavbar()">
Menu
</a>
</li>
</ul>
The beginning works fine - we have a nice, styled navbar with all links missing except Home and the menu button. But when I press the menu button, the expanded navbar is not styled with my blue class and does not feature all of my links. Additionally, when Menu is pressed again, most of my styling is missing.
What's wrong with my code that's making this happen? As I'm new to JS, I assume it's that- I think I might be doing something wrong with className but I don't know what or how to fix it.
Thanks in advance.

I think it's better to use classList.toggle:
function compressNavbar() {
var x = document.getElementById("navbar");
x.classList.toggle("responsive-h2-expand");
}

I think you are not replacing class properly
function compressNavbar() {
var x = document.getElementById("navbar");
if (x.className === "responsive-h2") {
x.className += " responsive-h2-expand";
// you are not adding "blue" and "horizontal-navbar" classes back
// ex: x.className = "responsive-h2 responsive-h2-expand horizontal-navbar blue"
} else {
x.className = "responsive-h2";
}
}
you can use classList methods to manipulate class effeciently

Menu want get fixed to the top on scroll

I'm trying to accomplish a simple effect of sticking the menu to top of the browser window when scrolling passes a certain point, but something went wrong and the menu wont get fixed to the top. From the libraries I'm using jQuery and animate it.
My code is as follows:
HTML:
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>
CSS:
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
JS (jQuery):
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
var nav = $("nav").offsetTop();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
});

So first off, you only use the code once, which is when the document is loaded. You're going to want to check everytime you scroll the document as the code should obivously be triggered once you scroll a certain amount.
$(document).scroll(function(){
var nav = $("nav").height();
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
} else {
$("nav").removeClass("fixedNav");
}
});
body {
background: black;
height:700px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
display: block;
height: 100px;
width: 100%;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 35px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent nav">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>

You need to use the event scroll and check the offset there.
When the user is scrolling, toggleClass will add/remove the class based on the condition $window.scrollTop() > navOffset which will return true or false
var $window = $(window);
var $nav = $('nav');
var navOffset = $nav.offsetTop();
$window.on('scroll', function() {
$nav.toggleClass('fixedNav', $window.scrollTop() > navOffset);
});

add an scroll event to check your scroll position
for example:
$(document).scroll(()=>{...});
like here
This is a very plain demo, it only demonstrate wha i meant

You can use a library like scrollMonitor to accomplish your task as scroll monitoring have its own caveats.
You can let scrollMonitor to lock position of your menu when it leaves viewport, something like this:
var $menu = document.querySelector('nav'); // It is better to use CSS class name instead
var watcher = scrollMonitor.create($menu);
watcher.lock();
watcher.exitViewport(function() {
$menu.classList.add('fixedNav');
});
watcher.enterViewport(function() {
$menu.classList.remove('fixedNav');
});
Please refer this example as it closely matches your task.

You don't fire the check for the current scroll on scroll event. That's an event you're looking for.
Also you could check the scrollTop on the document (it's more error proof in jQuery), not on the window as it doesn't always work.
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
});
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
});
$(document).on('scroll', function() {
var nav = $("nav").offsetTop();
if($(document).scrollTop() > nav) {
$("nav").addClass("fixedNav");
console.log('Hello!');
} else {
$("nav").removeClass("fixedNav");
}
})
});

That is what you are looking for:
$(document).ready(function(){
$("nav ul li").mouseenter(function() {
$(this).addClass("wiggle");
}) ;
$("nav ul li").mouseleave(function() {
$(this).removeClass("wiggle");
}) ;
});
$(document).ready(fixedHeader) ;
$(window).scroll(fixedHeader) ;
function fixedHeader() {
var nav = parseInt($("nav").css("margin-top")) ;
if($(window).scrollTop() > nav) {
$("nav").addClass("fixedNav");
}
else {
$("nav").removeClass("fixedNav");
}
}
body{
height: 1000px;
}
.fixedNav {
display: block;
position: fixed;
top: 0;
width: 100%;
background: rgba( 0, 0, 0, .8);
height: 100px;
}
nav {
width: 400px;
margin: 20px auto;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
overflow: auto;
width: 130px;
}
nav ul li a {
font-size: 20px;
font-family: 'Indie Flower', cursive;
color: #fff;
cursor: pointer;
transition: 500ms linear all;
}
nav ul li a:hover {
color: #123456;
transition: 500ms linear all;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="animatedParent">
<ul class="animated bounceInUp delay-750">
<li class="animated">O meni</li>
<li class="animated">Katalog</li>
<li class="animated">Razno</li>
</ul>
</nav>

Jquery script for submenu, how can i fix it?

This code works great if i want to make toggle effect by clicking on the menu. You can see the result here.
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
});
var $subs = $links.next();
});
My problem is .menu-item a, with this the script executes the code for all links of the menu(also for links that don't have submenu links). But in my case i want to execute only for the links that contains submenu links.
If i try t replace .menu-item a with .menu > ul li a doesn't work.
The structure of the html(generated by php) code is like this:
<ul id="menu-menu-1">
<li class="menu">
<a>News</a> //first main menu
<ul class="sub-menu" style="display: none;"> //second grey menu
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</li>
</ul>
The relevant css:
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
.menu li a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
text-decoration: none;
width: 100%;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
display: none;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
How can i fix it?

You need to check, on the top of the function, if the current link has a submenu attached. Check the first two lines of the click callback:
$(document).ready(function () {
var $menu2 = $("#menu-2");
var $links = $('#menu-menu-1 .menu-item a').click(function () {
var submenu = $(this).next(".sub-menu");
var hasSubmenu = submenu.length >= 1;
if(hasSubmenu) {
handleLinkWithSubmenu.call(this, submenu);
} else {
handleLinkWithoutSubmenu.call(this);
}
});
var $subs = $links.next();
function handleLinkWithSubmenu(submenu) {
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
function handleLinkWithoutSubmenu() {
$subs.hide();
}
});

If I understand your question correctly (only execute if selector has children), then replace with this:
var $links = $('#menu-menu-1 .menu-item a').click(function (e) {
if($links.children().length > 0){
e.preventDefault();
var submenu = $(this).next();
$subs.not(submenu).hide();
var isVisible = submenu.stop(true, true).is(':visible');
$menu2.stop(true, true);
if (isVisible) {
submenu.hide(500);
$menu2.slideUp(300);
} else {
$menu2.slideUp(300, function () {
$menu2.slideDown(300);
submenu.show(500);
});
}
}
});

I think something like this will work for what you need, it's a lot cleaner and more compact:
UPDATED:
http://jsfiddle.net/FZHC8/2/
<head>
<script src="jquery-1.10.2.min.js"></script>
<style>
.menu {
background-color: #F6F6EE;
border-radius: 1px;
height: 30px;
padding: 10px 10px 0 5px;
width: 100%;
}
a {
color: #716B6B;
display: block;
float: left;
font-size: 14px;
padding: 2px 17px;
width: 100%;
cursor:pointer;
}
#menu-2 {
background-color: #DCDCD5;
border-radius: 1px;
height: 33px;
position: relative;
width: 100%;
z-index: -1;
}
li{
list-style:none;
}
</style>
</head>
<body>
<ul id="menu-menu-1">
<li class="menu">
<a>News</a>
<ul class="sub-menu">
<li>
<a>Mondo</a>
<a>News Live</a>
<a>Quotidiani Cartacei</a>
</li>
</ul>
<a>News1</a>
<ul class="sub-menu">
<li>
<a>Mondo1</a>
<a>News Live1</a>
<a>Quotidiani Cartacei1</a>
</li>
</ul>
</li>
</ul>
<script>
(function () {
$("li > ul").hide();
$(".menu > a").click(function (e) {
$(this).parent().children(".sub-menu").slideUp(200);
$(this).next(".sub-menu").slideDown(200);
})
})();
</script>
</body>

jQuery idTabs - Auto Change and Fade With Mouseover

I'm using jQuery idTabs in an upcoming redesign for my website. I've styled it to my content and it looks great, but there are a couple of functions which are missing what I require.
First, here's what I'm using right now:
<script type="text/javascript">
$("#featured").idTabs("!mouseover");
</script>
Obviously, the code above means that it changes to the next tab when hovered, making clicking unnecessary.
Here's what I want to do:
1 - Have the tabs automatically changed every specified number of seconds when the user is not interacting with them.
2 - When they change, have them fade. There is actually already a function for this in idTabs:
<script type="text/javascript">
$("#adv2").idTabs(function(id,list,set){
$("a",set).removeClass("selected")
.filter("[href='"+id+"']",set).addClass("selected");
for(i in list)
$(list[i]).hide();
$(id).fadeIn();
return false;
});
</script>
The only problem is that it doesn't work well with the mouseover event. Rather than fading-in on each mouseover, it simply changes automatically.
Can anyone help me out with this?
It'd be greatly appreciated! Thanks!

Here i have done complete bins for changing tab automatically on some time interval without mouse over or click. please check demo link once.
Demo: http://codebins.com/bin/4ldqp7r/2
HTML
<div>
<div id="adv2">
<ul>
<li>
<a class="selected" href="#ani1">
1
</a>
</li>
<li>
<a href="#ani2">
2
</a>
</li>
<li class="split">
</li>
<li>
<a href="#ani3">
3
</a>
</li>
<li>
<a href="#ani4">
4
</a>
</li>
</ul>
<span>
<p id="ani1">
Click on the tabs to see a nice fade.
</p>
<p id="ani2">
You're not impressed?
</p>
<p id="ani3">
But it's so cool... in a nerdy way.
</p>
<p id="ani4">
Download idTabs and have your cake. You can eat it too.
</p>
</span>
</div>
</div>
jQuery
$(function() {
var tabList, interval = 1800;
var tabDiv = $("#adv2").get(0);
var rotate = function() {
var current = $("#adv2 ul a.selected").attr("href");
var index = ($.inArray(current, tabList) + 1) % tabList.length;
tabClick(tabList[index], tabList, tabDiv);
}
var timer = setInterval(rotate, interval);
var tabClick = function(id, list, set, action) {
if (!tabList) {
tabList = list;
}
if (action && action.event == "click") {
timer && clearInterval(timer);
timer = setInterval(rotate, interval);
}
$("a", set).removeClass("selected").filter("[href='" + id + "']", set).addClass("selected");
for (i in list) {
$(list[i]).hide();
}
$(id).fadeIn();
return false;
}
$("#adv2").idTabs(tabClick);
});
** CSS:**
body{
font: 10pt Calibri,Arial,sans-serif;
text-align: center;
color: #FFFFFF;
background: none repeat scroll 0 0 #111111;
margin: 0;
padding: 0;
}
#adv2 {
background: none repeat scroll 0 0 #181818;
margin-left:5%;
margin-top:5%;
width: 500px;
}
#adv2 ul{
display: block;
float: left;
height: 50px;
width: 50px;
margin:0px;
background:#333;
}
#adv2 li {
float: left;
}
li {
list-style: none outside none;
}
#adv2 li a.selected {
background: none repeat scroll 0 0 snow;
color: #111111;
font-weight: bold;
}
#adv2 li a {
display: block;
height: 25px;
line-height: 22px;
text-decoration: none;
width: 25px;
}
#adv2 li a:hover {
background:#0A0A0A;
}
#adv2 li.split {
clear: both;
}
a{
color: #FFFFFF;
}
a {
outline: medium none;
}
#adv2 span {
background: none repeat scroll 0 0 #181818;
float: right;
height: 50px;
line-height: 45px;
width: 410px;
}
Demo: http://codebins.com/bin/4ldqp7r/2