Javascript collapse DIV on click - javascript

I'm learning javascript, but I'm encountering some problems I need help with. I have a notification box with different groups. I'm wanting it to be possible for only one notification group to be open at a time.
With CSS, i'm having all notification groups collapsed by default. Whenever someone clicks on new group tab, the existing group should collapse and the new tab should open.
CodePin: https://codepen.io/dansbyt/pen/xxgayPa
$('.notification-tab').click(function(e){
if($(e.currentTarget).parent().hasClass('active')){
$('.notification-group').removeClass('active');
}
else{
$('.notification-group').removeClass('active');
$(e.currentTarget).parent().toggleClass('active');
}
})
.notification-list-item{
padding: 5px 25px 15px;
border-bottom: 1px solid #e3e3e3}
.notification-list-item:nth-child(even){background-color: #E3E3E3}
.notification-tab {
border-bottom: 1px solid #e3e3e3;
display: inline-block;
width: 100%}
.visible {display: block !important}
.profiledrop {
width: 300px;
height: auto;
display: none;
max-height: 400px;
overflow-y: auto;
padding: 0;
margin: 0;
background: #eee;
margin-top: 3px;
margin-right: -15px;
border-top: 4px solid blue;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
-webkit-box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);
box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.75);}
.notification-group{
border-bottom: 1px solid #e3e3e3;
overflow: hidden;
min-height: 65px;}
.notification-list{
padding: 0;
overflow-y: auto;
height: 0px;
max-height: 200px;
transition: height .15s;}
.active .notification-list {height: 200px;}
.active .notification-tab, .notification-tab:hover {background-color: #5B7042}
.active .label, .notification-tab:hover .label {border: 1px solid white}
.notification-tab:hover {color: white}
.active .label, .active h4 {color: white}
a {color: #5B7042; text-decoration: none; font-weight: bold}
.label{
float: right;
margin-top: 20px;
margin-right: 10px;
color: $primary-color;
border: 1px solid orange;
padding: 0px 7px;
border-radius: 15px;}
h4 {margin-left: 10px}
h4, .label{display: inline-block;}
.item-footer .date{float: right}
.expanded {background-color: purple}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown-container">
<a href="#" id='launch'>Hi</a>
<ul class="profiledrop visible">
<li class="notification-group">
<div class="notification-tab">
<h4>Tasks</h4>
<span class="label">4</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Complete an assignment you need to do before the deadline on Monday.</p>
<div class="item-footer">
<span class="from">project3</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group">
<div class="notification-tab">
<h4>Behavior</h4>
<span class="label">3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">Alivia was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5s ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Marshall was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">30m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Trae was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">1d ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Kennedy was written up by Mr. Teacher.</p>
<div class="item-footer">
<span class="from">View Writeup</span>
<span class="date">5d ago</span>
</div>
</li>
</ul>
</li>
<li class="notification-group active">
<div class="notification-tab">
<h4>Homework</h4>
<span class="label">3/3</span>
</div>
<ul class="notification-list">
<li class="notification-list-item">
<p class="message">History homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Math homework added by Patrick.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
<li class="notification-list-item">
<p class="message">Science homework added by Brandi.</p>
<div class="item-footer">
<span class="from">View Assignment</span>
<span class="date">2m ago</span>
</div>
</li>
</ul>
</li>
</ul>
</div>

Related

How to active the menu button when it display the page?

Can anyone help me to Insert the menu button in active-based?
And I need it suitable for my Blogger menu... please... I really need help...
As the image shows above, it actually looks like this.
I have tried many active based by using JavaScript, CSS, but none of it works.
Below is my CSS code, is there any problem?
.dropbtn {
background-color: grey;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: blue;}
<div class="dropdown active">
Home</button>
</div>
<div class="dropdown">
About</button>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
Posts</button>
</div>
<div class="dropdown">
Template</button>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>
You should not nest a button inside an a tag, that is not valid HTML. You can use styles to get a similar look.
HTML
<nav>
<div class="dropdown active">
<a class="dropbtn" href="#">Home</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">About</a>
<div class="dropdown-content">
Profile
Introduction
</div>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Posts</a>
</div>
<div class="dropdown">
<a class="dropbtn" href="#">Template</a>
</div>
<div class="dropdown">
<button class="dropbtn">Theme</button>
<div class="dropdown-content">
Ocean
Forest
</div>
</div>
</nav>
CSS (for the active class)
/* styles the direct child link of .active */
.active > a {
background-color: red;
}

How to let an A href link in the menu bar when clicked, it opens a closed accordion in the body? - html

how the first accordion could be opened when clicked on the a href named "open 1st accordion" and the same thing for the second a href?? The accordion itself works 100% right, I just want to access it from outside it's scope, when clickng on an a href button in the menu bar.
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if(!$(this).next().is(":visible")){
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Open 1st accordion <br>
Open 2nd accordion
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>
Services.html (every a href in this menu should link to accordions in index.html and open them)
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="about.html">Who We Are
</a>
</li>
<li class="nav-item">
<a class="accord" href="">Our Services</a>
</li>
<li class="nav-item" id="nav">
<img src="assets/images/name.png"/>
</li>
<li class="nav-item">
<a class="accord" href="">Our Clients</a>
</li>
<li class="nav-item">
<a class="accord" href="" >Contact Us</a>
</li>
</ul>
</div>
Add a class to the top tags a:
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
Next, using the each() method and the index parameter, write the logic of the click event on these a tags.
Use event.preventDefault() to disable the default behavior of the a tag.
And using the trigger() method, call click events on the .expand class using an eq() with the appropriate index:
$(".expand").eq(index).trigger('click');
As such, we get the following code. Just add it to your main code.
$('.accord').each(function(index) {
$(this).click(function(event) {
event.preventDefault();
$(".expand").eq(index).trigger('click');
});
});
EDIT:
Modified the jquery code taking into account the localStorage().
$(document).ready(function () {
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
let click_state = localStorage.getItem("click_state");
let ind = localStorage.getItem("ind");
if (click_state == 1) {
$(".expand").eq(ind).trigger("click");
localStorage.removeItem("click_state");
localStorage.removeItem("ind");
} else {
}
$(".accord").each(function (index) {
$(this).click(function (event) {
event.preventDefault();
localStorage.setItem("click_state", 1);
localStorage.setItem("ind", index);
});
});
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>

How to change size of prices without disrupting the menu?

I've been trying to get the size of the prices to change, but whenever I do it goes on top of the dotted line instead of staying above it.
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
top: .9em;
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
I tried to mess with the padding and margin, but it didn't change anything for me.
I just want to change the size of the prices while staying above the dotted lines
Just set the hight of .li explicitly, and also the size of .price em (that's the font size of the price).
//hide all the pages and display the home page
$('.page').hide();
$($('.page')[0]).show();
$($('.page-button')[0]).addClass('selected');
//this block of code switches the pages. it works no matter how many pages or page buttons there are, making it easy to add and remove pages
$('.page-button').on('click', function() {
$(this).addClass('selected');
$('.page').hide();
$($('.page')[parseInt($(this).attr('data-page_num')) - 1]).show(); //displays the page based on the value of data-page_num
window.scrollTo(0, 0); //scroll to the top of the page
});
body {
background: #e6e6e6;
font-family: "Open Sans", Sans Serif;
font-weight: 300;
color: #febd44;
margin: 0px;
}
ul,
li {
list-style-type: none;
}
ul li {
display: inline-block;
box-sizing: border-box;
text-align: left;
}
.main-button {
display: inline-block;
width: 79px;
padding: 10px;
box-sizing: border-box;
text-align: center;
font-size: 16px;
}
.main-button:hover {
background: rgba(255, 255, 255, 0.1);
transition: 0.7s;
cursor: pointer;
}
h3 {
text-align: center;
font-size: 44px;
}
.container {
box-sizing: border-box;
margin: auto;
max-width: 70%;
padding: 20px;
}
.button {
background: rgb(0, 163, 222);
display: inline-block;
width: 130px;
margin: 10px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.button:hover {
background: rgb(0, 105, 242);
transition: 0.25s;
color: white;
cursor: pointer;
}
a {
color: #febd44;
text-decoration: none;
}
a:hover {
color: white;
transition: 0.5s;
}
.content1 {
background: rgba(255, 255, 255, 0.15);
}
.content2 {
background: rgba(255, 255, 255, 0.1);
}
.li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
/* set the height of the li explicitly */
height: 20px;
}
strong {
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
em {
padding: 0 0 0 5px;
font: 28px "Times New Roman", Sans-serif;
}
sup {
font-size: 15px;
margin-left: 3px;
}
.price {
position: relative;
float: right;
}
/* set the size of .price em */
.price em {
font-size: 50px;
}
/* set the size of .price sup */
.price sup {
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<h1>Silver Spoon</h1>
</li>
<a class='page-button' data-page_num='1' href='javascript:voide(0)'>
<li class="main-button home-button">Home</li>
</a>
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<li class="main-button about-button">Menu</li>
</a>
</ul>
</div>
<div class="page">
<div id="Home">
<div class="content1">
<div class="container">
<a class='page-button' data-page_num='2' href='javascript:voide(0)'>
<h3>Menu</h3>
</a>
<h4>Now introducing edible food.</h4>
<p>Silver Spoon has a high-quality menu with affordable prices. Find out more on the menu page.</p>
</div>
</div>
</div>
</div>
<div class="page">
<div id="Menu">
<div class="content1">
<div class="container">
<h3>Bakery</h3>
<li class="li"><strong>Cheese Danish</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chocolate Chip Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Glazed Donuts</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Everything Bagels</strong>
<div class="price"><em>2</em><sup>00</sup></div>
</li>
<li class="li"><strong>Plain Bagels</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Hot Breakfast</h3>
<li class="li"><strong>Egg Sandwich</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sausage Sandwich</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Egg Bites</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Egg Wraps</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Old-Fashioned Oatmeal</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
</div>
</div>
<div class="content1">
<div class="container">
<h3>Sandwiches</h3>
<li class="li"><strong>Chicken Caprese</strong>
<div class="price"><em>4</em><sup>50</sup></div>
</li>
<li class="li"><strong>Chicken Sandwich</strong>
<div class="price"><em>4</em><sup>00</sup></div>
</li>
<li class="li"><strong>Hamburger</strong>
<div class="price"><em>2</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ham & Swiss Panini</strong>
<div class="price"><em>3</em><sup>00</sup></div>
</li>
</div>
</div>
<div class="content2">
<div class="container">
<h3>Deserts</h3>
<li class="li"><strong>Cookies</strong>
<div class="price"><em>1</em><sup>50</sup></div>
</li>
<li class="li"><strong>Cake</strong>
<div class="price"><em>3</em><sup>50</sup></div>
</li>
<li class="li"><strong>Ice Cream</strong>
<div class="price"><em>1</em><sup>99</sup></div>
</li>
</div>
</div>
But I think it would be much better to use flexbox for this, and then you can set the font-size to whatever value you want, and don't have to worry about not displaying right:
body {
background: pink;
}
.menu-list {
list-style-type: disc;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0;
}
.menu-list .li {
margin: auto;
background: white;
display: flex;
width: 80%;
/* 'justify-content: space-between;' does the trick of
separating the two items in the li */
justify-content: space-between;
border-bottom: 1px dotted red;
}
.menu-list .li .title,
.menu-list .li .price {
display: flex;
}
.menu-list .li .title {
font-size: 18px;
align-self: flex-end;
}
.menu-list .li .price {
font-size: 30px;
}
<ul class="menu-list">
<li class="li"><span class="title">Food 1</span><span class="price">3<sup>50</sup></span></li>
<li class="li"><span class="title">Food 2</span><span class="price">5<sup>50</sup></span></li>
<li class="li"><span class="title">Food 3</span><span class="price">4<sup>00</sup></span></li>
</ul>

color boxes inside select option html

color boxes inside select option in html
i want do it using html and css and without using jquery or javascript
Output should be like this
i have tried
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#"><span style="background-color:Red"> </span>
Red</a>
<a href="#"> <span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<span class="color" style="background-color:Red"> </span> Red
<span class="color" style="background-color:Green"> </span> Green
</div>
</div>
but output should display color boxes inside dropdown.
color boxes inside select option html
here i am using anchor tag and div tag in the code i have written.
but i want it in select, option tag
You can't do it without JavaScript - here's some very simple click handlers that do what you want:
function updateColor(element) {
var newColor = element.firstChild.style.backgroundColor;
element.parentElement.parentElement.style.backgroundColor = newColor;
console.log(newColor);
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<h2>Dropdown Menu</h2>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#" onclick="updateColor(this)"><span style="background-color:Red" onclick="updateColor(this)"> </span>
Red</a>
<a href="#" onclick="updateColor(this)"><span style="background-color:Green"> </span> Green
</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div onclick="updateColor(this)"><span class="color" style="background-color:Red"> </span> Red</div>
<div onclick="updateColor(this)"><span class="color" style="background-color:Green" onclick="updateColor(this)"> </span> Green</div>
</div>
</div>
Remove "min-width: 160px;" from .dropdown-content
And
Remove "padding: 12px 16px;" from .dropdown-content a

Right Column not perfectly aligned

I'm creating a lms for a project,
But the problem is the Calendar is not properly horizonatly aligned. It's kind of aligned middle of the screen. I want it to push right corner but it is not happening at the moment.
I'm using Bootstrap.
Here's CODEPEN link
$(function() {
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: { top: $('#nav').offset().top }
});
});
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
body{
margin:0;
padding:0;
}
.nav-sidebar {
width: 100%;
padding: 0px 0;
/* border: 1px solid #ddd; */
}
.nav-sidebar a {
color: #333;
-webkit-transition: all 0.08s linear;
-moz-transition: all 0.08s linear;
-o-transition: all 0.08s linear;
transition: all 0.08s linear;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.nav-sidebar .active a {
cursor: default;
background-color: #428bca;
color: #fff;
text-shadow: 1px 1px 1px #666;
}
.nav-sidebar .active a:hover {
background-color: #428bca;
}
.nav-sidebar .text-overflow a,
.nav-sidebar .text-overflow .media-body {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* Right-aligned sidebar */
.nav-sidebar.pull-right {
border-right: 0;
border-left: 1px solid #ddd;
}
.nav-sidebar.pull-right a {
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.center_row{
max-width: 800px;
margin-top: -30px;
margin-left:25px;
margin-right: 150px;
color:#428bca;
text-transform: capitalize;
}
.left-side{
float:right;
}
.navbar > .container {width:auto;}
* {box-sizing:border-box;}
ul {list-style-type: none;}
body {font-family: Verdana,sans-serif;}
.month {
padding: 70px 25px;
width: 100%;
background: #428bca;
}
.month ul {
margin: 0;
padding: 0;
}
.month ul li {
color: white;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 3px;
}
.month .prev {
float: left;
padding-top: 10px;
}
.month .next {
float: right;
padding-top: 10px;
}
.weekdays {
margin: 0;
padding: 10px 0;
background-color: #ddd;
}
.weekdays li {
display: inline-block;
width: 13.6%;
color: #666;
text-align: center;
}
.days {
padding: 10px 0;
background: #eee;
margin: 0;
}
.days li {
list-style-type: none;
display: inline-block;
width: 13.6%;
text-align: center;
margin-bottom: 5px;
font-size:12px;
color: #777;
}
.days li .active {
padding: 5px;
background: #428bca;
color: white !important
}
/* Add media queries for smaller screens */
#media screen and (max-width:720px) {
.weekdays li, .days li {width: 13.1%;}
}
#media screen and (max-width: 420px) {
.weekdays li, .days li {width: 12.5%;}
.days li .active {padding: 2px;}
}
#media screen and (max-width: 290px) {
.weekdays li, .days li {width: 12.2%;}
}
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="index.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src=" http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css"></script>
</head>
<body>
<!---FIXED NAV BAR START --->
<nav class="navbar navbar-fixed-top navbar-default" role="navigation" container="false">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsable">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="aaa.gif" class="img-responsive" alt="Cinque Terre" width="70" height="35">
</a>
</div><div class="collapse navbar-collapse" id="navbar-collapsable">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Logged in as Some Person</p>
<li>
<a href="/log_out">
Log out
</a>
</li>
</ul>
</div>
</div>
</nav>
<!---FIXED NAV BAR END --->
<br>
<br>
<br>
<br>
<div class="center_row">
<div class="row ">
<div class="col-md-8">
<div class="right_side">
<h3>LEARNING MANAGEMENT SYSTEM OF AAA</h3>
</div>
</div>
<div class="col-md-4">
<div class="left_side" style="margin-left:100px;margin-right:-500px;">
<h3 id="demo" class="text-right" style="text-transform: uppercase; "></h3>
<script>
var d = new Date();
document.getElementById("demo").innerHTML = d.toDateString();
</script>
</div>
</div>
</div>
</div>
<br>
<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-4">
<div class="container">
<div class="row">
<div class="col-md-2">
<nav class="nav-sidebar">
<ul class="nav">
<li class="active"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</li>
<li>AAA Quaterly News</li>
<li>Student Handbooks</li>
<li>Award Handbooks</li>
<li>Regulations</li>
<li>Examination Time Tables</li>
<li>Class Time Tables</li>
<li>Contact Us</li>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
<div class="col-md-8" >
<h3 style="color: #428bca;">LATEST NEWS</h3>
</div>
<div class="col-md-2" id="pull-right" style="float:right !important;">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-----LEFT HAND NAV BAR END-->
</body>
</html>
EDIT:
What i want is as follows,
As per my view you should change the column grid as you are using col-md-4 but as you said you need it then go with col-md-12 and container-fluid to get the desired result.
container always have fixed width in different different resolution(in px) but if you want full width then try to use container-fluid which will take 100% according to all screen.
Check my codepan. I have removed row as it was taking extra margin and i have applied container-fluid to get the desired output. hope it will help.
NOTE In .navbar-brand class you are using fix height(50px) by which your logo image is going out. Either increase the size of nav bar or remove that height so logo will be in nav bar. Thank you
Change your section with below
<!-----LEFT HAND NAV BAR-->
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="col-md-2">
<nav class="nav-sidebar">
<ul class="nav">
<li class="active"><span class="glyphicon glyphicon-paperclip"></span> AAA Research Publications</li>
<li>AAA Quaterly News</li>
<li>Student Handbooks</li>
<li>Award Handbooks</li>
<li>Regulations</li>
<li>Examination Time Tables</li>
<li>Class Time Tables</li>
<li>Contact Us</li>
<li class="nav-divider"></li>
<li><i class="glyphicon glyphicon-off"></i> Sign in</li>
</ul>
</nav>
</div>
<div class="col-md-8">
<h3 style="color: #428bca;">LATEST NEWS</h3>
</div>
<div class="col-md-4" id="pull-right" style="float:right !important;">
<div class="month">
<ul>
<li class="prev">❮</li>
<li class="next">❯</li>
<li style="text-align:center">
August<br>
<span style="font-size:18px">2016</span>
</li>
</ul>
</div>
<ul class="weekdays">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li><span class="active">10</span></li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</div>
</div>
</div>
<!-----LEFT HAND NAV BAR END-->
Let me know if it doesn't look exactly like you want.

Categories