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>
Related
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
I want to get the content of <g> tag .
I have tried getElementsByTagName('g') but it returns all <g> in an array , I want just content of outer <g> .
Here is my svg
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
.st0{font-family:'MyriadPro-Regular';}
.st1{font-size:117.1799px;}
.st2{fill:#17519D;}
.st3{fill:#E1232E;}
.st4{fill:#FAFDF9;}
</style>
<g>
<text transform="matrix(1 0 0 1 161.3171 175.1665)" class="st0 st1">text</text>
<g id="xe_o3c0">
<g id="xe_6ipa">
<g id="xe_zj3t">
<path id="xe_ce0v" pointer-events="bounding-box" class="st2" d=".4l1."/>
</g>
</g>
</g>
<image style="overflow:visible;" width="728" height="625" xlink:href="http://magento1924.inkxe.com//xetool/assets/magento1924_inkxe_com/images/designs/16.jpg" transform="matrix(0.3073 0 0 0.3073 35.3171 216.8965)">
</image>
</g>
</svg>
Why don't you use id as the selector?
getElementsById('xe_6ipa')
To get the first group element in the SVG, you can use:
getElementsByTagName('g').item(0)
document.querySelector('g') will return the first outer instance that it finds, and returns the node instead of a NodeList.
I am new to working with SVGs. I am trying to caption an svg of a person with that person's name. Here is my attempt:
<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 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve">
<g>
<circle cx="129.375" cy="60" r="60"/>
<path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/>
<text text-anchor="middle" x="60" y="75">Person Name Here</text>
</g>
</svg>
When I try to anchor the text below the image the text disappears. how do I
Change the size of the image?
Leave space at the bottom of the image for the person's name?
Here is the snippet:
var svg = '<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 258.75 258.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text text-anchor="middle" x="60" y="75">Person Name Here</text></g></svg>'
$('#name').append(svg);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
This may be what you need:
You can change the size of the image with css, it will scale all your svg.
You just need to give some more space to the viewBox and position your name accordingly.
Hope this helps, snippet:
var svg = '<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 258.75 350.75" style="enable-background:new 0 0 258.75 258.75;" xml:space="preserve"> <style>.style1 {font-size: 15px;} </style> <g> <circle cx="129.375" cy="60" r="60"/><path d="M129.375,150c-60.061,0-108.75,48.689-108.75,108.75h217.5C238.125,198.689,189.436,150,129.375,150z"/><text class="style1" text-anchor="middle" x="125" y="290">Person Name Here</text></g></svg>'
$('#name').append(svg);
svg, object {
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="name">Hello</p>
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 ...
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