The checkbox does not change its checked value after page refresh - javascript

I am not familiar with javascript. I only work for dark mode with the information I research on the internet. I only change links in the old way. I am successfully changing links. However, when the page is refreshed in any mode, it changes to the checked default mode (light). I will be happy to any help.
<link rel="stylesheet" title="light" href="site.css">
<link rel="stylesheet" title="dark" href="site-dark.css">
<script>
function switchMode() {
var mode = document.getElementById("theme-toggle");
if (mode.checked) {
setActiveStyleSheet('dark');
} else {
setActiveStyleSheet('light');
}
}
This is the switch Code:
<!-- Dark & Light Mode-->
<div class="button-con">
<label for="theme-toggle">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="dayIcon" x="0px" y="0px" viewBox="0 0 35 35" style="enable-background:new 0 0 35 35;" xml:space="preserve">
<g id="Sun">
<g>
<!--icon-->
</g>
</g>
</svg>
</label>
<input class="toggle" id="theme-toggle" type="checkbox" onclick="switchMode()">
<label class='toggle-button' id="theme-toggle"></label>
<label for="theme-toggle">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="nightIcon" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<!-icon-->
</svg>
</label>
</div>


Then you need to use storage
to set
function switchMode() {
var mode = document.getElementById("theme-toggle");
if (mode.checked) {
setActiveStyleSheet('dark');
localStorage.setItem("ex_mode", "dark");
} else {
setActiveStyleSheet('light');
localStorage.setItem("ex_mode", "light");
}
}
to get call this when page is loaded
window.addEventListener('load', function() {
setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :"light" );
document.getElementById("theme-toggle").checked = localStorage.getItem('ex_mode')=="dark" ? true:false ;
});
or put your body tag
<body onload="setActiveStyleSheet(localStorage.getItem('ex_mode') ? localStorage.getItem('ex_mode') :'light')">


You need use localSlorage or Cookie to save the current theme. Because page rendering all time when you refresh.
https://developer.mozilla.org/ru/docs/Web/API/Window/localStorage
https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Related

Div dissapears after I add script

I have been trying to create an auto refreshing clock on my page but after adding script to my file the div around the clock dissapears so it doesn't use the CSS I have added to the div. <div class="clock_item"> is the one that disapears.
If I close div.clock_item before div.clocktwo then it doesn't dissapear but I want div.clocktwo to stay inside div.clock_item.
Thanks for the help!
function loadlink() {
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php', function() {
$(this).unwrap();
});
}
loadlink();
setInterval(function() {
loadlink()
}, 5000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clock_item">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> <!--// MEL LETTERS -->
<h3>
MELBOURNE
</h3>
<div class="clocktwo">
</div>
</div>

In your code you have use $(this).unwrap() so unwrap removes parent element from selected element that's the reason your outer element gets removed because your selector is inner div i.e : clocktwo and outer is clock_item . Instead use wrap method it will wrap html structure around each element in the set of matched elements . i.e :
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).wrap();
});

i think this can solve
don't write script in div tag
<div class="clock_item">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 310 155" style="enable-background:new 0 0 310 155;" xml:space="preserve">
<path d="M64.9,44v102.6H36.5V44h-36V19.4h100.5V44H64.9z"/>
<path d="M105.3,146.7V19.4h28.4v101.9h54.2v25.3H105.3z"/>
<path d="M281.3,19.4h28.4v127.2h-28.4L220.6,67v79.7h-28.4V19.4h26.6l62.4,81.9V19.4z"/>
<path d="M0,154.9v-9.1h309.7v9.1H0z"/>
</svg> // MEL LETTERS
<h3>
MELBOURNE
</h3>
<div class="clocktwo">
</div>
</div>
<script>
function loadlink(){
$('.clocktwo').load('<?php echo get_template_directory_uri(); ?>/melbourne.php',function () {
$(this).unwrap();
});
}
loadlink();
setInterval(function(){
loadlink()
}, 5000);
</script>

Tooltip in svg a tag

I am using svg tag inside my angular page ..
Below is the code for reference
`
<svg version="1.1" id="Layer_1" x="0px" y="0px"
viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" focusable="false">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#3FA9F5;}
.st2{font-family:'FontAwesome';}
.st3{font-size:20px;}
</style>
<g>
<a class="pointer" href="#" uib-tooltip ="Testing" tooltip-placement ="right" ng-click="doPTZOperation(0,1,2);$event.preventDefault();">
<path class="st0" d="M122.3,44.7l15.5-36.8c-25-10.3-51.1-10-75.3-0.4l15,37.1C91.5,39.1,107.4,38.7,122.3,44.7z"/>
<text transform="matrix(0.7404 -0.6722 0.6722 0.7404 98.521 31.4565)" class="st1 st2 st3" ></text>
</a>
`
But,the tooltip is not working ...

SVG react component not rendered/black rectangle

I'm trying to render an svg within a react component.
here's the svg that is rendered correctly
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 427.3 444.5" style="enable-background:new 0 0 427.3 444.5;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#7FD093;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{display:none;fill:none;}
</style>
<symbol id="Stylish" viewBox="-154 -190.2 154 380.4">
<path id="XMLID_12_" class="st0" d="M-46.5,165c-6.7-3.3-15.6,2.9-15.8,10.4c-0.2,7.5,7.2,13.9,14.7,13.8s14.2-5.8,16.7-12.9
c4.5-12.7-3.7-26.7-14.4-34.9s-23.8-12.6-35.1-19.9c-9-5.8-16.7-13.4-22.7-22.2c-1.9-2.8-3.8-6.1-3.6-9.5c0.4-7.6,11.7-11,17.3-5.8
c5.6,5.2,4.6,15-0.7,20.4c-5.4,5.4-13.7,6.9-21.2,5.7c-9.5-1.5-18.5-7-23.2-15.3c-4.8-8.3-4.7-19.5,0.9-27.2
c7.6-10.5,23.2-13.3,29.7-24.5c5.2-8.9,2.7-20.8-3.5-29s-21.1-26.8-38.4-20.1c-7.4,2.8-7.8,15.3-5,20.2c7.7,13.3,21.9,5.7,24-5
c2.6-12.9-12.1-51-0.2-66.7c16-21,45.3-22,49.8-8.6c2.9,8.6-1.9,19.6-12.1,21.1c-9.1,1.3-20-8.1-18.6-41.2
c2.7-64.1,62.8-62.8,72.2-64.1c9.4-1.3,33.4-2.7,34.7-21.4S-22.2-195-24-181.1c-1.3,10.3,9.6,8,9.6,8"/>
<polygon id="XMLID_13_" class="st1" points="-154,190 0,190 0,-190 -154,-190 "/>
</symbol>
<use xlink:href="#Stylish" width="154" height="380.4" id="XMLID_1_" x="-154" y="-190.2" transform="matrix(1 0 0 -1 190.6723 229.2729)" style="overflow:visible;"/>
<use xlink:href="#Stylish" width="154" height="380.4" id="XMLID_5_" x="-154" y="-190.2" transform="matrix(-1 0 0 -1 236.6723 229.2729)" style="overflow:visible;"/>
</svg>
and here's my react component, i converted all the attributes but nothing happens/ or, if I play with the viewBox a black rectangle appears.
import React from 'react';
var _ = require('lodash');
export class SVGStylish extends React.Component{
render(){
return(<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
x={0} y={0}
viewBox="0 0 427.3 444.5" style={{enableBackground:'new 0 0 427.3 444.5'}}
xmlSpace="preserve">
<symbol id="Stylish" viewBox="-154 -190.2 154 380.4">
<path id="XMLID_12_"
style = {{
fill:'none',
stroke:'#7FD093',
strokeWidth:2,
strokeLinecap:'round',
strokeLinejoin:'round',
strokeMiterlimit:10
}}
d="M-46.5,165c-6.7-3.3-15.6,2.9-15.8,10.4c-0.2,7.5,7.2,13.9,14.7,13.8s14.2-5.8,16.7-12.9
c4.5-12.7-3.7-26.7-14.4-34.9s-23.8-12.6-35.1-19.9c-9-5.8-16.7-13.4-22.7-22.2c-1.9-2.8-3.8-6.1-3.6-9.5c0.4-7.6,11.7-11,17.3-5.8
c5.6,5.2,4.6,15-0.7,20.4c-5.4,5.4-13.7,6.9-21.2,5.7c-9.5-1.5-18.5-7-23.2-15.3c-4.8-8.3-4.7-19.5,0.9-27.2
c7.6-10.5,23.2-13.3,29.7-24.5c5.2-8.9,2.7-20.8-3.5-29s-21.1-26.8-38.4-20.1c-7.4,2.8-7.8,15.3-5,20.2c7.7,13.3,21.9,5.7,24-5
c2.6-12.9-12.1-51-0.2-66.7c16-21,45.3-22,49.8-8.6c2.9,8.6-1.9,19.6-12.1,21.1c-9.1,1.3-20-8.1-18.6-41.2
c2.7-64.1,62.8-62.8,72.2-64.1c9.4-1.3,33.4-2.7,34.7-21.4S-22.2-195-24-181.1c-1.3,10.3,9.6,8,9.6,8"/>
<polygon id="XMLID_13_" points="-154,190 0,190 0,-190 -154,-190 "/>
</symbol>
<use xlinkHref="#Stylish" width="154" height="380.4"
id="XMLID_1_" x="-154" y="-190.2"
style={{transform:"matrix(1 0 0 -1 190.6723 229.2729)", overflow:'visible'}}
/>
<use xlinkHref="#Stylish" width="154" height="380.4"
id="XMLID_5_" x="-154" y="-190.2"
style={{transform:"matrix(-1 0 0 -1 236.6723 229.2729)", overflow:'visible'}}
/>
</svg>
);
}
}
the react component seems to render correct elements, attribute and styles.
any ideas? I'm sure i'm missing something..
Thanks in advance

Hi the problem is that you were missing the style of the polygon st1.
I have created a css and added the class name.
I have refactor the code and you can see it working here

How to access an svg inner id and have CSS change the fill color of that id?

This is my svg file
next.svg
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g class="next">
<g>
<polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
<path fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
</g>
</g>
</svg>
This is my basic html to display the svg
<div>
<object id="objsvg" class="svgbtn" type="image/svg+xml" data="next.svg" onclick="changeSVGColor()"></object>
</div>
This is my style.css file
.inner {
fill: #000000;
}
.inner-new-color {
fill: #ff00ff;
}
This is my basic jQuery to change the color of .inner in svg file. What am I doing wrong?
It does not even seem like the #objsvg selector has the inner class at all, since $("#objsvg").hasClass("inner")); returns false.
function changeSVGColor() {
$("#objsvg").removeClass("inner");
$("#objsvg").addClass("inner-new-color");
}

Select the portion you want to change by class. $(".inner")
$(".inner").removeClass("inner").addClass("inner-new-color");
Example Fiddle

The ID will not work on the parent or 'object', you will need to open your SVG with something like sublime text, and add an id="objsvg" for whatever path you are trying to manipulate.
e.g..
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<g class="next">
<g>
<polygon fill="#FFD92D" class="inner" points="20.587,5.055 78.706,48 20.587,90.945"/>
<path id="objsvg" fill="#FF9900" class="outer" d="M21.623,7.11L76.961,48L21.623,88.89V7.11 M19.55,3v90l60.9-45L19.55,3L19.55,3z"/>
</g>
</g>
</svg>
see updated js fiddle, pop open your console too
jsfiddle.net/xaLkvc27/12

Click events stop working after replacing attribute of <use> element in <svg> (Win7/IE11)

We are using multiple svg symbols for displaying icons.
<!-- defining them at the start of the page -->
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg"
id="rect" ...>
<rect... />
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg"
id="circle" ...>
<circle... />
</symbol>
</svg>
</div>
<!-- using them in the page somewhere -->
<svg>
<use xlink:href="#rect"></use>
</svg>
In some cases we need to replace them later on with another icon (like on a collapse control), therefore I created a little helper function to change the xlink:href to the new symbol name.
$.fn.replaceSVGIcon = function(id) {
$(this).find('svg')
.andSelf()
.filter('svg')
.find('use')
.attr('xlink:href', '#' + id);
}
This works in every browser except for IE10 + IE11 on Windows 7 (but weirdly enough it works with Windows 8).
When you open the snippet below in IE11 and click on the red box everything is fine, but as soon as you start clicking on the element within, it breaks the whole page after the icon is changed for the first time.
(function($){
$.fn.replaceSVGIcon = function(id) {
$(this).find('svg').andSelf().filter('svg').find('use').attr('xlink:href', '#' + id);
}
})(jQuery);
clickFunction = function() {
var $elem = $('#icon');
if ($elem.find('use').attr('xlink:href') == '#rect')
{
$elem.replaceSVGIcon('circle');
} else {
$elem.replaceSVGIcon('rect');
}
};
#icon-container {
visibility: collapse;
display: none;
}
#icon {
height: 40px;
width: 40px;
fill: #454545;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol xmlns="http://www.w3.org/2000/svg" id="rect" viewBox="0 0 50 50">
<rect x="15" y="15" width="20" height="20"></rect>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" id="circle" viewBox="0 0 50 50">
<circle cx="25" cy="25" r="10"></circle>
</symbol>
</svg>
</div>
<svg id="icon" onclick="clickFunction()">
<rect fill="red" height="40" width="40"></rect>
<use xlink:href="#rect"></use>
</svg>
Why is this happening and is this a known Internet Explorer bug? What are my options to work around this issue?

Yes, this is a known IE bug. https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom
If you can, you should set pointer-events: none; for the use tag in your CSS. It's crazy, but it should work.

Categories

Resources