I have this code
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header>
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Where i have a file named styles.css where i have all the code and also i have a file named themes.css in themes.css file i have all the colors defined in that file but is there any way that i can change that color using javascript so that i can change the theme ?
For example when i have Light Theme I Use these colors
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
And when i have Dark theme selected the colors should be
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #222;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #333;
--bodyColor: #fff;
--linkColor: #e7e7e7;
--linkHover: #fff;
}
Define a class, like
.myroot {
--headerBG: yellow;
}
and apply this class where you needed, via
class="myroot"
See:
/* Themes.css */
:root {
--headerBG: #222;
--headerColor: #fff;
--codeBoxBG: #333;
--codeBoxColor: #fff;
--codeHeaderBG: #121212;
--codeColor: #fff;
--bodyBG: #ccc;
--bodyColor: #000;
--linkColor: #ccc;
--linkHover: #000;
}
.myroot {
--headerBG: yellow;
}
/* Styles.css */
#import url('https://fonts.googleapis.com/css2?family=Georama:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* { box-sizing: border-box; margin: 0; padding: 0; transition: all .2s ease-in-out; }
body { font-family: 'Georama', sans-serif; width: 100%; background: var(--bodyBG); color: var(--bodyColor); }
header {
background-color: var(--headerBG);
min-height: 300px; min-width: 100vw;
color: var(--headerColor);
display: block;
margin-left: auto;
margin-right: auto;
text-align: left;
padding: 80px 180px 50px 180px;
}
article { padding: 80px 180px 50px 180px; }
header h1 { font-size: 2.2em; margin-bottom: 10px; }
header h2 { font-size: 1.2em; margin-bottom: 30px; }
header a, nav a { color: #ccc; text-decoration: none; }
a:hover { color: #00aeff; }
p { margin-bottom: 8px; }
img { max-width: 100%; display: block; margin: 20px auto; }
article a { color: var(--linkColor); text-decoration: none; }
article a:hover { color: var(--linkHover); }
nav {
height: 50px; padding: 15px;
width: 100%; color: #fff;
background-color: #535353;
align-items: center;
}
nav a { margin: auto 3px; }
nav .items { float: right; }
.heading { margin-bottom: 10px; }
.heading2 { margin-top: 20px; margin-bottom: 10px; }
hr { margin: 30px auto; }
hr.hr1{ border-top: 3px solid #8c8b8b; }
hr.hr2 { border-top: 5px solid #8c8b8b; }
.codebox {
padding: 10px;
font-size: 1em;
line-height: 1.3;
color: var(--codeBoxColor);
background-color: var(--codeBoxBG);
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
overflow: auto;
}
code { font-size: 1em; line-height: 1.3; }
.codeheader {
padding: 5px 5px 5px 10px;
font-size: 1.1em;
color: var(--codeColor);
border-radius: 6px 6px 0px 0px;
user-select: none;
background: var(--codeHeaderBG);
border-bottom: 2px solid #00aeff;
}
.codeheader div {
margin-top: 3px;
height: .6em; width: .6em;
background: #fff;
border-radius: 50%;
display: inline-block;
}
.codeheader div:first-child { background: #ff4a4a; }
.codeheader div:nth-child(2) { background: #ffc64a; }
.codeheader div:last-child { margin-right: 6px; background: #59ff4a; }
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="styles.css">
<nav>
<span class="brand">
MyBlog.com
</span>
<div class="items">
<a class="active" href="#">Home</a>
About
Contact
</div>
</nav>
<header class="myroot">
<h1>Man must explore, and this is exploration at its greatest</h1>
<h2 class="subheading">Problems look mighty small from 150 miles up</h2>
<span class="meta">
Posted by
Start Bootstrap
on August 24, 2021
</span>
</header>
<article>
<h2 class="heading">The Lorem and Ipsum</h2>
<p>Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman's earth, if free men make it, will be truly round: a globe in practice, not in theory.</p>
<p>Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.</p>
<p>What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.</p>
<p>A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That's how I felt seeing the Earth for the first time. I could not help but love and cherish her.</p>
<p>For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.</p>
<div class="codeheader">
<div></div>
<div></div>
<div></div>
css
</div>
<div class="codebox">
<pre><code>.somecssclass {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 12px;
color: #fff;
background-color: #3d3d3d;
margin-bottom: 10px;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
}</code></pre>
</div>
<hr class="hr1">
<h2 class="heading2">The Final Frontier</h2>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<p>There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.</p>
<blockquote class="blockquote">The dreams of yesterday are the hopes of today and the reality of tomorrow. Science has not yet mastered prophecy. We predict too much for the next year and yet far too little for the next ten.</blockquote>
<p>Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</p>
<hr class="hr2">
<h2 class="heading2">Reaching for the Stars</h2>
<p>As we got further and further away, it [the Earth] diminished in size. Finally it shrank to the size of a marble, the most beautiful you can imagine. That beautiful, warm, living object looked so fragile, so delicate, that if you touched it with a finger it would crumble and fall apart. Seeing this has to change a man.</p>
<img class="img-fluid" src="assets/img/post-sample-image.jpg" alt="..." />
<span class="caption text-muted">To go places and do things that have never been done before – that’s what living is all about.</span>
<p>Space, the final frontier. These are the voyages of the Starship Enterprise. Its five-year mission: to explore strange new worlds, to seek out new life and new civilizations, to boldly go where no man has gone before.</p>
<p>As I stand out here in the wonders of the unknown at Hadley, I sort of realize there’s a fundamental truth to our nature, Man must explore, and this is exploration at its greatest.</p>
<p>Placeholder text by Space Ipsum · Images by NASA on The Commons</p>
</article>
Single Line code convert light theme to dark. Try it
<style>
body
{
filter: invert(1);
}
</style>
Hello I need some help in developing a quiz using HTML.
Here is the code, if you require pictures I can provide them, I need some help getting the score counter to count over around 10 pages, and it keeps the right score so for a correct answer it will be 1, for a wrong answer it will be -0.25. Thanks.
<html>
<head>
<style> {
box-sizing: border-box;
}
body{
background-image: url('background.png');
font-family: sans-serif: ;
}
button{
font:inherit;
font-size:100%;
color:black;
line-height:normal;
vertical-align:baseline
}
#hello{
width: 96%;
background-color: palegreen;
color: black;
padding: 10px;
margin: 10px auto;
border: 6px double limegreen;
border-radius: 10px;
}
#quiz{
position: relative
width: 96%;
color: white;
padding: 10px;
margin: 10px auto;
border: 6px double black;
border-radius: 10px;;
}
h1{
font-size: 28px;
clear: both;
}
#quiz h1{
width: 100%;
text-align: left;
background-color: black;
color: yellowF;
padding: 8px;
border-radius: 15px;
filter: drop-shadow(3px 3px 3px grey);
background-image: "background.img"
}
.option{
background-color: Black;
color: white;
padding: 8px;
border-radius: 10px;
border: 2px solid Black ;
}
#quiz button{
width: 100%;
display: block ;
margin: 10px auto;
text-align: left;
}
#quiz .option:hover{
background: white;
color: lightgreen ;
border: 2px solid lightgreen;
}
.green{
background: white;
border: 2px solid green;
color: green;
border-radius: 10px;
padding: 8px;
}
.green:before,#score:before{
content: 'Correct ✔️ ';
}
.red{
background-color: white;
}
.red:before,#wrong:before{
content:'Incorrect ✖️ ';
}
.score{
background-color: lightgreen;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
.wrong{
border-radius: 10px;
background-color: red;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
}
#show button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
#start{
text-align: center;
}
#start button{
width: auto;
padding: 5px;
background-color: orange;
border-radius: 5px;
}
.hidden{
display: none;
}
#sticky{
position: sticky;
position: -webkit-sticky;
top: 5px;
width: 100%;
border-radius: 10px;
padding: 0px auto 20px auto;
z-index: 1;
}
#sticky span{
float: right;
display: inline-block;
margin: 5px 4px;
}
#fscore{
background: purple;
color: white;
padding: 4px;
text-align: center;
font-size: 20px;
border-radius: 10px;
}
p{font-size: 30px
}
p1 {font-size: 30px}
p2{font-size: 30px}
</style>
<title>Next Question</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<body>
<div id="main">
<div id="hello">
<br />
<div id="start">
<button type="button">Start Quiz</button>
</div>
</div>
<!--Quiz Start-->
<div id="quiz" class="hidden">
<div id="sticky">
<span class="wrong"><span id="wrong">0</span></span>
<span class="score"><span id="score">0</span></span>
</div>
<h1>1. What does CPU stand for?</h1>
<div class="choose">
<button class="option" value="wrong" type="radio">Certain process units</button>
<button class="option" value="wrong" type="radio">Central processing unix</button>
<button type="radio" class="option" value="right">Central processing unit</button>
<button class="option" value="wrong" type="button">Computer's proessing unit</button>
</div>
<br />
<br />
<div id="show">
<button type="button">Show Correct Answers</button>
</div>
<form method="get" action="t2.html" hidden>
<button type="submit">Press to start</button>
</form>
<!--Final Score-->
<div id="fscore">You Scored <span class="fscore">0</span> out of <span class="total"></span>
</div>
</div>
</div>
</body>
<script> $(function(){
var tot = $(".choose").length;
$(".total").html(tot);//total Score
$("#start").click(function(){
$('#hello').addClass('hidden');
$("#quiz").removeClass('hidden');
$('html, body').animate({
scrollTop: $("#quiz").offset().top
}, 10);//smooth scrolling effect to min quiz
});
$(".option").click(function(){
var score = 0;
var wrong = 0;
$(this).removeClass("option");//disable it's css
$(this)
.addClass(($(this).val() === "right") ? 'green' : 'red');//right or wrong css
$(this).siblings().attr("disabled",true);//prevent to choose other options
for (i=0;i<$(".green").length;i++){
if ($(this).val() === "right"){
score++;
$("#score").html(score);//update score
}
}
for (k=0;k<$(".red").length;k++){
if ($(".red").val() === "wrong"){
wrong++;
$("#wrong").html(wrong);//update negative score
}
}
var p = +$("#score").text();
var m = +$("#wrong").text();
var n = m*0.25;//0.25marks deducted for each wrong answer
var t = p-n;//get final score considering negative marking
$(".fscore").html(t);//update final score
});
$("#show button").click(function(){
for (j=0;j<$(".choose").length;j++) {
$(':button[value="right"]').addClass('green')
.removeClass("option");//show correct option
}
$('.choose>button').attr("disabled",true);//disable all Buttons
});
});
</script>
</html>
You can use localStorage to store data in the client's web browser. Data saved using localStorage has no expiry date. It will stay there intact unless deleted. You can read about localStorage here
You can do something like this.
First, calculate the score on the first page.
Assuming you have some kind of button click or simply a click on an element to navigate to the next page. You can add an event listener to this element using JavaScript. This event listener will execute a function which will first, calculate the result on the first page and then store it in the web browser using localStorage like this localStorage.setItem("score", quizScore);
After navigating to the next page you can run a function when the page completely loads that retrieves this score using this var score = localStorage.getItem("score");
Then you can display the current score, carry on with the quiz, calculate the result, add it to the previous score, update the key score value, and repeat the first, second, third, and fourth steps for all the future pages again until you have calculated the final score of the quiz.
Lastly, you can retrieve the final value, show it to the client in whatever way you like, and delete it using localStorage.removeItem("score"); if you wish to.
localStorage.setItem("score", 1.5);
// Retrieve
var cnt = localStorage.getItem("score");
console.log(cnt)
js fiddle
I am new to js and have hit a brick wall with altering how I calculate an element width depending on the screen size. I started with only calculating the width by how many of the list items were set to "plan-visible". It works great on a laptop screen, but doesn't break at css media query widths when the screen is smaller. I then had the brilliant idea (haha) of attempting to this directly in the javascript with an if/else statement, which I have little experience with. The result was that it did absolutely nothing. I researched and researched and it looks (to me) like it should work, but I am obviously missing something. I have included the html, the original js that worked for a static element, and then my failed attempt at making it responsive. Thanks!
html:
<div id="product-table" class="clear">
<div class="plan-visible">
<h3>BALANCE<em>aap</em><img class="image aap" src="http://localhost:1400/images/baap.png"></h3>
<a class="sbutton aap" href="">Go to AAP</a>
<ul>
<li>Point and click your way through the preparation of your organization’s Affirmative Action plan.<br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>trak</em><img class="image trak" src="http://localhost:1400/images/btrak.png"></h3>
<a class="sbutton trak" href="">Learn More</a>
<ul>
<li>Manage your organization’s hiring process from start to finish.<br> <br> </li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>hub</em><img class="image hub" src="http://localhost:1400/images/bhub.png"></h3>
<a class="sbutton hub" href="">Go to HUB</a>
<ul>
<li>Access a centralized compliance information center to view, publish, and share information from your BALANCEworks applications.</li>
</ul>
</div>
<div class="plan-visible">
<h3>BALANCE<em>pay</em><img class="image pay" src="http://localhost:1400/images/bpay.png"></h3>
<a class="sbutton" href="">Go to PAY</a>
<ul>
<li>Conduct detailed compensation analyses, identify potential pay discrimination, and design a compliant pay structure</li>
</ul>
</div>
</div>
original js:
$(document).ready(function() {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
});
new, broken js:
$(document).ready(function() {
var mq = window.matchMedia( "(max-width: 500px)" );
if (mq.matches) {
$('#product-table').css('446', width);
} else {
var width = 0;
$('.plan-visible').each(function() {
width += $(this).outerWidth( true );
});
$('#product-table').css('width', width);
}
});
css:
#product-table {
margin: 100px auto;
text-align: center;
.plan-visible {
font: 12px 'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
text-shadow: 0 1px rgba(255,255,255,.8);
background: #fff;
border: 1px solid #ddd;
color: #333;
padding: 20px;
float: left;
position: relative;
-moz-border-radius: 5px ;
-webkit-border-radius: 5px;
border-radius: 5px ; }
.plan-visible:nth-child(1) {width: 180px;}
.plan-visible:nth-child(2) {width: 180px;}
.plan-visible:nth-child(3) {width: 180px;}
.plan-visible:nth-child(4) {width: 180px;}
.plan-hidden {display: none;}
}
/* --------------- */
#product-table h3 {
font-size: 20px;
color: $mainBlue;
font-weight: normal;
padding: 20px;
margin: -20px -20px 50px -20px;
background-color: $lightGrey;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
/* product image settings */
#product-table .plan-visible .image {
display: block;
height: 100px;
width: 100px;
margin: 15px auto -65px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#product-table .plan-visible .image.aap {
border: 3px solid $aap;
}
#product-table .plan-visible .image.trak {
border: 3px solid $trak;
}
#product-table .plan-visible .image.hub {
border: 3px solid $hub;
}
#product-table .plan-visible .image.pay {
border: 3px solid $pay;
}
/* --------------- */
#product-table ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#product-table li {
border-top: 1px solid $lightGrey;
padding: 20px 0 10px 0;
}
/* --------------- */
/* product table specific buttons */
.sbutton {
position: relative;
font-family: 'Roboto', Arial, sans-serif;
padding: 8px 20px;
margin: 20px 0 0 0;
display: inline-block;
background-color: $mainBlue;
color: white;
border-radius: 4px;
border: 1px solid $mainBlue;
text-align: center;
text-decoration: none;
font-size: 14px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.sbutton:hover {
background-color: #94ae3c;
color: #fff;
border: 1px solid #94ae3c;
text-decoration: none;
}
.sbutton.aap:hover {
background-color: #6f2784;
border: 1px solid #6f2784;
}
.sbutton.trak:hover {
background-color: #5c89b4;
border: 1px solid #5c89b4;
}
.sbutton.hub:hover {
background-color: #b58f2e;
border: 1px solid #b58f2e;
}
.sbutton.pay:hover {
background-color: #94ae3c;
border: 1px solid #94ae3c;
}
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
The problem I'm having is not being able to select the divs inside the 'menuItem' class divs. I've tried using the jQuery selector to select by both class and even ID, but every time I try to do anything with it, such as an animation, nothing happens. Is there some jQuery law I don't know about that prevents me from doing so?
$('.menu')
.hover( function() {
$(this).toggleClass('highlighted');
})
.click(function() {
$(this).parent().children('.menuItem').children('#wtf').slideDown();
});
Also tried these for the click(), but none of them work..
$('#wtf').slideDown();
$('.test').slideDown();
$(this).parent().find('.menuItem').each( function() { $(this).slideDown(); } );
$(this).parent().children('.menuItem').children().slideDown();
<div class='box'>
<div>
<div class='menu'>Resources</div>
<div class='menuItem'>
<div ID='wtf' class='test'>Library</div>
<div>Internet</div>
<div>Your mom</div>
</div>
</div>
<div>
<div class='menu'>Products</div>
</div>
<div>
<div class='menu'>Contact</div>
</div>
</div>
body { font-size: 16px; }
.box {
background: blue;
border: 1px;
padding: 4 6 4 6;
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid;
}
.box div {
float: left;
text-align:center;
}
.menu {
background: lightblue;
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-weight: bold;
font-family:'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid gray;
}
.highlighted {
background: lime;
color: navy;
}
.menuItem {
clear: left;
position: absolute;
margin-top: 30px;
}
.menuItem div {
display: none;
background: lightblue;
opacity: .7;
filter: alpha(opacity=.7);
width: 105px;
text-align: center;
padding: 4 10;
margin: 1 5;
font-size: 10px;
font-family: 'Verdana', 'Times', serif;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid white;
clear: left;
}
Have you tried?
$(this+' > .menuItem div')
I applied a background color to your style and your jQuery selector wasn't selecting properly. I tried this and it changed the background color, but I don't have CSS in place for the visual of the slideDown() to work - you'll have to write your CSS up correctly.
$(this).siblings().find("#wtf").css("background-color","#cccccc").slideDown();