I want to remove the style attribute from html: <html style="">
For example:
<html style="--athens-gray:#121212; --alabaster:#1E1E1E; --black:#ffffff; --white:#000000;">
Should be <html>.
This is my script:
const themes = {
dark: {
'--white': '#000000',
},
light: {
'--white': '#ffffff',
},
};
function lighttheme() {
const theme = themes["dark"];
for (var variable in theme) {
document.documentElement.style.setProperty(variable, theme[variable]);
};
}
:root {
--athens-gray: #e9e8ec;
--alabaster: #f8f8f8;
--black: #000000;
--white: #ffffff;
}
body {
background-color: var(--white);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Settings</title>
</head>
<body>
<button type="button" onClick="lighttheme();">Click Me!</button>
</body>
</html>
You can do that by this code:
document.getElementsByTagName("html")[0].removeAttribute("style")
For example:
const themes = {
dark: {
'--athens-gray': '#121212',
'--alabaster': '#1E1E1E',
'--black': '#ffffff',
'--white': '#000000',
},
light: {
'--athens-gray': '#e9e8ec',
'--alabaster': '#f8f8f8',
'--black': '#000000',
'--white': '#ffffff',
},
};
function lighttheme() {
const theme = themes["dark"];
for (var variable in theme) {
document.documentElement.style.setProperty(variable, theme[variable]);
};
}
function removeStyle(){
document.getElementsByTagName("html")[0].removeAttribute("style");
}
:root {
--athens-gray: #e9e8ec;
--alabaster: #f8f8f8;
--black: #000000;
--white: #ffffff;
}
body {
background-color: var(--white);
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Settings</title>
</head>
<body>
<button type="button" onClick="lighttheme();">Click Me!</button>
<button type="button" onClick="removeStyle()">Remove Style!</button>
</body>
</html>
If I comment javascript code you will see the page's color gets red.
Related
I was wondering how would I go around changing my modal's background color after it has displayed, like the following: I want the background color to cover the whole page and not just color the modal itself. I tried:
.modal {
background-color: rgb(255, 0, 0);
}
But this resulted as I said in the colored modal and not the whole page.
Here's a snippet for refrence:
const modal = document.querySelector(".modal");
const openModal = document.querySelector(".open-button");
const closeModal = document.querySelector(".close-button");
openModal.addEventListener("click", () => {
modal.showModal();
});
closeModal.addEventListener("click", () => {
modal.close();
});
.modal {
background-color: rgb(255, 0, 0);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="button open-button" >Open</button>
<dialog class="modal">
Hi! I'm 15Rabi
<button class="button close-button" >Close</button>
</dialog>
</body>
<script src="script.js"></script>
</html>
To change the backdrop color for a <dialog> element you needs to style the ::backdrop pseudo element like this:
.modal::backdrop {
background-color: rgb(255, 0, 0);
}
Ideally though you'd want to to be a semi transparent color, not solid red, so you might want to use rgba instead
.modal::backdrop {
background-color: rgba(255, 0, 0, 0.5);
}
Links to the relevant docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
Try this in your CSS
dialog::backdrop {
background-color: rgb(255, 0, 0);
}
This is my HTML with a custom web component.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced ToDo App with Web Components</title>
</head>
<body>
<todo-item todo="Walk the dog" data-id="1"></todo-item>
<script src="../static/listItems.js"></script>
</body>
</html>
This is my JS file where I set up the component.
const template = document.createElement("template");
template.innerHTML = `<style>
h4 {
color: white;
font-size: 14px;
display: block;
padding: 10px 5px;
background: orange;
}
</style>
<div class="todo-item">
<h4></h4>
</div>
`;
class TodoItem extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
this.shadowRoot.querySelector("h4").innerText = this.getAttribute("todo");
}
connectedCallback() {
this.shadowRoot
.querySelector(".todo-item")
.addEventListener("click", () => {
console.log(this.getAttribute("data-id"));
});
}
}
window.customElements.define("todo-item", TodoItem);
// Über Daten iterieren
const body = document.querySelector("body");
const dummydata = [
{ id: 1, description: "Walk the dog" },
{ id: 2, description: "Play football" }
];
for (item of dummydata) {
console.log(item.description);
todoItem = document.createElement("todo-item");
todoItem.setAttribute("todo", item.description); # Does not work!
todoItem.setAttribute("data-id", item.id);
body.appendChild(todoItem);
}
The component in the HTML works perfectly fine, but when I try to create them dynamically with JavaScript setting the attributes seem not to work. The "todo"-text does not get displayed. Is setting this "todo" attribute invalid?
Got it - the attribute has to be set inside the connectedCallBack function. When doing it before the attribute valu will be null
connectedCallback() {
this.shadowRoot
.querySelector(".todo-item")
.addEventListener("click", () => {
console.log(this.getAttribute("data-id"));
});
this.shadowRoot.querySelector("h4").innerText = this.getAttribute("todo");
}
I am trying to use the jQuery simple color picker to select and change the background color. I am new to HTML writing and nothing i have found seem to help me with this specific type of color picker. I have experimented with many diffrent color pickers but am unsure how to get the background to respond as well as the display box.
https://jqueryui.com/slider/#colorpicker.
The code i have used from the website below.
<!doctype html>
<html lang='en'>
<head>
<!-- Source https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018
added missing 'https:' to line 7
removed local call to /resources/demos/style.css line 8-->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>jQuery UI Slider - Colorpicker</title>
<link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<style>
#red, #green, #blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range { background: #ef2929; }
#red .ui-slider-handle { border-color: #ef2929; }
#green .ui-slider-range { background: #8ae234; }
#green .ui-slider-handle { border-color: #8ae234; }
#blue .ui-slider-range { background: #729fcf; }
#blue .ui-slider-handle { border-color: #729fcf; }
</style>
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
<script>
$( function() {
function hexFromRGB(r, g, b) {
var hex = [
r.toString( 16 ),
g.toString( 16 ),
b.toString( 16 )
];
$.each( hex, function( nr, val ) {
if ( val.length === 1 ) {
hex[ nr ] = '0' + val;
}
});
return hex.join( '' ).toUpperCase();
}
function refreshSwatch() {
var red = $( '#red' ).slider( 'value' ),
green = $( '#green' ).slider( 'value' ),
blue = $( '#blue' ).slider( 'value' ),
hex = hexFromRGB( red, green, blue );
$( '#swatch' ).css( 'background-color', '#' + hex );
}
$( '#red, #green, #blue' ).slider({
orientation: 'horizontal',
range: 'min',
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$( '#red' ).slider( 'value', 255 );
$( '#green' ).slider( 'value', 140 );
$( '#blue' ).slider( 'value', 60 );
} );
</script>
</head>
<class='ui-widget-content' style='border:0;'>
<p class='ui-state-default ui-corner-all ui-helper-clearfix' style='padding:4px;'>
<span class='ui-icon ui-icon-pencil' style='float:left; margin:-2px 5px 0 0;'></span>
Simple Colorpicker
</p>
<div id='red'></div>
<div id='green'></div>
<div id='blue'></div>
<div id='swatch' class='ui-widget-content ui-corner-all'></div>
</body>
</html>
To achieve that you only have to replace #swatch with body in the refreshSwatch() function:
$(function() {
function hexFromRGB(r, g, b) {
var hex = [
r.toString(16),
g.toString(16),
b.toString(16)
];
$.each(hex, function(nr, val) {
if (val.length === 1) {
hex[nr] = '0' + val;
}
});
return hex.join('').toUpperCase();
}
function refreshSwatch() {
var red = $('#red').slider('value'),
green = $('#green').slider('value'),
blue = $('#blue').slider('value'),
hex = hexFromRGB(red, green, blue);
// $('#swatch').css('background-color', '#' + hex); <-- replace this
$('body').css('background-color', '#' + hex); // <-- with this
}
$('#red, #green, #blue').slider({
orientation: 'horizontal',
range: 'min',
max: 255,
value: 127,
slide: refreshSwatch,
change: refreshSwatch
});
$('#red').slider('value', 255);
$('#green').slider('value', 140);
$('#blue').slider('value', 60);
});
<!doctype html>
<html lang='en'>
<head>
<!-- Source https://jqueryui.com/slider/#colorpicker, retrieved Feb 2018
added missing 'https:' to line 7
removed local call to /resources/demos/style.css line 8-->
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>jQuery UI Slider - Colorpicker</title>
<link rel='stylesheet' href='https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css'>
<style>
#red,
#green,
#blue {
float: left;
clear: left;
width: 300px;
margin: 15px;
}
#swatch {
width: 120px;
height: 100px;
margin-top: 18px;
margin-left: 350px;
background-image: none;
}
#red .ui-slider-range {
background: #ef2929;
}
#red .ui-slider-handle {
border-color: #ef2929;
}
#green .ui-slider-range {
background: #8ae234;
}
#green .ui-slider-handle {
border-color: #8ae234;
}
#blue .ui-slider-range {
background: #729fcf;
}
#blue .ui-slider-handle {
border-color: #729fcf;
}
</style>
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script>
</head>
<class='ui-widget-content' style='border:0;'>
<p class='ui-state-default ui-corner-all ui-helper-clearfix' style='padding:4px;'>
<span class='ui-icon ui-icon-pencil' style='float:left; margin:-2px 5px 0 0;'></span>
Simple Colorpicker
</p>
<div id='red'></div>
<div id='green'></div>
<div id='blue'></div>
<div id='swatch' class='ui-widget-content ui-corner-all'></div>
</body>
</html>
Is it possible to change the design of the LayerList widget in this ESRI tutorial ?
I would like the LayerList with no checkboxes and to select one layer at a time just by clicking it’s name.
I know you can hide the checkboxes with display: none but how do you select the layers?
Michelle.
Well, Here is the working solution for this-
Use selection color to select/Unselect the layerList Items:-
JSFiddle:- https://jsfiddle.net/vikash2402/5dcLh450/3/
Below is the working code for this-
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Layer List Dijit</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#map {
padding:0;
}
#layerListPane{
width:25%;
}
.esriLayer{
background-color: #fff;
}
.esriLayerList .esriList{
border-top:none;
}
.esriLayerList .esriTitle {
background-color: #fff;
border-bottom:none;
}
.esriLayerList .esriList ul{
}
/* ****** Here you can change the selection color ******* */
.esriListVisible label{
background-color: aqua !important;
}
.esriCheckbox{
display: none !important;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function(
arcgisUtils,
LayerList
) {
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f63fed3f87fc488489e27c026fa5d434", "map").then(function(response){
var myWidget = new LayerList({
map: response.map,
layers: arcgisUtils.getLayerList(response)
},"layerList");
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Hoping this will help you :)
I want to make a textarea where you can type inside of it, with a black background and green text and the ">_" blinks. How would i go about making this?
You can use this in your CSS:
textarea {
background-color: #000;
border: 1px solid #000;
color: #00ff00;
padding: 8px;
font-family: courier new;
}
<!doctype html>
<html>
<head>
<style>
</style>
<meta charset="utf-8" />
<title>Demo -TextArea</title>
<link rel="stylesheet" type="text/css" href="jqueryui.css">
<script src="jquery.js"></script>
<script src="jqueryui.js"></script>
<script>
$(document).ready(function() {
$("#myTextArea").html(">_");
setInterval(function(){
removeAndAppendBlickWraper();
},2000);
});
function removeAndAppendBlickWraper(){
removeAndAppendBlick(function(){
var text = $("#myTextArea").val(),
withCursortext =text+">_";
$("#myTextArea").val(withCursortext);
});
}
function removeAndAppendBlick(callback){
var text = $("#myTextArea").val();
var witoutCursor = text.substr(0,text.lastIndexOf(">_"));
$("#myTextArea").val(witoutCursor);
setTimeout(function(){
callback();
},1500);
}
</script>
</head>
<body>
<textarea id="myTextArea" style="background-color: black;color: green;" row="5"></textarea>
</body>
</html>
DEMO (thanks to amit kate)