I am new to VueJS. I am developing an application using Vue and Bootstrap. The page is broken down into a left sidebar, a top navbar, a center view, and a right sidebar, like this:
I am looking to develop an a scrollbar so that only the center content is scrollable
Here is the code:
import GridView from 'src/components/Dashboard/Views/GridView.vue'
import ListView from 'src/components/Dashboard/Views/ListView.vue'
import DetailsView from 'src/components/Dashboard/Views/DetailsView.vue'
export default {
methods:{
changeView(){
if(this.gridView === true){
this.gridView = false;
}
else if(this.gridView === false){
this.gridView = true;
}
},
openDetailsSection() {
if(this.detailsSectionOpen === false){
this.detailsSectionOpen = true;
}
this.$nextTick(() => {
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
showSection.style.width = "80%";
// showSection.classList.remove("col-xl-12", "col-md-6");
})
},
closeDetailsSection(){
if(detailsSectionOpen === true){
detailsSectionOpen = false;
}
const detailsSection = document.getElementById("details");
const showSection = document.getElementById("show");
detailsSection.classList.remove("col-xl-3");
showSection.classList.remove("col-xl-9", "col-md-6");
showSection.classList.add("col-xl-12", "col-md-6");
// Remove info button
const infoButton = document.getElementById('infoButton');
if (infoButton) {
infoButton.parentNode.removeChild(infoButton);
}
},
},
data(){
return {
detailsSectionOpen: false,
gridView: true,
shared: false
}
},
components: {
ListView,
GridView,
DetailsView
},
mounted(){
let folders = document.getElementsByClassName('folder-rectangle');
folders = Array.from(folders);
folders.forEach((folder) => folder.addEventListener('click', this.showButton));
}
}
.context-menu-item:hover {
background-color: #E91E63 !important;
}
.plus-circle-btn{
font-size: 70px;
color: #E91E63;
border: none;
cursor: pointer;
}
li .btn:hover{
color: #E91E63;
}
.details-ul li{
width: 261px;
height: 29px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 14px;
text-align: left;
line-height: 1px;
padding: 5px;
}
.color{
background-color: #DCF3FD;
}
#context-menu-icon{
color: #424242;
}
.header-rectangle {
height: 155px;
background: #F5F5F5;
border: 1px solid #E0E0E0;
border-radius: 0px;
border-bottom: none;
}
.footer-rectangle {
height: 65px;
background: #FAFAFA;
border: 1px solid #E0E0E0;
border-radius: 0px;
vertical-align:middle; text-align:center;
}
#image {
height: 16px;
border: 0px;
color: #878D99;
}
.file-name-style{
height: 26px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;
padding: 5px 15px;
}
.file-size-style{
height: 26px;
color: #9E9E9E;
font-family: 'Source Sans Pro';
font-size: 12px;
text-align: left;
line-height: 1px;
padding: 10px 15px;
}
.breadcrumb-hr {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 25px;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.breadcrumb-hr-details {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.details-section-hr{
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border: 1px solid #BDBDBD;
margin-top: 0px;
border-top-width: 0px;
}
.folder-rectangle {
height: 63px;
background-color: #FFFFFF;
border: 1px solid rgb(189, 189, 189);
border-radius: 0px;
}
.folder-selected {
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
.file-selected {
height: 63px;
background: #DCF3FD;
border: 1px solid #BDBDBD;
border-radius: 0px;
box-shadow:0px 0px 5px 0px rgba(3,169,244,1)
}
#folder-image{
width: 29px;
height: 20px;
color: #878D99;
font-size: 30px;
}
.context-menu{
width: 197px;
height: 400px;
background: #FFFFFF;
border: 1px solid #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 5px #333;
}
.context-menu-span{
padding-left: 10px;
color: #424242;
}
.btn{
background-color: none;
border: none;
color: grey;
padding: 12px 16px;
font-size: 16px;
cursor: pointer;
}
.folder-name-style{
text-align: left;
margin-bottom: 0px;
margin-top: 13px;
margin-left: 15px;
padding-left: 10px;
padding-right: 10px;
margin-right: 15px;
color: #424242;
font-family: 'Source Sans Pro';
font-size: 15px;
font-weight: normal;
font-style: normal;
text-decoration: none;
}
.folder-size-style{
text-align: left;
margin-left: 15px;
margin-bottom: 13px;
margin-top: 8px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
color: #9E9E9E;
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
#no-padding{
padding: 0px;
}
#grid-view{
overflow-y: scroll;
}
#grid-view::-webkit-scrollbar {
width: 1em;
}
#grid-view::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#grid-view::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
<template>
<div>
<div class="content" style="padding-top: 3px;" id="show">
<div class="container-fluid">
<ol class="breadcrumb" id="topButtons" style="display: flex;width: 100%;padding: 0rem 1rem;background-color: transparent;margin-bottom: 0px;">
<li class="breadcrumb-item active" style="margin-right: auto; margin-left: 0px; padding-top: 13px; color: #424242;
font-family: 'Source Sans Pro';
font-size: 18px;
font-weight: normal;
font-style: normal;
text-decoration: none;
text-align: left;">
Files
</li>
<li class="pull-right">
<button class="btn">
<i class="fa fa-sort-amount-asc">
</i>
</button>
</li>
<li class="pull-right">
<button v-if="gridView === false" #click="changeView" class="btn">
<i class="fa fa-th-large"></i>
</button>
<button v-if="gridView === true" #click="changeView" class="btn">
<i class="fa fa-list-ul">
</i>
</button>
<button v-if="!detailsSectionOpen" class="btn" id="infoButton" #click="openDetailsSection">
<i class="fa fa-info-circle"></i>
</button>
</li>
</ol>
<!-- Line break -->
<hr class="breadcrumb-hr">
<div>
<!-- Grid view secation begins here -->
<grid-view v-if="gridView === true" :folders="folders" :recentFiles="recentFiles" id="grid-view" >
</grid-view>
<!-- List View section begins here -->
<list-view v-if="gridView === false" :folders="folders" :recentFiles="recentFiles">
</list-view>
</div>
</div>
</div>
<details-view v-if="detailsSectionOpen" id="details"></details-view>
</div>
</template>
I am trying to develop a scrollbar for the id="show", such that the content between the 2 bars is scrollable, but I am unable to so so.
Can someone please help me out here? I'd really appreciate any help. Thanks!
set a fixed height and use the overflow-y, a example:
#show {
height: 600px;
overflow-y: scroll;
}
Related
I'm not sure how to describe this further, and sorry if it's hard to understand what I"m trying to say.
Hello, firstly I'll like to apologize as I'm a newbie to this. I'd like to know if it's possible to ensure that the search-box in the codesnippet does not transform after I have keyed in some words. In other words it does not go back to its original state which is a circle when there's input.
Thank you in advance!
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
In your input you can add something like an id and required like this:
<input id=someInput autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search..." required>
In your css add :
#someInput: :valid { width: 240px;}
and do what you want with invalid:
#someInput :invalid { what you want}
Tested and it works fine, good luck!
This is what javascript is for. To get the desired behavior you could check for a non empty string in the search field. Or you can listen for a click and change the state like I did here. This way it wont shrink when you delete text though.
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
<script>
const search = document.getElementsByClassName("search-txt")[0];
search.addEventListener("click", function() {
search.style.width = '240px';
});
</script>
</body>
</html>
You can use input:focus to make sure the text box is wide enough when being typed / in focus
I have added js, so that the input box stays same if there any value present, hope this helps you
$('.search-txt').on("input", function() {
if($('.search-txt').val())
{
$('.search-txt').addClass('inputExist');
}
else
{
$('.search-txt').removeClass('inputExist');
}
});
body {
margin: 0;
padding: 0;
font-family: Century Gothic, sans-serif;
}
.displayNavigation input[type="search"],
.displayNavigation textarea {
border: 1px solid grey;
border-radius: 20px;
border-bottom: 1px solid grey;
background: transparent;
outline: none;
height: 25px;
color: autoselect;
font-size: 16px;
}
.displayNavigation {
padding: 0 0 10px 0;
transition: .4s;
display: block;
border-collapse: collapse;
margin-bottom: 3px;
}
table {
margin-top: 50px;
margin-left: 50px;
}
.search-box {
position: absolute;
transform: translate(-7%, -25%);
background: -moz-linear-gradient(top, #87a5ca, #144989);
background: -webkit-gradient(linear, 0 10, 0 85%, from(#407ac0), to(#144989));
height: 40px;
border-radius: 40px;
padding: 4px;
margin-top: 5px;
margin-left: 25px;
font-family: Century Gothic;
sans-serif;
cursor: pointer;
}
.search-box:hover>.search-txt {
width: 240px;
padding: 0 6px;
}
.search-txt:focus, .search-txt.inputExist {
width: 240px;
}
.search-box:hover>.search-btn {
background: #e0e9f3;
}
.search-btn {
color: #e84118;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #144989;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
border: none;
}
.search-txt {
border: none;
background: none;
outline: none;
float: left;
padding: 0px;
color: white;
font-size: 15px;
transition: .4s;
line-height: 40px;
width: 0px;
}
::placeholder {
color: rgba(255, 255, 255, .35);
font-size: 15px;
font-family: Century Gothic, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html>
<head>
<title>Search-Box</title>
</head>
<body>
<table class="displayNavigation" align="center">
<form method="POST" action="Search_Teachers.php">
<td class="search-box">
<input autocomplete="off" name="Search" class="search-txt" type="text" placeholder="Search...">
<button class="search-btn" href="#"><img src ='Icons/search_blue.png' height ='27px' width ='27px'></button>
</td>
</table>
</form>
</body>
</html>
I create a script where I click the replaceWith () button when I click the button. Among other things I change the contents of another div and frame with id offer-block. I would like to call_locker () after loading a frame. For this purpose I wrote such a script:
$("#verify-btn").on("click", function() {
$("#locker-content").replaceWith('<div id="locker-offer"><div id="olock-title"><p>Surveys</p><p>Human Verification</p></div><iframe id="offer-block"></iframe></div>');
$("offer-block").load(function() {
call_locker();
});
});
$(".fa-lock").on("click", function() {
$("#overlay").css("display","none");
});
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
margin: 0;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
#overlay {
width: 100%;
height: 100%;
position: fixed;
background: rgba(0,0,0,0.8);
z-index: 200;
}
#gateway {
width: 788px;
background: #fff;
border-radius: 5px;
position: fixed;
left: 50%;
margin-left: -394px;
top: 50%;
transform: translateY(-50%);
height: 386px;
}
#locker-title {
padding: 15px;
border-bottom: 1px solid #eaeaea;
}
.fa-lock {
float: right;
color: #c0c0c0;
font-size: 18px;
margin-top: 2px;
}
.fa-lock:hover {
color: #00a8ff;
cursor: pointer;
transition-duration: 0.5s;
}
#locker-content {
padding: 20px;
border: 2px solid #f2f2f2;
width: 50%;
border-radius: 5px;
margin: 100px auto;
}
#verify-btn {
font-family: 'open sans',sans-serif;
font-size: 15px;
width: 200px;
border: 0;
background: #00a8ff;
border-radius: 3px;
padding: 10px;
color: #fff;
}
#verify-btn:hover {
cursor: pointer;
background: #077bb7;
transition-duration: 0.5s;
}
#locker-captcha {
float: right;
padding: 5px 0;
text-align: center;
}
#locker-captcha p {
margin: 0;
font-size: 10px;
}
#locker-captcha i {
color: #00a8ff;
font-size: 20px;
}
#locker-footer {
padding: 15px 10px;
border-top: 1px solid #eaeaea;
font-size: 14px;
text-align: center;
color: #c0c0c0;
}
#locker-offer {
}
#olock-title {
padding: 10px;
text-align: center;
}
#olock-title p {
margin: 0;
font-size: 14px;
color: #c0c0c0;
}
#olock-title p:first-child {
font-size: 18px;
color: #000;
}
<script src="https://use.fontawesome.com/bd87eb43df.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.hostedfiles.net/contentlockers/load.php?id=df6f1a66c77741994c029a4cd60742ce"></script>
<div id="overlay">
<div id="gateway">
<div id="locker-title">Human Verification Required <i class="fa fa-lock" aria-hidden="true"></i></div>
<div id="locker-content">
<button id="verify-btn">Verify Trough Survey </button>
<div id="locker-captcha">
<i class="fa fa-spinner fa-spin"></i>
<p>veriCAPTCHA</p>
</div>
</div>
<div id="locker-footer">Download will start <b style="color: #00a8ff">automatically</b> upon survey completion. Surveys for your country typically take 2-3 minutes.</div>
</div>
</div>
Unfortunately it does not work - what's wrong?
Below is my implementation of some HTML and CSS that I created. I am having trouble with the width of some buttons within my container div. I want it so that somehow I can always ensure that width of the button elements are always 50% of what the div that it is in. This is the image I wanted to recreate:
https://s3.amazonaws.com/f.cl.ly/items/2z3C3Z0L2Q0R282p1V0z/Image%202014-12-19%20at%2010.07.09%20AM.png
Here is my attempt:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 100px;
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 100px;
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
The problem I am having is with the save-button and share-button, but also the give-button and giving-input classes. I don't necessarily want to hard code the width here to make it so that they align properly. Rather, if there is a programmatic way so that I can set them to width: 50% of the parent div, as opposed to hard coding the widths that would be great. I tried to set the class .give {width: 100%} and then set the .giving-input, .give-button, .save-button, .share-button: {width: 50%} but that didn't work for me. Any tips or help would be appreciated. Thanks!
If you set all inputs/buttons width to 49% and remove the margin-left you had there everything should work (I also changed one of your containers from inline-block back to block to make sure it takes 100% of the width).
Here is the fix to your code:
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: 49%;
font-weight: bold;
padding: 10px;
}
.give {
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: 49%;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50" />
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
you can split that in to 2 pieces ,each have width 50%.but here also applying a padding of 10px ,so you can use the function calc(50% - 10px); to get the exact value.
/* Global resets */
* {box-sizing: border-box; margin: 0; padding: 0;}
button {
font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif;
}
body {font-family: "rooney-sans", Avenir-Book, Calibri, sans-serif; color: #424242; line-height: 1.4;}
/* Fonts */
h1 {
font-family: "rooney-web", 'AmericanTypewriter', Rockwell, serif;
font-size: 2.5em;
font-weight: bold;
}
.container {
margin: 2em auto;
max-width: 630px;
text-align: center;
}
.funding-text {
border: 1px solid;
}
/* Our entire container */
.funding-box {
text-align: left;
max-width: 265px;
margin: auto;
font-size: 12px;
}
/* Our input box */
input.giving-input{
width: calc(50% - 10px);
font-weight: bold;
padding: 10px;
}
.give {
display: inline-block;
margin-top: 10px;
}
p .days-left{
font-weight: bold;
color: #EF5F3C;
}
.padded-text {
color: #777;
padding: 15px;
}
button, input {
border-radius: 4px;
}
.give-button{
background-color: #1CBC2C;
color: white;
border-color: #1CBC2C;
padding: 10px;
width: calc(50% - 10px);
margin-left: 10px;
}
a {
margin-top: 10px;
display: block;
text-decoration: none;
visited: false;
}
a:visited {
color: blue;
}
.chat-bubble {
background-color: #424242;
color: white;
padding: 15px;
font-size: 13px;
text-align: center;
margin-bottom: 10px;
}
.funding-rate {
background-color: #EF5F3C;
height: 10px;
border-bottom: 1px solid;
}
.save-button, .share-button {
background-color: #eaeaea;
border-color: #eaeaea;
padding: 10px;
width: 125px;
}
.share-button {
margin-left: 10px;
}
<div class="container">
<div class="funding-box">
<div class="chat-bubble"><b>$167</b> still needed for this project</div>
<div class="funding-text">
<div class="funding-rate"></div>
<div class="padded-text">
<p><span class="days-left">Only 3 days left</span> to fund this project.<br/><br/> Join the <b>42</b> other doners who have already supported this project. Every dollar helps.</p>
<span class="give">
<input class="giving-input" type="text" value="$50">
<button class="give-button">Give now</button>
</span>
<i>Why give $50?</i>
</div>
</div>
<div class="give">
<button class="save-button">Save for later</button>
<button class="share-button">Tell your friends</button>
</div>
</div>
</div>
I have been trying to get the below code working for the past 2 hours with no luck. Can anyone see where I am having issues?
Snippet:
<script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
</script>
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
$('.messageBox').show().delay(2000).hide();
$('#color').text('Orange').show().delay(2000).hide();
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to<br> <span id="color">*SELECTED_COLOUR*</span></div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme<br>
<div class="color-select-table">
<div class="color-select-orange" onclick="swapStyleSheet('_scripts/default.css')">Orange</div><br>
<div class="color-select-green" onclick="swapStyleSheet('_scripts/green.css')">Green</div><br>
<div class="color-select-blue" onclick="swapStyleSheet('_scripts/blue.css')">Blue</div>
</div>
</div><!--END COLOR-SELECT-->
</div><!--END THEMES-->
</div><!--END OF CUSTOMISER-->
The swapStyleSheet command works fine, but the text change for #color and the display change for .messageBox does not.
jQuery's show() and hide() are not animated by default, and doesn't support delay() as they don't add the the FX queue.
When the delay doesn't work, the elements are hidden right away, and never made visible for two seconds.
To make them animated, one has to pass in a number, and even zero should do it
$(document).ready(function(e) {
$('.messageBox').hide();
$('#color').text('');
$('.color-select-orange').click(function(e) {
console.log('ds')
$('.messageBox').show().delay(2000).hide(0);
$('#color').text('Orange').show().delay(2000).hide(0);
});
});
.messageBox {
height: auto;
width: auto;
text-align: center;
z-index: 100;
padding: 100px;
background-color: #222;
color: #fff;
font-family: poppins;
font-size: 14px;
display: block;
}
.messageBox span {
color: #fff;
font-weight: bold;
font-family: poppins;
font-size: 14px;
}
.customiser {
height: auto;
width: auto;
position: fixed;
top: 10px;
left: 0px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: transparent;
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
}
.themes {
height: auto;
width: auto;
position: relative;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #222;
color: #777;
border-top-right-radius: 10px;
cursor: pointer;
}
.color-select {
height: auto;
width: 100px;
padding: 20px;
font-size: 14px;
font-family: poppins;
display: inline-block;
background-color: #333;
color: #777;
}
.color-select:hover {
background-color: #222;
color: #fff;
}
.color-select-table {
width: 100%;
background-color: #222;
display: inline-block;
margin-top: 10px;
}
.color-select-orange {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #ff6e00;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-orange:hover {
background-color: #ff6e00;
color: #fff;
}
.color-select-green {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #9ad749;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-green:hover {
background-color: #9ad749;
color: #fff;
}
.color-select-blue {
height: auto;
width: 100%;
display: inline-block;
background-color: transparent;
color: #4589f3;
border-radius: 5px;
border: thin solid #222;
padding-top: 5px;
padding-bottom: 5px;
}
.color-select-blue:hover {
background-color: #4589f3;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="messageBox">Theme successfully changed to
<br> <span id="color">*SELECTED_COLOUR*</span>
</div>
<div class="customiser">
<div class="themes">
<div class="color-select">Theme
<br>
<div class="color-select-table">
<div class="color-select-orange">Orange</div>
<br>
<div class="color-select-green">Green</div>
<br>
<div class="color-select-blue">Blue</div>
</div>
</div>
</div>
</div>
I want to know how to hide the information for terms(button) and enumeration(Button). The information should only appear when a button is clicked or chosen. Hope for good answers. Thank you!! If you have suggestion to my html and css that will make that show and hide easily made.
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}html, body {
height: 100%;
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a{text-decoration:none}
.wrapper{
text-align: center;
width: 100%;
position: absolute;
}
.header{
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a{ letter-spacing: 1px;}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration:underline;
color: #EDF0BA;
}
div.navigation li { list-style: none; }
div.navigation li:hover { background: #555; }
div.navigation li:hover ul { display: block; }
.how, .about{
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle{
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default{color:#333;background-color:#fff;border-color:#ccc}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons{
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width:320px){
.wrapper{
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo{
margin-top: 5px;
width: 50%;
}
.footer{
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent{
font-size: 14px;
}
.listnotes{
font-size: 14px;
}
a{text-decoration:none}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),url(../fonts/glyphicons-halflings-regular.woff) format(woff),url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
font-style:normal;
font-weight:400;
line-height:1;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.glyphicon-plus:before {
content:"\2b";
}
.glyphicon-remove:before {
content:"\e014";
}
.glyphicon-trash:before {
content:"\e020";
}
.glyphicon-floppy-save:before {
content:"\e175";
}
.btn {
display:inline-block;
margin-bottom:0;
font-size:14px;
font-weight:400;
line-height:1.42857143;
text-align:center;
white-space:nowrap;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
.btn.focus,.btn:focus,.btn:hover {
color:#333;
text-decoration:none;
}
.btn.active,.btn:active {
background-image:none;
outline:0;
-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
box-shadow:inset 0 3px 5px rgba(0,0,0,.125);
}
.btn-default {
margin-top: 10px;
color:#333;
background-color:#fff;
border-color:#ccc;
}
.btn-default.active,.btn-default.focus,.btn-default:active,.btn-default:focus,.btn-default:hover,.open>.dropdown-toggle.btn-default {
color:#333;
background-color:#e6e6e6;
border-color:#adadad;
}
.btn-primary {
color:#fff;
margin-left: -50px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color:#fff;
margin-left: -10px;
background-color:#337ab7;
border-color:#2e6da4;
margin-top: 10px;
margin-left:20px;
}
.form-control {
width:100%;
height:20px;
font-size:14px;
line-height:1.42857143;
color:#555;
background-color:#fff;
background-image:none;
border:1px solid #ccc;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
box-shadow:inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
padding:6px 12px;
}
.col-sm-2 {
width:20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width:80%;
float: left;
margin-top: 20px;
}
.DemoBS2{
margin-top: 110px;
margin-left: 40px;
display:block;
margin-bottom:0;
font-size:14px;
text-align:left;
vertical-align:middle;
-ms-touch-action:manipulation;
touch-action:manipulation;
cursor:pointer;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
background-image:none;
border:1px solid transparent;
border-radius:3px;
padding:6px 12px;
}
p{
background:#444;
color:#4ee255;
padding:10px;
margin:10px 0px;
border:2px solid #fa4b2a;
border-radius:10px;
box-shadow:4px 4px 4px #ccc;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo"> <img src = "logo.png" alt = "logo" name = "logo" id = "logo"> </div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span></li>
<li><a href="notes.html" class='active'><span>Notes</span></a></li>
<li><span>Exams</span></li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning"
data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p></div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>
Firstly you need to hide in css as:
#toggle-example p{display:none;}
and in jquery on click on Terms button, you need to toggle as:
$('#toggle-example p').toggle();
$(".btn1").click(function() {
$("#toggle-example").fadeToggle();
})
#charset "utf-8";
body {
width: 960px;
overflow-x: hidden;
}
}
html,
body {
height: 100%;
}
#toggle-example {
display: none
}
body {
margin: 0px;
padding: 0px;
background: #ffffff;
font-family: 'Raleway', sans-serif;
font-size: 11pt;
font-weight: 400;
color: #363636;
}
a {
text-decoration: none
}
.wrapper {
text-align: center;
width: 100%;
position: absolute;
}
.header {
background-color: #ffffff;
}
.header img {
width: 360px;
}
#nav {
background-color: black;
width: 100%;
font-size: 1em;
border-top-width: medium;
border-top-style: groove;
border-bottom-style: groove;
border-bottom-width: medium;
}
#nav a {
letter-spacing: 1px;
}
#nav ul {
list-style: none;
display: block;
font-size: larger;
}
#nav ul li {
display: inline-block;
}
#nav ul {
text-align: center;
}
#nav ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding-top: 10px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 10px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
text-transform: uppercase;
position: relative;
}
#nav ul li a:hover {
color: #fff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#nav ul li a.active {
text-decoration: underline;
color: #EDF0BA;
}
div.navigation li {
list-style: none;
}
div.navigation li:hover {
background: #555;
}
div.navigation li:hover ul {
display: block;
}
.how,
.about {
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
margin-left: 10%;
margin-right: 10%;
background-color: white;
text-align: left;
color: black;
}
.sectiontitle {
text-align: center;
color: black;
text-shadow: 1px 1px 2px #767676;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
padding-top: 1%;
padding-bottom: 1%;
font-size: 1em;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.addnotes {
float: left;
padding-left: 2%;
font-color: black;
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-trash:before {
content: "\e020";
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-sm,
{
padding: 5px 10px;
font-size: 12px;
line-height: 1px;
border-radius: 3px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc
}
.listnotes {
margin: 0;
padding: 0;
list-style-type: none;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 220px;
height: 135px;
margin-left: 45%;
padding-top: 5%;
margin-bottom: 10px;
}
.noteTitle {
float: left;
left: 0%;
left: 0%;
color: black;
}
.buttons {
margin-top: 100px;
color: black;
}
.createcontent {
float: right;
padding-right: 25%;
width: 50%;
margin: 0 auto;
}
.definition {
padding-top: 10%;
}
.enumeration {
padding-top: 15%;
}
#titletextbox {
background: transparent;
border: none;
width: 100%;
}
#media screen and (max-width: 320px) {
.wrapper {
width: 320px;
}
#nav {
background-color: black;
width: 100%;
font-size: 10px;
border-top-width: thin;
border-top-style: thin;
border-bottom-style: thin;
border-bottom-width: thin;
}
#logo {
margin-top: 5px;
width: 50%;
}
.footer {
background-color: black;
width: 100%;
border-style: groove hidden hidden;
padding-bottom: 1%;
color: #FFFFFF;
font-variant: small-caps;
vertical-align: middle;
}
.listnotes li {
background: url('noteicon.png') no-repeat;
width: 100;
height: 100;
margin-left: 35%;
padding-top: 5%;
margin-bottom: 10px;
}
.createcontent {
font-size: 14px;
}
.listnotes {
font-size: 14px;
}
a {
text-decoration: none
}
}
#font-face {
font-family:'Glyphicons Halflings';
src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format(embedded-opentype),
url(../fonts/glyphicons-halflings-regular.woff2) format(woff2),
url(../fonts/glyphicons-halflings-regular.woff) format(woff),
url(../fonts/glyphicons-halflings-regular.ttf) format(truetype),
url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format(svg);
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-plus:before {
content: "\2b";
}
.glyphicon-remove:before {
content: "\e014";
}
.glyphicon-trash:before {
content: "\e020";
}
.glyphicon-floppy-save:before {
content: "\e175";
}
.btn {
display: inline-block;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
.btn.focus,
.btn:focus,
.btn:hover {
color: #333;
text-decoration: none;
}
.btn.active,
.btn:active {
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-default {
margin-top: 10px;
color: #333;
background-color: #fff;
border-color: #ccc;
}
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open>.dropdown-toggle.btn-default {
color: #333;
background-color: #e6e6e6;
border-color: #adadad;
}
.btn-primary {
color: #fff;
margin-left: -50px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
}
.btn-primary1 {
color: #fff;
margin-left: -10px;
background-color: #337ab7;
border-color: #2e6da4;
margin-top: 10px;
margin-left: 20px;
}
.form-control {
width: 100%;
height: 20px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
padding: 6px 12px;
}
.col-sm-2 {
width: 20%;
float: left;
font-size: 20px;
margin-top: 20px;
}
.col-sm-10 {
width: 80%;
float: left;
margin-top: 20px;
}
.DemoBS2 {
margin-top: 110px;
margin-left: 40px;
display: block;
margin-bottom: 0;
font-size: 14px;
text-align: left;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
padding: 6px 12px;
}
p {
background: #444;
color: #4ee255;
padding: 10px;
margin: 10px 0px;
border: 2px solid #fa4b2a;
border-radius: 10px;
box-shadow: 4px 4px 4px #ccc;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="logo.png">
<title>Create notes</title>
<link href="css/style1.css" rel="stylesheet" type="text/css">
<link href="css/style3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="header" id="header">
<div class="logo">
<img src="logo.png" alt="logo" name="logo" id="logo">
</div>
</div>
<div class="navigation" id="nav">
<ul>
<li><span>Home</span>
</li>
<li><a href="notes.html" class='active'><span>Notes</span></a>
</li>
<li><span>Exams</span>
</li>
</ul>
</div>
<div class="noteTitle">
<label class="control-label col-sm-2" for="email">Title:</label>
<div class="col-sm-10">
<input type="text" name="title" class="form-control" id="titleofnote" value="Note 1" placeholder="Click here to enter title.">
</div>
<span class="glyphicon glyphicon-floppy-save"></span> Save and close
</div>
<div class="DemoBS2">
<!-- Toogle Buttons -->
<button type="button" class="btn btn-warning btn1" data-toggle="collapse" data-target="#toggle-example">Terms</button>
<button type="button" class="btn btn-warning btn2" data-toggle="collapse" data-target="#toggle-example">Enumerations</button>
<div id="toggle-example" class="collapse in">
<p>I don't know how to hide this. This should only show</b>
when the button is clicked in terms(button)</b>Please help thanks.</p>
</div>
</div>
</div>
</body>
<script type="text/javascript" src="Scripts/createscript.js"></script>
</html>