I want to add a feature such that when I click the flex-item it must expand to size of complete row below it. Like basically increase it's size when I click on it, and get back to previous size when I click it again.
The subsequent elements must remain of same size and be shifted to next row after the expanded clicked flex-item and follow the same properties of flex-box. The flex-items must be clickable elements which expand on click and get back to same size on another click.
I am not able to figure this out and I am new to front-end technologies.
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You can toggle class on click.
var i = 1; // just for differentiate divs
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar-'+i));
$(this).insertAfter($('[class^="flex-item"]').last());
i++
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
You might want to just add a class to the clicked flex-item that sets its width to 100%, then toggle this class on click.
Now I don't know if you wanted to: (a) just expand one flex-item at a time; or (b) you'd want to retract flex items on click only, but I made scenario (a) in my answer as this probably makes more sense. Nevertheless, you can go for scenario (b) by deleting this line of code:
$('.expand').removeClass('expand');
$('#clickMe').click(function() {
$('#Demosss').append($('<li id="flx-item" class="flex-item">').text('dar'));
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click','.flex-item',function(){
$('.expand').removeClass('expand');
$(this).toggleClass('expand');
});
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: tomato;
padding: 5px;
width: 200px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
ul li{
display: inline;
}
.expand {
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
Related
Is it possible to have an option list in two columns? For example that an option has a text that is on the left side and another that is on the right, but in the same row.
Example:
+-----select options-----+
option1 option2
option3 option4
+-----------------------+
It's not possible to do that with a standard select but you can simulate it. Below is an example which you can modify according to your needs.
When the form is submitted, the selected option is being sent as a hidden input.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 160px;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
width: 100%;
}
.options.open {
display: flex;
flex-wrap: wrap;
}
li {
display: flex;
align-items: center;
cursor: pointer;
width: 50%;
}
li:nth-child(odd) {
justify-content: flex-start;
}
li:nth-child(even) {
justify-content: flex-end;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><span>Option 1</span></li>
<li class="option"><span>Option 2</span></li>
<li class="option"><span>Option 3</span></li>
<li class="option"><span>Option 4</span></li>
</ul>
</div>
</form>
I'm currently trying to create a website from scratch, seen as I have the time to practice.
So far, I have got a working navigation bar (one which does not actually take you to other pages yet but does actually work ).
I decided to make this navigation bar responsive, as it is quite a big bar.
I have given the option of a vertical bar at a click of a button.
To note, the button is only available to the user when the browser is less than 900px width.
My current issue is that when the button is pressed, nothing is being displayed. I have ensured the javascript for the button is working, via trial and error but still have no luck.
I am new to this, so forgive me if my error is silly but any help would be greatly appreciated.
To help give an idea of what I am trying to achieve, here is the link I have been using as guidance: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp
If the issue lays within the fact that I am using an 'unordered list' tag to align my navigation bar to the right and my logo to the left, then any alternative way is welcome too!
Thank you.
P.s. ignore the names of each section in the navigation, I was just filling in the spaces for now ^^
body{
background-color: grey;
margin:0;
}
/*----------------------NAVIGATION BAR----------------------*/
.nav-container{
background-color: white;
float: right;
height: 80px;
position: absolute;
width: 100%;
margin-top: 0;
}
#nav-menu{
float:right;
padding: 13px 13px;
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
float: left;
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 900px) {
#nav-menu li a:not(.icon) {display: none;}
#nav-menu li a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 900px) {
.nav-bar.responsive {position: relative;}
.nav-bar.responsive li a.icon{
position: relative;
right: 0;
top: 0;
}
.nav-bar.responsive li a{
float: none;
display: block;
text-align: left;
position: relative;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="practice.css">
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- NAVIGATION BAR -->
<div class="nav-container">
<ul id="logo">Dellion</ul>
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a></li>
</ul>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
</script>
</body>
</html>
Simplify your layout by using flexbox
function myFunction() {
var x = document.getElementById("nav-menu");
if (x.className === "nav-bar") {
x.className += " responsive";
} else {
x.className = "nav-bar";
}
}
body {
background-color: grey;
margin: 0;
}
.nav-container {
display: flex;
background-color: white;
min-height: 80px;
width: 100%;
align-items: center;
flex-wrap: wrap;
}
#logo {
font-size: 27px;
padding: 0 13px;
height: 80px;
line-height: 80px;
}
.nav-bar {
flex-direction: row;
}
.nav-bar li {
list-style: none;
}
.nav-bar a {
color: #000;
font-size: 20px;
padding: 10px 12px;
text-decoration: none;
}
.nav-links {
margin-left: auto;
padding-right: 20px;
display: flex;
flex: 1;
justify-content: flex-end;
}
.hamburger .icon {
/* remove the styling, this code is for illustration purpose only*/
height: 40px;
width: 40px;
background: grey;
border: 1px solid #000;
}
.nav-bar,
.hamburger .icon {
display: none;
}
.hamburger {
position: absolute;
right: 20px;
top: 20px;
}
#media screen and (min-width: 901px) {
.nav-bar,
.nav-bar.responsive {
display: flex;
align-items: center;
}
}
#media screen and (max-width: 900px) {
.hamburger .icon {
display: block
}
.nav-bar.responsive {
display: flex;
flex-direction: column;
width: 100%;
margin: 0;
padding: 0;
}
.nav-links {
flex-basis: 100%;
margin: 0;
padding: 0;
}
.nav-bar li {
padding: 10px 0;
}
}
<div class="nav-container">
<div id="logo">Dellion</div>
<div class="nav-links">
<ul class="nav-bar" id="nav-menu">
<li><a class="nav-active" href="index.html">Home</a></li>
<li>Cars</li>
<li>Charities</li>
<li>Pros</li>
<li>Games</li>
<li>Auctions</li>
<li>Support</li>
</ul>
<div class="hamburger">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i></a>
</div>
</div>
</div>
There is a very simple way:
.nav-container{
background-color: white;
/* float: right; */
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin-top: 0;
}
#nav-menu{
/* float:right; */
/* padding: 13px 13px; */
}
#nav-menu li{
display:inline-block;
font-size: 20px;
padding: 10px 12px;
text-align: center;
}
#nav-menu li a:not(.nav-active){
color: black;
text-decoration: none;
}
#nav-menu li a:hover:not(#logo){
color: #0aaaa0;
}
.nav-active {
color: #0aaaa0;
text-decoration: none;
}
/* LOGO */
#logo{
padding: 0px 13px;
/* float: left; */
font-size: 27px;
}
/* Hide the link that should open and close the topnav on small screens */
#nav-menu .icon {
display: none;
}
And I recommended you to read this useful article about css Flexbox.
I think part of your problem is, :
Javascript:
if (x.className === "nav-bar") {
x.className += " responsive"; //add space after quotation mark, otherwise class is added adjacent
} else {
x.className = "nav-bar";
}
Css:
.nav-bar.responsive li a{
float: none;
display: block !important; /* I think this needs to be crushed with important */
text-align: left;
/* position: relative; you don't need it */
}
you can simply do it with css
flex-direction: column;
I'm trying to reproduce this responsive Navbar offered by W3 schools.
So far everything works except that I don't get the other divs (which function as navigation option) to reappear as a vertical list.
I tried changing to background color of the first div (which should always appear no matter what) upon button press and it does work, meaning that the onClick of the navigation div does work. What I don't get is why won't the other divs show up?
Here is the relevant HTML code
<div id=navbar class="respNavBar">
<div id="first">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class="extra">
<a><b>TEST</b></a>
</div>
<div class=navigation href="javascript:void(0);" onclick="showRespBar()">
<a><b>...</b></a>
</div>
CSS CODE
.greetingsText {
font-family: Raleway;
font-size: 50px;
}
.greetings {
box-shadow: 3px 6px #232323;
margin-right: 67%;
min-width: 165px;
}
#navbar {
height: 55px;
background-color: #393939;
box-shadow: 3px 6px #232323;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center; /* this makes shit center align vertically*/
min-width: 375px;
}
#navbar div:hover {
background-color: #a4a4a4;
}
.navigation {
display: none;
}
#navbar div {
height: 100%;
}
a {
margin-top: 10px;
display: block;
font-family: Raleway;
font-size: 30px;
text-align: center; /*this makes shit center horizaontally*/
}
.container {
margin-left: 12%;
margin-top: 2%;
margin-right: 12%;
}
#media screen and (max-width: 750px) {
#navbar {
display: block;
}
#navbar div:not(#first):not(.navigation) {display: none;}
#first {
float: left;
display: block;
}
.navigation {
display: block;
float: right;
}
}
#media screen and (max-width: 750px){
.extra {
float: none;
display: block;
text-align: left;
}
}
JS CODE
function showRespBar() {
var className = document.getElementById("navbar").className;
if (className === "respNavBar") {
document.getElementById("navbar").className += "additional";
} else {
document.getElementById("navbar").className = "respNavBar";
}
alert(className);
}
One possible issue i found in your JS code, inside if condition,
document.getElementById("navbar").className += "additional"; should be document.getElementById("navbar").className += " additional";
You are missing a space, due to which respNavBaradditional class gets applied to navbar instead of respNavBar addition.
I have navbar with few items and hamburger icon that should be displayed on low width, in this time navbar items should hide. With the button i want to change their display to bo flex and flex-direction set to column, so items will display vertically. I am trying to use this function, could you suggest me something ?
Here is the code :
let btn = document.getElementById('btn');
let menu = document.getElementsByClassName('hammburger-links')[0];
btn.addEventListener('click', function() {
menu.classList.toggle('openmenu');
});
.slider .hammburger-menu {
width: 16px;
height: 14px;
border: 0;
display: none;
position: absolute;
}
#media (max-width: 1425px) {
.slider .hammburger-menu {
display: inline;
}
.slider .hammburger-menu div {
background-color: #202124;
display: block;
width: 16px;
height: 2px;
margin: 4px 0;
}
}
.slider .hammburger-links {
padding: 0 1.250em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.slider .hammburger-links a {
padding: 0 1.500em;
text-decoration: none;
font-family: "Helvetica", Arial;
font-size: 11px;
color: #a6adb4;
}
#media (max-width: 1425px) {
.slider .hammburger-links a {
display: none;
}
}
.slider .hammburger-links .under-home {
position: absolute;
top: 2.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #F6F8F9;
min-width: 12.5em;
min-height: 12.5em;
z-index: 1;
display: none;
}
.slider .hammburger-links .under-home a {
margin: 10px 0;
}
.slider .hammburger-links.openhome {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.slider .hammburger-links.openmenu a {
display: flex;
flex-direction: column;
}
<div class="slider">
<div class="hammburger-menu" id="btn">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="hammburger-links" id="menu">
HOME
<div class="under-home">
WORLD NEWS
TRAVEL
TECHNOLOGY
CITY
CULTURE
MORE...
</div>
DISCOVERY
PHOTOS
CONTACT
<img src="images/navbar-img.png" alt="">
</div>
</div>
document.getElementsByClassName returns an array. So you want to do let menu = document.getElementsByClassName('hammburger-links')[0]; or get the element by id (menu).
Doing that should add the desired class to the #menu element, but your CSS also has a problem. Your CSS selector .slider .hammburger-links .openmenu doesn't select anything. That selector looks for an element .openmenu that is a descendant of an element .hammburger-links, that is a descendant of element .slider. You need the element that belongs to classes hammburger-links and openmenu. The selector looks like this: .slider .hammburger-links.openmenu
However, that still doesn't reveal the menu elements. I found that changing the selector again to target child anchor elements (.slider .hammburger-links.openmenu a) did the trick, but you may want to go about that differently depending on how you want to implement it.
I wanna make the select input like this, I already designed the UI
I tried to search in google, how to build it to code and many of the people seems to use dropdown css with UL and LI.
Is there any way to build this design with select tag, or if I must use dropdown li how to build the list to functions like select.
You can simulate the select dropdown as follows.
I assume you use a form for this. The code contains a hidden input element which will get the value that was selected.
$("body").on("click", ".selected", function() {
$(this).next(".options").toggleClass("open");
});
$("body").on("click", ".option", function() {
var value = $(this).find("span").html();
$(".selected").html(value);
$("#sel").val(value);
$(".options").toggleClass("open");
});
.container {
display: flex;
flex-wrap: wrap;
width: 25%;
}
.selected {
border: thin solid darkgray;
border-radius: 5px;
background: lightgray;
display: flex;
align-items: center;
cursor: pointer;
height: 1.5em;
margin-bottom: .2em;
padding-left: .5em;
min-width: 150px;
position: relative;
}
.selected:after {
font-family: FontAwesome;
content: "\f0d7";
margin-left: 1em;
position: absolute;
right: .5em;
}
.options {
display: none;
margin: 0;
padding: 0;
}
.options.open {
display: inline-block;
}
li {
display: flex;
justify-content: flex-start;
align-items: center;
cursor: pointer;
}
li>img {
margin-right: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<form>
<input type="hidden" id="sel">
<div class="container">
<div class="selected">Select an option</div>
<ul class="options">
<li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
<li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
<li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
</ul>
</div>
</form>