Hello and thank you in advance,
I would like to make a button with darkmode and if you click on it then it becomes darkmode and the button is then called white mode then when you click on it again it becomes white mode and the button is called dark mode again.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.page;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
You are trying to toggle the dark-mode class on document.page, which doesn't exist.
Instead, you should be toggling it on document.body.
<!DOCTYPE html>
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
To only toggle the class on the div, use querySelector:
<!DOCTYPE html>
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
<script>
function myFunction() {
var element = document.querySelector('div.page');
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
if (element.classList.contains("dark-mode")){
document.getElementById('btn').innerHTML = "Light Mode";
}
else{
document.getElementById('btn').innerHTML = "Dark Mode";
}
}
.page {
display:inline;
background:#FFF;
color: #121212;
font-size: 25px;
}
.dark-mode,
.dark-mode .page {
background-color:#202020;
color: #FFF;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="page">Hello</div>
<br><br><br>
<button onclick="myFunction()" id="btn">Dark mode</button>
</body>
</html>
Related
old
(Hello and thank you in advance, I would like to make a button with darkmode and if you click on it then it becomes darkmode and the button is then called white mode then when you click on it again it becomes white mode and the button is called dark mode again.)
new
(now the button change style is missing when you click on it)
function myFunction() {
var element = document.page;
element.classList.toggle("dark-mode");
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()">dark mode</button>
</body>
</html>
I don't believe document.page is valid js. assign the class to body
document.getElementsByTagName('button')[0].textContent='dark-mode';
function myFunction() {
var element = document.getElementsByTagName('body')[0];
element.classList.toggle("dark-mode");
var button = document.getElementsByTagName('button')[0];
if(button.textContent == 'dark-mode')button.textContent='white-mode';
else button.textContent='dark-mode';
}
<html>
<head>
<style>
.page {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div class="page">Hello</div>
<button onclick="myFunction()"></button>
</body>
</html>
I am learning HTML, CSS and Javascript, I started 3 days ago so don't expect an expert here. I have the following MWE:
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$f(x) = 5x^2$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See equation <a class="cross-reference-link" href="#my first equation" onmouseover="popup(my_first_equation)">(1)</a>.</p>
</body>
</html>
and as you can see in the text inside the <p> tag I created a clickable reference to the equation which is fine. Now I would like that the referenced equation is displayed in a small box when the mouse hovers over the reference, something like this:
I have been reading many tutorials and instructions on how to do similar things, but all of them only show a simple popup text. Here I want to display a "more complicated object" that is already rendered in the page. I think this is similar to what Wikipedia has for the references.
How can I do this?
Finally I managed to solve this problem following this question and this tutorial. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
</style>
<style>
.popup_cross_reference {position:relative; }
.popup_cross_reference span {display: none;}
.popup_cross_reference_hover {position:relative;}
.popup_cross_reference_hover span {
display: block;
position: absolute;
background-color: White;
z-index:1000;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
background-color: #444;
color: #fff;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See
<span class="popup_cross_reference" onMouseOver="javascript:this.className='popup_cross_reference_hover'" onMouseOut="javascript:this.className='popup_cross_reference'">
<a class="cross-reference-link" href="#my first equation">(1)</a>
<span>
$\intop_0^1f(x)dx=\pi + \sum_{k=1}^\infty\frac{1}{x^k}$
</span>
</span>. This is doing exactly what I wanted to do. I would have prefered not to have to copy the equation, but whatever... I took this solution from here.
</p>
</body>
</html>
I don't know why it does not work fine here on SO but outside it works beautifully.
<!DOCTYPE html>
<html>
<head>
<title>References with popup windows</title>
<meta charset="utf-8">
<!-- Support for math --------------------------------------------------------------------------------------------------------->
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [ ['$','$'], ["\\(","\\)"] ],
processEscapes: true
}
});
</script>
<!----------------------------------------------------------------------------------------------------------------------------->
<style>
.equation {
display: table;
width: 100%;
}
.equation__content, .equation__number {
display: table-cell;
}
.equation__content {
width: 90%;
}
.equation__number {
text-align: right;
font-family: serif;
}
.tip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tip .pop {
visibility: hidden;
width: 120px;
background-color: white;
color: black;
text-align: center;
border-style: solid;
border-color: black;
border-radius: 10px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tip:hover .pop {
visibility: visible;
}
</style>
</head>
<body>
<div class="equation">
<equation id="my first equation" class="equation__content">
$$f(x) = 5x^2$$
</equation>
<div class="equation__number"> (1)</div>
</div>
<p>See equation<div class="tip">(1)
<span class="pop">
<equation id="my first equation"
class="equation__content">
$$f(x) = 5x^2$$
</equation>
</span>
.</p>
</div>
</body>
</html>
I have to create boxes inside of a div(The div here is box) whenever the user clicks the button. I have done the following so far, but no boxes are created.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.myDiv {
height: 50px;
width: 50px;
border-color: blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
}
</style>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
<script>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
</script>
</body>
</html>
var x = document.getElementById("theBoxes");
x.addEventListener("click", myFunction)
function myFunction() {
var box = document.createElement('div');
box.classList.add('myDiv');
document.body.appendChild(box);
}
.myDiv {
height: 50px;
width: 50px;
border: 1px solid blue;
}
#box {
width: 700px;
height: 700px;
border: solid black;
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>The onclick Event</h1>
<button id ="theBoxes" >Creating boxes</button>
<div id = "box"></div>
</body>
</html>
Your code is working, unfortunately border-color: blue in myDiv doesn't work and the box also added outside your div #box.
So I modify a bit your code by adding position: absolute in #box and border: 1px solid blue in .myDiv.
#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
fiddle:
http://jsfiddle.net/fgPL6/1/
i have a simple toolbar with two buttons:
<!DOCTYPE html>
<html>
<head>
<title>oxxy task</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="jsFile.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$(function() {
$("#toolbar").draggable();
});
</script>
<script type="text/javascript" src="cP_v0.91/colorPicker.js"></script>
</head>
<body>
<div id="toolbar">
<p>Toolbar</p>
<button class="buttons" id="buttonOne" type="button" onclick="appendButton();">createButton</button>
<button class="buttons" id="buttonTwo" type="button" onclick="appendText();">createText</button>
</div>
</body>
</html>
Here is my css code:
#toolbar {
width: 300px;
background-color: gray;
border-radius: 5px;
padding-bottom:10px;
padding-top:10px;
}
button{
margin-left: 35px;
}
.ButtonClass{
width: 120px;
background-color: lightblue;
border: solid;
margin-top: 10px;
margin-right: 10px;
float: left;
text-align:center;
border-radius: 5px;
border-width:2px;
}
.textClass{
width: 120px;
background-color: white;
border: solid;
margin-top: 10px;
margin-right: 10px;
float: left;
background-color: lightgreen;
text-align:center;
border-radius: 5px;
border-width:2px;
}
p{
text-align:center;
color: lightblue;
margin-top:0px;
}
And finally my javascript functions:
function appendButton() {
var popUpButton = document.createElement('div');
popUpButton.className = 'ButtonClass';
var message = document.createElement('a');
message.innerHTML = 'Link';
message.href = 'http://google.com';
popUpButton.appendChild(message);
document.body.appendChild(popUpButton);
$(function() {
$(".ButtonClass").draggable();
});
}
function appendText() {
var popUpButton = document.createElement('div');
popUpButton.className = 'textClass';
var message = document.createElement('div');
message.innerHTML = "someText";
popUpButton.appendChild(message);
document.body.appendChild(popUpButton);
$(".buttons").draggable();
$(function() {
$(".textClass").draggable();
$(".textClass").dblclick(function() {
});
});
}
I am dynamically creating div elements when clicking on the toolbar buttons. My goal is when those elements are created when i double click them a color picker to be called that changes the elements background. I am using colorPicker 0.91 plugin but unfortunetly i can not make the plugin work. I would appreciate if someone can help me. Thank you
Fiddle:
http://jsfiddle.net/fgPL6/3/
Try this:
$(function() {
$("#toolbar" ).draggable();
$("body").on("dblclick",".ButtonClass",function(e){
e.preventDefault();
colorPicker(e);
});
$("body").on("dblclick",".textClass",function(e){
e.preventDefault();
colorPicker(e);
})
});