I'm toggling between two divs with jQuery (I'm new to jQuery...) and I want both divs to use the display: flex property. I'm able to assign it to the first/default toggle (Option 1), but the second toggle (Option 2) defaults to display: block, and I'm not sure how to hook onto that.
Any insight would be so helpful - thanks!
Here's a jsfiddle:
http://jsfiddle.net/fZemQ/97/
HTML
<div class="pricing-switcher">
<a class="toggle active" id="HS-College">High School and College</a>
<a class="toggle" id="Club-Youth">Club and Youth</a>
</div>
<div class="pricing-wrapper">
<div class="panels HS-College">Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1 Option 1</div>
<div class="panels Club-Youth">Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2 Option 2</div>
</div>
CSS
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
.panels.Club-Youth {
display: flex;
justify-content: center;
}
.pricing-switcher {
float: left;
width: 100%;
}
.toggle {
float: left;
display: block;
border: 2px solid #000;
margin-right: 10px;
cursor: pointer;
}
.toggle.active {
background-color: red;
}
jQuery
$(document).ready(function() {
$('.toggle').click(function(){
var self = $(this);
$('.panels').hide();
if(self.hasClass('active') ) {
self.removeClass('active');
$('.panels.HS-College').fadeIn();
}else{
$('.toggle').removeClass('active');
self.addClass('active');
$('.panels.'+ self.attr('id')).fadeIn();
}
});
});
You are not assigning the css to the other panel. So it has default block display.
.panels.HS-College, .panels.Club-Youth {
display: flex;
justify-content: center;
}
here is the updated fiddle http://jsfiddle.net/6n0zfdnd/
A little tough to say if this is what you are looking for, but try merging these two rules:
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
into one rule:
.panels {
padding-bottom: 30px;
display: flex;
justify-content: center;
}
Instead of using AddClass and RemoveClass you can simply call:
.toggleClass()
Jquery Ref here:
http://api.jquery.com/toggleclass/
Which will remove the class if existing and add if not.
I think this will help you to solve the problem...
In your CSS file Add below property for Club-Youth div class also...add this code snippet to your CSS.
.panels.Club-Youth {
display: flex;
justify-content: center;
}
And the resultant CSS code will be...
.panels {
display: none;
padding-bottom: 30px;
}
.panels.HS-College {
display: flex;
justify-content: center;
}
.panels.Club-Youth {
display: flex;
justify-content: center;
}
.pricing-switcher {
float: left;
width: 100%;
}
.toggle {
float: left;
display: flex;
border: 2px solid #000;
margin-right: 10px;
cursor: pointer;
}
.toggle.active {
background-color: red;
}
Related
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>
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>
I wrote a code where side menu will be displayed after clicking the menu image. Its code is as given here. I'm using jQuery for this:
$(document).ready(function () {
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
}
But searchMenu which is a side menu isn't showing up when clicked on menu image. How can I fix it?
you missing ) in end of ready function
You need to insert jquery ui for easing effects
Just try this.,!
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
#logoDiv {
width: 52px;
float: left;
padding-top: 1.5%;
padding-left: 4%;
color: white;
background-color: #FFA500;
height: 50px;
display: flex;
flex-flow: column;
justify-content: center;
}
#pageLogo {
display: block;
flex-flow: column nowrap;
height: 67%;
justify-content: center;
width: 14%;
}
#pageTitle {
background-color: #FFA500;
height: 50px;
padding-top: 1%;
display: flex;
flex-flow: column;
justify-content: center;
padding-right: 22%;
}
#inheader {
font-size: 24px;
color: #fff;
}
.mainDiv {
width: 100%;
justify-content: center;
padding: 1%;
}
#user {
/*display: flex;
flex-flow: column;
justify-content: center;*/
color: #fff;
text-align: center;
font-size: 18px;
}
#searchMenu {
position: absolute;
top: 9%;
z-index: 10;
display: none;
height: 80%;
overflow-y: auto;
padding: 0px;
min-width: 250px;
background-color: transparent;
}
#searchMenu >.list-group >.list-group-item {
float: none;
min-width: 150px;
background-color: #201423;
;
border: 1px solid #CCC;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="headDiv" role="banner">
<div id="logoDiv"> <span id="pageLogo"><img src="images/index_menu_active_phone.png" id="logo"></span>
</div>
<div id="pageTitle" class="container-fluid">
<div class="center-block">
<img src="images/cart.png" class="img-rounded" alt="I" width="30" height="30" /> <span style="font-family: 'customfont';" id="inheader">Instore</span>
</div>
</div>
</div>
<div class="container mainDiv">
<div id="searchMenu" class="col-xs-4">Helloiudhfskjdzgfsiukydhfsiuejhgfsiudjh</div>
</div>
I hope this will help you :)
The end of your jQuery function is wrong.
See Working Jsfiddle
Code:
$(document).ready(function () {
$('#logoDiv, #pageTitle').click(function () {
if (!$("#searchMenu").is(':visible')) {
$('#searchMenu').show('slide', 'left', 300);
} else {
$('#searchMenu').hide('slide', 'left', 300);
}
});
});
Your code is right. Just include jQuery UI library. To show the sliding and other effects you need jQuery UI Library.
//code.jquery.com/ui/1.11.4/jquery-ui.js
here is working Fiddle with your code.(You have missed bracket in your fiddle)
Working Fiddle
This plugin extends jQuery's built-in .show() method. If jQuery UI library is not loaded, calling the .show() method may not fail directly, as the method still exists. However, the expected behavior will not occur. Same is the case for .hide() method.