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);

Clickable dropdown Menu in Navigation Bar not working

I'm trying to implement a dropdown menu inside the navigation bar which should show up on user click and disappear on clicking anywhere outside(like Facebook's dropdown menu having logout,etc.). But the dropdown isn't working the way it should. I have searched everywhere on StackOverflow and the internet but unable to find a solution. I want to implement it using CSS and JavaScript only, since I don't understand jQuery and other languages.
Here is my fiddle: https://jsfiddle.net/8ahy32yn/9/
The codes I have implemented are as follows:
HTML
<div id="navbar">
<ul>
<li>
Home
</li>
<li>
FAQs
</li>
<li class="user" style="float:right;">
Dropdown
<ul id="UserContent" class="user-content">
<li>
Profile
</li>
<li>
My Gifts</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
CSS
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 55px;
}
li
{
float: left;
}
li a
{
text-decoration: none;
display: block;
padding: 20px 25px;
color: white;
text-align: center;
}
li a:hover
{
background-color: #333333;
}
.user
{
position: relative;
display: inline;
}
.dropbtn
{
cursor: pointer;
}
.user-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.user-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.user-content a:hover
{
background-color: #F1F1F1;
}
.show
{
display:block;
}
JavaScript
function UserDropdown() {
document.getElementById("UserContent").classList.toggle("show");
}
window.onclick = function(event)
{
if (!event.target.matches('.dropbtn'))
{
var dropdowns = document.getElementsByClassName("user-content");
var i;
for (i = 0; i < dropdowns.length; i++)
{
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show'))
{
openDropdown.classList.remove('show');
}
}
}
}
P.S. The Fiddle doesn't even show the dropdown on clicking whereas it shows up on my localhost like this:
Any help would be much appreciated. Thanks. :)

You want something like this ? The behavior you want is currently working, I just apply some CSS to style it better I think.
.show
{
display:block;
width: 245px;
right: 0;
left: auto;
line-height: 30px;
overflow: hidden
}
With height: auto on the ul and removing overflow: hidden on the ul parent you can do it the way you want : See it here

A closing brace is missing in the javascript section, the reason not working in fiddle
This link might help
http://www.w3schools.com/howto/howto_js_dropdown.asp

Draggable into Sortable as Grid

I'm trying to create using jquery a draggable list into a sortable list.
Everything works, except when using CSS to transform this list into a grid. As soon as everything is displayed as a grid, the draggable into the sortable stops to work.
My HTML is:
<ul id="sortable2">
<li class="ui-state-highlight">A</li>
<li class="ui-state-highlight">B</li>
<li class="ui-state-highlight">C</li>
<li class="ui-state-highlight">D</li>
</ul>
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
</ul>
My page SCRIPT is:
$(function() {
$("#sortable").sortable();
$("#sortable2 li").draggable({
connectToSortable: "#sortable",
helper: "clone"
});
});
And the CSS I've added to make both UL display as grid is:
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
#sortable2 {
list-style-type: none;
margin: 0;
padding: 0;
width: 450px;
}
#sortable2 li {
margin: 3px 3px 3px 0;
padding: 1px;
float: left;
width: 100px;
height: 90px;
font-size: 4em;
text-align: center;
}
Any ideas?
I'm using jquery-ui.css, jquery-ui.js and jquery.min.js.
Thanks

The reason this is occurring is because the children li elements are floated.
When an element is floated, it is essentially removed from the normal document flow, and in this case results in the parent element collapsing upon itself with a height of 0:
As a result, you can't drop elements into the #sortable element because it doesn't have a height.
The most common work-around is to use a clearfix to prevent the parent element from collapsing.
Either add overflow: auto to the container element (example):
ul {
overflow: auto;
}
or use a pseudo-element (example):
ul:after {
content: '';
clear: both;
display: table;
}
Alternatively, you could also just remove float: left from the li elements and set their display to inline-block instead. Additionally, vertical-align: top should be added to resolve a minor alignment issue when dragging the elements (example):
ul li {
display: inline-block;
vertical-align: top;
}

Stop content hiding under nav bar when user scrolls

Right, so I have a basic Jquery script that adds a "fixed" class to the nav bar when the user scrolls past the nav bar (154 pixels down). The issue is, the content below the nav bar then jumps up by 35 pixels (the height of the nav bar). I've tried adding a div class with a padding of 35px that shows when the user scrolls past the nav bar, which, although fixed other display problems, still allowed the content to lift up by 35 pixels. Here's what I have so far:
The jQuery that adds the fixed class, and the jQuery that shows the padding:
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
} else {
$('ul.nav').removeClass('fixed');
}
});
</script>
<script>
var num = 154; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.padd').show();
} else {
$('.padd').hide();
}
});
</script>
The HTML:
<body ONMOUSEWHEEL="OnMouseWheel()">
<p><img src="images/BannerPicture.png" alt="Leisure in mk logo" width="1024" height="150"></p>
<ul class="nav">
<li class="nav">
Home
</li>
<li class="nav">
Centre MK
</li>
<li class="nav">
Music
</li>
<li class="nav">
More Stuff</li>
</ul>
<div class="pad">
</div>
<div class="padd">
</div>
<div class="Informationbox">
text and shizz
</div>
And finally, the CSS:
ul.nav {
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
width: 1024px;
display: table;
table-layout: fixed;
vertical-align: middle;
height: 35px;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
background-color: #C60;
font-size: 25px;
}
/* this styles each link when the mouse is NOT hovered over */
li.nav {
display: table-cell;
vertical-align: middle;
height:100%;
align-items: center;
vertical-align:middle;
line-height:35px;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a {
display: block;
height: 100%;
width: 80%;
text-decoration: none;
vertical-align: middle;
align-items: center;
vertical-align: middle;
margin-right: auto;
margin-left: auto;
transition:.4s;
}
li.nav a:hover {
line-height: 25px;
transition:.4s;
}
ul.nav.fixed {
position: fixed;
top: 0;
left: 50%;
margin-left: -512px;
margin-right: 0;
}
.padd {
padding-bottom: 40px;
display:none;
}
.Informationbox {
background-color: #FF9900;
border: 1px solid #FFF;
width: 1024px;
margin-right: auto;
margin-left: auto;
}

add top 35px to the "nav" after block when u scrolles down using jquery.. and need to remove it when scrolls top..
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('ul.nav').addClass('fixed');
$('.your_div').css({"top" : "35px"});
} else {
$('ul.nav').removeClass('fixed');
$('.your_div').css({"top" : "0px"});
}
});

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.