We Keep Coding

Cant make tabs fixed at top under navbar section after clicked

Edit: I added the windo scroll function I make it but the contents under tabs goes over from it. How can I fix that?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
console.log(true);
$(".tabs").addClass("tabs-position");
} else {
console.log(false);
$(".tabs").removeClass("tabs-position");
}
});
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
}
I have a page with a navbar and tabs. When I click them I direct the user to the section in the same page using the id attribute, however my tabs are in the middle of my page which is fine. What I am trying to achieve is to move them under my navbar section when I click them.
I tried after attribute but I don't get it. I have included my code below, How can I replace their position?
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
.tabs {
margin-bottom: 50px;
.tab-outer {
border-bottom: 4px solid #f5f5f5;
position: sticky;
top: 70px;
padding: 20px 0 0 0;
}
.tab-list {
a {
color: #4a4947;
}
ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
}
}

You cannot nest CSS like that. Instead, use to select siblings at any level. And also, you have to put position:sticky on the direct sibling of an element that is being scrolled.
.tabs {
margin-bottom: 50px;
position: sticky;
top: 0;
background-color: #ffffff;
}
.tabs .tab-outer {
border-bottom: 4px solid #f5f5f5;
top: 70px;
padding: 20px 0 0 0;
}
.tabs .tab-list a {
color: #4a4947;
}
.tabs .tab-list ul {
padding: 0 30px;
display: flex;
justify-content: space-between;
list-style-type: none;
}
<section class="tabs">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="tab-outer">
<div class="tab-list">
<ul>
<li>
Rooms
</li>
<li>
info tab
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<div style="height:3600px;width:100%;background-color:blue;color:white;">foo</div>

By using z-index I fixed the problem
.tabs-position {
margin-bottom: 50px;
position:sticky;
top: 0;
background-color: red;
z-index: 1;
}

Change fixed navigation text color when over certain divs

Apologies if this is a repeat question. I've scanned the internet but haven't found a viable solution to this. My website has varying background colours, blue and white. My nav's copy is primarily set to white but I'd like it to change to black when over a div with a white background.
Initially, I found this bit of JS on here:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.desktop-menu').offset().top;
var menuHeight = $('.desktop-menu').height();
var menuPos = $('.logo').offset().top;
var menuHeight = $('.logo').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.desktop-menu').addClass('menu-secondary');
$('.desktop-menu').removeClass('menu-primary');
}
else {
$('.desktop-menu').removeClass('menu-secondary');
$('.desktop-menu').addClass('menu-primary');
}
})
})
But this seems to not work beyond 3 containers. If I continue scrolling to other divs, no matter what id I attach to a div (#light or #dark), the text stops changing after the first 3 div containers on a page.
Thanks to anyone who can help!
EDIT:
Struggled to get codepen to work so here's an example below.
Example HTML:
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
<div class="content-container light-background" id="light">
</div>
<div class="content-container dark-background">
</div>
</div>
Example CSS:
body {
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
Example JS:
$(document).ready(function(){
$(window).scroll(function(){
var lightPos = $('#light').offset().top;
var lightHeight = $('#light').height();
var menuPos = $('.menu-btn').offset().top;
var menuHeight = $('.menu-btn').height();
var scroll = $(window).scrollTop();
if(menuPos > lightPos && menuPos < (lightPos + lightHeight)) {
$('.menu-btn').addClass('dark-color');
$('.menu-btn').removeClass('light-color');
}
else {
$('.menu-btn').removeClass('dark-color');
$('.menu-btn').addClass('light-color');
}
})
})

Ok, I had to change a bit your code because you were checking on ids (you shouldn't have multiple elements with the same ID),
This should be ok for your case,
so basically i create an array of light-sections and then check if scroll position is inside one of them
var $ = jQuery;
$(document).ready(function () {
var lightPos = [];
$(".light-background").each(function () {
lightPos.push({
start: $(this).offset().top,
end: $(this).offset().top + $(this).height()
});
});
$(window).scroll(function () {
var menuPos = $(".menu-btn").offset().top;
var isInLight = !!lightPos.some((light) => {
return light.start < menuPos && light.end > menuPos;
});
if (isInLight) {
$(".menu-btn").addClass("dark-color");
$(".menu-btn").removeClass("light-color");
} else {
$(".menu-btn").removeClass("dark-color");
$(".menu-btn").addClass("light-color");
}
});
});
body {
margin: 0;
font-family: "Poppins", sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
header {
display: flex;
}
.container {
text-align: center;
}
/*-------------------- COLORS */
.dark-background {
background: #313747;
}
.light-background {
background: #f4f4f4;
}
.dark-color {
color: #303030;
}
.light-color {
color: #f4f4f4;
}
/*-------------------- NAVIGATION */
nav {
position: fixed;
height: auto;
width: 100%;
margin: auto;
z-index: 10;
}
.menu {
display: flex;
padding: 2em 0 2em 3em;
text-align: left;
float: left;
}
.menu li a {
margin-right: 2em;
font-size: 1.2em;
font-weight: 700;
text-decoration: none;
}
/*-------------------- HERO CONTAINER */
.hero-container {
position: relative;
height: 100vh;
width: 100%;
}
/*-------------------- CONTENT CONTAINER */
.content-container {
position: relative;
display: flex;
width: 100%;
height: 100vh;
margin: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<header>
<nav>
<ul class="menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</nav>
</header>
<div class="hero-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
<div class="content-container light-background"></div>
<div class="content-container dark-background"></div>
</div>

onClick JS not go to top of the page

I have a page with an initial description, followed by 2 buttons, where the user can choose typeA or typeB. They work by "target": when the user clicks typeA comes the content relative to typeA, bellow the buttons; same to typeB.
typeA is the most common selection, then, when the page loads, a javascript emulates the click to typeA and opens respective content. To avoid hidden the initial description, there is another javascript to put the page at the top. Worked on Chrome and Edge, not on Firefox.
I would like to repeat the same process when the user clicks: opens the respective content, but positioning the page at the top, or, at least, showing the buttons. I thought event onClick calling the same js backToTop would worked - but not.
I put an alert on js and enters there but not execute: always keeps the content of the button selected in its better visibility.
I tried:
window.location.href = '#top';
window.scrollBy(0, -500);
document.html.scrollTop = document.documentElement.scrollTop = 0;
without success.
What am I doing wrong?
<head>
<meta charset="UTF-8">
<title>TOP PAGE TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body,html {margin-left:auto; margin-right:auto;width:70%; font-family:verdana; font-size:1.2em;}
.menuFAQ {background:#aaa; font-size:2em; width:100%;}
.menuFAQ ul {list-style-type:none; position:relative; margin-left:-40px; /* to avoid user agent chrome */}
.menuFAQ li {display:inline-block; margin-top:10px; margin-bottom:10px; width:49%; background:#fff; text-align:center; box-shadow:2px 3px 4px 0px rgba(170,170,170,1); font-weight:400; line-height:80px;}
.menuFAQ li a {display:block; color:#020062; background:#fff; font-weight:400; text-decoration:none;}
.menuFAQ li .active,.menuFAQ li:hover a {color:#fff; font-weight:400; background-image:linear-gradient(#165686, #0f3a5a); }
:target {color:#fff;font-size:1em;}
div.items>div:not(:target) {display:none}
div.items>div:target {display:block; margin-left:auto; margin-right:auto; color:#000; border:1px solid #aaa;}
</style>
</head>
<body>
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p><p>text2B</p><p>text3B</p>
<br>[...]
</nav>
</div>
</div>
<script>
const allTargetLinks = document.querySelectorAll('.target')
allTargetLinks.forEach(targetLink => {
targetLink.addEventListener('click', () => {
allTargetLinks.forEach(targetLink => {
targetLink.classList.remove('active')
})
targetLink.classList.add('active')
})
})
window.onload = function() {assignPreferedFAQ()};
function assignPreferedFAQ() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
//document.html.scrollTop = document.documentElement.scrollTop = 0;
//document.body.scrollTop = document.documentElement.scrollTop = 0;
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
};
</script>

You had a real mess there regarding how you process click events and href attribute, i.e:
You had onclick attribute on your links, and you were adding yet another listener to them in JS
You didn't event.preventDefault() in your function, and default browser behavior when you click on a link is to get you to its href path
I've cleaned up a bit and changed some things. Since we need to prevent default behavior :target selector will no longer work, so instead I did what you've already been doing with links, and added an active class to your content. clickHandler() will now remove and add class active as necessary. At the end just scroll to the top. Here's the snippet:
document.querySelectorAll('.target').forEach(targetLink => targetLink.addEventListener('click', clickHandler, false));
function clickHandler(ev) {
ev.preventDefault(); // prevent browser from automatically scrolling to href pos
if (!ev.currentTarget.classList.contains('active')) {
// disable active elements
document.querySelector('.target.active').classList.remove('active');
document.querySelector('.items div.active').classList.remove('active');
// add class to the clicked on button and its corresponding content tab
ev.currentTarget.classList.add('active');
// to prevent pointless string slicing below, you'd have to store ids somewhere else i.e in the data-id attribute
const id = ev.currentTarget.href.slice(ev.currentTarget.href.lastIndexOf('#') + 1);
document.getElementById(id).classList.add('active');
}
window.scrollTo(0,0);
}
* {
font-family: verdana;
font-size: 1em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
text-align: center;
padding: 0;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
width: 48%;
margin-top: 10px;
margin-bottom: 10px;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
div.items>div {
display: none;
}
div.items>div.active {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div>
<br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5
<div class="menuFAQ">
<ul>
<li><a class="target active" href="#typeA">TypeA</a></li>
<li><a class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div class="active" id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</div>
Note that instead of artificially clicking at the page load, now your content just loads with class active.

Hope this help you.
< script >
window.onload = function() {
document.getElementById("preferedFAQ").click();
backToTop();
};
function backToTop() {
document.documentElement.scrollTop = document.body.scrollTop = 0;
//alert("enter backToTop");
var elmnt = document.getElementById("top");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;
}; <
/script>
body,
html {
margin-left: auto;
margin-right: auto;
width: 70%;
font-family: verdana;
font-size: 1.2em;
}
.menuFAQ {
background: #aaa;
font-size: 2em;
width: 100%;
}
.menuFAQ ul {
list-style-type: none;
position: relative;
margin-left: -40px;
/* to avoid user agent chrome */
}
.menuFAQ li {
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
width: 49%;
background: #fff;
text-align: center;
box-shadow: 2px 3px 4px 0px rgba(170, 170, 170, 1);
font-weight: 400;
line-height: 80px;
}
.menuFAQ li a {
display: block;
color: #020062;
background: #fff;
font-weight: 400;
text-decoration: none;
}
.menuFAQ li .active,
.menuFAQ li:hover a {
color: #fff;
font-weight: 400;
background-image: linear-gradient(#165686, #0f3a5a);
}
:target {
color: #fff;
font-size: 1em;
}
div.items>div:not(:target) {
display: none
}
div.items>div:target {
display: block;
margin-left: auto;
margin-right: auto;
color: #000;
border: 1px solid #aaa;
}
<div id="top">Top Page</div> <br>textExp1<br>textExp2<br>textExp3<br>textExp4<br>textExp5<br>textExp6<br>textExp7<br>textExp8<br>textExp9<br>textExpA<br>textExpB<br>textExpC<br>textExpD
<br>textExpE
<div class="menuFAQ">
<ul>
<li><a id="preferedFAQ" onclick="backToTop()" class="target" href="#typeA">TypeA</a></li>
<li><a onclick="backToTop()" class="target" href="#typeB">TypeB</a></li>
</ul>
</div>
<div class="items">
<div id="typeA">
<nav>
A long and variable text size to explain TypeA <br>text1A<br>text2A<br>text3A<br>text4A<br>text5A<br>text6A<br>text7A<br>text8A<br>text9A<br>textAA<br>textBA<br>textCA<br>textDA
<br>[...]
</nav>
</div>
</div>
<div class="items">
<div id="typeB">
<nav>
A long and variable text size to explain TypeB
<p>text1B</p>
<p>text2B</p>
<p>text3B</p>
<br>[...]
</nav>
</div>
</di

Make tabs responsive on smaller screens

I have the following tabs and I would like to make them responsive when in smaller screens. Currently the last tabs just disappear when I make the screen smaller. The best scenario would be... when in smaller screens the tabs will start stacking below the first ones. Any ideas on how to implement this?
(function() {
$(function() {
var toggle;
return toggle = new Toggle('.toggle');
});
this.Toggle = (function() {
Toggle.prototype.el = null;
Toggle.prototype.tabs = null;
Toggle.prototype.panels = null;
function Toggle(toggleClass) {
this.el = $(toggleClass);
this.tabs = this.el.find(".tab");
this.panels = this.el.find(".panel");
this.bind();
}
Toggle.prototype.show = function(index) {
var activePanel, activeTab;
this.tabs.removeClass('active');
activeTab = this.tabs.get(index);
$(activeTab).addClass('active');
this.panels.hide();
activePanel = this.panels.get(index);
return $(activePanel).show();
};
Toggle.prototype.bind = function() {
var _this = this;
return this.tabs.unbind('click').bind('click', function(e) {
return _this.show($(e.currentTarget).index());
});
};
return Toggle;
})();
}).call(this);
.toggle {
font-family: arial, sans-serif;
}
.toggle .tabs {
border-bottom: 1px solid grey;
width: 100%;
overflow: hidden;
height: 36px;
line-height: 36px;
}
.toggle .tabs .tab {
float: left;
background: white;
color: #777777;
height: 31px;
margin: 2px 8px 0;
padding: 0 8px;
cursor: pointer;
}
.toggle .tabs .tab.active {
color: #dd4b39;
border-bottom: 3px solid #dd4b39;
}
.toggle .panels .panel {
padding: 20px 10px;
display: none;
}
.toggle .panels .panel:first-child {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle'>
<div class='tabs'>
<div class='tab active'>Tab 1</div>
<div class='tab'>Tab 2</div>
<div class='tab'>Tab 3</div>
<div class='tab'>Tab 4</div>
</div>
<div class='panels'>
<div class='panel'>Panel 1</div>
<div class='panel'>Panel 2</div>
<div class='panel'>Panel 3</div>
<div class='panel'>Panel 4</div>
</div>
</div>

There are various ways to handle web-page responsiveness:
1.) Use flex view to make it scale based on the size of your page. But this doesn't sustain much because beyond a point the text starts to overflow the container.
2.) Use media queries to change the page layout at different sizes of the page. Reference

It turns out that it was very simple... I just had to delete the height from the following:
.toggle .tabs {
border-bottom: 1px solid grey;
width: 100%;
overflow: hidden;
height: 36px; ////////delete this here
line-height: 36px;
}

Looking for ways to refactor my jQuery code for a div toggle I created

I wrote some code with three things in mind:
Highlighting a selection's border using 'on click'.
Selecting one item will remove the highlight from the other item.
The ability to deselect each item on click.
I've managed to get everything working for the most part, but I don't particularly like how complex the code is for the radial dot that appears when one item is selected.
Below is an example of what I'm talking about, particularly I'm looking for ways to refactor the code below into something a little more legible (shorter).
$(this).children('.radial').children().toggleClass('checked').parents('.itembox')
.siblings().children('.radial').children().removeClass('checked');
Here's a working example for more context (line 10):
var raceInternet = false;
var racePhone = false;
var raceTv = false;
$(function() {
var $targetDiv = $('#race-internet > .itembox');
var $radialDot = $('.radial > .center-dot');
$targetDiv.on('click', function() {
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
//Is it possible to refactor Line 10?
$(this).children('.radial').children().toggleClass('checked').parents('.itembox').siblings().children('.radial').children().removeClass('checked');
if ($targetDiv.is('.user-selected')) {
raceInternet = true;
} else {
raceInternet = false;
}
})
})
.itembox-container {
display: flex;
}
.boxes-2 {
width: calc((100% - 25px)/2);
margin: 10px;
padding: 10px;
}
.itembox {
position: relative;
display: inline-block;
border: 5px solid #e8e8e8;
border-radius: 10px;
cursor: pointer;
}
.user-selected {
border: 5px solid #E16E5B;
}
.itembox h4 {
color: #22ddc0;
font-weight: 700;
}
span.price {
display: inline-block;
font-weight: 400;
float: right;
color: #22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height: 3;
}
.radial {
position: absolute;
float: right;
height: 35px;
width: 35px;
padding: 2px;
border: 5px solid #e8e8e8;
border-radius: 50%;
top: 43%;
right: 10px;
}
.center-dot {
display: none;
position: relative;
height: 21px;
width: 21px;
background-color: #E16E5B;
border-radius: 50%;
}
.checked {
display: block;
}
.prime-aux:first-of-type {
top: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
<!-- Primary Content Container -->
<div class="prime-aux">
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Primary Content Container End -->
View on JS Fiddle

You can eliminate a lot of your jQuery by just leveraging CSS. Typically, if I want to toggle a feature, I have it either display: block; or display: none; based upon a CSS selector. Then, I just use jQuery to toggle the parent element's class name. So for example:
.item.selected .checkmark {
display: block;
}
.item .checkmark {
display: none;
}
$('.item').click(function(){ $(this).toggleClass('selected') });
JSFiddle