#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
Hey earthlings,
i started learning HTML and CSS. Currently I'm dealing with style classes. I created a simple example. What I want to reach is, that the titlebar changes the font color, the font-size and the background color if button1 is clicked.
Initially the titlebar has appended the titlebar-class, after button1 is clicked the darktitle-class should also be added and overwrite certain attributes.
However in this configuration it doesn't happen. If you change the order of the .darktitle and .titlebar class in css file it works. I wonder why.
The CSS Styles should be on the same priority level, so I would expect that the laterly assigned would overwrite the attributes.
TNX
you can use !important to override styles like this
.darktitle {
color: #000000!important;
background: grey!important;
font-size: 25px!important;
}
#charset "utf-8";
html, body {
margin: 0px;
font-family: Helvetica, sans-serif;
min-height: 100%;
height: 100%;
}
.center-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
/*height: 500px;*/
}
.main-container {
/*height: 100%;*/
}
.titlebar {
text-align: center;
color: #FF0000;
background: blue;
font-size: 40px;
}
.darktitle {
color: #000000;
background: grey;
font-size: 25px;
}
button {
padding: 00px;
font-weight: bold;
font-size:1em;
font
color: #000000;
height: 40px;
width: 200px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<link href="styles/styles.css" rel="stylesheet"/>
<meta charset="utf-8">
</head>
<body>
<div class="main-container">
<h1 id="titlebar" class="titlebar"> Titlebar</h1>
<div class="center-container" >
<button id="button1">Button1</button>
<button id="button2">Button2</button>
<button id="button3">Button3</button>
</div>
</div>
<script>
var titlebar = document.querySelector('h1#titlebar');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');
var button3 = document.querySelector('#button3');
button1.addEventListener('click', function() {
titlebar.innerHTML = 'Button1';
var result = titlebar.classList.contains('darktitle');
console.log(result);
titlebar.classList.add('darktitle');
var result = titlebar.classList.contains('darktitle');
console.log(result);
});
</script>
</body>
</html>
The order of your css selectors matter when both selectors are being applied to the same element. Move the ".darktitle" below the ".titlebar" as in this example. Then when applied by the button the ".darktitle" sstyles will override those same properties in ".titlebar".
Please take a look at this link about CSS specificity, there you will read about your question and why not to use !important declaration.
Specificity at MDN
Related
I'm new to web programming and was hoping to create a system that randomly selects which students are enforced a backpack revision
Recently a student threatened to shoot up the school, it's been 1 month since that event, so the school instead of conducting a search on all students decided to make it totally random, so I decided to create a webpage that does just that.
However, old people will be using it, and although I sorted some of the code out, I wanted to make the website's background red if a revision is due, and green if the outcome of the randomizing algorithm equals a pass.
Here's my code so far:
HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SELEC</title>
<link rel="stylesheet" href="quote.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<h2>Random Student Selection System</h2>
<div id="quoteContainer">
<p></p>
<p id="quoteGenius"></p>
</div><!--end quoteContainer-->
<div id="buttonContainer">
GEN
</div><!--end buttonContainer-->
</div><!--end container-->
</body>
</html>
JS:
$(document).ready(function(){
var quoteSource=[
{
quote: "PASS",
name:"PASS"
},
{
quote:"REVISION",
name:"REVISION"
},
];
$('#quoteButton').click(function(evt){
//define the containers of the info we target
var quote = $('#quoteContainer p').text();
var quoteGenius = $('#quoteGenius').text();
//prevent browser's default action
evt.preventDefault();
//getting a new random number to attach to a quote and setting a limit
var sourceLength = quoteSource.length;
var randomNumber= Math.floor(Math.random()*sourceLength);
//set a new quote
for(i=0;i<=sourceLength;i+=1){
var newQuoteText = quoteSource[randomNumber].quote;
var newQuoteGenius = quoteSource[randomNumber].name;
//console.log(newQuoteText,newQuoteGenius);
var timeAnimation = 100;
var quoteContainer = $('#quoteContainer');
//fade out animation with callback
quoteContainer.fadeOut(timeAnimation, function(){
quoteContainer.html('');
quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'- '+newQuoteGenius+'</p>');
//fadein animation.
quoteContainer.fadeIn(timeAnimation);
});
break;
};//end for loop
});//end quoteButton function
});//end document ready
and CSS
body{
font-family: 'Roboto', sans-serif;
color: #000;
}
#container{
width:800px;
margin:50px auto;
padding: 20px;
width:50%;
}
#container h2{
text-align:center;
color:#045;
}
#quoteContainer{
width:75%;
background: #fff;
padding:10px;
margin:30px auto;
text-align: center;
height:70px;
}
#buttonContainer{
width: 100%;
text-align: center;
}
#quoteButton{
width:200px;
margin-top: 10px;
border:2px solid #E8450C;
color:#045;
font-family: inherit;
font-weight: bold;
padding:5px;
text-decoration: none;
text-align: center;
}
#quoteButton:hover{
cursor:pointer;
background:#E82B13;
color: #fff;
}
#quoteButton:active{
cursor: pointer;
}
#quoteButton{
display: inline-block;
}
#quoteGenius{
font-style: italic;
font-weight: 600;
text-align: center;
}
/*MEDIA QUERIES*/
#media screen and(max-width:760px){
#quoteButton,#addNew{
display: block;
}
}
I just started learning this last week.
Thanks in advance.
Regards.
Basically, first in your CSS you can make 2 classes, like .pass { background-color: green; } and .revision { background-color: red; } and then in your javascript, test the result of the random generator, and if the result is "pass" then add the class .pass to your <body> element, other wise, if it's "revision", add the class .revision to your <body> element.
Here's modification to your code to make this happen: (Run code snippet)
$(document).ready(function(){
var quoteSource=[
{
quote: "PASS",
name:"PASS"
},
{
quote:"REVISION",
name:"REVISION"
},
];
$('#quoteButton').click(function(evt){
//define the containers of the info we target
var quote = $('#quoteContainer p').text();
var quoteGenius = $('#quoteGenius').text();
//prevent browser's default action
evt.preventDefault();
//getting a new random number to attach to a quote and setting a limit
var sourceLength = quoteSource.length;
var randomNumber= Math.floor(Math.random()*sourceLength);
//set a new quote
for(i=0;i<=sourceLength;i+=1){
var newQuoteText = quoteSource[randomNumber].quote;
var newQuoteGenius = quoteSource[randomNumber].name;
//console.log(newQuoteText,newQuoteGenius);
var timeAnimation = 100;
var quoteContainer = $('#quoteContainer');
//fade out animation with callback
quoteContainer.fadeOut(timeAnimation, function(){
// BACKGROUND COLOR LOGIC HERE
if (newQuoteText === 'PASS') {
document.body.className = 'pass';
} else {
document.body.className = 'revision';
}
quoteContainer.html('');
quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'- '+newQuoteGenius+'</p>');
//fadein animation.
quoteContainer.fadeIn(timeAnimation);
});
break;
};//end for loop
});//end quoteButton function
});//end document ready
body{
font-family: 'Roboto', sans-serif;
color: #000;
transition: background-color 500ms ease;
}
#container{
width:800px;
margin:50px auto;
padding: 20px;
width:50%;
}
#container h2{
text-align:center;
color:#045;
}
#quoteContainer{
width:75%;
background: #fff;
padding:10px;
margin:30px auto;
text-align: center;
height:70px;
}
#buttonContainer{
width: 100%;
text-align: center;
}
#quoteButton{
width:200px;
margin-top: 10px;
border:2px solid #E8450C;
color:#045;
font-family: inherit;
font-weight: bold;
padding:5px;
text-decoration: none;
text-align: center;
}
#quoteButton:hover{
cursor:pointer;
background:#E82B13;
color: #fff;
}
#quoteButton:active{
cursor: pointer;
}
#quoteButton{
display: inline-block;
}
#quoteGenius{
font-style: italic;
font-weight: 600;
text-align: center;
}
/*MEDIA QUERIES*/
#media screen and(max-width:760px){
#quoteButton,#addNew{
display: block;
}
}
.pass {
background-color: green;
}
.revision {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<h2>Random Student Selection System</h2>
<div id="quoteContainer">
<p></p>
<p id="quoteGenius"></p>
</div><!--end quoteContainer-->
<div id="buttonContainer">
GEN
</div><!--end buttonContainer-->
</div><!--end container-->
here you go the full code yours and edited...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
body{
font-family: 'Roboto', sans-serif;
color: #000;
}
#container{
width:800px;
margin:50px auto;
padding: 20px;
width:50%;
}
#container h2{
text-align:center;
color:#045;
}
#quoteContainer{
width:75%;
background: #fff;
padding:10px;
margin:30px auto;
text-align: center;
height:70px;
}
#buttonContainer{
width: 100%;
text-align: center;
}
#quoteButton{
width:200px;
margin-top: 10px;
border:2px solid #E8450C;
color:#045;
font-family: inherit;
font-weight: bold;
padding:5px;
text-decoration: none;
text-align: center;
}
#quoteButton:hover{
cursor:pointer;
background:#E82B13;
color: #fff;
}
#quoteButton:active{
cursor: pointer;
}
#quoteButton{
display: inline-block;
}
#quoteGenius{
font-style: italic;
font-weight: 600;
text-align: center;
}
/*MEDIA QUERIES*/
#media screen and(max-width:760px){
#quoteButton,#addNew{
display: block;
}
}
</style>
<title>Document</title>
</head>
<body>
<div id="container">
<h2>Random Student Selection System</h2>
<div id="quoteContainer">
<p></p>
<p id="quoteGenius"></p>
</div><!--end quoteContainer-->
<div id="buttonContainer">
GEN
</div><!--end buttonContainer-->
</div><!--end container-->
<script>
$(document).ready(function(){
var quoteSource=[
{
quote: "PASS",
name:"PASS"
},
{
quote:"REVISION",
name:"REVISION"
},
];
$('#quoteButton').click(function(evt){
//define the containers of the info we target
var quote = $('#quoteContainer p').text();
var quoteGenius = $('#quoteGenius').text();
//prevent browser's default action
evt.preventDefault();
//getting a new random number to attach to a quote and setting a limit
var sourceLength = quoteSource.length;
var randomNumber= Math.floor(Math.random()*sourceLength);
//set a new quote
for(i=0;i<=sourceLength;i+=1){
var newQuoteText = quoteSource[randomNumber].quote;
var newQuoteGenius = quoteSource[randomNumber].name;
// console.log(newQuoteText,newQuoteGenius);
//change the color of the page body
if(newQuoteText =="PASS"){
document.body.style.backgroundColor = "green";
}
if(newQuoteText =="REVISION"){
document.body.style.backgroundColor = "red";
}
var timeAnimation = 100;
var quoteContainer = $('#quoteContainer');
//fade out animation with callback
quoteContainer.fadeOut(timeAnimation, function(){
quoteContainer.html('');
quoteContainer.append('<p>'+newQuoteText+'</p>'+'<p id="quoteGenius">'+'- '+newQuoteGenius+'</p>');
//fadein animation.
quoteContainer.fadeIn(timeAnimation);
});
break;
};//end for loop
});//end quoteButton function
});//end document ready
</script>
</body>
</html>
Im having trouble with transitioning between two html pages. When the enter button is pressed you will be brought to another page, When this button is pressed the page should simply slide in from the right. http://jsfiddle.net/fs488b3r/5/ in this fiddle is a perfect example of what Im looking for.
Ive tried this code with my own code however it doesn't seem to be working the way it should. Anyone know how I can fix this? or properly implement this? Below is my code, Any help would be much appreciated
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#font-face {
font-family: Geoma Regular Demo;
src: url(Geoma Regular Demo.otf);
}
#font-face {
font-family: Geoma Demo;
src: url(Geoma Light demo.otf);
}
#media screen and (max-width: 425px){
html,body{
overflow-x: hidden;
width: 100%;
margin: 0;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
h1 {color: white;
text-align: center;
font-family: Geoma Regular Demo;
font-size: 28px;
margin: 0;
padding-bottom: 25px;}
p{text-align: center;
color: white;
font-size: 16px;
font-family: Geoma Demo;
margin: 0 ;
padding-bottom: 35px;
}
#enter {margin: 0 auto;
display: block;
font-size: 16px;
color: white;
font-family: Geoma Demo;
border: 2px solid white;
background-color:#0BF446 ;
border-radius: 0 15px 0 15px;
padding: 10px 30px;}
#enter:hover {background-color:#04A12B;}
.green {margin-top: 50px;
background-color: #0BF446;
border-radius: 20px 20px 0 0;
padding: 40px 30px 30px 30px;
position: absolute;
bottom: 0;
top: 150px;
}
}
</style>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div class = "green">
<h1>Welcome to Elemental!</h1>
<p>Elemental is an interactive platform,
that allows creative people to discover and
explore design elements inspired by nature
throughout the world</p>
<button id = "enter">Enter</button>
</div>
<script>
function transitionPage() {
// Hide to left / show from left
$("#enter").toggle("slide", {direction: "left"}, 500);
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#enter').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</body>
</html>
What this js fiddle essentially does is shift the view within the same page, not load a new page.the jsfiddle has 2 divs (containers of content) which are actually on the same page. Your button
<button id = "enter">Enter</button>
is a button link to the new page. basically this opens the link before the javascript is run. for the javascript to be run on the same page, your first step, would be to remove the a href
<button id = "enter">Enter</button>
now this would run the code without loading the new page.
here is something close to what you want to do from my understanding
- the "landing page" or view the github repo
this code only works for me within the jsfiddle, below is just the javascript portion.
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
this would be everything in one page (except jquery which is linked) , also fix your css to match the exacts of your page. below would be your landingpage.html
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="Scripts/js/jquery-3.3.1.min.js"></script>
<style type="text/css">
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
.nodisplay {
display: none;
}
#about {
position: relative;
width: 100%;
height: 100%;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
#logo {
margin: 0 auto;
display: block;
margin-top: 50px;}
#about-1 {
background-color: #003366;
color: #FFFFFF;
display:inline-block;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
</style>
<script>
function transitionPage() {
// Hide to left / show from left
$("#about-1").toggle("slide", {direction: "left"}, 500);
window.open("homepage.html","_self");
// Show from right / hide to right
$("#about-2").toggle("slide", {direction: "right"}, 500);
}
$(document).ready(function() {
$('#about-1').click(transitionPage);
$('#about-2').click(transitionPage);
});
</script>
</head>
<body>
<img src="biglogo.png" id ="logo">
<div id="about">
<div id="about-1" class="page">
<p>Welcome to Elemental!
Elemental is an interactive platform, that allows creative people to
discover and explore design elements inspired by nature throughout the
world</p>
<br>
<button id = "enter" style="color:#000">Enter</button>
</div>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</div>
</body>
</html>
then you just need your second page
<html>
<head>
<title>
Page 2
</title>
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
html, body {
font: normal normal 16px Arial;
width: 100%;
height: 100%;
background-color: #F6BC0C;
}
#about-2 {
background-color: #F6BC0C;
color: #000000;
float:left;
}
.page {
position: absolute;
width: 100%;
height: 100%;
text-align: center;
}
p {
font-size: 20px;
margin: 100px 0 0 0;
}
</style>
</head>
<body>
<div id="about-2" class="page nodisplay">
<p>Content for about 2</p>
</div>
</body>
Alright so I am making a Rock Paper Scissors game. And so I have the rock paper and scissors set out in an inline-block and centered. When one of them is selected, I want the other two to lower and disappear. Here is what it looks like:
$(function() {
$("#playerRock").click(function() {
$("#playerPaper").animate({
opacity: 0,
top: "+=20"
}, 800);
setTimeout(function() {
$("#playerPaper").css("display", "none");
}, 805);
});
});
body {
background: #EDEDED;
}
#mainTitle {
font-family: 'Muli', sans-serif;
font-size: 54px;
}
.lowerTitle {
font-family: 'Muli', sans-serif;
font-size: 32px;
}
.scoreTitle {
font-family: 'Muli', sans-serif;
font-size: 20px;
display: inline-block;
}
#scoreTitle2 {
margin-right: 20px;
margin-left: 20px;
}
.scoreBox {
margin-top: 10px;
border: 2px solid #AAAAAA;
width: 50px;
height: 20px;
}
.scoreBox:focus {
outline: none;
font-family: 'Muli', sans-serif;
text-align: center;
}
.image {
height: 75px;
width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
display: inline-block;
background: #878787;
padding: 20px;
border-radius: 50%;
border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
cursor: pointer;
background: #878787;
padding: 20px;
display: inline-block;
border-radius: 50%;
border: 3px solid #095BB3;
top: 0px;
}
#computerPaper, #playerPaper {
margin-right: 30px;
margin-left: 30px;
}
hr {
margin-top: 100px;
margin-bottom: 100px;
height: 4px;
background: #5E5E5E;
border: none;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<center><div id = "mainTitle">Please make a selection</div></center><br><br>
<center>
<div class = "scoreTitle">You</div>
<div class = "scoreTitle" id = "scoreTitle2">Tie</div>
<div class = "scoreTitle">Cpu</div>
</center>
<center>
<input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
</center><br><br><br>
<center><div class = "lowerTitle">Computer</div></center><br><br>
<center>
<div id = "computerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "computerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "computerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<center><hr></center>
<center>
<div id = "playerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "playerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "playerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<br><br><center><div class = "lowerTitle">Player</div></center>
</body>
</html>
Right now I have it so that if you click on the rock div, it animates the paper div. However, it does not animate the top: "+=20" part.
So I figured I should try using marginTop (or margin-top in CSS). However, this lowered all three. And when you change it from display: inline-block, they look bad.
How can I keep these looking like this and aligned and still lower one of them?
You need to add vertical-align: top to the 3 player divs.
$(function() {
$("#playerRock").click(function() {
$("#playerPaper").animate({
opacity: 0,
'margin-top': "+=20"
}, 800);
setTimeout(function() {
$("#playerPaper").css("display", "none");
}, 805);
});
});
body {
background: #EDEDED;
}
#mainTitle {
font-family: 'Muli', sans-serif;
font-size: 54px;
}
.lowerTitle {
font-family: 'Muli', sans-serif;
font-size: 32px;
}
.scoreTitle {
font-family: 'Muli', sans-serif;
font-size: 20px;
display: inline-block;
}
#scoreTitle2 {
margin-right: 20px;
margin-left: 20px;
}
.scoreBox {
margin-top: 10px;
border: 2px solid #AAAAAA;
width: 50px;
height: 20px;
}
.scoreBox:focus {
outline: none;
font-family: 'Muli', sans-serif;
text-align: center;
}
.image {
height: 75px;
width: 75px;
}
#computerRock, #computerPaper, #computerScissors {
display: inline-block;
background: #878787;
padding: 20px;
border-radius: 50%;
border: 3px solid #D01A14;
}
#playerRock, #playerPaper, #playerScissors {
cursor: pointer;
background: #878787;
padding: 20px;
display: inline-block;
border-radius: 50%;
border: 3px solid #095BB3;
top: 0px;
vertical-align: top;
}
#computerPaper, #playerPaper {
margin-right: 30px;
margin-left: 30px;
}
hr {
margin-top: 100px;
margin-bottom: 100px;
height: 4px;
background: #5E5E5E;
border: none;
width: 90%;
}
center {
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="index.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<center><div id = "mainTitle">Please make a selection</div></center><br><br>
<center>
<div class = "scoreTitle">You</div>
<div class = "scoreTitle" id = "scoreTitle2">Tie</div>
<div class = "scoreTitle">Cpu</div>
</center>
<center>
<input class = "scoreBox" id = "scoreBox1" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox2" type = "text" disabled>
<input class = "scoreBox" id = "scoreBox3" type = "text" disabled>
</center><br><br><br>
<center><div class = "lowerTitle">Computer</div></center><br><br>
<center>
<div id = "computerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "computerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "computerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<center><hr></center>
<center>
<div id = "playerRock">
<img class = "image" src = "https://image.ibb.co/eR6Fga/rock.png">
</div>
<div id = "playerPaper">
<img class = "image" src = "https://image.ibb.co/mv0aga/paper.png">
</div>
<div id = "playerScissors">
<img class = "image" src = "https://image.ibb.co/mPKqEv/scissors.png">
</div>
</center>
<br><br><center><div class = "lowerTitle">Player</div></center>
</body>
</html>
I am creating textarea tags as the user clicks a button. And i want the dynamically created texarea tags to remain as such when we close and open the browser again.
I am able to save the CONTENT of the textarea tag,but there is no point in it when the textarea tag itself doesnt remain after closing the browser.
ok: SO here is the code :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y;
function add()
{
text_new=document.createElement("textarea");/*I WANT TO STORE THESE CREATED TAGS USING LOCAL STORAGE*/
text_new.id="a"+i.toString();
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
y=x;
console.log(x);
console.log(typeof x);
}
}
function save()
{
document.getElementById(x).readOnly=true;
console.log(document.getElementById(x).value);
localStorage.y=document.getElementById(x).value;
document.getElementById(x).value=localStorage.y;
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
element.remove();
}
</script>
</html>
Suggest you to try this.
Cookies are data, stored in small text files, on your computer.
When a user visits a web page, his name can be stored in a cookie.
Next time the user visits the page, the cookie "remembers" his name.
https://www.w3schools.com/js/js_cookies.asp
You can use html5 web storage, specifically the localStorage.
https://www.w3schools.com/html/html5_webstorage.asp
I hope this Helps!
ok i got it....
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body
{
box-sizing: border-box;
background-image: url(images/note2.jpg);
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
body, html {
height: 100%;
margin: 0;
}
button {
display: inline-block;
width: 150px;
background: black;
margin: 0 10px 0 0;
color: white;
font-size: 25px;
font-family: Oswald, Helvetica, Arial, sans-serif;
line-height: 1.8;
appearance: none;
box-shadow: none;
text-align: center;
border-radius: 20px;
border : 6px solid black;
}
#D:hover
{
background: red;
}
#S:hover
{
background: green;
}
button:hover
{
background-color: #417cb8
}
button:active
{
background-color: #417cb8;
box-shadow: 0 5px #27496d;
transform: translateY(5px);
}
textarea
{
height: 170px;
width: 500px;
border: 3px solid black;
border-radius: 20px;
resize: none;
font-family: Tahoma, Verdana, Segoe, sans-serif;
font-size: 20px;
padding: 10px;
letter-spacing: 2px;
opacity: 0.6;
text-overflow: auto;
}
#header
{
height: 100px;
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 40px;
text-align: center;
padding-top: 30px;
position: relative;
}
#buts
{
position: relative;
margin: 0 auto;
}
#con
{
position: relative;
text-align: center;
padding: 10px;
}
img
{
position: absolute;
height: 60%;
}
</style>
<body>
<div id="header">NOTE IT OR FORGET IT!
<img src="images/note1.png"> </div>
<div id="con">
<div id="buts">
<button id="A" onclick="add()" type="button">ADD</button>
<button id="S" onclick="save()" type="button">SAVE</button>
<button id="E" onclick="edit()" type="button">EDIT</button>
<button id="D" onclick="del('x')" type="button">DELETE</button>
</div>
</div>
</body>
<script type="text/javascript">
var text_new,x;
var i=0,j,y,num=0;
window.onload=function ()
{i=0;
for (var key in localStorage)
{
text_new=document.createElement("textarea");
var t = document.createTextNode(localStorage.getItem(key));
text_new.appendChild(t);
document.body.appendChild(text_new);
text_new.id=key;
i++;
}
}
/*window.onbeforeunload=function()
{
var x=document.querySelectorAll("textarea");
for(num=0;num<x.length;x++)
{
if
}
}
}*/
function add()
{
text_new=document.createElement("textarea");
text_new.id="a"+i.toString();
for(var key in localStorage)
{
if (text_new.id==key)
{
i++;
text_new.id="a"+i.toString();
}
}
var t = document.createTextNode("");
text_new.appendChild(t);
console.log(text_new.id);
i++;
document.body.appendChild(text_new);
}
document.body.addEventListener("click", activate);
function activate()
{
if(document.activeElement.tagName.toLowerCase() ==="textarea")
{
x = document.activeElement.id;
console.log(x);
}
}
function save()
{
if((document.getElementById(x).readOnly==false)&&(document.getElementById(x).value!=""))
{
document.getElementById(x).readOnly=true;
console.log(x);
console.log(document.getElementById(x).value);
localStorage.setItem(x,document.getElementById(x).value);
document.getElementById(x).value=localStorage.getItem(x);
}
}
function edit()
{
document.getElementById(x).readOnly=false;
}
function del()
{
var element = document.getElementById(x);
localStorage.removeItem(x);
element.remove();
}
</script>
</html>
In this JavaScript example when user clicks on 'Change colors' button, it need to swap colors of two div elements. But it doesn't.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
background-color: red;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
background-color: green;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
But when I change it a little bit and remove 'background-color' from <style> and put it within <div> then it's working.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<button id="color">Change colors</button>
<br />
<div id="first" style="background-color: red;">Random text.</div>
<div id="second" style="background-color: green;">Random text.</div>
<script type="text/javascript">
document.getElementById('color').onclick = function () {
var divColor = document.getElementById('first').style.backgroundColor;
document.getElementById('first').style.backgroundColor = document.getElementById('second').style.backgroundColor.toString();
document.getElementById('second').style.backgroundColor = divColor.toString();
}
</script>
</body>
</html>
So is there any way to make it works for solution when 'background-color' is within <style> in <head>?
Element.style only applies to styles within the style attribute of the element. If you want the computed style, which factors in stylesheets and the like...
var firstElem = document.getElementById('first'),
secondElem = document.getElementById('second'),
firstBackground = window.getComputedStyle(firstElement).backgroundColor,
secondBackground = window.getComputedStyle(secondElement).backgroundColor;
firstElem.style.backgroundColor = secondBackground;
secondElem.style.backgroundColor = firstBackground;
This should swap the two colours, regardless of where they are defined.
For this case it whould be more common to use 3 classes in css. One for defining the common style of the divs. And two for defining the differences. Switching the appearance in that case whould just require switching of classes. Such a set-up is far more flexible also for example in combination with annimations.
A way to alter style using Javascript, without inline styling:
https://jsfiddle.net/6tyw211s/10/
<html>
<style>
#first
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
#second
{
border-radius: 100%;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
float: left;
margin: 5px;
}
.color{
background-color: red;
}
.color1{
background-color: green;
}
</style>
<body>
<input type="button" id="color" value="Change colors" />
<br />
<div id="first">Random text.</div>
<div id="second">Random text.</div>
<div id="third"></div>
</body>
<script>
var y= document.getElementById('color');
var f=document.getElementById('first');
var s=document.getElementById('second');
y.addEventListener('click', function(){
if (f.className === "color1") {
f.className = "color";
}
else {
f.className = "color1";
}
if(s.className==="color"){
s.className="color1";
}
else{
s.className="color";
}
})
</script>
</html>
You can use switchClass() in jqueryui to do it.
That way, you don't have to specify the background-color values to the divs.
$("#color").click(function myFunction() {
$(".first").switchClass("first", "second", 200, "easeInOutQuad");
$(".second").switchClass("second", "first", 200, "easeInOutQuad");
});
Here is a working version with jqueryui
http://api.jqueryui.com/switchclass/