function swapstylesheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet)
}
<!--style.css-->
body{
background-color:#ffffff;
}
li{
color:#000000;
}
<head>
<link id="pagestyle" rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<li type="button" onclick="swapstylesheet('stylenight.css')">Night Mode</li>
<li type="button" onclick="swapstylesheet('style.css')">Day Mode</li>
</body>
I am trying to implement a button on my HTML website that toggles the CSS for the current website and all of the other pages on my site using JavaScript. The problem is that when I change to the other CSS file and then switch the page, it goes back to the original CSS file (keep in mind that I am new to JavaScript). If it's any help, this will be toggling day/night mode.
<!--stylenight.css-->
body{
background-color:#000000;
}
li{
color:#ffffff;
}
You will have to set cookies in the browser when the user clicks the Day/Night Mode Button.
and read the cookie value to set the Mode when user comes back to your original page.
You can read more about setting and reading cookies in javascript here:
https://www.w3schools.com/Js/js_cookies.asp
You are looking are something like this on clicking the button:
document.cookie = "mode=Day;";
Also you will need a function to read the cookies when the page loads:
(From How do I call a JavaScript function on page load?)
window.onload = function() {
readCookieAndSetMode();
};
And on readCookieAndSetMode() you should read the cookie using
var x = document.cookie;
and depending on x swap the CSS (I leave that part to you).
All the above answers is not right, i will write here some code for bloggers to apply dark mode on own blogs..and remains until button pressed... check this on my blog Hindi Tutor working well.. 100% working, and dark mode is not going to off when you refresh the page..
<!-- Theme Functions JS -->
<script type='text/javascript'>
//<![CDATA[
function retheme() {
var cc = document.body.className;
if (cc.indexOf("darktheme") > -1) {
document.body.className = cc.replace("darktheme", "");
if (opener) {opener.document.body.className = cc.replace("darktheme", "");}
localStorage.setItem("preferredmode", "light");
} else {
document.body.className += " darktheme";
if (opener) {opener.document.body.className += " darktheme";}
localStorage.setItem("preferredmode", "dark");
}
}
(
function setThemeMode() {
var x = localStorage.getItem("preferredmode");
if (x == "dark") {
document.body.className += " darktheme";
}
})();
//]]>
</script>
<!-- theme switch is a button icon adjust this as your icon stylesheet -->
#theme-switch{font-size:20px;position:absolute;top:0;right:35px;z-index:19}
<!-- Here is your stylesheet for dark mode editd these colors and style name except body darktheme -->
body.darktheme{color:#fff;background-color:#000}
body.darktheme .your-element-name{color:#fff;background-color:#000}
body.darktheme .lin-element-name a{color:#fff;background-color:#000}
body.darktheme #your-element-name{color:#fff;background-color:#000}
body.darktheme your-element-name ul li a{color:#fff;background-color:#000}
<div id='theme-switch'>
<a class='fa fa-adjust' href='javascript:void(0);' onclick='retheme()' title='Change Theme'/>
</div>
Related
I have this code in my html source
<body>
<a class="android">back to home page</a>
</body>
how can i use inline js/jquery code to say if android phone click "back to home page" button href= "x.com" else href= "z.com"
I want to use inline source js/jquery in my html document
You can use the following code in
<a class="android" id="android" >back to home page</a>
let anchor = document.getElementById("android");
if (screen.width <= 640) {
anchor.href="link"
}
else{
anchor.href="link2"
}
<script type="text/javascript">
var isAndroid = / Android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid)
{
document.getElementById("abc").href = "https://stackoverflow.com/;
}
else {
document.getElementById("abc").href = "https://link2";
}
I am printing a table using Javascript function as given below
<script type="text/javascript" >
function printpreview(divId) {
var content = document.getElementById(divId).innerHTML;
var mywindow = window.open('', 'Print', 'height=600,width=800');
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('</head><body>');
mywindow.document.write('<div align="center"><h2> MANAGEMENT</h2></div>');
mywindow.document.write('<div align="center"><h3>Sales Records</h3></div>');
mywindow.document.write("<link rel=\"stylesheet\" href=\"/public/css/style.css\"
type=\"text/css\"/>");
mywindow.document.write(content);
mywindow.document.write('<p style="color: #5B5745; font-family:verdana; font-size:11px; font-style:normal; font-weight:bold;">' );
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
mywindow.print();
mywindow.close();
return true;
}
I am calling that function on click of a hyperlink using below code
<a class="manage_link" href="" onclick="printpreview('printdiv')" >Print Preview </a>
I want the right message to appear at the end of each and every print preview page but it is only appearing at the end of last page. e.g. If there are 5 pages I want this copy right message to appear in the footer of every page.
Wrap the element you want to have on every page inside a selectable element like a div with a class and in the css give that a fixed position somewhere at the bottom of your document.
For example, change
mywindow.document.write('Copyright 2019 Resource Planing System. All rights reserved.</p> </div>');
to
mywindow.document.write('<div class="footer-text">Copyright 2019 Resource Planing System. All rights reserved.</div></p> </div>');
And include a css-rule like the following:
.footer-text {
position: fixed;
bottom: 0;
}
I have a floating layer that activates through this link:
BUTTON
This is the floating layer:
<div id="FloatingLayer">
<div id="closeX"> x
</div>
The script:
<script language="JavaScript1.2">
function ToggleFloatingLayer(DivID, iState) // 1 visible, 0 hidden
{
if(document.layers) //NN4+
{
document.layers[DivID].visibility = iState ? "show" : "hide";
}
else if(document.getElementById) //gecko(NN6) + IE 5+
{
var obj = document.getElementById(DivID);
obj.style.visibility = iState ? "visible" : "hidden";
}
else if(document.all) // IE 4
{
document.all[DivID].style.visibility = iState ? "visible" : "hidden";
}
}
</script>
I want the "BUTTON" to open and also close this floating layer. So it opens and closes in the same link. But right now I can only close it through that "closeX" x. How can I do it?
jQuery is standard cross-browser and feature-rich JavaScript library
Learning and Using jQuery in your applications is the best across all business apps
Here are links for api and leaning sites
http://api.jquery.com/
http://learn.jquery.com/about-jquery/how-jquery-works/
Snippet is below for you
<!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function toggleFloatingLayer(divID) {
$("#" + divID).toggle();//its only single line to manage toggling for all browsers
}
</script>
</head>
<body>
BUTTON
<div id="FloatingLayer" style="display:none;border:solid 2px silver;">
<div id="closeX" style="background:#efefef"> x
</div>
<div>
Test content of Floating layer
</div>
</div>
</body>
</html>
I have a problem in execution time of my report generation using php. In order to make user can know that script still running, I want to add simple loading.gif after click submit form.
This is the scheme of my script:
form.html
<form id="form1" method="post" action="do.php" target="_new">
<input type="text" name="param1">
<input type="text" name="param2">
<input type="submit" value="Submit">
</form>
So, basically user firstly input parameter for generating report they wanted. And then their parameter will be send to php script [do.php] for next process (generate report).
And this is php script of [do.php]:
do.php
<html>
<head>
<style>
#loadingdiv {
width: 100%;
height: 100%;
background:url(load50.gif) no-repeat center center #FFF;
position: fixed;
}
</style>";
<script type='text/javascript'>
function swapdiv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('loadingdiv').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.loadingdiv.display = 'none';
}else { // IE 4
document.all.loadingdiv.style.display = 'none';
}
}
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('resultdiv').style.display = 'block';
} else {
if (document.layers) { // Netscape 4
document.resultdiv.display = 'block';
} else { // IE 4
document.all.resultdiv.style.display = 'block';
}
}
window.onunload = null;
return;
}
</script>";
</head>
<body>
<div id='loadingdiv' align='center'></div>
<div id='resultdiv' style='display:none;'>
<?php
include "search_process.php";
?>
</div>
<script type='text/javascript'>
//this is called after page loaded
window.onload=swapdiv;
</script>
</body>
</html>
I had did add script to show loading.gif animation when do.php executed. But, loading.gif only appear when php script execution status in browser was transferring data... when it's status was waiting response... loading.gif not appear.
What I wanted is when user click submit form then loading.gif appear even do.php status still waiting response. I'll be glad to hear any solution from all of you kind people :)
Thanks.
Hy,
i've got verry strange behavior (at least, i think it's strange...)
I've got a page where users can pick a color for background and a color for the text.
I've found a color picker on the internet, and that's working all just fine...
But every time i open the popup, the page reload. To test this i added a alert in script tags, and i got the alert when i acces the page and when i open the popup...
This is verry annoying, because the changes that users made will be lost ever time they open the popup...
Here is the button that fires the popup:
<button onclick="PopUp(\'background\')">gebruik de color picker</button>
note that this is part of a php string, so that's why the single quotes are escaped....
and this is the function PopUp:
function PopUp(keuze){
if(keuze == 'background'){
$('#clicked_one').val('background');
var de_waarde = $('#background_keuze').val();
$('#clicked_value').val(de_waarde);
}
else if(keuze == 'text'){
$('#clicked_one').val('text');
var de_waarde = $('#text_keuze').val();
$('#clicked_value').val(de_waarde);
}
window.open( './popup_color_picker.php', '_blank', 'width=500,height=500');
}
The popup page:
<?php
include '../config.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>Color Picker</title>
<script src="<?php echo $root_off_page; ?>javascript/color_picker.js"></script>
</head>
<body>
<input type="text" class="color" id="color" value="">
<button onclick="klaar()">deze kleur wordt het</button>
</body>
</html>
<script>
var wat_is_geklikt = opener.document.getElementById('clicked_one').value;
var de_juiste_waarde = opener.document.getElementById('clicked_value').value;
function klaar(){
var de_gekozen_kleur = document.getElementById('color').value;
if(wat_is_geklikt == 'background'){
opener.document.getElementById('background_keuze').value = de_gekozen_kleur;
}
else if(wat_is_geklikt == 'text'){
opener.document.getElementById('text_keuze').value = de_gekozen_kleur;
}
self.close()
}
</script>
So does anybody see the problem why the main page (the opener) reloads???
Thanks
The default type of a button (if omitted) is submit which causes the reload of your page. Just change the type to button
<button type="button" onclick="PopUp(\'background\')">gebruik de color picker</button>
I was having the same issue with an < a > tag, I added type="button" to that and it fixed my issue, thanks for the help!