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);
Related
I'm creating simple page with a <header> and a <section>. In the section I have 3 divs and I am positioning them with display: flex; and justify-content: space-between.
The problem is that I also use JS slideToggle() on two of them (extreme ones). It is changing the layout of my center div after they are going up. How can I do it so that my center div doesn't change position after one of the others is slid up?
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').slideToggle();
});
});
$(document).ready(function() {
$('#songs').click(function() {
$('#listSongs').slideToggle();
});
});
section {
display: flex;
justify-content: space-between;
}
#listSongs {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
}
#listSongs p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
}
.hidden {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 20px;
width: 200px;
visibility: hidden;
}
#nav p {
text-align: center;
}
#nav ul {
list-style-type: none;
text-align: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div id="listSongs">
<p>Authors:</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav">
<p>something</p>
</div>
</section>
The issue is because when the slideUp/slideDown/slideToggle methods complete, they set display: none on the target element. This is what causes the layout of your page to shift.
To workaround, and improve the animation, you can use CSS instead. Use the transition property to animate the height setting. Then you can toggle a class which sets height: 0 on the target element. Try this:
$(document).ready(function() {
$('#playlist').click(function() {
$('#nav').toggleClass('hide');
});
$('#songs').click(function() {
$('#listSongs').toggleClass('hide');
});
});
body { background-color: #CCC; }
section {
display: flex;
justify-content: space-between;
}
section > div.panel {
margin-top: 50px;
height: 550px;
background-color: black;
border-radius: 5px;
font-size: 25px;
width: 200px;
transition: height 0.4s;
overflow: hidden;
}
section > div.panel.hide {
height: 0;
}
section > div.panel p {
margin-top: 5px;
width: 200px;
text-align: center;
overflow: hidden;
height: 35px;
line-height: 50px;
color: white;
}
#player {
color: red;
}
#nav {
border-radius: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="playlist">Playlist</button>
<button id="songs">Songs</button>
<section>
<div id="listSongs" class="panel">
<p>Authors:</p>
<p>lorem ipsum</p>
<div class="after"></div>
</div>
<div id="player">
<p>something</p>
</div>
<div id="nav" class="panel">
<p>something</p>
</div>
</section>
Note that I also rearranged some of the CSS to make it more generic with less repetition.
I have an html css code for notification dropdown box the issues is i can't able to click the tag and same time i tried with javaScript also not working i can't understand this issues please advice me how to make a clickable tag..
$('.toparea-right > .setting-area > li').on("click",function(){
$(this).siblings().children('div').removeClass('active');
$(this).children('div').addClass('active');
return false;
});
//------- remove class active on body
$("body *").not('.toparea-right > .setting-area > li').on("click", function() {
$(".toparea-right > .setting-area > li > div").removeClass('active');
return true;
});
.dropdowns {
background: #FFF none repeat scroll 0 0;
border: 1px solid #e1e8ed;
list-style: outside none none;
max-height: 294px;
overflow: auto;
padding-left: 0;
position: absolute;
right: -175px;
text-align: left;
top: 55px;
width: 440px;
opacity: 0;
visibility: hidden;
-webkit-transition: all 0.3s linear 0s;
-moz-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.dropdowns.active{
opacity: 1;
visibility: visible;
}
.drops-menu {
list-style: outside none none;
padding-left: 0;
}
.drops-menu > li > a {
border-bottom: 1px solid #e1e8ed;
display: inline-block;
padding: 5px;
width: 100%;
}
.dropdowns > h6{
font-size: 15px;
}
.drops-menu > li > .tag {
color: #fff;
display: inline-block;
font-size: 11px;
padding: 0 6px;
position: absolute;
right: 0;
top: 0;
}
.drops-menu > li:nth-child(2n) > a {
background: whitesmoke none repeat scroll 0 0;
}
.drops-menu > li a img {
display: inline-block;
vertical-align: middle;
width: 10%;
border-radius: 100%;
margin-bottom: 10px;
margin-left: 10px;
height: 45px;
}
.mesg-meta {
display: inline-block;
padding-left: 30px;
vertical-align: middle;
width: -1%;
color: #000000;
padding-top: -21px;
top: 18px;
margin-top: 0px;
line-height: 25px;
}
.mesg-meta > h6 {
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.3px;
margin-bottom: 0;
text-transform: capitalize;
margin-left: -15px;
}
.mesg-meta > span {
color: #000000;
display: inline-block;
font-size: 12px;
line-height: 15px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
}
.mesg-meta > i {
color: #000000;
font-size: 12px;
font-style: normal;
margin-left: -15px;
}
.drops-menu > li > a:hover {
background: #fafafa none repeat scroll 0 0;
}
.dropdowns > span {
border-bottom: 1px solid #ccc;
display: inline-block;
font-size: 14px;
padding: 0px 10px;
text-align: center;
width: 100%;
height: 59px;
margin-top: 0px;
}
.dropdowns > a.more-mesg {
display: inline-block;
font-size: 14px;
padding-bottom: 5px;
text-align: center;
text-transform: capitalize;
width: 100%;
}
.blue{background: #337ab7;}
.red{background: #ff0000;}
.green{background: #33b7a0;}
.dropdowns.active > a {
background: #fafafa none repeat scroll 0 0;
display: block;
font-size: 13px;
margin-bottom: 2px;
padding: 0px 0px;
text-align: center;
}
.dropdowns.active > a i {
font-size: 11px;
left: 8px;
position: absolute;
top: 10px;
}
.dropdowns.languages {
width: 100px;
}
.dropdowns.active > a:hover {
background: #f1f1f1 none repeat scroll 0 0;
}
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
I attached my CSS and HTML code and i tried it's working but URL is opening in another tab. i need open the url in same tab please tell me the solution how to fix this.
In your code dropdown isn't ever made visible.
I think, you on click of "Notifications" you have to toggle(hide/show) dropdown by toggling(adding and removing) "active" class on Notifications tag.
Once your dropdown becomes visible. clicks should work as you desire.
Sample working code:
Notifications
<script>
function toggleDropdownVisibility(event) {
var notificationBell = event.target;
if (notificationBell.classList.contains('active')) {
notificationBell.classList.remove('active');
} else {
notificationBell.classList.add('active');
}
}
</script>
In addition to that please remove onclick="window.location.href('view-post.php')" as window.location.href is not a function instead it a property to which a url can be assigned. like window.location.href='view-post.php' . But you can completely remove this onclick as its not needed.
Your code looks fine here , except that I don't understand why you have opacity:0 and visibility:hidden on the .dropdown css class. These are making your control not accessible.
But once I remove these 2 properties in css worked for me (on last version of Chrome)
My advice:
For tags you can use this :
https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/. No need too much custom JS.
I have the solution for this, i tried that and it's working.
<div class="toparea-right">
<ul class="setting-area">
<li>
<i class="far fa-newspaper"></i>
<span class="notifi-count" id="displayNotiCount">00</span>
Notifications
<div class="dropdowns" id="MmailNoti">
<ul class="drops-menu">
<li>
<a href="view-post.php" onclick="window.location.href('view-post.php')" title="">
<div class="mesg-meta-notification">
<h6>Bruce Wayne</h6>
<span>is commented in your post!</span>
<i>0 min ago</i>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("MmailNoti");
popup.classList.toggle("show");
}
</script>
Okay so I am working on my new personal website and I have came to making the off canvas menu toggable. How cna I do so?
So far I have:
var mainNav = document.getElementById('menu');
var navToggle = document.getElementById('menu-toggle');
mainNav.classList.add('collapsed');
function mainNavToggle() {
mainNav.classList.toggle('collapsed');
}
navToggle.addEventListener('click', mainNavToggle);
.collapsed {
margin-left: -330px;
}
.navigation {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
color: #212121;
background-color: #FFFFFF;
transition: all ease-in-out 200ms;
box-shadow: 3px 0px 30px rgba(0, 0, 0, 0.4);
}
.navigation ul {
display: flex;
flex-direction: column;
padding: 90px 0 0 30px;
}
.navigation li {
margin-bottom: 30px;
}
.navigation a {
display: inline-block;
font-size: 16px;
font-weight: 500;
}
.navigation i {
vertical-align: top;
margin-right: 10px;
}
.navigation .double-line {
display: inline-block;
line-height: 1.45;
}
.navigation .double-line span {
display: block;
font-size: 12px;
opacity: 0.3;
}
.clicked span {
background-color: #000;
}
.menu-toggle {
background-color: transparent;
border: 0px;
outline: 0px;
cursor: pointer;
position: relative;
z-index: 10;
}
.menu-toggle span {
display: block;
width: 18px;
height: 2px;
margin: 4px;
background-color: #FFFFFF;
}
<button class="menu-toggle" id="menu-toggle">
<span></span>
<span></span>
<span></span>
</button>
<nav class="navigation" role="navigation" id="menu">
<ul>
/* Menu contents */
</ul>
</nav>
But with this code when the page loads you can see the menu being swept to the left, I dont want this.
How can I make my toggle button change colour when the menu is open?
Adding the class collapsed to the nav and removing the initial toggle solves your blinking issue! And toggling an active class on the toggle gets you a grey toggle when the $menu is open! The transition CSS property is optional to make the bg transition from transparent to grey look smooth.
Fiddle: https://jsfiddle.net/mbs1kymv/1/
JS:
var $menu = document.getElementById('menu');
var $toggle = document.getElementById('menu-toggle');
$toggle.addEventListener('click', function()
{
$menu.classList.toggle('collapsed');
$toggle.classList.toggle('active');
});
HTML:
<nav class="navigation collapsed" role="navigation" id="menu"> ... </nav>
CSS:
.menu-toggle {
transition: background-color 0.25s;
}
.menu-toggle.active {
background-color: #CCC;
}
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/
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"});
}
});