Develop Reference

Scroll a div to a certain class name horizontally

I have a navigation bar with the following structure in my page. I have already written the jQuery to add a class for the "Selected" tab when I entered the page and identifying that with some ID to indicate which page we are on. This looks fine on a desktop.
However, when I am viewing with mobile, like when I am on the page of the last tab (Tab E), the navbar will still position at the beginning of the bar (Tab A). I would like to make it scroll horizontally on mobile when I come to those specific pages.
Can anyone suggest how I can do it with jQuery? Thank you so much.
if ($('#pageE').length) {
$('.navBar .tab').removeClass('selected');
$('.navBar .tabE').addClass('selected');
}
.navBar {
width: 100%;
color: #fff;
background: #000;
font-size: 0px;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.navBar .tab {
letter-spacing: 2px;
display: inline-block;
font-size: 16px;
padding: 0 20px;
cursor: pointer;
position: relative;
}
.navBar .tab a {
color: #fff;
}
.navBar .tab.selected a:after {
content: "";
display: block;
background: red;
margin: 0 auto;
height: 5px;
width: 80px;
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navBar">
<div class="tab tabA">
Tab A
</div>
<div class="tab tabB">
Tab B
</div>
<div class="tab tabC">
Tab C
</div>
<div class="tab tabD">
Tab D
</div>
<div class="tab tabE selected">
Tab E
</div>
</div>

For horizontal scroll, you can use scrollIntoView() method
jQuery
$("#elementID")[0].scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
});
JavaScript
var element = document.getElementById("elementID");
element.scrollIntoView({behavior: "smooth"});

You can use $.scrollTo :
$(container).scrollTo(target)

A solution could be to use scrollLeft or animate if you want a sort of smooth animation.
var selectedPosition = $(".tab.selected").offset().left;
$(".navBar").scrollLeft(selectedPosition); // without animation.
$('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with an animation
if ($('#pageE').length) {
$('.navBar .tab').removeClass('selected');
$('.navBar .tabE').addClass('selected');
var selectedPosition = $(".tab.selected").offset().left;
$(".navBar").scrollLeft(selectedPosition); // without smooth.
// $('.navBar').animate({scrollLeft: selectedPosition}, 400) // a solution with smooth
}
.navBar {
width: 100%;
color: #fff;
background: #000;
font-size: 0px;
padding: 15px 0;
text-align: center;
text-transform: uppercase;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
.navBar .tab {
letter-spacing: 2px;
display: inline-block;
font-size: 16px;
padding: 0 20px;
cursor: pointer;
position: relative;
}
.navBar .tab a {
color: #fff;
}
.navBar .tab.selected a:after {
content: "";
display: block;
background: red;
margin: 0 auto;
height: 5px;
width: 80px;
position: absolute;
bottom: -15px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navBar">
<div class="tab tabA">
Tab A
</div>
<div class="tab tabB">
Tab B
</div>
<div class="tab tabC">
Tab C
</div>
<div class="tab tabD">
Tab D
</div>
<div class="tab tabE">
Tab E
</div>
</div>
<div id="pageE"></div>

Please try the below code.
$([document.documentElement, document.body]).animate({
scrollTop: $("#elementtoScrollToID").offset().top
}, 2000);

Changing navigation link color on nth-child with jquery

I got have confusing problem with jquery / css. I'm trying to get my navbar link color to change from white to black, and back again when 'entering' into a new nth-child.
So when going over nth-child(3n+1) and (3n+2), the links need to be white, but (3n+3), the links need to go black, and change back at the next cycle.
I've tried to reuse a script for adding classes, but it just keeps adding .white and .black until I go back to the top.
How would I solve this?
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+1)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+2)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("white");
} else {
$(".navbar a").removeClass("white");
}
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $(".col-4:nth-child(3n+3)");
var objectPosition = objectSelect.offset().top;
if (scroll > objectPosition) {
$(".navbar a").addClass("black");
} else {
$(".navbar a").removeClass("black");
}
});
html {
height: 100%;
font-size: 21px;
}
body {
margin: 0px;
font-family: 'Karla', sans-serif;
width: 100%;
height: 100%;
color: white;
}
* {
box-sizing: border-box;
}
/* DESIGN */
.row::after {
content: "";
clear: both;
display: table;
}
.col-1 {
width: 25%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 75%;
}
.col-4 {
width: 100%;
padding-right: 20vw;
padding-left: 20vw;
}
[class*="col-"] {
float: left;
height: 90vh;
padding-right: 20vw;
padding-left: 20vw;
padding-top: 25vh;
padding-bottom: 15vh;
background-attachment: scroll;
}
[class*="col-"]:nth-child(3n+1) {
/* The image used */
background-image: url("img/bg2.jpg");
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
[class*="col-"]:nth-child(3n+2) {
background-color: rgb(238, 114, 3);
}
[class*="col-"]:nth-child(3n+3) {
background-color: white;
color: black;
}
.black {
color: black !important;
}
.white {
color: white !important;
}
/* NAVIGATION */
.navbar {
overflow: hidden;
background-color: transparent;
position: fixed;
/* Set the navbar to fixed position */
top: 5;
/* Position the navbar at the top of the page */
width: 100%;
/* Full width */
font-size: 25px;
font-weight: bold;
line-height: 1.5em;
}
.navbar a {
float: right;
display: block;
color: #f2f2f2;
background-color: transparent;
text-align: center;
margin: 20px;
padding-left: 25px;
padding-right: 25px;
text-decoration: none;
}
.navbar a:hover {
border-bottom: 1px solid;
}
#media screen and (max-width: 1180px) {
.navbar a {
font-size: 16px;
padding-left: 0px;
padding-right: 0px;
}
}
#media screen and (max-width: 700px) {
.navbar a {
display: none !important;
}
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="thumbnail">
<img class="thumbnail" src="img/RF thumbnail.png">
</div>
<div class="navbar" id="myTopnav">
Contact
Adverts
About us
What is this
<a class="signup" href="#welcome">Sign up</a>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-chevron-up"></i></button>
<!-- CONTENT -->
<div class="row">
<div class="col-4" id="welcome">
</div>
<div class="col-4" id="whatisthis">
<h1>What is this?</h1>
</div>
<div class="col-4" id="adverts">
<h1>Adverts</h1>
</div>
<div class="col-4" id="about">
<h1>About</h1>
</div>
<div class="col-4" id="contact">
<h1>Contact</h1>
</div>
</div>
</body>
</html>

When u scroll down u dont remove a class. You are only adding it.
And the last class is what have the control of the color.
So. You are adding black, then white. After that adding black again will do nothing. There is still
class="black white"
Remove the last class after each section should fix your problem.
And jQuery has also hasClass(className)

Javascript Content Slider

Before I put the html and css, I am having 2 problems, please keep in my that I am almost a complete amateur at html and css, and have no idea what the javascript means.
Problems:
My 1st problem is that the content sider, doesnt slide far enough to the next content, but instead when clicking the button only brings the content over halfway (you will see what I mean when you paste the html and css into a page).
My second problem is that the buttons are meant to be horizontal with eachother, and I also want to add more in the future
so if someone could tell me how to do that in elaboration with the javascript problem that would be great!
here is the working demo jsfiddle please check-out
Working code
Thank-you in Advance..!!
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 1250px;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
width: 22.5%;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 100px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
</body>

The main areas to update;
1) your "#contentContainer". This is basically the window of your slider. The height and width need to be updated to match the slider items.
2) the "data-pos" values of your list items. This should be the same as their width * their index starting at 0 and negative.
3) the list container is too narrow. make it as wide as your #contentContainer.
CSS Changes:
#contentContainer {
width: 1250px;
height: 600px;
}
#navLinks {
width:1250px;
}
#navLinks ul li {
width:80px;
}
HTML change:
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-1250px"></li>
<li class="itemLinks" data-pos="-2500px"></li>
<li class="itemLinks" data-pos="-3750px"></li>
https://jsfiddle.net/partypete25/9gpyL6o1/7/embedded/result/

I assume that the CSS posted in the bottom of your question is the content of the main.css file. As matt points out in the comments, experiment with changing the sizes of the divs. Particularly the #wrapper, which is specified by it's ID using tha hash tag (#):
#wrapper {
width: 5000px;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
And referenced in the javascript here:
var wrapper = document.querySelector("#wrapper");
where it is assigned to the variable wrapper. It is 5000 pixels wide. The typical desktop web screen is around 1200 - 1700 pixels wide, I believe, for reference. This is about the size you want the .content, referenced by class using a . and what holds each displayed "slide" to be - keeping in mind that a responsive site that displays properly on phones and other mobile devices would need to have variations on the size using #media queries.
So I would add visible css borders where applicable (for development and to be removed later) and change around the numerical variables (data-pos, #wrapper and .container sizes) to find the optimal solution. As mentioned above, jsfiddle is a great resource, whether or not you're needing to share publicly.
For the navlinks, which should be displayed in a row, try the following CSS on the div that holds the list (<ul>):
#navLinks {
text-align: center;
width: 90.5%;
border:1px solid white;
}
The border:1px solid white; will help you to see where the div is. Then experiment with a smaller padding size in #navLinks ul li to be sure you have room on the page to display horizontally.
I believe the last step is to adjust the <li class="itemLinks" data-pos="0px"></li>, where the data-pos attributes are just holding information for the javascript to use in the changePosition function, which is the last few lines of the javascript.
eloquentjavascript.net is a wonderful, free source to learn all of this.

<!DOCTYPE html>
<html>
<head>
<title>Dinosaurs 4 Kids!</title>
<style>
#wrapper {
width: 98%;
position: relative;
left: 0px;
transition: left .5s ease-in-out;
}
.content {
float: left;
width: 100%;
height: 600px;
white-space: normal;
background-repeat: no-repeat;
background-position: center;
}
#itemOne {
background-color: #ADFF2F;
background-image: url("http://www.kirupa.com/images/blueSquare.png");
}
#itemTwo {
background-color: #FF7F50;
background-image: url("http://www.kirupa.com/images/yellowSquare.png");
}
#itemThree {
background-color: #1E90FF;
background-image: url("http://www.kirupa.com/images/pinkSquare.png");
}
#itemFour {
background-color: #DC143C;
background-image: url("http://www.kirupa.com/images/graySquare.png");
}
#contentContainer {
width: 98%;
height: 600px;
border: 5px black solid;
overflow: hidden;
margin-left: 1%;
margin-right: 1%;
}
#navLinks {
text-align: center;
}
#navLinks ul {
margin: 0px;
padding: 0px;
display: inline-block;
margin-top: 6px;
}
#navLinks ul li {
float: left;
text-align: center;
margin: 10px;
list-style: none;
cursor: pointer;
background-color: #CCCCCC;
padding: 20px;
border-radius: 10%;
border: white 5px solid;
}
#navLinks ul li:hover {
background-color: #FFFF00;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
#navLinks ul li.active {
background-color: #333333;
color: #FFFFFF;
outline-width: 7px;
}
#navLinks ul li.active:hover {
background-color: #484848;
color: #FFFFFF;
}
</style>
</head>
<body bgcolor='black'>
<div id="contentContainer">
<div id="wrapper">
<div id="itemOne" class="content">
</div>
<div id="itemTwo" class="content">
</div>
<div id="itemThree" class="content">
</div>
<div id="itemFour" class="content">
</div>
</div>
</div>
<div id="navLinks">
<ul>
<li class="itemLinks" data-pos="0px"></li>
<li class="itemLinks" data-pos="-550px"></li>
<li class="itemLinks" data-pos="-1100px"></li>
<li class="itemLinks" data-pos="-1650px"></li>
</ul>
</div>
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
link.classList.add("active");
var position = link.getAttribute("data-pos");
wrapper.style.left = position;
}
</script>
</body>
</html>

Jquery slideUp, slideDown height bug on fixed div

When I slideUp() or slideDown() fixed div, it jumps.
I have read that it is height problem, but could not solve it. Maybe there is something I can do with padding?
Need some help :)
http://jsfiddle.net/sirjay/08ypLtp2/
#tab-menu {
text-align: center;
padding-right: 40px;
position: fixed;
bottom: 0;
width: 100%;
margin-bottom: 0;
}
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
background-color: lightblue;
}
.t-hidden {
display: none;
padding: 10px;
}
$(function() {
$('#tab-menu li > a').click(function(e) {
e.preventDefault();
var x = $(this).closest('li').find('.t-hidden');
if (x.is(':visible')) {
x.slideUp();
} else {
x.slideDown();
}
});
});
<ul id="tab-menu">
<li>
First
<div class="t-hidden">
Hidden 1
</div>
</li>
<li>
Second
<div class="t-hidden">
Hidden 2
</div>
</li>
<li>
Third
<div class="t-hidden">
Hidden 3
</div>
</li>
</ul>

Just add a height and a width to animate smoothly each element you apply slideUp() or slideDown() to.
li {
padding: 15px;
display: inline-block;
margin: 0 10px;
width: 110px;
height:90px;
background-color: lightblue;
}
DEMO http://jsfiddle.net/a_incarnati/08ypLtp2/3/

Responsive menu in a div design issue

I have this layout
I have 2 problems:
The height of div 2 is not same as div 1 or 3, i tried this solution
from stack overflow, but its not working.
The menu to be set in div 2 is responsive, but on shrinking the width, it
list down, which pushes the carousel even below, screwing the whole
design..... is there any method i can make the mid_div responsive
by not shrinking but instead create a horizontal scroll in that div
only (depending on screen size) ??
CSS
#h_scroll {
margin: 0 auto;
margin-top: 10px;
width: 80%;
}
#h_scroll_banner {
display: inline-block;
width: 100%;
}
#h_scroll .fltlft {
float: left
}
#h_scroll .fltryt {
float: right
}
#h_scroll .mid_div {
width: 100%;
background-color: #F11181;
height: 100%;
}
#h_scroll .mid_div ul {
list-style: none;
display: inline-block;
margin: 0 auto;
}
#h_scroll .mid_div li {
list-style: none;
display: inline-block;
}
#h_scroll .mid_div li a {
display: block;
line-height: 20%;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
padding: 4%;
width: 20%;
}
HTML
<div id="h_scroll">
<div id="h_scroll_banner">
<div class="fltlft" id="div_height_to_get">
<img src="image/scroll_banner_left.jpg" style="width:100%; height:auto" id="div_height_to_get" />
</div>
<div class="fltryt">
<img src="image/scroll_banner_right.jpg" style="width:100%; height:auto" />
</div>
<div class="mid_div" id="div_height_to_set">
<ul>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
<li> Links </li>
</ul>
</div>
</div>

If you have full control over the source, here is my solution (JSFiddle preview):
HTML
<div class="wrapper">
<div class="banner-left"></div>
<div class="banner-mid">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
<div class="banner-right"></div>
<p>This is some content under the menu</p>
</div>
CSS
.wrapper {
margin: 40px auto;
width: 600px;
}
.banner-left, .banner-right {
background: #eee;
float:left;
height: 50px;
width: 50px;
}
.banner-left {
margin-left: -50px;
}
.banner-right{
margin-right: -50px;
}
.banner-mid {
float:left;
margin-bottom: 20px;
width: 100%;
}
.banner-mid > ul {
background: #ddd;
list-style:none;
margin: 0;
padding: 0;
height: 50px;
width: 100%;
}
.banner-mid > ul > li {
float:left;
line-height: 50px;
padding-left: 10px;
}

Since your banner flairs don't have any content in them, why not use a ::before and ::after? I don't see the need why all 3 divs need to be the same height and using generated content you can just have the slideshow positioned based on margins from .mid_div.
.mid_div {
position: relative;
}
.mid_div::before, .mid_div::after {
display:block
width: 50px; /* image width */
height: 50px; /* image height */
content: '';
position: absolute;
top: 0;
left: -50px;
background: url(image/scroll_banner_left.jpg);
}
.mid_div::after {
left: 100%;
background: url(image/scroll_banner_right.jpg);
}
As for you wanting a scrollbar, use overflow-x: auto on the .mid_div and for the .mid_div ul have a set pixel width for it and whenever .mid_div gets smaller the content won't reflow. You could also try white-space: nowrap on the ul also while having the li {display: inline}.

The answer to your first question, making all the divs the same height, you need to do this:
div1, div2, div3 { display: table-cell; }
For your second answer you could apply a min width to the divs/div and set the overflow to scroll.