In my project, I have a list of dropdown buttons which are aligned right using flex-end. I've created a very minimal version of the code that shows the issue:
var popper = new Popper(
$('#anchor')[0],
$('#popper')[0],
{
modifiers: {
preventOverflow: {
enabled: true,
boundariesElement: 'window'
}
}
}
);
body {
height: 2000px;
}
.parent {
display: flex;
justify-content: flex-end;
}
.anchor {
width: 40px;
height: 40px;
background-color: #333;
}
.popper {
width: 120px;
height: 80px;
background-color: #c23;
border: 2px solid #ae3;
}
ul {
list-style-type: none;
margin: 0 -6px;
}
li {
margin: 0 6px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<ul class="parent">
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li><div class="anchor"></div></li>
<li>
<div class="anchor" id="anchor"></div>
<div class="popper" id="popper"></div>
</li>
</ul>
As seen above, the .popper div is overflowing body; causing a scrollbar to appear.
Removing the li makes Popper work as expected but I cannot do this as I'd lose my list. Using flex-start instead of -end also works correctly.
It's worth noting that the .popper and .anchor elements could be any width depending on what's in them.
Are there any workarounds or solutions for this behaviour? Preferably, without changing any markup.
Related
When I try to click to the burger menu, the navigation bar is not working. What should I do?
I wrote some html code and gave a navigation bar a special Id also I gave ID to the burger menu to use it later in jQuery.
In CSS I gave a parameter when the screen size will be less than 991px it would execute the following.
I also wrote that normally display should be hidden, but when I click to the burger menu the nav class should change from class="nav" to "nav show" but in my case it doesn't change.
let nav = $("#nav");
let navToggle = $("#navToggle");
navToggle.on("click", function(event) {
event.preventDefault();
nav.toggleClass("show");
});
#media (max-width: 991px) {
.works__item {
width: 50%;
}
.burger {
display: flex;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
background-color: #31344e;
text-align: right;
position: absolute;
top: 100%;
right: 0;
}
.nav.show {
display: block;
}
.nav__link {
padding: 9px 15px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="nav" id="nav">
Features
Works
Our Team
Reviews
Download
</nav>
<button class="burger" type="button" id="navToggle ">
<span class="burger__item">Menu</span>
</button>
Several things
The biggest is the position absolute with values that are not working at all
Also I would not use the same ID and CLASS for the nav - you now have ID, CLASS and TAGNAME all nav
let $nav = $("#nav");
let $navToggle = $("#navToggle");
$navToggle.on("click", function(event) {
event.preventDefault();
$nav.toggleClass("show");
});
.works__item {
width: 50%;
}
.burger {
display: flex;
}
.nav {
display: none;
width: 100%;
flex-direction: column;
background-color: #31344e;
text-align: right;
position: relative;
}
.nav a { color:white;}
.nav.show {
display: block;
}
.nav__link {
padding: 9px 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="nav" id="nav">
Features
Works
Our Team
Reviews
Download
</nav>
<button class="burger" type="button" id="navToggle">
<span class="burger__item">Menu</span>
</button>
You can do this more shortly like the following piece of code.
navToggle.on('click', function() {
nav.toggle();
});
If you wish (and maybe it's already done) you can check the jquery documentation to fully understand how "toggle()" function work. https://api.jquery.com/toggle/
I understand this seems to be a common request but after digging through several posts I can't find a solution and/or lack the knowledge to tailor the javascript to my needs.
I am looking for a way to have my Navbar stick to the top of the page once it reaches the top (scrolling far enough down). The issues I have is that my Navbar is currently positioned using flex, and not already at the top of the page.
CODEPEN
* {margin:0;padding:0;box-sizing:border-box}
html, body {text-align: center;}
#logo2 img {
margin: 0 auto;
margin-top: 3%;
}
.menu2 {
display: flex; /* displays children inline */
margin: 0;
width: 100%;
margin-top: 2%;
list-style-type: none;
background: linear-gradient(#3E3E3E, #2B2B2B);
}
li {
flex: 1; /* each takes as much width as it can, i.e. 25% */
border-right: 1px solid #232323;
}
li:last-child {
border: none;
}
li a {
display: block;
text-align: center;
font: Verdana;
font-size: 16px;
color: #EAE0D2;
text-decoration: none;
padding: 20px 0;
}
li a:hover {
background: linear-gradient(#404040, #3E3E3E);
}
.active {
background: linear-gradient(#2B2B2B, #232323);
}
<header id="logo2">
<img src="logo.png" alt="Logo"/>
</header>
<nav>
<ul id="navigation" class="menu2">
<li>HOME</li>
<li class="active">GALLERY</li>
<li>ART</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
Well I eventually found an answer to my question. For those of you interested.
JS
var num = 240; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.menu2').addClass('fixed');
$('.main').addClass('main2');
} else {
$('.menu2').removeClass('fixed');
$('.main').removeClass('main2');
}
});
.menu2 {
width: 100%; height: 100%;
background-color: rgb(240, 240, 240);
position: sticky;
left: 0; top: 0;
}
.emptySpace {width: 100%; height: 1000000px;}
<span class="menu2">
Link 1
Link 2
Link 3
Link 4
Link 5
</span>
<!-- the div below is to allow you to scroll so you can see how it works (it's absolutely useless) -->
<div class="emptySpace"></div>
If I'm understanding your question correctly, you can use
HTML:
<span class="menu2">
Link 1
Link 2
Link 3
</span>
CSS:
.menu2 {position: sticky;}
This will cause the navigation bar to stick to the top of the screen as the user scrolls down.
You can read into this a bit more at W3Schools.
Also, check out my Weave at LiveWeave.
My team and I are having trouble stacking a Dropdown component on our page. Essentially, we want the Dropdown to slide down underneath the top-nav when the button is clicked, but as it slides down, it should be positioned above everything else: the sub-nav and the content below.
Currently, the Dropdown is positioned as absolute and the animation is performed with a transform: translateY(). We've tried positioning the elements outside of it as relative (the outer <ul>, <nav>, and <div id="top-nav"> elements that are bolded) with a higher z-index to ensure the dropdown stays below it, but so far it hasn't worked.
We're also not able to modify any of the CSS or structure of the div#content below, but we do have flexibility as to where we can place the Dropdown structurally in the #header.
EDIT: Tried my best to recreate the scenario with JSFiddle here: https://jsfiddle.net/4zaas4sq/
Here's roughly what our markdown looks like:
<body>
<div id="header">
<div>
**<div id="top-nav">**
<div>
**<nav>**
<ul></ul>
**<ul>**
<li>
<DROPDOWN>
<button onClick={toggleDropdown}>Log In</button>
<div className={(this.state.show && 'show})>
<ul></ul>
</div>
...
</DROPDOWN>
</li>
<li></li>
</ul>
</nav>
</div>
</div>
<div id="sub-nav">
...
</div>
</div>
</div>
<div id="content">
</div>
</body>
Here's a wireframe depicting the final state of the dropdown.
Any help or suggestions would be appreciated!
I used max-height property.I didn't change a lot of things in your code.In JS code you will see main changes.Let me know if this solution is what you want.Thanks :)
In html code add class="hideItem" in the divider with id="dropdown" like this:
<div id="dropdown" class="hideItem">
JS code
$(document).ready(function() {
$('#dropdown-button').click(function() {
if( $("#dropdown").hasClass( 'hideItem' )){
$( "#dropdown" ).css( 'max-height' , '100%' );
$("#dropdown").removeClass( 'hideItem' );
$("#dropdown").addClass( 'showItem' );
}else{
$( "#dropdown" ).css( 'max-height' , '0' );
$("#dropdown").addClass( 'hideItem' );
$("#dropdown").removeClass( 'showItem' );
}
});
});
css code
html, body {
height: 100%;
}
#top-nav {
background-color: mediumpurple;
width: 100%;
}
.nav {
display: flex;
justify-content: space-between;
}
.inner-left-nav {
list-style: none;
display: flex;
}
.inner-left-nav li {
padding: 5px;
border: 1px solid black;
}
.inner-right-nav {
display: flex;
list-style: none;
margin: 0;
}
.inner-right-nav li {
align-items: center;
padding: 0 5px;
}
.dropdown-container {
display: flex;
align-items: center;
height: 100%;
}
#dropdown {
position: absolute;
top: 70px;
right: 100px;
max-height: 0;
overflow-y: hidden;
transition: max-height 1s ease-in-out;
background-color: mediumseagreen;
}
#dropdown.show {
visibility: visible;
transform: translateY(0%);
transition: visibility 0s, transform 0.3s;
}
#dropdown-button {
border: 1px solid black;
background: transparent;
padding: 0 20px;
cursor: pointer;
}
.dropdown-list {
padding: 0;
list-style: none;
}
#sub-nav {
display: flex;
justify-content: space-between;
background-color: grey;
}
#content {
background-color: azure;
width: 100%;
height: 100%;
}
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
http://codepen.io/anon/pen/KwOyQo
Friends, is there any way to make this div scroll even being with the mouse over the boxes??
Html:
<div class="container">
<div class="container-scroll">
<ul class="list">
<li class="list-item one"></li>
<li class="list-item two"></li>
</ul>
</div>
</div>
Css:
.container {
width: 100%;
height: 400px;
border: 1px solid black;
overflow: scroll;
color: white;
}
.container-scroll {
width: 100%;
height: 4000px;
}
.list {
list-style: none;
position: fixed;
}
.list-item {
display: inline-block;
width: 150px;
height: 150px;
}
.list-item.one {
background: pink;
}
.list-item.two{
background: black;
float: right;
}
I was trying to make something with overflow but anything worked..
You've set those elements to position: fixed. This positions the elements relative to the browser, which means they're completely taken out of the flow of their parent. So of course, when you hover over them, the container won't scroll.
You could use pointer-events: none on those boxes, but this isn't supported well across all browsers. Also, it's unclear whether you might actually need pointer events inside those elements in the future.
My advice would be to remove the scrollable div. Ensure that the body/document is the only element that scrolls. That way the content will scroll no matter what element you're currently mousing over.
.list-item {
display: inline-block;
width: 150px;
height: 150px;
pointer-events:none;
}
This will do the trick
EXAMPLE: http://codepen.io/anon/pen/OPKOog