I am developing a single-page-website because it's cheaper at firebase to host. My problem is that I must manage different screens at the single HTML file. So I must make screens disappear and appear again. I want to do this with main_dashboard_page.style.display = 'none'; and main_dashboard_page.style.display = 'block';.
Here is my HTML code:
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- L O G I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="login_page" id="login_page">
<div class="card_view">
<div class="login_container" id="login_container">
<div class="wrap_login">
<div class="login_form validate-form">
<span class="login_form_title p-b-26">
Login
</span>
<div>
<label for="email_field">E-Mail</label>
<input type="text" id="email_field" name="email_field" placeholder="E-Mail">
<label for="password_field">Passwort</label>
<input type="password" id="password_field" name="password_field" placeholder="Passwort">
<input type="submit" value="Einloggen" onclick="login()">
</div>
<div class="center_text_container p-t-115">
<span class="txt1">
Du hast noch keinen Account?
</span>
<a class="txt2" onclick="goToSignUp()">
Registrieren
</a>
</div>
<div class="modal">
<div class="modal-content">
<h1 id="msg_title"><h1>
<p id="msg_content"></p>
<div id="lds-ellipsis" class="lds-ellipsis" style="display: none;"><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- _______________________________________________________________________________________________________________________________________ -->
<!-- M A I N P A G E -->
<!-- _______________________________________________________________________________________________________________________________________ -->
<div class="html_side_main" id="html_side_main">
<div class="toolbar">
<div class="centered_toolbar">
<img src="../images/logo.png" width="200px" height="auto" style="position: absolute; left: 0px; margin-left: 30px;"></img>
<ul>
<li class="active"></i>Dashboard</li>
<li></i>Notenliste</li>
</ul>
<i class="logout"></i>Logout
</div>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
<div class='main'>
<div class='main_padding'>
<div class='noten_stats'>
<p class="noten_stats_title">alpha_version: 1.0</p>
<div class="punkte_container">
<span class="punkte"></span>
<span class="punkte_text">Willkommen zur alpha version von kaffboard! Der Support ist rund um die Uhr erreichbar: raycroud#gmail.com</span>
</div>
</div>
</div>
</div>
</div>
As you can see I have two screens, which are represented as the divs:
1) ID: login_page
2) ID: html_side_main
Now the login_page should disapear and the html_side_main should appear, when user is logged in. I chek it with firebase as you could see in js:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
changePage();
}
else {
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = 'none';
}
});
function changePage() {
if (document.readyState === "complete") {
var login_page = document.getElementById("login_page");
var register_page = document.getElementById("register_page");
var main_dashboard_page = document.getElementById("html_side_main");
login_page.style.display = 'none';
main_dashboard_page.style.display = 'block';
}
As I heared that the css has a higher priority in the display of elements I would post the CSS here too:
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* F O N T */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
#font-face {
font-family: Poppins-Regular;
src: url('../public/fonts/poppins/Poppins-Regular.ttf');
}
#font-face {
font-family: Poppins-Medium;
src: url('../public/fonts/poppins/Poppins-Medium.ttf');
}
#font-face {
font-family: Poppins-Bold;
src: url('../public/fonts/poppins/Poppins-Bold.ttf');
}
#font-face {
font-family: Poppins-SemiBold;
src: url('../public/fonts/poppins/Poppins-SemiBold.ttf');
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* L O G I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
a {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
}
a:focus {
outline: none !important;
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
label {
color: #fff;
}
p {
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
button {
outline: none !important;
border: none;
background: transparent;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
.card_view {
width: 100%;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
border-radius: 9px; /* 5px rounded corners */
}
.login_container {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background-color: rgba(38, 38, 38, 1);
}
.wrap_login {
width: 390px;
background-color: rgba(48, 48, 48, 1);
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
border-radius: 9px 9px 0 0;
}
.container {
padding: 2px 16px;
}
/*------------------------------------------------------------------
[ Form ]*/
.login_form {
width: 100%;
}
.login_form_title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #fff;
line-height: 1.2;
text-align: center;
}
.login_form_title i {
font-size: 60px;
}
input, select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid rgba(48, 48, 48, 1);
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(38, 38, 38, 1);
}
input[type=submit] {
background-color: rgba(6, 132, 134, 255);
font-family: Poppins-Medium;
}
input[type=submit]:hover {
background-color: rgba(8, 160, 163, 255);
cursor: pointer;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgba(92, 92, 92, 1);
opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: rgba(92, 92, 92, 1);
}
::-ms-input-placeholder { /* Microsoft Edge */
color: rgba(92, 92, 92, 1);
}
input, select, textarea{
color: #fff;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-family: Poppins-Regular;
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-family: Poppins-Regular;
font-size: 13px;
color: #fff;
line-height: 1.5;
cursor: pointer;
}
.txt2:hover {
color: rgba(6, 132, 134, 255);
}
.center_text_container {
text-align: center;
vertical-align: middle;
line-height: 50px;
}
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
/* M A I N P A G E */
/*/////////////////////////////////////////////////////////////////////////////////////////////*/
.html_side_main {
float: left;
height: auto;
width: 100%;
}
.html_side_main {
height: 100%;
}
/*TOOLBAR*/
.html_side_main .toolbar {
list-style-type: none;
height: 90px;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(48, 48, 48, 1);
}
.html_side_main .centered_toolbar {
display: flex;
align-items: center;
justify-content: center;
}
.html_side_main ul {
list-style-type: none;
list-style: none;
}
.html_side_main li {
float: left;
}
.html_side_main a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.html_side_main a:hover {
color: #cccccc;
}
/* MAIN */
.html_side_main .main_padding {
padding: 15px;
width: 100%;
}
.html_side_main .noten_stats {
height: 200px;
background: #cc2b5e;
background: -webkit-linear-gradient(to right, #753a88, #cc2b5e);
background: linear-gradient(to right, #753a88, #cc2b5e);
border-radius: 5px;
box-shadow: 1px 1px 5px #ddd;
}
.html_side_main .noten_stats_title {
color: #ffffff;
padding: 20px;
font-family: Montserrat-Medium;
}
.html_side_main .punkte_container{
height: 80%;
margin: auto;
width: 50%;
display: flex;
justify-content: center;
align-items: baseline;
}
.html_side_main .punkte {
color: #ffffff;
font-size: 50px;
font-family: Montserrat-Bold;
}
.html_side_main .punkte_text {
color: #ffffff;
font-family: Montserrat-Medium;
}
PROBLEM:
To set the display option in js does not work. First both of the divs are shown and when user logged in both of them disapear. I don't know why, but please can you help me to fix this this problem? Because the website is basicly finished, and I only have to convert it to a one html file.
Thanks in advance.
In isolation of a codepen, this works:
function setStyle(propValue){
console.log(propValue)
var main_dashboard_page = document.getElementById("html_side_main");
main_dashboard_page.style.display = propValue
}
Thus it is not a js⇄css problem. (as your title suggests)
Look deeper into your firebase events, add some console.log() into the code to verify, things actually get called, when you expect them to.
Generally, try to isolate your problem further and further (remove all unrelated clutter, i.e. your inner and unrelated html) as long as the problem persists...
As I heared that the css has a higher priority in the display of elements
Not true. Precedence is from lowest to highest:
Browser default
External style sheet (like yours)
Internal style sheet (commonly in <head>)
Inline style
...javascript runtime changes of CSS properties are a 4., they change the inline styles (at runtime, after DOM construction, so they are also higher than pre-exisiting inline styles), as you can also inspect with your browser's dev tools.
Your problem is much more trivial. Your #login_page is a parent of your #html_side_main, thus hiding it hides all. You are one closing </div> short. If your intend is to have two neighbouring (not nested) elements, probably meant to be somewhere around line :63.
(This is, why isolation aka damping down is good :-)
I would recommend to not use .style on a DOM node. Instead, I would recommend to create a class in css like:
.display-none {
display: none;
}
and then add the class via javascript:
login_page.className += " display-none";
That way you will have all your styles in your css and not in your javascript
Related
My goal is to render the links in the array as clickable links, but it's not rendering anything below the button. Only the bullet is getting rendered. Could you please help me find what is happening?
let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", () => {
myLeads.push(inputEl.value);
//create new li element
let anchorEl = document.createElement("a");
let ulEl = document.getElementById("ul-el");
let liEl = document.createElement("li");
// Clear Input
inputEl.value = "";
// Set the href attribute
anchorEl.setAttribute('href', myLeads);
liEl.appendChild(anchorEl);
ulEl.appendChild(liEl);
});
:root {
--color-primary: #ab79d6;
--color-on-primary: #351d4a;
--color-secondary: #d367c1;
--color-background: #27272c;
--color-on-background: #c5c5ce;
--color-background-alt: #1e1c22;
--color-background-alt-alpha: rgba(30, 28, 34, .75);
--color-inverse: #fff;
--color-gray: #8e8e8e;
--color-yellow: #dedf40;
--color-green: #62cb5c;
--color-blue: #00bbcb;
--color-on-blue: #004a09;
--gradient: var(--color-secondary) 10%, var(--color-yellow) 25%, var(--color-green) 50%, var(--color-blue) 75%, var(--color-primary) 90%;
--brand-font: "Kanit", serif;
--brand-font-weight: 800;
--brand-font-alt: "Baloo 2", system-ui, sans-serif;
--brand-font-alt-weight: normal;
--brand-font-alt-weight-bold: 500;
/* Input */
--input-border: #8b8a8b;
--input-focus-h: 245;
--input-focus-s: 100%;
--input-focus-l: 42%;
/* Button */
--btnColor: #ab79d6;
}
*,
::after,
::before {
box-sizing: border-box;
}
body {
margin: 0;
}
body {
background-color: var(--color-background);
-o-border-image: linear-gradient(to right, var(--gradient)) 1;
border-image: linear-gradient(to right, var(--gradient)) 1;
border-style: solid;
border-width: .5rem 0 0;
color: var(--color-on-background);
display: block;
}
.input {
font-size: 16px;
font-size: max(16px, 1em);
font-family: inherit;
padding: 0.25em 0.5em;
background-color: #fff;
border: 2px solid var(--input-border);
border-radius: 4px;
transition: 180ms box-shadow ease-in-out;
margin-top: 1rem;
width: 25vw;
}
/* Media Query for Mobile Devices */
#media (max-width: 480px) {
.input {
width: 50vw;
}
}
/* Media Query for low resolution Tablets, Ipads */
#media (min-width: 481px) and (max-width: 767px) {
.input {
width: 50vw;
}
}
input[type="file"] {
font-size: 0.9em;
padding-top: 0.35rem;
}
.input:focus {
border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);
outline: 3px solid transparent;
}
label {
font-size: 1.125rem;
font-weight: 500;
line-height: 1;
display: block;
margin-top: 1rem;
}
/* Button */
button.button {
--button-background: var(--color-primary);
--button-color: var(--color-on-primary);
--outline-color: transparent;
background-color: var(--button-background);
border: 2px solid transparent;
border-radius: .5em;
color: var(--button-color);
cursor: pointer;
display: inline-flex;
font-family: var(--brand-font-alt);
font-weight: var(--brand-font-alt-weight-bold);
gap: .5em;
justify-content: center;
line-height: calc(4px + 2ex);
padding: .55em .75em .5em;
text-align: center;
text-decoration: none;
transition: none .18s ease-in-out;
transition-property: none;
transition-property: background-color, color, border-color;
display: block;
margin-top: 1rem;
}
button.button:focus {
box-shadow: 0 0 0 max(.15em, 2px) var(--button-focus-inner, var(--button-color)), 0 0 0 max(.3em, 2px) var(--button-focus-outer, var(--button-background))
}
button.button:active,
button.button:hover {
background-color: var(--button-hover-background-color, var(--button-color));
color: var(--color-inverse, var(--button-background))
}
button.button:active:not(.button-outlined),
button.button:hover:not(.button-outlined) {
border-color: var(--button-hover-border-color, currentColor)
}
/* container */
.container {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div class="container">
<label for="text-input">Text Input</label>
<input class="input" id="input-el" type="text" />
<button id="input-btn" class="button" type="button">SAVE INPUT</button>
<ul id="ul-el"></ul>
<script src="index.js"></script>
</div>
You need to add some content to the a links, otherwise they are empty.
Try something like anchorEl.textContent = 'this is a link';
let myLeads = [];
const inputEl = document.getElementById("input-el");
const inputBtn = document.getElementById("input-btn");
const ulEl = document.getElementById("ul-el");
inputBtn.addEventListener("click", () => {
myLeads.push(inputEl.value);
//create new li element
let anchorEl = document.createElement("a");
anchorEl.textContent = 'some link';
let liEl = document.createElement("li");
// Clear Input
inputEl.value = "";
// Set the href attribute
anchorEl.setAttribute('href', myLeads);
liEl.appendChild(anchorEl);
ulEl.appendChild(liEl);
});
:root {
--color-primary: #ab79d6;
--color-on-primary: #351d4a;
--color-secondary: #d367c1;
--color-background: #27272c;
--color-on-background: #c5c5ce;
--color-background-alt: #1e1c22;
--color-background-alt-alpha: rgba(30, 28, 34, .75);
--color-inverse: #fff;
--color-gray: #8e8e8e;
--color-yellow: #dedf40;
--color-green: #62cb5c;
--color-blue: #00bbcb;
--color-on-blue: #004a09;
--gradient: var(--color-secondary) 10%, var(--color-yellow) 25%, var(--color-green) 50%, var(--color-blue) 75%, var(--color-primary) 90%;
--brand-font: "Kanit", serif;
--brand-font-weight: 800;
--brand-font-alt: "Baloo 2", system-ui, sans-serif;
--brand-font-alt-weight: normal;
--brand-font-alt-weight-bold: 500;
/* Input */
--input-border: #8b8a8b;
--input-focus-h: 245;
--input-focus-s: 100%;
--input-focus-l: 42%;
/* Button */
--btnColor: #ab79d6;
}
*,
::after,
::before {
box-sizing: border-box;
}
body {
margin: 0;
}
body {
background-color: var(--color-background);
-o-border-image: linear-gradient(to right, var(--gradient)) 1;
border-image: linear-gradient(to right, var(--gradient)) 1;
border-style: solid;
border-width: .5rem 0 0;
color: var(--color-on-background);
display: block;
}
.input {
font-size: 16px;
font-size: max(16px, 1em);
font-family: inherit;
padding: 0.25em 0.5em;
background-color: #fff;
border: 2px solid var(--input-border);
border-radius: 4px;
transition: 180ms box-shadow ease-in-out;
margin-top: 1rem;
width: 25vw;
}
/* Media Query for Mobile Devices */
#media (max-width: 480px) {
.input {
width: 50vw;
}
}
/* Media Query for low resolution Tablets, Ipads */
#media (min-width: 481px) and (max-width: 767px) {
.input {
width: 50vw;
}
}
input[type="file"] {
font-size: 0.9em;
padding-top: 0.35rem;
}
.input:focus {
border-color: hsl(var(--input-focus-h), var(--input-focus-s), var(--input-focus-l));
box-shadow: 0 0 0 3px hsla(var(--input-focus-h), var(--input-focus-s), calc(var(--input-focus-l) + 40%), 0.8);
outline: 3px solid transparent;
}
label {
font-size: 1.125rem;
font-weight: 500;
line-height: 1;
display: block;
margin-top: 1rem;
}
/* Button */
button.button {
--button-background: var(--color-primary);
--button-color: var(--color-on-primary);
--outline-color: transparent;
background-color: var(--button-background);
border: 2px solid transparent;
border-radius: .5em;
color: var(--button-color);
cursor: pointer;
display: inline-flex;
font-family: var(--brand-font-alt);
font-weight: var(--brand-font-alt-weight-bold);
gap: .5em;
justify-content: center;
line-height: calc(4px + 2ex);
padding: .55em .75em .5em;
text-align: center;
text-decoration: none;
transition: none .18s ease-in-out;
transition-property: none;
transition-property: background-color, color, border-color;
display: block;
margin-top: 1rem;
}
button.button:focus {
box-shadow: 0 0 0 max(.15em, 2px) var(--button-focus-inner, var(--button-color)), 0 0 0 max(.3em, 2px) var(--button-focus-outer, var(--button-background))
}
button.button:active,
button.button:hover {
background-color: var(--button-hover-background-color, var(--button-color));
color: var(--color-inverse, var(--button-background))
}
button.button:active:not(.button-outlined),
button.button:hover:not(.button-outlined) {
border-color: var(--button-hover-border-color, currentColor)
}
/* container */
.container {
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div class="container">
<label for="text-input">Text Input</label>
<input class="input" id="input-el" type="text" />
<button id="input-btn" class="button" type="button">SAVE INPUT</button>
<ul id="ul-el"></ul>
<script src="index.js"></script>
</div>
You're trying to apply a whole array as the value of an attribute when it should just be the value of the input.
You're not setting the text content of the anchor which is why the input text isn't appearing.
Note: I've removed the reference to the array because you don't appear to be doing anything with it.
const inputEl = document.getElementById('input-el');
const inputBtn = document.getElementById('input-btn');
const ulEl = document.getElementById('ul-el');
inputBtn.addEventListener('click', () => {
// Create the list item and anchor elements
const liEl = document.createElement('li');
const anchorEl = document.createElement('a');
// Set the anchor href and text content
anchorEl.href = inputEl.value;
anchorEl.textContent = inputEl.value;
// Append all the things
liEl.appendChild(anchorEl);
ulEl.appendChild(liEl);
// Reset the value
inputEl.value = '';
});
body,button.button,label{display:block}:root{--color-primary:#ab79d6;--color-on-primary:#351d4a;--color-secondary:#d367c1;--color-background:#27272c;--color-on-background:#c5c5ce;--color-background-alt:#1e1c22;--color-background-alt-alpha:rgba(30, 28, 34, .75);--color-inverse:#fff;--color-gray:#8e8e8e;--color-yellow:#dedf40;--color-green:#62cb5c;--color-blue:#00bbcb;--color-on-blue:#004a09;--gradient:var(--color-secondary) 10%,var(--color-yellow) 25%,var(--color-green) 50%,var(--color-blue) 75%,var(--color-primary) 90%;--brand-font:"Kanit",serif;--brand-font-weight:800;--brand-font-alt:"Baloo 2",system-ui,sans-serif;--brand-font-alt-weight:normal;--brand-font-alt-weight-bold:500;--input-border:#8b8a8b;--input-focus-h:245;--input-focus-s:100%;--input-focus-l:42%;--btnColor:#ab79d6}*,::after,::before{box-sizing:border-box}body{margin:0;background-color:var(--color-background);-o-border-image:linear-gradient(to right,var(--gradient)) 1;border-image:linear-gradient(to right,var(--gradient)) 1;border-style:solid;border-width:.5rem 0 0;color:var(--color-on-background)}.input,button.button,label{margin-top:1rem}.input{font-size:16px;font-size:max(16px, 1em);font-family:inherit;padding:.25em .5em;background-color:#fff;border:2px solid var(--input-border);border-radius:4px;transition:box-shadow 180ms ease-in-out;width:25vw}#media (max-width:480px){.input{width:50vw}}#media (min-width:481px) and (max-width:767px){.input{width:50vw}}input[type=file]{font-size:.9em;padding-top:.35rem}.input:focus{border-color:hsl(var(--input-focus-h),var(--input-focus-s),var(--input-focus-l));box-shadow:0 0 0 3px hsla(var(--input-focus-h),var(--input-focus-s),calc(var(--input-focus-l) + 40%),.8);outline:transparent solid 3px}label{font-size:1.125rem;font-weight:500;line-height:1}button.button{--button-background:var(--color-primary);--button-color:var(--color-on-primary);--outline-color:transparent;background-color:var(--button-background);border:2px solid transparent;border-radius:.5em;color:var(--button-color);cursor:pointer;font-family:var(--brand-font-alt);font-weight:var(--brand-font-alt-weight-bold);gap:.5em;justify-content:center;line-height:calc(4px + 2ex);padding:.55em .75em .5em;text-align:center;text-decoration:none;transition:none .18s ease-in-out;transition-property:background-color,color,border-color}button.button:focus{box-shadow:0 0 0 max(.15em,2px) var(--button-focus-inner,var(--button-color)),0 0 0 max(.3em,2px) var(--button-focus-outer,var(--button-background))}button.button:active,button.button:hover{background-color:var(--button-hover-background-color,var(--button-color));color:var(--color-inverse,var(--button-background))}button.button:active:not(.button-outlined),button.button:hover:not(.button-outlined){border-color:var(--button-hover-border-color,currentColor)}.container{top:50%;left:50%;position:absolute;transform:translate(-50%,-50%)}
<div class="container">
<label for="text-input">Text Input</label>
<input class="input" id="input-el" type="text" />
<button id="input-btn" class="button" type="button">SAVE INPUT</button>
<ul id="ul-el"></ul>
<script src="index.js"></script>
</div>
I a problem doing a simple css opacity transition on the selector #loginForm > div:first-child h1 by simply adding the class .animated to that element using javascript. Although it is not working. Below is the code:
document.querySelector('#loginForm > div:nth-child(2)').style.display = 'none';
document.querySelector('#loginForm > div:first-child').style.display = 'block';
var verified_text = document.querySelector('#loginForm > div:first-child h1');
verified_text.classList.add('animated');
#loginForm {
position: relative;
padding: 40px;
background-color: #fcde84;
border-radius: 5px;
margin-top: 75px;
width: 462px;
}
#loginForm>div:first-child {
height: 380px;
border: 0;
filter: drop-shadow( 5px 8px 8px rgba(0, 0, 0, 0.1));
}
#loginForm>div:first-child div {
margin-top: 165px;
}
#loginForm>div div {
width: 150px;
height: 150px;
margin: 0 auto;
overflow: hidden;
}
#loginForm>div:first-child h1 {
font-family: 'Arial Rounded MT';
color: rgb(109, 204, 91);
text-align: center;
display: block;
transition: all 5s ease-out;
opacity: 0;
}
#loginForm>div:first-child h1.animated {
opacity: 1;
}
#loginForm h2 {
font-size: 34px;
text-transform: uppercase;
line-height: 24px;
color: #2f4e71;
letter-spacing: -2px;
font-weight: 700;
font-family: 'Montserrat', sans-serif;
}
#loginForm p {
font-size: 17px;
line-height: 40px;
color: #333850;
display: block;
margin: 0 0 10px;
font-weight: 700;
}
#loginForm>div:nth-child(2) div {
border-radius: 50%;
border: solid 2.5px #3A5E77;
}
#loginForm ul {
padding: 10px 15px 10px 30px;
background-color: #fc7f77;
color: white;
border-radius: 7.5px;
margin: 12px 0;
display: none;
}
#loginForm li {
text-align: center;
display: block;
font-size: 24px;
}
#loginForm label {
margin: 0 0 12px;
display: block;
font-size: 1.25em;
color: #217093;
font-weight: 700;
}
#loginForm input {
border-radius: 32.5px;
height: 65px;
width: 100%;
font-weight: 600;
font-size: 1.55em;
transition: box-shadow .2s linear, border-color .25s ease-out, background-color .2s ease-out;
}
#email,
#password {
margin: 0 0 24px;
padding: 0 1em 0;
background-color: #f3fafd;
border: solid 2px #217093;
}
#email:focus,
#password:focus {
outline: none;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
border: solid 2px #4eb8dd;
}
#loginForm input[type="submit"] {
padding: .65em 1em 1em;
background-color: #4eb8dd;
color: #FFF;
}
#loginForm input[type="submit"]:hover {
background-color: #217093;
}
<form autocomplete="on" method="post" id="loginForm">
<div style="display: none;">
<div></div>
<h1>Verified</h1>
</div>
<div>
<h2>Join our community</h2>
<p>Login to get instant access to our video courses</p>
<div>SVG goes here</div>
<ul></ul>
<label for="email">Username</label>
<input type="text" id="email" name="username" form="loginForm" required autofocus/>
<label for="password">Password</label>
<input type="password" id="password" name="password" form="loginForm" required/>
<input type='submit' value="Login" name="login" form="loginForm">
</div>
</form>
video of the problem:
https://youtu.be/OGZWfBaG_aM
I want the word verified to fade in
Because the CSS and JavaScript load at virtually the same time as far as the Browser is concerned, a transition is not detected. Change that last line of JavaScript to something like:
setTimeout(()=>{
verified_text.classList.add('animated');
}, 100);
I stumbled on something similar on a React project. It was head-scratching at first but what #StackSlave mentioned above gave me a good hint about the issue I was having.
I had a parent component rendering a child component and I was trying to fade out the child component on a certain click event.
It wasn't working
I had the following setup at first:
const Parent = () =>{
const Child = () =>(
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
)
return(
<>
...
<Child/>
...
</>)
}
I then modified above to the following and the CSS transition worked smoothly.
const Parent = () =>{
return(
<>
...
<Image
...
className={clsx(s.image, !showPoster && s.hidden)}
...
/>
...
</>)
}
styles
.image {
...
opacity: 1;
transition: all 0.2s ease-out !important;
}
.hidden {
opacity: 0;
}
function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script src="js/jquery-3.2.1.js"></script>
</body>
I read a similar question and one answered that Scripts should always be at the bottom of the HTML. The thing is though, when I do that the scripts of my code doesn't work anymore. And it is because I placed the Jquery at the bottom. I am using Version 3.2.1.
Works: <head><script src="js/jquery-3.2.1.js"></script></head>
Does not work: <body><script src="js/jquery-3.2.1.js"></script></body>
Fiddle: https://jsfiddle.net/dhtzL8cz/
Somehow it works in the fiddle, but not on my end.
Jquery library needs to be loaded before you can load your custom js file which has jquery code in it.
For example if you have a script.js file in which you have written your jquery code, that needs to be loaded after jquery.js.
Otherwise your code will not work. If you load jquery.js at the bottom of your body, the browser will load the entire html first before jquery, hence causing the issue.
It is not necessary to put js files at the bottom. It is all based on your need. JS files which are not necessary to be loaded before the dom loads can be put at the bottom.
For example if you have a tracking.js file, which tracks the user's behaviour, that could be put at the bottom.
Hope this helps :)
You are probably loading scripts requiring jQuery before this one is called.
<body>
<script src="js/[your custom scripts]"></script>
<script src="js/jquery-3.2.1.js"></script>
</body>
You should add these scripts after you call jquery
<body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/[your custom scripts]"></script>
</body>
If some for reason this is not possible, you can set an event listener in order to run them after the whole page assets are loaded wrapping them as follows:
document.addEventListener("DOMContentLoaded", function(event) {
enter code here//The content of your scripts here
});
call custom jQuery code after jQuery in folder its working fine,
you only have to do is cal your custom jQuery code after importing jQuery in footer . hope it helps.
here is the codepen link it works
codepen.io link of the working code
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.Message {
display: table;
position: relative;
margin: 40px auto 0;
width: auto;
background-color: #0074d9;
color: #fff;
transition: all 0.2s ease;
}
.Message.is-hidden {
opacity: 0;
height: 0;
font-size: 0;
padding: 0;
margin: 0 auto;
display: block;
}
.Message--orange {
background-color: #f39c12;
}
.Message--red {
background-color: #ff4136;
}
.Message--green {
background-color: #2ecc40;
}
.Message-icon {
display: table-cell;
vertical-align: middle;
width: 60px;
padding: 30px;
text-align: center;
background-color: rgba(0, 0, 0, 0.25);
}
.Message-icon > i {
width: 20px;
font-size: 20px;
}
.Message-body {
display: table-cell;
vertical-align: middle;
padding: 30px 20px 30px 10px;
}
.Message-body > p {
line-height: 1.2;
margin-top: 6px;
}
.Message-button {
position: relative;
margin: 15px 5px -10px;
background-color: rgba(0, 0, 0, 0.25);
box-shadow: 0 3px rgba(0, 0, 0, 0.4);
border: none;
padding: 10px 15px;
font-size: 16px;
font-family: 'Source Sans Pro';
color: #fff;
outline: none;
cursor: pointer;
}
.Message-button:hover {
background: rgba(0, 0, 0, 0.3);
}
.Message-button:active {
background: rgba(0, 0, 0, 0.3);
box-shadow: 0 0px rgba(0, 0, 0, 0.4);
top: 3px;
}
.Message-close {
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
border: none;
outline: none;
font-size: 20px;
right: 5px;
top: 5px;
opacity: 0;
cursor: pointer;
}
.Message:hover .Message-close {
opacity: 1;
}
.Message-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.u-italic {
font-style: italic;
}
</style>
</head>
<body>
<div class="Message">
<div class="Message-icon">
<img class="icn-img" src="img/turkey.png">
</div>
<div class="Message-body">
<h3 style="text-align: center;"> Have a great Thanksgiving Day with your loved ones! </h3>
<p style="text-align: center;">"There is always something to be thankful for."</p>
<button class="Message-button"><a target="_blank" style="color: white;" href="https://en.wikipedia.org/wiki/Thanksgiving">Learn More</a></button>
</div>
<button class="Message-close js-messageClose"><i class="fa fa-times"></i></button>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script>
function closeMessage(el) {
el.addClass('is-hidden');
}
$('.js-messageClose').on('click', function(e) {
closeMessage($(this).closest('.Message'));
});
$(document).ready(function() {
setTimeout(function() {
closeMessage($('#js-timer'));
}, 5000);
});
</script>
</body>
</html>
What I Am Making
On my site, the navigation bar does not start at the top of the page, instead it is a little way down the page, under the header/banner. When the user scrolls down past the nav bar, I change it's position to fixed so that it now stays visible at the top of the page as they scroll through the rest of the content.
I want this to look really seamless, so, when the navbar becomes fixed, I add some padding to the main content to stop it from jumping up into the space where the navbar was. I'm doing all this in my javascript, using jQuery to add classes ands styles to particular elements.
The Problem
In Safari, my code is working perfectly! The problem I have is that on Chrome and Firefox it seems like I need to add more padding than I do on Safari. On Chrome and Firefox the content is still jumping up slightly after the navbar becomes fixed. Whilst trying different values, I discovered that on those browsers, I need exactly 20 extra padding to make the transition seamless, but then the content jumps up too far on Safari!
Why is this extra padding needed on some browsers but not Safari?
If anyone can help I would be truly grateful because this is really bugging me! I have no idea why this is behaving differently in different browsers.
Here is a code snippet. I've tried to minimise the amount of code needed to recreate the issue but the CSS is a bit verbose because I thought I'd better include it all in case there's something there that is causing the issue.
----- EDIT -----
OK I discovered that the element which is causing the problem is my .navbar-button which I didn't include in my original snippet. I have added it in now. This is the thing which is behaving differently in different browsers.
I had to add margin to this element because it was not positioning correctly in Chrome or Firefox without it, whereas in Safari it was positioned just fine.
This extra margin is what is causing the issue.
$(document).ready(function() {
var $navBar = $(".navbar");
$(window).scroll(handleScroll);
function handleScroll() {
fixNavbarToTopIfNecessary();
}
function fixNavbarToTopIfNecessary() {
var bannerHeight = $("#banner").outerHeight();
//When user scrolled past the initial position of the navbar
if ($(window).scrollTop() > bannerHeight) {
$navBar.addClass("navbar-fixed");
$("#content").css("padding-top", $navBar.outerHeight() + "px"); // So that the content doesn't jump underneath the fixed nav.
} else {
$navBar.removeClass("navbar-fixed");
$("#content").removeAttr("style");
}
}
});
* {
box-sizing: border-box;
}
html {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: normal;
color: #888;
-webkit-text-size-adjust: 100%;
/* Prevent font scaling in landscape while allowing user zoom */
}
body {
line-height: 1.5;
font-size: 14px;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
p,
img {
margin: 0;
padding: 0;
font-weight: normal;
}
button {
border: none;
cursor: pointer;
}
.row::before,
.row::after {
display: table;
content: " ";
}
.row::after {
clear: both;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.column {
display: block;
float: left;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.s12 {
width: 100%;
}
p {
margin-top: 10px;
margin-bottom: 20px;
}
a {
text-decoration: none;
color: inherit;
}
section {
padding: 50px 0;
}
.container {
width: 970px;
}
#banner {
background-color: #794f29;
width: 100%;
height: 600px;
padding: 150px 0;
position: relative;
text-align: center;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.banner-intro {
width: 50%;
float: right;
right: 5%;
top: 50%;
margin: 0 auto;
position: relative;
transform: translateY(-50%);
}
.banner-intro-heading {
color: white;
font-size: 60px;
text-shadow: 0 0 5px #ffecb0;
margin-bottom: 10px;
}
.banner-intro-lead {
color: white;
font-size: 24px;
}
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
display: inline-block;
border-radius: 5px;
padding: 15px 30px;
font-size: 16px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
overflow: hidden;
transition: .3s;
cursor: pointer;
}
.btn:hover {
background-color: #a16fff;
color: white;
border-color: #8748ff;
}
.banner-intro-button {
margin-top: 30px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
box-shadow: -2px 3px 10px rgba(0, 0, 0, 0.3);
}
.navbar {
-webkit-font-smoothing: subpixel-antialiased;
/* this stopped the font weight from changing when the navbar is fixed */
width: 100%;
height: 60px;
background: rgba(255, 236, 176, 0.97);
line-height: 60px;
display: block;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
z-index: 99;
transform: translateZ(0);
/* hack to make sure the navbar is repainted when it's set to a fixed-navbar on iOS */
}
.navbar-fixed {
position: fixed;
top: 0;
}
.navbar-brand {
font-family: "Merienda", cursive;
display: inline-block;
padding: 0 15px;
font-size: 18px;
float: left;
}
.navbar-items {
float: right;
}
nav ul {
list-style: none;
text-align: center;
}
nav li {
display: block;
float: left;
}
nav a {
position: relative;
display: block;
font-size: 16px;
font-weight: 500;
color: #794f29;
transition: .3s;
padding: 0 25px;
}
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 10px 15px;
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
.featured {
text-align: center;
}
.featured-title {
font-size: 40px;
margin-bottom: 1.5rem;
color: #ccaa8c;
}
.featured-subtitle {
font-size: 22px;
margin-bottom: 1.5rem;
color: #666;
}
.featured .lead {
line-height: 2;
font-size: 16px;
margin-bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<section id="banner">
<div class="banner-intro">
<h1 class="banner-intro-heading">Grand Title!</h1>
<p class="banner-intro-lead">Lorem ipsum lorum ipsum sausage rat cake mammoth hair.</p>
<a class="btn banner-intro-button" href="#">Call to Action</a>
</div>
</section>
<nav class="navbar"> <!-- This is what I add the navbar-fixed class to -->
<div class="container">
Brand
<div class="navbar-items">
<ul>
<li>Link1
</li>
<li>Link2
</li>
<li>Link3
</li>
<li>Link4
<li><a class="btn navbar-button" href="#">Button</a></li>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main id="content"> <!-- This is what I add the padding to -->
<div class="container">
<div class="row">
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
<div class="column s12">
<section class="featured">
<h2 class="featured-title">Featured Title</h2>
<h3 class="featured-subtitle">Featured Subtitle</h3>
<p class="lead">Lots of info about said feature that rambles on forever and forever.</p>
<p class="lead">Even more info blablablablalblablabla.</p>
</section>
</div>
</div>
</div>
</main>
I found two solution for your problem (use each of them is enough).
Method 1) Change margin-top and margin-bottom of .navbar-button to 0 (to prevent vertical margin collapsing...) , and use vertical-align: middle; for center it vertically:
.navbar-button {
background-color: #a16fff;
border-color: #8748ff;
padding: 8px 10px;
margin: 0 15px; /* *** margin top & bottom are changed to zero! */
vertical-align: middle; /* *** this is new! */
line-height: normal;
box-shadow: -2px 3px 7px rgba(0, 0, 0, 0.2);
}
Method 2) remove display: inline-block from .btn class:
.btn {
background-color: #a16fff;
border: 1px solid #8748ff;
color: #fff;
/* display: inline-block; */ /* *** this is removed! */
...
}
it is obvious that if you don't want to change default styles of .btn, you can add display: block to your navbar button manually as an inline style (style="display: block;") or using a new css class (eg: .block) for it.
<li>
<a class="btn navbar-button" href="#" style="display: block;">Button</a>
</li>
I am trying to create a one page website with 7 navigation links. See my fiddle below.
The first navigation link is located in the top left corner, for now its text called "home". The other 6 links are located underneath my "middle" div.
I am trying to achieve the following effect:
the home page is always displayed upon landing
the 6 links underneath the "middle" div should appear from either the left side of the screen or right side simply depending on this logic: 1st transition enter screen from right side, 2nd transition enter screen from left side, all subsequent transitions to alternate sides.
Each transition should push the existing content off the screen instead of overlapping it.
If the navigation links are explored in sequence from page 1 to page 6, each time a link is clicked the transition should alternate sides. In my current fiddle (although not working correctly) the pages 1 through 6 will all enter the screen from right hand side and if you navigate backwards from 6 to 1 they all enter the screen from the left. This is not what I am looking for. I want alternating sides regardless of which link is clicked except home link in top left.
when the home link is clicked when viewing another links content the transition should appear from top of the screen and push the existing content off the bottom of the screen. This transition should happen behind all the other divs ie. header and footer.
If anyone is able to help me I would really appreciate it as this has taken me quite some time and research.
Here is my html:
<div class="main">
<div class="main_header">
<div id="navigation">
<a id="home_link" href="index.php">Home</a>
<form action="url" method="post" class="formTop">
<input type="text" class="login" Value="Email Address"onfocus="if (this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" />
<input type="password" class="login" value="Password" onFocus="if (this.value == 'Password') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Password';}" />
<input type="submit" class="submitButton" value="Log in" />
Sign Up
</form>
</div> <!--navigation-->
</div> <!--main_header-->
<div class="main_header_bottom"></div>
<div id="middle">
<div id="page1_content" class "content">Page 1 Content</div>
<div id="page2_content" class "content">Page 2 Content</div>
<div id="page3_content" class "content">Page 3 Content</div>
<div id="page4_content" class "content">Page 4 Content</div>
<div id="page5_content" class "content">Page 5 Content</div>
<div id="page6_content" class "content">Page 6 Content</div>
</div> <!--middle-->
<div class="sub_footer">
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
</div> <!--sub_footer-->
<div class="footer">
<p>| Contact |
<br />
<SCRIPT LANGUAGE="JavaScript">
today = new Date();
y0 = today.getFullYear();
</SCRIPT>Copyright © 2012-
<SCRIPT LANGUAGE="JavaScript">
document.write(y0);
</SCRIPT> MySampleSiteUnderSonstruction.com. All Rights Reserved</p>
</div> <!--footer-->
</div> <!--main-->
Here is my CSS
body {
background-color: #F5F5F5;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #CCC;
font: 0.7em Arial, sans-serif;
line-height: 1.5em;
color: #454545;
overflow-x: hidden;
}
a {
color: #0E4D8B;
background: inherit;
}
a:hover {
color: #000;
background: inherit;
}
a.title {
color: #B41A1A;
background: #FFF;
}
h1 {
font: bold 2em Arial, Sans-Serif;
letter-spacing: -1px;
padding: 16px 0 0 8px;
margin: 0;
}
h2 {
margin: 0;
padding: 0;
font: normal 1.6em Arial, Sans-Serif;
letter-spacing: -1px;
}
h1 a {
color: #FFF;
background: inherit;
}
h1 a, h2 a {
text-decoration: none;
}
h1 a:hover, h2 a:hover {
color: #BFE1ED;
background: inherit;
}
h3 {
font: 90% Arial, Sans-Serif;
margin: 0 0 10px 0;
padding: 0;
color: #5f5f5f;
background: #FFF;
}
p {
align:center;
margin: 0 0 0px 0;
line-height: 1.5em;
}
.main {
margin: 0;
overflow: hidden;
}
.main_header {
background-color: #6E6D71;
height: 75px;
}
.main_header_bottom {
height: 20px;
}
#navigation {
height: 75px;
margin: 0;
padding-left: 100px;
box-shadow: inset 0 -20px 20px -20px #000;
}
#home_link {
float: left;
background-image: url(http://wwwdrumtranscriptions/new/home.png);
background-repeat: no-repeat;
height: 36px;
margin-top: 20px;
width: 40px;
}
.formTop {
float: right;
margin-top: 15px;
margin-right: 75px;
height: 45px;
padding: 5px 8px 0px;
}
.login {
border: 1px solid #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0 0 4px ##333;
-webkit-box-shadow:inset 0 0 4px #333;
-moz-box-shadow:inset 0 0 4px #333;
color: #6E6D71;
font-size: 12px;
background-color: #CCC;
padding: 8px;
}
#middle {
background-color: blue;
padding-top: 5px;
height: 200px;
/* test only */
margin-left: 110%;
/* Start position: right outside */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
#middle.page1_inside {
margin-left: 0;
}
#middle.page2_inside {
margin-left: -100%;
}
#middle.page3_inside {
margin-left: -200%;
}
#middle.page4_inside {
margin-left: -300%;
}
#middle.page5_inside {
margin-left: -400%;
}
#middle.page6_inside {
margin-left: -500%;
}
#middle.transition {
/* Effects only */
-webkit-transition: margin-left 1s;
-moz-transition: margin-left 1s;
-o-transition: margin-left 1s;
transition: margin-left 1s;
}
.content {
width: 100%;
margin-right: 10px;
}
#page1_content {
margin-left: 0;
background-color: black;
color: yellow;
}
#page2_content {
margin-left: 100%;
background-color: yellow;
color: black;
}
#page3_content {
margin-left: 200%;
background-color: purple;
color: red;
}
#page4_content {
margin-left: 300%;
background-color: green;
color: orange;
}
#page5_content {
margin-left: 400%;
background-color: red;
color: purple;
}
#page6_content {
margin-left: 500%;
background-color: purple;
color: green;
}
.sub_footer {
text-align: center;
}
.links {
display: inline-block;
padding: 0px 15px 0px 15px;
}
.footer {
clear: both;
text-align: center;
color: #808080;
background: #f0f0f0;
padding: 10px 0 5px 0;
border-top: 1px solid #eee;
}
.footer p {
line-height: 2em;
}
.footer a {
color: #4F4F4F;
background: #f0f0f0;
border-bottom: 1px dotted #808080;
text-decoration: none;
}
Here is my js
$(document).on("click", ".links", function () {
$("#middle").removeClass(); /* Remove all classes */
$("#middle").addClass("transition " + this.id + "_inside"); /* add 'transition' for effects and eg. 'home_inside' classes */
});
Here is my Fiddle
Thanks
I suggest using .animate() I had the same idea and when I tried it it worked perfectly also if you want to have the old ones pushed off use a <ul> inside a div with overflow: hidden; then on the li's use display: inline; and list-style-type: none;
Here is a working fiddle
http://jsfiddle.net/X4URc/3/
Here's an example of how to get this working page1-page6:
#middle.page2_inside #page2_content {
margin-left: 50%;
margin-top: -16px;
}
#middle.page3_inside #page3_content {
margin-left: 66.66%; // margin-left is [(pageNum-1)/pageNum]*100% = 100% * 2/3
margin-top: -64px;
}
#middle.page4_inside #page4_content {
margin-left: 75%; // 100% * 3/4
margin-top: -112px;
}
#middle.page5_inside #page5_content {
margin-left: 80%; // 100% * 4/5
margin-top: -160px;
}
#middle.page6_inside #page6_content {
margin-left: 83.33%; // 100% * 5/6
margin-top: -208px;
}
Demo