I have two html pages(index.htm and details.htm). Whenever I enable dark Mode in details.html, it is retained in the index.html without any issues, but when I go to the details page from the index.html page the darkMode gets disabled.
I'm using local storage for enabling and disabling the darkMode.
My javascript code:
let darkMode = localStorage.getItem("darkMode");
const toggleBtn = document.querySelectorAll("#mode");
document.body.classList.add('lightMode');
function enableDarkMode() {
localStorage.setItem('darkMode', 'enabled');
document.body.classList.add('darkMode');
document.body.classList.remove('lightMode');
}
function disableDarkMode() {
localStorage.setItem('darkMode', null)
document.body.classList.remove('darkMode');
document.body.classList.add('lightMode');
}
toggleBtn.forEach(btn => {
if(darkMode === 'enabled') {
enableDarkMode();
}
btn.addEventListener("click", () => {
darkMode = localStorage.getItem('darkMode')
if (darkMode !== 'enabled') {
enableDarkMode()
} else {
disableDarkMode();
}
});
})
css code :
.lightMode {
--background-color: white;
--textColor: black;
--borderColor: black;
--shadowColor: grey;
--card: white;
--span: rgba(0, 0, 0, 0.459);
--footer: rgb(231, 231, 231);
--element: rgba(0, 0, 0, 0.03);
--tagColor: rgb(66, 66, 66);
}
.darkMode {
--background-color: rgb(25, 25, 25);
--textColor: rgba(255, 255, 255, 0.76);
--borderColor: white;
--shadowColor: black;
--card: rgb(39, 39, 39);
--span: rgba(255, 255, 255, 0.459);
--footer: rgb(56, 56, 56);
--element: rgba(49, 49, 49, 0.493);
--tagColor: rgb(255, 255, 255);
}
My css only consists of a few custom variables with the same name for both themes.
A for my html the body doesn't have any classes. classes for the body tag are added through javascript
Is there a way to set the darkMode to be enabled to all pages unless the the user changes it himself everytime he visits the page?
I see no problem in your JS, you may have not put the class name 'darkMode' in your body tag of html. One thing is for sure that problem is not the script, but css or html. Look your code for these two again.
Related
I'm using react-complex-tree to show my data in a tree-based look.
I want to make red that marked up parts but instead, I'm making red these parts that you can see in the picture.
In my data, I know which one is a leaf or which one has children.
This is how I collect my data.
const traverseXml = (treeData, xmlObject) => {
treeData[xmlObject.name] = {
index: xmlObject.name,
canMove: false,
hasChildren: !!xmlObject.children.length,
children: xmlObject.children.map(c => c.name),
data: !xmlObject.children.length ? `${findAbbr(xmlObject.name)}: ${xmlObject.value}` : `${findAbbr(xmlObject.name)}`,
canRename: false
};
if (!xmlObject.children.isEmpty) {
xmlObject.children.forEach(c => {
setExpandedItems(oldArray => [...oldArray, xmlObject.name]);
traverseXml(treeData, c);
});
}
};
in react-complex-tree documentation it says u have to give CSS like that.
<style>
{`
:root {
--rct-color-tree-focus-outline: none;
--rct-color-tree-nonfocus-outline: none;
--rct-item-height: 35px;
--rct-color-nonfocustree-item-focused-border:rgba(125, 152, 161, 0.4);
--rct-color-nonfocustree-item-selected-bg: rgba(125, 152, 161, 0.4);
--rct-color-nonfocustree-item-selected-text: inherit;
--rct-color-focustree-item-focused-border: rgba(125, 152, 161, 0.5);
--rct-color-focustree-item-selected-bg: rgba(125, 152, 161, 0.5);
--rct-color-tree-bg: rgba(125, 152, 161, 0.4);
}
.rct-tree-root-focus {
outline: 2px solid var(--rct-color-tree-focus-outline);
}
.rct-tree-item-arrow svg {
min-width: 16px;
}
.rct-tree-root {
min-width: 1080px;
}
.rct-tree-item-li {
font-size: 0.8rem;
list-style-type: none;
padding-left: 15px ;
}
.rct-tree-item-li:only-of-type {
${secondTreeData["BICFI"].hasChildren ? 'none' : 'color:red'}
}
.rct-tree-root.rct-tree-root-focus .rct-tree-item-title-container-selected {
background-color: var(--rct-color-focustree-item-selected-bg);
color: #0C1713;
}
`}
</style>
<s.StyledButton isDarkMode={isDarkMode}
onClick={handleOpenClick}>{expandButtonText}</s.StyledButton>
<s.TreeContainer isOpenButton={isOpenButton}>
<ControlledTreeEnvironment
canDragAndDrop={true}
canDropOnItemWithChildren={true}
canReorderItems={true}
items={secondTreeData}
getItemTitle={item => item.data}
canSearch={true}
viewState={{
['Apphdr']: {
focusedItem,
expandedItems: expandedData,
selectedItems,
},
}}
onFocusItem={item => setFocusedItem(item.index)}
onExpandItem={item => setExpandedData([...expandedData, item.index])}
onCollapseItem={item =>
setExpandedData(expandedData.filter(expandedItemIndex => expandedItemIndex !== item.index))
}
onSelectItems={items => setSelectedItems(items)}
>
<Tree treeId={"Apphdr"} rootItem={"AppHdr"}/>
</ControlledTreeEnvironment>
</s.TreeContainer>
I have already given my 2 days. Can someone help me with it?
I have an el-radio-button and I need to change the background-color of the selected button, which by default is bright blue.
I was trying this way:
<el-radio-group v-model="radio1">
<el-radio-button label="New York"></el-radio-button>
<el-radio-button label="Washington"></el-radio-button>
<el-radio-button label="Los Angeles"></el-radio-button>
<el-radio-button label="Chicago"></el-radio-button>
</el-radio-group>
CSS (None has worked for me, it doesn't change the radio-group)
.el-radio-button__inner.checked {
background-color: rgb(222, 233, 243);
border-color: #409eff;
}
.el-radio-button__orig-radio.checked + .el-radio-button__inner {
background-color: rgb(222, 233, 243);
border-color: #409eff;
}
.el-radio-button__inner .is-active {
background-color: rgb(222, 233, 243);
border-color: #409eff;
}
Codigo
Element reference: : https://element.eleme.io/#/es/component/radio
You need to use the second one and change it like below:
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: rgb(222, 233, 243);
border-color: #409eff;
}
You have used . before checked while you need to change it to : for checked.
.(dot) denotes a class while : is used for the states or pseudo usages.
You can override css variables
.el-radio-button {
--el-radio-button-checked-bg-color: blue;
--el-radio-button-checked-text-color: white;
--el-radio-button-checked-border-color: dark-blue;
--el-radio-button-disabled-checked-fill: gray;
}
I have a page that uses Javascript to switch between subpages in the form of divs. The problem is that when I click between the subpages, the entire page frequently gets shoved upward and hides one of my navigation bars. This happens in all browsers.
http://www.victorsheckels.com
The relevant parts of the page are:
<div id="main" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:11;visibility:hidden;overflow-y:auto; overflow-x:hidden">
<div id="book" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:12;visibility:visible;overflow-y:auto; overflow-x:hidden">
<div id="copyright" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:13;visibility:hidden;overflow-y:auto; overflow-x:hidden">
<script>
function getSub() {
var section = location.hash.slice(1);
if (section == 'about') showMain();
if (section == 'library') showBook();
if (section == 'copyright') showCopyright();
}
function showMain() {
hideBook();
hideCopyright();
document.getElementById("main").style.top = "64px";
document.getElementById("main").style.visibility = "visible";
document.getElementById("mainnav").style.background = "rgba( 255, 153, 0, 0.3)";
document.getElementById("mainnav").style.borderBottom = "#FF9900 1px solid";
}
function hideMain() {
document.getElementById("main").style.top = "100%";
document.getElementById("main").style.visibility = "hidden";
document.getElementById("mainnav").style.background = "rgba( 255, 153, 0, 0)";
document.getElementById("mainnav").style.borderBottom = "#009900 1px solid";
}
function showBook() {
hideMain();
hideCopyright();
document.getElementById("book").style.top = "64px";
document.getElementById("book").style.visibility = "visible";
document.getElementById("booknav").style.background = "rgba( 255, 153, 0, 0.3)";
document.getElementById("booknav").style.borderBottom = "#FF9900 1px solid";
}
function hideBook() {
document.getElementById("book").style.top = "100%";
document.getElementById("book").style.visibility = "hidden";
document.getElementById("booknav").style.background = "rgba( 255, 153, 0, 0)";
document.getElementById("booknav").style.borderBottom = "#009900 1px solid";
}
function showCopyright() {
hideMain();
hideBook();
document.getElementById("copyright").style.top = "64px";
document.getElementById("copyright").style.visibility = "visible";
document.getElementById("copyrightnav").style.background = "rgba( 255, 153, 0, 0.3)";
document.getElementById("copyrightnav").style.borderBottom = "#FF9900 1px solid";
}
function hideCopyright() {
document.getElementById("copyright").style.top = "100%";
document.getElementById("copyright").style.visibility = "hidden";
document.getElementById("copyrightnav").style.background = "rgba( 255, 153, 0, 0)";
document.getElementById("copyrightnav").style.borderBottom = "#009900 1px solid";
}
function showZ1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('zw1.jpg')"; }
function showD1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw1.jpg')"; }
function showD2Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw2.jpg')"; }
function showD3Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw3.jpg')"; }
</script>
.content {
padding-bottom : 16px; /* 1/16 */
padding-left : 16px; /* 1/16 */
color : #CCCCCC;
border : #000000 solid 1px;
border-top : #009900 solid 1px;
border-bottom-left-radius : 40px;
background : rgba( 0, 0, 0, 0.3);
transition : all 1s;
}
Remove your href="#copyright" on the link to navigate to the copyright tab. You are jumping because you are not only firing your js, but also trying to move to an absolute positioned object.
EDIT: It's a fix, but the underlying issue is the manner in which you are laying objects out. Absolute positioning is nice at times for floating things, but it should be avoided when creating block level elements.
My problem is: I have three elements on a list, and I have to keep changing the text color when the mouse is hover.
So I am building 3 different functions, because the colors are different.
What I did is:
<script type="text/javascript">
var links = document.getElementsByClassName("menuitems");
function firsthover()
{
links[0].style.color = "rgb(204, 0, 0)"; /*this is for avoiding setInterval delay*/
setInterval(function(){
if(links[0].style.color == "rgb(204, 0, 0)")
{
links[0].style.color = "rgb(235, 153, 153)";
}
if(links[0].style.color == "rgb(235, 153, 153)")
{
links[0].style.color = "rgb(204, 0, 0)";
}
},1150);
}
</script>
The problem is: it changes the color just once.
I tried to use hexadecimal color too, just doesn't work.
Please be patient, I am still a novice.
The problem is a small logical flaw. The color does change, but it changes back right away.
If the first if statement evaluates as true and the color is set to rgb(235, 153, 153) the second if statement happens to be true as well, and gets checked right after the change. The color then changes back to the other rgb value.
Using else if instead of two separate statements fixes this. Alternatively you could place a return in the first if statement to prevent the second from being executed after the successful change.
if(links[0].style.color == "rgb(204, 0, 0)")
{
links[0].style.color = "rgb(235, 153, 153)";
}
else if(links[0].style.color == "rgb(235, 153, 153)")
{
links[0].style.color = "rgb(204, 0, 0)";
}
You can use CSS.
Put the code below inside your <head> tag.
<style type="text/css">
.menuitems {
color: rgb(204, 0, 0);
}
.menuitems:hover {
color: rgb(235, 153, 153);
}
</style>
It works perfectly well.
You can also use different colors for different items by using different classes.
Define a base class for menuitems, that will be the base color of them. Then add a different class for each color you would like to use.
Your CSS:
<style type="text/css">
.menuitems { /* base color */
color: rgb(204, 0, 0);
}
.menuitems:hover { /* base hover color */
color: rgb(235, 153, 153);
}
.menuitem-red:hover {
color: rgb(255, 0, 0) !important;
}
.menuitem-green:hover {
color: rgb(0, 255, 0) !important;
}
.menuitem-blue:hover {
color: rgb(0, 0, 255) !important;
}
</style>
Your HTML:
<ul id="menu">
<li class="menuitem">Menu item base</li>
<li class="menuitem menuitem-red">Menu item red</li>
<li class="menuitem menuitem-green">Menu item green</li>
<li class="menuitem menuitem-blue">Menu item blue</li>
</ul>
The name of classes I used and the colors are for sample purposes. Feel free to use the ones you think that fits better for your design.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
My requirement is to change the div gradient background with an animation according to a increasing counter value.
For instance, suppose if a div background gradient is blue-white at counter=== 0.
When counter value is in range of [80, 100], then the div goes to danger range hence the background gradient is suppose to turn in red-white with animation.
I tried doing several tries, however cant do it gracefully.
Can some one tell me how can i acheive it?
I think you could made an adaptative solution. In this example, we are moving :
FROM : background-image: linear-gradient(rgba(220, 20, 20, 1) 0, rgba(255, 255, 255, 1));
TO : background-image: linear-gradient(rgba(20, 120, 220, 1) 0, rgba(255, 255, 255, 1));
Here is the code:
Stylesheet
*{
padding: 0;
margin: 0;
background-color: transparent;
background-image: none;
}
div{
display: block;
margin: 5px;
width: 500px;
height: 300px;
border-radius: 5px;
border: 1px rgba(220, 220, 220, 1) solid;
box-shadow: 1px 3px 9px rgba(220, 220, 220, 1);
background-image: linear-gradient(rgba(20, 120, 220, 1) 0, rgba(255, 255, 255, 1));
transition-duration: .7s;
-o-transition-duration: .7s;
-moz-transition-duration: .7s;
-webkit-transition-duration: .7s;
}
HTML BODY CONTENT
<div data-index="0"></div>
<b>Counter : </b><output></output>
<script type="text/javascript" src="js/JQuery/jquery-2.1.1.js"></script>
Javascript content
$(function() {
var linearDefinition = 'linear-gradient(rgba(RED, BLUE, GREEN, 1) 0, rgba(255, 255, 255, 1))';
setInterval(function() {
var count = parseInt($('div').data('index'));
count = (count === 100) ? 0 : count;
var red = 20 + ((1 + count) * 2);
var blue = 120 - count;
var green = 220 - (2 * (1 + count));
// Asume this is your couter instruction
$('div').data('index', 1 + count);
$('output').text($('div').data(('index')));
$('div').css('background-image', linearDefinition.replace(/RED/, red).replace(/BLUE/, blue).replace(/GREEN/, green))
}, 50);
});