I'm specifically looking at this site here:
https://coin.dance/
In the upper left corner there is a dark/light theme toggle button, and I wanted to know how to enable something like this by default(dark style would be enabled before light). I've been looking through the index.html, and all I can see of interest is this snippet of javascript:
<body class="dark">
<script type="text/javascript">
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}).catch(function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
}
function localStorageSave(key, value) {
if (supportsLocalStorage()) {
localStorage.setItem(key, JSON.stringify(value));
return true;
}
return false;
}
function localStorageLoad(key) {
if (supportsLocalStorage()) {
var value;
try {
value = JSON.parse(localStorage.getItem(key));
} catch (e) {
return false;
}
if (value) {
return value;
}
}
return false;
}
function supportsLocalStorage() {
try {
if (typeof localStorage !== 'undefined') {
try {
localStorage.setItem('cd_ls_test', 'yes');
if (localStorage.getItem('cd_ls_test') === 'yes') {
localStorage.removeItem('cd_ls_test');
return true;
} else {
return false;
}
} catch(e) {
return false;
}
}
} catch(e) {
return false;
}
return false;
}
if (supportsLocalStorage()) {
$('body').toggleClass('dark', localStorageLoad('dark'));
}
I'm interested because I like the overall theme of the site, and it's simplicity, but I wanted to know how it was done, and I cannot grasp where to start looking and editing.
You can easily do this with jquery just set a dark color background on your css by default and turn it on light color with button :
$(".button").click(function(){
if ($(this).hasClass("clicked")){
$(".bg").css("background-color","black");
$(this).removeClass("clicked");
}
else
{
$(".bg").css("background-color","white")
$(this).addClass("clicked")}
});
body{
margin:0px;
}
.bg{
height:100vh;
width: 100%;
background-color:black;
}
.button{
color:red;
position:absolute;
margin:0px;
cursor:pointer;
padding:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg">
<p class="button">Dark-light</p>
</div>
Related
I cached the offline.html and image files using a service worker. Navigating to offline.html works fine. But it fails to load image from offline.html. At offline.html, it tries to get the image cached by the service worker directly without fetching it, but it fails because the internet is disconnected.
I tried changing the cache.match('/offline.html') part to cache.match(event.request), but this does not move to offline.html. How do I configure the cached files to be used in offline.html when the Internet is disconnected?
// service-worker.js
const OFFLINE_VERSION = 1;
const CACHE_NAME = "offline";
const ASSETS = ["offline.html", "image/icon_replay_b_15pt.png"];
self.addEventListener("install", (event) => {
event.waitUntil(
(async () => {
const cache = await caches.open(CACHE_NAME);
cache.addAll(ASSETS);
})()
);
self.skipWaiting();
});
self.addEventListener("activate", (event) => {
event.waitUntil(
(async () => {
if ("navigationPreload" in self.registration) {
await self.registration.navigationPreload.enable();
}
})()
);
self.clients.claim();
});
self.addEventListener("fetch", (event) => {
if (event.request.mode === "navigate") {
console.log(event.request.url);
event.respondWith(
(async () => {
try {
const preloadResponse = await event.preloadResponse;
if (preloadResponse) {
return preloadResponse;
}
const networkResponse = await fetch(event.request);
return networkResponse;
} catch (error) {
console.log("Fetch failed; returning offline page instead.", error);
const cache = await caches.open(CACHE_NAME);
return cache.match("/offline.html");
}
})()
);
}
});
<!-- offline.html -->
<!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>OFFLINE</title>
<style>
body { font-family:'NanumSquare'; }
body, html {width:100%; height:100%; margin:0; }
* {
box-sizing: border-box;
}
.btn-outline-01 {
border:1px solid #C9CACA;
}
.btn {
height:44px;
background:transparent;
border-radius: 5px;
font-size: 16px;
font-weight: 700;
}
.icon-wrap {
width:24px;
height:24px;
}
.icon-wrap img {
width:100%;
height:100%;
}
* { margin:0; }
.internet-err-wrap {
width:100%;
height:100%;
overflow: hidden;
}
.internet-err {
width:800px;
margin:0 auto;
position:relative;
}
.internet-err .err-text {
position:absolute;
left:5%;
top:35%;
}
.internet-err .err-text h2 {
font-weight:900;
font-size: 26px;
color:#333333;
}
.internet-err .err-text > p {
color:#9FA0A0;
margin-top:10px;
}
.internet-err .err-text button {
display: flex;
justify-content: center;
align-items: center;
margin-top:40px;
font-family:'NanumSquare';
padding:0 20px;
}
.internet-err .err-text button .icon-wrap {
margin-right:5px;
}
.internet-err svg {
width:160%;
}
</style>
</head>
<body>
<div class="internet-err-wrap">
<div class="internet-err">
<div class="err-text">
<button class="btn btn-outline-01" onclick="window.location.reload()">
<div class="icon-wrap">
<img src="/image/icon_replay_b_15pt.png" alt="" />
</div>
<p>retry</p>
</button>
</div>
</div>
</body>
</html>
So here you have written the code only mode of navigate but if you want to fetch the image and css from cache then you should use mode as image and style.
This will allow you to fetch the images and css.
self.addEventListener("fetch", (event) => {
if (event.request.mode === "navigate") {
// Open the cache
event.respondWith(
caches.open(cacheName).then((cache) => {
// Go to the network first
return fetch(event.request.url)
.then((fetchedResponse) => {
cache.put(event.request, fetchedResponse.clone());
return fetchedResponse;
})
.catch(() => {
// If the network is unavailable, get
// return cache.match(event.request.url);
return cache.match("offline.html");
});
})
);
} else if (
event.request.destination === "image" ||
event.request.destination === "style"
) {
event.respondWith(
caches.open(cacheName).then((cache) => {
return cache.match(event.request);
})
);
// return;
} else {
return;
}
});
This question already has answers here:
Why do I get different results with "=" vs. "===" in javascript with Conditional (Ternary) Operators?
(4 answers)
Closed 1 year ago.
first post, im trying to make a slide menu of some kind, and although it works clicking once and letting the menu options come forth. clicking again results in redoing the opening animation, instead of subtracting them back to their first location.
let menuopen = false;
$(document).ready(function(e) {
$("#menu_button").on('click',function(e) {
if (menuopen == false) {
$("#menu_button").css({"left":"500px"}).animate({left: '450px'})
$("#menu_select").css({"left":"500px"}).animate({left: '750px'});
$("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
menuopen == true;
}
else if (menuopen == true) {
$("#menu_button").css({"left":"450px"}).animate({left: '500px'})
$("#menu_select").css({"left":"750px"}).animate({left: '500px'});
$("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
menuopen == false
}
});
});
You are not assigning
menuopen == true;
should be
menuopen = true;
In any case: Why else if, just use else?
Try this - it saves the state in the button
You COULD use a ternary but that would be messy in this case
$(function(e) {
$("#menu_button").on('click',function(e) {
const menuopen = !!$(this).data("open"); // force boolean
if (menuopen) {
$("#menu_button").css({"left":"450px"}).animate({left: '500px'})
$("#menu_select").css({"left":"750px"}).animate({left: '500px'});
$("#menu_select_two").css({"left":"1050px"}).animate({left: '500px'});
}
else {
$("#menu_button").css({"left":"500px"}).animate({left: '450px'})
$("#menu_select").css({"left":"500px"}).animate({left: '750px'});
$("#menu_select_two").css({"left":"500px"}).animate({left: '1050px'});
}
$(this).data("open",!menuopen)
});
});
Perhaps
const butOpen = { "left": "450px" },
butClosed = { "left": "500px" },
selectOpen = { "left": "750px" },
selectClosed = { "left": "500px" },
select2Open = { "left": "1050px" },
select2Closed = { "left": "500px" }
$(function(e) {
$("#menu_button").on('click', function(e) {
const menuopen = !!$(this).data("open"); // force boolean
$("#menu_button").css(menuopen ? butOpen : butClosed).animate(menuopen ? butClosed : butOpen)
$("#menu_select").css(menuopen ? selectOpen : butClosed).animate(menuopen ? selectClosed : selectOpen)
$("#menu_select_two").css(menuopen ? select2Open : select2Closed).animate(menuopen ? select2Closed : select2Open)
$(this).data("open", !menuopen)
});
});
Or use a class and toggle it:
window.addEventListener("load", function(e) {
const wrapper = document.querySelector(".wrapper");
document.getElementById("menu").addEventListener("click", function(e) {
wrapper.classList.toggle("open");
this.textContent = wrapper.classList.contains("open") ? "Close" : "Open";
})
})
.wrapper {
position: relative;
overflow: hidden;
width: 100px;
height: 100px;
border: 1px solid black;
}
#slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
background: blue;
transition: 1s;
}
.wrapper.open #slide {
transition: 1s;
left: 0;
}
<button id="menu" type="button">Open</button>
<div class="wrapper">
<img id="slide" src="https://lorempixel.com/output/cats-q-c-100-100-4.jpg" />
</div>
I have a modal where I want to print the full contents of it. I don't want anything else printed aside what is within the modal.
Here I created the button within the modal:
This should not be printed...
<button id="btnPrint">Print (this btn should not be printed!)</button>
<hr />
<div id="printThis">
This should BE printed!
</div>
<div id="printThisToo">
This should BE printed, too!
</div>
I have some text next to the button, but this text should not show when you click the button to preview the print view.
Here I wrote some js to show what content should be printed:
document.getElementById("btnPrint").onclick = function() {
printElement(document.getElementById("printThis"));
printElement(document.getElementById("printThisToo"), true, "<hr />");
window.print();
}
function printElement(elem, append, delimiter) {
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
if (append !== true) {
$printSection.innerHTML = "";
}
else if (append === true) {
if (typeof(delimiter) === "string") {
$printSection.innerHTML += delimiter;
}
else if (typeof(delimiter) === "object") {
$printSection.appendChlid(delimiter);
}
}
$printSection.appendChild(domClone);
}
Finally, I wrote some css:
#media screen {
#printSection {
display: none;
}
}
#media print {
body {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 500;
color: #101010;
background: #f6f5fa;
visibility:hidden;
}
#printSection, #printSection {
visibility:visible;
}
#printSection {
position:absolute;
left:0;
top:0;
}
}
When I click the button in the modal, nothing happens and no errors appear in the console. Not sure what the issue is. Any help would be much appreciated.
UPDATED CODE:
(HTML)
<div>
This should not be printed...
<button ng-click="printPreview()">Print (this btn should not be printed!)</button>
</div>
<hr />
<div id="printThis">
This should BE printed!
</div>
(JS)
var app = angular.module('dmdesktop');
app.controller('PrintViewCtrl', rollUpCtrl);
rollUpCtrl.$inject = ['$scope', '$rootScope', '$http', '$uibModal','headersvc','locFiltersvc']
function rollUpCtrl($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
$scope.printPreview = function() {
printElement(document.getElementById("printThis"));
}
function printElement(elem) {
alert ("printing!");
var domClone = elem.cloneNode(true);
var $printSection = document.getElementById("printSection");
if (!$printSection) {
var $printSection = document.createElement("div");
$printSection.id = "printSection";
document.body.appendChild($printSection);
}
$printSection.innerHTML = "";
$printSection.appendChild(domClone);
window.print();
}
}
(CSS)
same as before
With the updated code and window.print inside a evalAsync function allows you to print the content inside a modal
$scope.$evalAsync(function () {
window.print();
});
Hi i have created this script to hide a text after 6 seconds, But I want that the text must reappear and disappear again back to the infinite every 6 seconds how I can create this kind of HTML script?
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
function hide(id) {
d= document.getElementById(id)
d.setAttribute('style','display:none;')
}
setTimeout(function () {
hide('xhide')
}, 6000);
</script>
You can try updated code as per your need:
<h1 style="text-align: left;" id="xhide">Hello World</h1>
<script type="text/javascript">
var flag=true;
function hide(id) {
d= document.getElementById(id);
d.setAttribute('style','display:none;');
}
function show(id) {
d= document.getElementById(id)
d.setAttribute('style','display:block;')
}
setInterval(function() {
if(flag) {
show('xhide');
flag=false;
} else {
hide('xhide');
flag=true;
}
}, 6000);
</script>
try this blink element
<script type="text/javascript">
function blink() {
var blinks = document.getElementsByTagName('blink');
for (var i = blinks.length - 1; i >= 0; i--) {
var s = blinks[i];
s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
}
window.setTimeout(blink, 6000);
}
if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
else if (window.addEventListener) window.addEventListener("load", blink, false);
else if (window.attachEvent) window.attachEvent("onload", blink);
else window.onload = blink;
</script>
<blink>Text to blink here</blink>
The following code will hide the text and re-display it with 6 second intervals in between.
var textshown = false;
$(document).ready(function() {
setInterval(function(){
if(textshown == false) {
$('#xhide').show();
textshown = true;
} else {
$('#xhide').hide();
textshown = false;
}
}, 6000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 style=" text-align: left; " id="xhide">Hello World</h1>
You can do this by using toggle function on classList
function hide(elementId) {
document.getElementById(elementId).classList.toggle('hidden');
}
setInterval(hide, 6000, 'xhide');
.hidden {
display: none;
}
<h1 id="xhide">Hello World</h1>
I've made it work by these codes for an addtional title (a new div inside fancybox):
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
}
and the html is :
<a href='PhotoURL' class='fancybox' data-fancybox-group='gallery' data-caption='PhotoTitle' data-exif='photoTitle2'>pic</a>
now i want this div (div.photo_exif) hover to show or hide, so i added these codes:
afterShow:function() {
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
but it doesnt work. The div is always show on fancybox. My css is :
.photo_exif {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
width:100%;
height:30px;
background: #000;
background: rgba(0, 0, 0, .8);
}
and my whole fancybox code (with ie6 crack) is :
$('.fancybox').fancybox({
fitToView: false,
mouseWheel: false,
beforeShow: function(){
this.title=$(this.element).data('caption');
this.title2="<div class='photo_exif'>"+$(this.element).data('exif')+"</div>";
$(this.title2)
.bind("contextmenu", function (e) {
return false; /* Disables right click */
})
.prependTo( $.fancybox.inner );
},
afterShow: function(){
if (jQuery.browser.msie && parseInt(jQuery.browser.version, 10) <= 6) {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
$(window).scroll(function () {
$("div#fancybox-buttons").css("top", $("html").scrollTop());
});
}
$("#fancybox-wrap").hover(function() {
$(".photo_exif").show();
}, function() {
$(".photo_exif").hide();
});
}
});
Is there anything wrong?
This one was easy. This line of your code :
$("#fancybox-wrap").hover(function() {
... should be :
$(".fancybox-wrap").hover(function() {
The fancybox selector is a class not an ID