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);
}
Related
How do i modify :hover after an animation has occurred and changed the font-size of an h1?
it goes like this:
text: font-size: 12.5rem; letter-spacing: 0;
hover over the text- font-size: 13.5rem letter-spacing: 1rem; , after a few seconds, an animation with #keyframes comes and is changing the font-size, from 12.5rem to 5 rem. with the new change applied (font-size: 5rem;) I want to hover over it again but this time the values of :hover to change, the size when I hover to be from 5rem(the new values after the animation) to 6 rem, and letter-spacing, from 1rem; to 0.2rem.
i don't know how to do it.. please help me with some code
solution created with vanilla Js
let title = document.getElementById('title');
let i = 0;
title.addEventListener('mouseover', function() {
if (i >= 1) {
hoverText(5, 6);
title.removeEventListener('mouseover', function() {});
} else {
hoverText(12.5, 13.5);
i++;
}
});
function hoverText(small, big) {
title.style.fontSize = big + "rem";
setTimeout(function() {
title.style.fontSize = small + "rem";
}, 1000);
}
h1#title {
font-size: 12.5rem;
letter-spacing: 0;
transition-duration: 1s;
}
<!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">
<script src="./script.js" defer></script>
</head>
<body>
<h1 id="title">h1 element</h1>
</body>
</html>
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.
HTML5 canvas showing blurry context.
The red rectangle, on green background:
When I made the canvas width & height == window width & height (fullpage). Also it is showing a horizontal scrollbar even if the body{ margin: 0; }. How can i fix this ?
my code
html ->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
css ->
body
{
margin: 0;
}
canvas
{
/*border: 1px solid black;*/
background: green;
}
jquery ->
$(document).ready(function(){
$.fn.showMSG = function(){
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.width($(window).width());
canvas.height($(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,50,50);
}
$(window).ready(function(){
$.fn.showMSG();
});
});
Your code is calling the .width() and .height() methods on the canvas. This doesn't change the height and width attribute of the canvas, but rather its height and width style which causes it to look stretched. Instead use .attr() to change the height and width attribute of the canvas.
See working example below:
$(document).ready(function() {
$.fn.showMSG = function() {
var canvas = $("canvas");
var ctx = canvas[0].getContext("2d");
canvas.attr('width', $(window).width());
canvas.attr('height', $(window).height());
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 50, 50);
}
$(window).ready(function() {
$.fn.showMSG();
});
});
body {
margin: 0;
overflow: hidden;
}
canvas {
/*border: 1px solid black;*/
background: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>
I have made a HTML project in Appcelerator. I want a full screen canvas so in CSS I set the property to 100% (without quotes) which I found out doesn't work with Appcelerator.
I've tried '100%' with quotes and Ti.UI.SIZE which both size it at a weird size that has the same aspect ratio seen in the image below. I have coloured the canvas green and the body yellow so you know its not the parent that's the problem.
I have tried searching but HTML only apps don't seem to be too popular with Appcelerator so i cannot find an answer.
My CSS:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: '100%';
height: '100%';
background-color: green;
}
body{
background-color: yellow;
}
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- saved from url=(0047) -->
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script defer type="text/javascript" src="../scripts/main.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
As #HiddenHobbes says in the comment - remove the quotes from your CSS, like so:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100%;
height: 100%;
background-color: green;
}
Heres a Fiddle to show it works: JSFiddle
EDIT:
vw and vh could possible work too:
canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right:0;
width: 100vw;
height: 100vh;
background-color: green;
}
vw is for Viewport Width and vh is Viewport Height.
This is running fine for me using Titanium 7.1.1.GA and an Android device:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<style>
#canvas {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: green;
}
body {
background-color: yellow;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
if (document.readyState !== 'loading') {
eventHandler();
} else {
document.addEventListener('DOMContentLoaded', eventHandler);
}
function eventHandler() {
var w = window.innerWidth;
var h = window.innerHeight;
document.getElementById("canvas").width = w;
document.getElementById("canvas").height = h;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 40, 40);
}
</script>
</body>
</html>
</html>
index.xml
<Alloy>
<Window class="container">
<WebView id="www" url="/test.html"/>
</Window>
</Alloy>
index.tss
".container": {
backgroundColor:"white"
}
"#www":{
width: Ti.UI.FILL,
height: Ti.UI.FILL
}
It calculates the size when the body is ready. About the orientation change: you can either add it to the HTML part and recalculate once the device is rotated or you can set a fixed orientation in Titanium e.g. orientationModes : [Ti.UI.LANDSCAPE_LEFT, Ti.UI.LANDSCAPE_RIGHT] to prevent the app from going to portrait mode.
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)