I am trying to slide a "toggle button" to the left after the navigation bar hides and slides left and then slide it back to the original position when showing navigation bar. Here's what I'm trying currently.
This does not work:
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: 0
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
$toggle.animate({
left: 20.5%
}, 500);
}
});
});
When I remove the animate method on the else block everything seems to work, when I add it back to reverse the "$toggle" button to the original position none of the code works.... any help is much much appreciated!!
EDIT: added snippet below
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: 0
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
}
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================*/
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url(../images/boatsunset.jpg);
background-size: 100% 100%;
}
#shoppingCart {
background-color: #00000000;
float: right;
margin-right: 1rem;
position: relative;
top: 50%;
transform: translateY(-50%);
border: none;
}
#shoppingCart img {
height: 3rem;
width: 3rem;
}
#toolbar {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
display: inline-block;
}
#toolbar ul {
position: relative;
display: inline-block;
width: 85%;
}
#toolbar li {
margin: 2rem auto;
cursor: pointer;
}
#toolbar li:hover {
color: #aaaaaa88;
}
#toggle {
background-color: #00000000;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20.5%;
display: inline-block;
color: #000000;
font-size: 3rem;
cursor: pointer;
}
#toggle:hover {
color: #aaaaaa88;
}
#listborder {
width: 80%;
border-right: .2rem solid #aaaaaa55;
height: 26rem;
position: absolute;
top: 51%;
transform: translateY(-50%);
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link rel="stylesheet" href= "assets/stylesheets/style.css">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Artwork by Gia dalPozzo">
<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
<meta name="author" content="Marlin dalPozzo">
<title>Gia dalPozzo | Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/script1.js" async></script>
</head>
<body>
<header>
<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
</header>
<div id="toolbar">
<ul>
<li>Florals</li>
<li>Landscapes</li>
<li>Portraits</li>
<li>My Story</li>
<li>Events</li>
<li>Contact Me</li>
</ul>
<div id="listborder"></div>
</div>
<div id="toggle">
<p><</p>
</div>
<footer>
<!--social media links/icons-->
<!--copyright etc-->
<!--date updated-->
</footer>
</body>
</html>
You have to set the left property of the button as a string. Using the "%" symbol like you did is not allowed in JavaScript. The correction looks like this:
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
if ($toolbar.is(":visible")) {
$toolbar.toggle(500);
$toggle.animate({
left: "0"
}, 500);
} else if ($toolbar.is(":hidden")) {
$toolbar.toggle(500);
$toggle.animate({
left: "20.5%"
});
}
});
});
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===============================================*/
html, body {
height: 100%;
width: 100%;
}
body {
background-image: url(../images/boatsunset.jpg);
background-size: 100% 100%;
}
#shoppingCart {
background-color: #00000000;
float: right;
margin-right: 1rem;
position: relative;
top: 50%;
transform: translateY(-50%);
border: none;
}
#shoppingCart img {
height: 3rem;
width: 3rem;
}
#toolbar {
color: #000000;
font-family: 'Playfair Display', serif;
font-size: 3rem;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 25%;
display: inline-block;
}
#toolbar ul {
position: relative;
display: inline-block;
width: 85%;
}
#toolbar li {
margin: 2rem auto;
cursor: pointer;
}
#toolbar li:hover {
color: #aaaaaa88;
}
#toggle {
background-color: #00000000;
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 20.5%;
display: inline-block;
color: #000000;
font-size: 3rem;
cursor: pointer;
}
#toggle:hover {
color: #aaaaaa88;
}
#listborder {
width: 80%;
border-right: .2rem solid #aaaaaa55;
height: 26rem;
position: absolute;
top: 51%;
transform: translateY(-50%);
z-index: -1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
<link rel="stylesheet" href= "assets/stylesheets/style.css">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Artwork by Gia dalPozzo">
<meta name="keywords" content="Gia dalPozzo, Gia, dalPozzo, artwork, fine art, paintings, oil painting">
<meta name="author" content="Marlin dalPozzo">
<title>Gia dalPozzo | Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="assets/scripts/script1.js" async></script>
</head>
<body>
<header>
<button id="shoppingCart"><img src="assets/images/cart2.png"></button>
</header>
<div id="toolbar">
<ul>
<li>Florals</li>
<li>Landscapes</li>
<li>Portraits</li>
<li>My Story</li>
<li>Events</li>
<li>Contact Me</li>
</ul>
<div id="listborder"></div>
</div>
<div id="toggle">
<p><</p>
</div>
<footer>
<!--social media links/icons-->
<!--copyright etc-->
<!--date updated-->
</footer>
</body>
</html>
JQuery can handle that as you see.
Without seeing your markup it is kind of difficult as the other posters have mentioned, but I'll yolo it without seeing your source.
$(document).ready(function() {
var $toolbar = $("#toolbar");
var $toggle = $("#toggle");
$toggle.on("click", function() {
$toolbar.animate({
width:'toggle'
}, 750);
});
});
fiddle:
https://jsfiddle.net/3rbj19n9/
Related
the input box is using focus already,input and label tags are not using the css style provided earlier in style tag?
transform not working :(
i have bold where i am not getting,
i have provided my css and html
i used input and label> then style them in css but it doesnot work then I created transition and it does not work more over it took it as default in page
Code I tried:
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus,
.search:valid {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus~label,
#searchbar:valid~label {
transform: translatey(-10px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search"><label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
I hope I understood correctly what you want to do
Option 1 - CSS
The changes made are in .search:focus and #searchbar:focus+label
But after the input field is out of focus the inscription "Search" will return to its original place.
If you want the change to happen once view Option 2 below
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
#searchbar:focus + label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
Option 2 - JS and CSS
If you want the transition to be one-time after clicking the in input element you must use JS. This script will add style to the label element with id searchbarLabel when clicked into the input element with id searchbar.
document.getElementById("searchbar").addEventListener("click", function () {
var y = document.getElementById("searchbarLabel");
y.setAttribute('style', 'transform: translatey(-20px);')
});
.main {
display: flex;
flex-direction: column;
height: 400px;
width: 200px;
margin: auto;
border: 2px solid black;
align-items: center;
justify-content: center;
}
.searchdiv {
position: relative;
width: 100%;
/* border: 2px solid red; */
}
.search {
width: 100%;
border: 0px;
border-bottom: rgba(22, 22, 22, 0.349);
background: rgba(211, 210, 210, 0.705);
}
label {
position: absolute;
top: 0%;
left: 0%;
transition: 0.3s ease;
}
.search:focus {
outline: none;
background-color: rgba(85, 206, 247, 0.699);
}
/*
#searchbar:focus+label {
transform: translatey(-20px);
}
<div class="main">
<div class="searchdiv">
<input type="text" id="searchbar" class="search">
<label for="searchbar" id="searchbarLabel">Search</label>
</div>
<div><button class="btn srchbtn">SEARCH</button></div>
</div>
Something that is better practice is too not put label inside input and also in the css try making it more specific like :
.main . searchdiv input /* for example */
other than that I can't really help if you repost with cleaner code and better code maybe we can help.
As far as I can see, the transform works. If you think its your browser settings, try adding a reset.css similar to this:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
I'm not too fluent in javascript, so I can't really find any solutions that work for me. I'm trying to align these two elements/divs: the image and the "everything" div to have equal heights, so that my footer fits in. None of the solutions seem to be working. You don't need to pay attention to much of the text or anything. All I need is a solution in how to keep the height of the image the same as the "everything" div. In doing so, I would want the "everything" div not to be sstatic, so it can change according to browser size using the em font values and percentage width/height values. So, basically, the image height should be equal to the "everything" div height without changing the hight of the "everything" div as it would be without the added code. Here is the code :
html {
margin: 0 0;
}
.kewlimage {
z-index: 1;
float: left;
width: 50%;
height: 45.4em;
}
.everything {
width: 50%;
float: left;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: "comic sans ms";
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div>
<img class="kewlimage" src="https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg">
</div>
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
Since you have tagged javascript, here is one js solution:
<script>
img=document.getElementsByClassName('kewlimage')[0];
every=document.getElementsByClassName('everything')[0];
img.style.height=every.offsetHeight+'px';
window.addEventListener('resize', function(event){
img.style.height=every.offsetHeight+'px';
});
</script>
Place this code at the bottom of your page, before closing of body tag. Script simple calculates height of everything div, and apply it to image.
However, nowadays, you can easily get equal blocks/columns heights, using only CSS methods, and by slightly changing your html structure. However, this should work, without modifying anything in your current html/css.
First of all, check out this very helpful website to avoid giving other people eye cancer when they visit your website :-)
Then wrap your content in a holder div, I gave it the class .fullbackground. This class receives a background image with the background-size: 50% cover, which means it will always be 50% of the div's with and will resize to cover the full height. As you don't have a DOM element for the image anymore, you don't need floating, so you can just give .everything a width and margin of 50%.
Here's the same thing in a minimal version:
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
background: #f0f0f0;
}
<div class="fullbackground">
<div class="everything">
<p>start of content</p>
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<p>end of content</p>
</div>
</div>
<footer>Footer</footer>
And here is your adapted code:
html {
margin: 0 0;
}
.fullbackground {
background-image: url(https://alorica.files.wordpress.com/2014/10/jason-nguyen-treelr.jpg);
background-repeat: no-repeat;
background-size: 50% cover;
}
.everything {
width: 50%;
margin-left: 50%;
}
.navbar a {
float: left;
font-family: "Trebuchet MS";
font-size: 1.55em;
padding: 0.3475em 0.45em;
text-decoration: none;
color: lightslategrey;
text-align: center;
}
.navbar {
overflow: hidden;
background-color: transparent;
margin: auto 6%;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 1.55em;
border: none;
outline: none;
background-color: transparent;
color: lightslategrey;
padding: 0.3475em 0.45em;
text-align: center;
}
.dropdown-content {
z-index: 1;
position: absolute;
background-color: darkslategrey;
display: none;
margin: 0 0.7em;
}
.dropdown-content a {
display: block;
text-align: left;
float: none;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
text-decoration: underline;
}
.dropdown-content a:hover {
text-decoration: underline;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
body {
background-color: lightskyblue;
}
.everything {
background-image: url("https://wallpaper.wiki/wp-content/uploads/2017/04/wallpaper.wiki-Backgrounds-Flat-Design-HD-PIC-WPB004634.jpg");
width: 50%;
z-index: 1;
}
h1.title {
text-align: center;
color: ghostwhite;
font-family: Verdana;
font-size: 3.25em;
margin: 4% 0% 5% 5%;
}
.title {}
h2.subtitle {
color: white;
font-family: tahoma;
font-size: 2em;
opacity: 1;
margin: 2.5% auto;
}
.database-explanation {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 9% auto;
}
.text {
color: white;
font-family: verdana;
text-align: left;
font-size: 1.1em;
opacity: 1;
margin: 3.5% auto;
}
.stand-for {
padding: 0.625em 0.9375em;
background-color: rgba(95, 158, 160, 0.3);
width: 87.5%;
text-align: center;
margin: 8% auto;
}
.footertop {
background-color: #333;
width: 100%;
float: left;
}
#divider {
text-align: center;
margin: 4% auto;
width: 90%;
border: 0.1em solid rgba(28, 28, 28, 0.6);
}
<div class="fullbackground">
<div class="everything">
<div class="navbar">
Home
News
Join the Team
Archives
<div class="dropdown">
<button class="dropbtn" id="dropbtn">InterTutor</button>
<div class="dropdown-content">
Coding
Science
Math
History
About
</div>
</div>
</div>
<div class="introduction">
<h1 class="title">Welcome to Databases</h1>
<div class="database-explanation">
<h2 class="subtitle" id="sub1">What is Databases?</h2>
<p class="text" id="text1">Databases is a website meant for students and adults likewise. Our goal is to have a community of students and adults who can help each other while also learning about what ever they choose though the InterTutor program. We also hope to have a sort
of archives available for easy to access information. We hope that you use these reponsibly, as we will not be responsible for any innapropriate use of these sources. </p>
<p></p><p></p><p></p><p></p><p></p><p></p>
</div>
<div class="stand-for">
<h2 class="subtitle">What We Stand For</h2>
<p class="text">In Databases, we want students to learn, and our name stands as a representation of this. D for diligence, A for ambitious, T for technological, A for approachable, B for benevolent, A for attentive, S for studious, E for efficent, and S for scintillating.
We hope that all of the people that visit this website stand by the same standards. </p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footertop">
<hr id="divider">
</div>
</div>
I want to center a div inside of <body>, but I just can't figure out how. I have tried flexboxes and the old margin: 0 auto; trick. Here is my code:
<link href="https://fonts.googleapis.com/css?family=Comfortaa|Cutive+Mono|Oswald" rel="stylesheet">
<link href="../css/ham.css" rel="stylesheet">
<link rel="stylesheet" href="../css/main.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript">
//Unselctable Function
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
//NAVBAR HIDE
$('nav').hide();
//UNSELECTABLE
$('.unselectable').disableSelection();
//HAMBURGERS
var $hamburger = $(".hamburger");
$hamburger.on("click", function(e) {
$hamburger.toggleClass("is-active");
$('nav').slideToggle();
});
});
</script>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>work</li>
<li>contact</li>
</ul>
</nav>
<button class="hamburger hamburger--spin" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div>center this</div>
It's literally just </body> after and my closing html - no scripts after that.
Here is my CSS:
/* FONTS
font-family: 'Comfortaa', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Cutive Mono', monospace;
*/
/*RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a {
text-decoration: none;
color: white;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*STYLES*/
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body {
background-color: black;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: inherit;
background-color: #212121;
}
li {
float: left;
color: #fff;
cursor: pointer;
}
li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-family: 'Comfortaa', cursive;
/*transition*/
-webkit-transition: color 0.2s; /* Safari */
transition: color 0.2s;
}
li a:hover {
color: #BDBDBD;
}
.hamburger {
position: absolute;
}
button:focus {
outline: none;
}
#media only screen and (max-width: 768px) {
/* For mobile phones: */
* {
width: 100%;
}
li a {
padding: 0;
padding-top: 14px;
text-align: center;
}
li:last-child {
padding-bottom: 14px;
}
}
.content {
margin: 0 auto;
width: 100px;
}
^ .content is what I would like to Center Both Vertically and Horizontally in the page.
I should say, I am also using https://jonsuh.com/hamburgers/ - which is an excellent library by the way.
Sorry if this Question has been answered before, but I just couldn't find it anywhere.
Thanks
Alistair
you can center any div by css giving it a fixed width and margin(Standard way).
.any{
width:300px;/* use your required wid and height */
height:300px;
background:red; /* Just for example */
margin :0px auto;
}
you can even have a look at this bin:
https://jsbin.com/rewayuwoso/edit?html,css,output
You have omitted to put the content class in your div html.
It should read <div class="content">center this</div>
then it will be centered. Hope this helps.
However, using margin:0 auto only centers it horizontally.
I'm trying to make a Tumblr blog page with multiple languages selection, that will load markup from a file and replace the tagged elements, like this:
<p id="line1">Text in English</p>
user presses "RU" button, browser loads the html file with using AJAX, replaces p id="line1" with the one from the file, browser shows paragraph in second language
I really cannot find any normal solution, since I don't know JavaScript (yes), but I know this is really easy, I really want the AJAX way, since it will be easier for me to translate.
My current code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="utf-8">
<meta name="author" content="yvemiro">
<meta name="description" content="yve miro funny jokes satire internet memes est. 2015">
<link rel="stylesheet" href="http://static.tumblr.com/zicio7x/pI5nxaau9/font.css" type="text/css">
<link rel="stylesheet" href="font.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#rusbutton").click(function () {
var language = 'russian';
$.ajax({
url: 'https://psv4.vk.me/c610917/u284972650/docs/267ee3075ebc/langs.xml'
success: function(xml) {
$(xml).find('translation').each(function(){
var id = $(this).attr('id');
var text = $(this).find(language).text();
$("." + id).html(text);
});
}
});
});
</script>
<style>
body { color: #0a1713; font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; background-color: #fdfffd; }
em { font-style: italic; }
strong { font-weight: bold; }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: normal; }
#navbar {
width: 100%;
line-height: 45px;
margin: 0;
color: rgb(139, 141, 150);
font-size: 15px;
}
#navbarul {
list-style-type: none;
padding: 0;
margin: 0;
margin-left: 16px;
display: inline-block;
}
#navbarul li {
display: inline;
margin-right: 13px;
}
#navbarul li a {
text-decoration: none;
color: inherit;
}
#navbar ul a:hover {
color: rgb(120, 121, 130);
}
#cont {
padding: 0;
text-align: center;
min-width: 400px;
max-width: 700px;
margin: 20px auto;
padding: 0;
}
#yvelogo {
height: 19px;
width: 15px;
vertical-align: -4px;
}
a #yvelogo {
border: 0;
}
#lang {
float: right;
list-style-type: none;
padding: 0;
margin: 12px 16px 0 0;
line-height: initial;
}
#lang li {
margin-bottom: 12px;
}
.reblicon {
height: 17px;
width: 16px;
display: inline-block;
vertical-align: middle;
}
#pagination {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
color: gray;
}
#pagination li {
display: inline-block;
margin-right: 10px;
}
#status {
font-style: italic;
color: gray;
background-color: #eeeeee;
padding: 4px 8px;
border-radius: 5px;
}
#line {
margin-right: 15px;
}
#mainlinks {
list-style-type: none;
padding: 0;
margin: 0;
}
#mainlinks li {
display: inline;
padding: 0;
margin: 0 20px;
}
</style>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbarul">
<li><img id="yvelogo" alt="yve miro" src="http://static.tumblr.com/zicio7x/Btdnxoyc0/home.png"></li>
</ul>
<ul id="lang"><li><strong>EN</strong></li><li><button id="rusbutton">RU</button></li><li>LT</li><li>FR</li></ul>
</div>
</nav>
<div id="cont">
<img src="http://static.tumblr.com/zicio7x/L8Pnxoyp5/vuvuzela.jpg"><br><br>
<img id="line" height="27px" width="40px" src="http://static.tumblr.com/zicio7x/xo2nxoye9/line.png" /><span id="status">„Fenmisimn is good”</span>
<br><br>
<h2 id="title1">SHUT YOUR MOUTH YVE'S SPEAKIN'</h2>
<p id="line1">welcome to my funny satirical™ page</p><br>
<ul id="mainlinks">
<li>Blog</li>
<li>Stuff</li>
<li>Me</li>
<li>Ask</li>
<li>Archive</li><br><br>
<li>Twitter</li>
<li>YouTube</li>
</ul>
</div>
</body>
</html>
And replacing images, too
This line is looking for classes, not ID's not the . at the start of the selector
$("." + id).html(text);
Change it to
$("#" + id).html(text);
I created a site in wordpress and I want to hide the menu from this page
http://www.dawaf.co.uk/es/
but keep it visible on all of the other pages once you click on the logo in the top left to take you through to the site
http://www.dawaf.co.uk/es/portraits
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: BebasRegular;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
body {
background: #FFFFFF;
padding: 0px;
}
h1.entry-title {
display: none;
}
#page.hfeed {
margin: 0px;
}
/*Header
------------------------------------------------------------ */
#branding {
border: 0px;
}
#branding #searchform {
display: none;
}
.site-title {
width: 300px;
height: 132px;
}
/*Nav
------------------------------------------------------------ */
#access {
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
width: 140px;
margin-left: 20px;
}
#access a {
color: #8E8E8E;
padding: 0px;
line-height: 2.2;
}
#access li {
font-size: 11px;
}
#access li:hover > a, #access a:focus {
background: #FFFFFF;
}
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
font-weight: normal;
}
/*Photospace
------------------------------------------------------------ */
.photospace {
margin: 0px !important;
top: -236px;
left: 175px;
}
.nav-controls {
font-size: 11px;
}
.ss-controls {
font-size: 11px;
}
.photospace .gal_content a:hover{
text-decoration: none !important;
}
/*Super Sized Splash Page
------------------------------------------------------------ */
#supersized {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
z-index: -999;
height: 100%;
width: 100%;
}
#page.hfeed {
background: transparent;
}
.widget_search form {
display: none;
}
form#searchform {
display: none;
}
/*Footer
------------------------------------------------------------ */
#colophon {
display: none;
}
#post-0 .entry-content {
display: none;
}
You'll notice that your main page has a class of home which is unique to that section. This makes it real simple to do something like:
.home nav{
display:none;
}
or if you need something more specific:
.home nav#access{
display:none;
}
I'd edit the theme and check is_home() to hide the menu.
if( !is_home() )
{
# Show your menu on pages that are not the home page
}
You could hide it from the home page by doing the following css
.home #access {
display: none;
}
It will still appear on all of your other pages once you enter via the logo.