We Keep Coding

Change class on scrolling through div

I have a sticky sidebar like this:
<ul class = "cars">
<li class=""> BMW </li>
......
<li class=""> Mersedes </li>
</ul>
And table like this:
<div class="element-title" id="car-category-1">BMW</div>
.....
<div class="element-title" id="car-category-2">Mersedes</div>
Now what I am trying to do:
Scrolling through the <div id="car-category-1> should change the class of <li> of BMW to .active
Same for Mersedes, if scroll through <div id="car-category-2> then change <li> with Mersedes to active.
this is jquery for click scroll
$(document).on('click', '.model', function () {
var this_id = $(this).data('id');
var gotom = setInterval(function () {
cars_go_to_navtab(this_id);
clearInterval(gotom);
}, 400);
$('.cars li').removeClass('active');
$(this).parent().addClass('active');
});
function cars_go_to_navtab(id) {
var scrolling_div = $('#car-category-' + id);
$('html, body').animate({
scrollTop: scrolling_div.offset().top - 70
}, 500);
}

There is a great article of CSS-Tricks for a pure CSS solution (not sure that it is suitable to your use-case) which also has a link to another great article that uses Intersection Observer. In short, place something like this in your code:
const observer = new IntersectionObserver(entries =>
{
for (const entry of entries) {
if (entry.isIntersecting) {
// add css style here
}
else {
// remove css style here
}
});
observer.observe(document.querySelector('#your-element-selector'));
Also, please mind support table over different browsers (canIuse to the rescue)

A simple implementation using Jquery. Also, explore the possibilities of Intersection Observer API
$(document).on("scroll", function() {
var scrollPos = $(document).scrollTop();
$('#menu a').each(function() {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('#menu ul li a').removeClass("active");
currLink.addClass("active");
} else {
currLink.removeClass("active");
}
});
});
* {
margin: 0;
padding: 0;
}
.container {
display: flex;
font-family: helvetica, sans-serif;
}
.content {
flex: 1;
padding-left: 200px;
}
.section {
background-color: grey;
height: 100vh;
width: 100%;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}
#menu {
position: fixed;
top: 0;
background: #444;
width: 200px;
}
#menu a {
padding: 10px;
display: flex;
color: #FFF;
text-decoration: none;
}
h1 {
font-size: 30px;
color: #FFF;
}
.active {
background: #4CAF50;
color: #FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
<div id="menu">
<ul>
<li><a class="active" href="#bmw">BMW</a>
</li>
<li>Mercedes</li>
</ul>
</div>
<div class="content">
<div class="section" id="bmw">
<h1>
BMW
</h1>
</div>
<div class="section" id="mercedes">
<h1>
Mercedes
</h1>
</div>
</div>
</div>

Disabling inactive toggle in jQuery

I have the following functional code. However, I would like to know how I can disable toggle buttons. I always want to have one of my bottom navbar icons active and its respective content should be shown in the main section. If I click on the active navbar icon (the toggle) it wouldn't be deactivated.
Thanks in advance for your help!
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').toggleClass('active');
$('.content-1').toggleClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').toggleClass('active');
$('.content-2').toggleClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').toggleClass('active');
$('.content-3').toggleClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
If you find it easier, here's my CodePen: https://codepen.io/fergos2/pen/vYYaRzN

You can use this jQuery code. Anyone can enhance that.
$(document).ready(function() {
$('.bottom-navbar a').click(function(){
var cls = $(this).attr('class');
var lastchr = cls.substr(cls.length - 1);
$(this).siblings('a').removeClass('active');
$(this).addClass('active');
$("div[class^='content-'],div[class*=' content-']").removeClass('active');
$('.content-'+ lastchr).addClass('active');
})
});

Instead of toggleClass() you could use addClass():
https://codepen.io/vladanme/pen/LYYBrqJ
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});

Use addClass() instead of toggleClass().
It looks like you have the code to clear the inactive buttons already. So you're only left with the button that you would like to maintain active.
[..]
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
[..]
[..]
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
[..]
[..]
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
[..]

why margin is given hardcoded in jquery?

I am making image slider dynamically (don't want to use any hard corded value).I am able to make slider but I have two issue.
why I need 20px more in ul width .is there any way not to use this hard corded value .
$('#list').css('width',$('#list').find('.box').length*li_Width+20)
why some part left of box when user click next button.Example when user click on next button it show next box without showing any part (green box) ..But when user click on next button it show some part ofblue box why ? why it is not slide fully ? If user click again next button it show again more part of red why ?
here is my code
https://plnkr.co/edit/t2yOFkO1QBWOVLFreiXm?p=preview
// Code goes here
$(function(){
var li_Width =$('#list').find('.box:first').outerWidth(true);
// why 20 pixel is hardcorded
$('#list').css('width',$('#list').find('.box').length*li_Width+20)
$('#next').click(function(){
$('#list').css('margin-left',addToMarginLeft($('#list'),-li_Width))
})
$('#pre').click(function(){
$('#list').css('margin-left',addToMarginLeft($('#list'),li_Width))
})
function addToMarginLeft(elem, pixels) {
var ml = parseFloat(elem.css('margin-left'));
elem.animate({
'margin-left': (ml + pixels) + 'px'
},1000)
}
})

I think this is due to css inline-block white space between element .
which cause some extra space , so that why you've got to add 20px .
There are several method to work around this last : comenting between li or just setting font size to 0 like bellow :
ul {
...
font-size: 0
}
bellow you find working snippet :
I've just added some jquery code to prevent miltiple click button which trigger another annimation before the last one is being finished :
// Code goes here
$(function() {
var li_Width = $('#list').find('.box:first').outerWidth(true);
// 20 px removed !!!
$('#list').css('width', $('#list').find('.box').length * li_Width)
$('#next').click(function() {
if( !$("#list").is(":animated") )
$('#list').css('margin-left', addToMarginLeft($('#list'), -li_Width))
})
$('#pre').click(function() {
if( !$("#list").is(":animated") )
$('#list').css('margin-left', addToMarginLeft($('#list'), li_Width))
})
function addToMarginLeft(elem, pixels) {
var ml = parseFloat(elem.css('margin-left'));
elem.animate({
'margin-left': (ml + pixels) + 'px'
}, 1000)
}
})
/* Styles go here */
.box {
width: 100px;
height: 100px;
}
body {
margin: 0px;
padding: 0px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.pink {
background-color: pink;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.orange {
background-color: orange;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
width: 1300px;
/* here you set font to 0 for extra space */
font-size: 0
}
li {
display: inline-block;
margin-left: 15px;
padding: 0;
}
#container {
width: 300px;
margin: 0 auto 0 auto;
overflow: hidden;
}
#list {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<button id="next">next</button>
<button id="pre">pre</button>
<ul id="list">
<li class="box green">
</li>
<li class="box blue">
</li>
<li class="box red">
</li>
<li class="box yellow">
</li>
<li class="box pink">
</li>
<li class="box orange">
</li>
</ul>
</div>

Create a custom select box dropdown using jQuery

I am trying to style the input[text] and ul list to function as select-option. However, my below code breaks after I selected an option. As the code below, if I select an option from a list, the value of the input[text] change but the list doesn't hide itself. If I uncomment the line in the javascript, the list will hide after I select an option, the list won't show again if I click on the input again. Could anyone help me to fix this problem? I don't know much about jquery and javascript, so I spend couple hours trying to debug but it doesn't fix at all.
$(document).ready(function() {
selecta("#a", "#b")
$("#a").click(function() {
$("#b").show();
});
});
function selecta(a, b) {
$(b + " li").click(function() {
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
.cselect {
position: relative;
}
.cselect input[type]:disabled {
background: #fff;
}
.cselect-menu {
display: none;
position: absolute;
/* top: 0px;*/
left: 0px;
width: 100%;
background: #fff;
}
.cselect-menu ul {
border: 1px solid #d6d6d6;
width: 100%;
}
.cselect-menu li {
padding: 10px 5%;
width: 90%;
}
.cselect-menu li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a" class="cselect">
<input type="text" disabled placeholder="Select"/>
<div id="b" class="cselect-menu">
<ul >
<li>Business</li>
<li>Hair</li>
</ul>
</div>
</div>

jsBin demo
Use event.stopPropagation(); to prevent clicks on #b propagate to the parent #a
function selecta(a, b) {
$(b + " li").click(function( event ) {
event.stopPropagation(); // HERE!
$(b).hide();
/*$(b + " ul").hide();*/
var v = $(this).text();
$(a + " input").val(v);
});
}
Frankly... I'f I wanted to use your code on multiple custom-dropdowns of yours I'd go mad with that jQuery...
Here I've simplified HTML, CSS and jQuery:
$(function() { // DOM ready
$(".cselect").each(function(){
var $input = $(this).find("input");
var $dropDown = $(this).find("ul");
$(this).on("click", function(){
$dropDown.stop().slideToggle();
});
$dropDown.on("click", "li", function(){
$input.val( $(this).text() );
});
});
});
*{margin:0; padding:0;} /* ugly reset */
.cselect {
position: relative;
}
.cselect input{
background: #fff;
}
.cselect ul{
display: none;
position: absolute;
z-index:999;
left: 0;
top: 1.2rem;
margin:0;
width: 100%;
background: #fff;
border: 1px solid #d6d6d6;
}
.cselect li {
padding: 10px 5%;
list-style:none;
}
.cselect li:hover {
background: rgba(41, 128, 185, 0.2);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cselect">
<input type="text" disabled placeholder="Select n1">
<ul>
<li>Business</li>
<li>Hair</li>
</ul>
</div>
<div class="cselect">
<input type="text" disabled placeholder="Select n2">
<ul>
<li>Something</li>
<li>Else</li>
</ul>
</div>

with jQuery modify CSS .on mouseenter: for a specific ul li tag

New to jQuery and can't quite figure out how to achieve what I'm trying to do. Server can work only with HTML - no PHP or Ruby available (that and I'm not familiar with those languages yet). I'm also using the latest jQuery 1.10.2
What I have is a menu with tiles that each have a preview picture and a title ribbon (the to be specific), what I want is for the titles ribon background to change the opacity when mouse cursor hovers over tile.
So far I have it so that it sort of works, but the problem is that whenever a mouse cursor hovers over a tile, all the titles change the opacity, and not just the one being hovered over. I tried to get index number of a 'li' element using .index and then return it to be used as a identifier, but that didn't quite work. I also tried to do something like this:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this) <some code would come here to do stuff as mouse cursor enters the item area> ;
},
mouseleave: function () {
$(this) <some code would come here to undo stuff as mouse cursor leaves the item area>;
}
});
});
</script>
But I couldn't figure out how to continue off of that to modify the $('.tt1').css
So here's the relevant code fragments of what I have so far...
jQuery code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$('.tt1').css('opacity', '1.0');
},
mouseleave: function () {
$('.tt1').css('opacity', '0.6');
}
});
});
</script>
The HTML code:
<menu>
<ul class="collumn-left">
<li><div class="tt1">About</div></li>
<li><div class="tt1">Test</div></li>
</ul>
<ul class="collumn-right">
<li><div class="tt1">Random</div></li>
<li><div class="tt1">More</div></li>
</ul>
</menu>
The CSS code:
/* menu section begin */
menu {
background-color: silver;
box-shadow: 0 5px 10px #6A6A6A;
}
menu li {
margin: 0;
padding: 0;
display: block;
}
.collumn-left,
.collumn-right {
margin: 0;
padding: 0;
float: left;
}
.collumn-left a,
.collumn-right a {
float: left;
border: none;
list-style: none;
color: #000000;
text-decoration: none;
}
.tt1 {
background-color: grey;
opacity: 0.6;
font-weight: bolder;
text-align: center;
}
.tt1:hover {
opacity: 1.0;
}
/* menu section end */
/* Medium display size - Tablet devices & Desktops/Laptops */
#media only screen and (min-width: 1024px) and (max-width: 1280px) {
menu {
min-width: 370px;
width: 1024px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 512px;
}
.collumn-left a,
.collumn-right a {
width: 502px;
height: 502px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 325px 0 102px 0;
font-size: 35px;
line-height: 75px;
}
article {
margin: 0 10% 0 10%;
}
}
/* High Display Resolution Desktops/Laptops */
#media only screen and (min-width: 1281px) {
menu {
min-width: 370px;
width: 1540px;
margin: auto;
padding: 5px;
box-shadow: 0 5px 10px #6A6A6A;
}
.collumn-left,
.collumn-right {
width: 770px;
}
.collumn-left a,
.collumn-right a {
width: 760px;
height: 760px;
margin: 5px;
padding: 0;
}
.tt1 {
margin: 500px 0 160px 0;
font-size: 40px;
line-height: 100px;
}
article {
margin: 0 10% 0 10%;
}
}

Try this javascript code:
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").css('opacity', '1.0');
},
mouseleave: function () {
$(this).find(".tt1").css('opacity', '0.6');
}
});
});
</script>
edit:
Another, maybe more cleaner way to achieve this would be the following:
CSS
.tt1:hover, .tt1.hover {
opacity: 1.0;
}
Javascript
<script>
$(function() {
$('menu ul li').on({
mouseenter: function () {
$(this).find(".tt1").addClass("hover");
},
mouseleave: function () {
$(this).find(".tt1").removeClass("hover");
}
});
});
</script>
You could easily add other features by just editing your css. For example a nice transition or different styles for smaller screens.

No need for javascript just use css
menu ul li .ttl:hover {
opacity:1.0;
}

$(this).find('.tt1').css('opacity', '1.0');
find() will look for a child element of the hovered element with the class tt1.