I'm using a Jekyll website, doesn't really matter because this is a static page, I just write it as additional info.
Desired behavior:
I want to load my stylesheet via javascript, so it can depend of a local stored value, let's say dark and light.
I have done a little test of loading it by JS with the following code (which works).
GREEN
<head>
...
<link rel="stylesheet" href="/assets/css/{{'light'}}.css">
...
</head>
This loads the CSS file called "light" as expected.
But now I want to depend of the localStorage, with a variable theme that has light as value. I tried the following:
RED
<head>
...
<script>
var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
</script>
<link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
...
</head>
Using global variables doesn't work, it gives me a 404 error as the stylesheet path is /assets/css/.css.
After that I thought that maybe creating an element would do the trick and I created one manually to test it:
RED
<head>
...
<p id="theme" style="display:none;">dark</p>
<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
...
</head>
And nope, the path still appears as: /assets/css/.css
If you change styles on the <body> you get FOUC (Flash Of Unstyled Content). Try using a close equivalent like <main> and spread it 100% x 100% and <html> and <body> as well, but give them margin and padding of 0 in order to ensure <main> covers them completely.
The [disabled] attribute for the <link> is the best way of toggling them because they are still loaded but inert. Also, in the example there is a function called loadTheme(e) that is loaded on the 'DOMContentLoaded' event which insures that all of the DOM is loaded before hand. The example below will not work because localStorage is blocked on SO. There is a functioning example on Plunker. To test it:
Click the green Preview button.
Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
The page should still be in dark mode. 👍
/* night.css
main {
background: #000;
color: #fff;
}
*/
/* default.css */
:root {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font: 1ch/1.5 'Segoe UI';
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 4ch;
}
main {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #000;
}
form {
width: 80vw;
margin: 20px auto;
}
fieldset {
width: max-content;
min-height: 25px;
margin-left: auto;
padding: 0 1.5px 1.5px;
border-radius: 8px;
background: inherit;
color: inherit;
}
button {
display: block;
width: 100%;
height: 100%;
border: 0;
font-size: 4rem;
text-align: center;
background: transparent;
cursor: pointer;
}
#theme::before {
content: '☀️';
}
.night #theme::before {
content: '🌙';
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='lib/default.css' rel='stylesheet'>
<link class='night' href='lib/night.css' rel='stylesheet' disabled>
<style></style>
</head>
<body>
<main>
<form id='UI'>
<fieldset name='box'>
<legend>Theme</legend>
<button id='theme' type='button'></button>
</fieldset>
<p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
<link>`s.</p>
</form>
</main>
<script>
const UI = document.forms.UI;
const M = document.querySelector('main');
const L = document.querySelector('.night')
const switchTheme = e => {
const clk = e.target;
if (clk.matches('button')) {
M.classList.toggle('night');
L.toggleAttribute('disabled');
}
let status = M.className === 'night' ? 'on' : 'off';
localStorage.setItem('theme', status);
};
const loadTheme = e => {
let cfg = localStorage.getItem('theme');
if (cfg === 'on') {
M.classList.add('night');
L.removeAttribute('disabled');
} else {
M.classList.remove('night');
L.setAttribute('disabled', true);
}
};
UI.addEventListener('click', switchTheme);
document.addEventListener('DOMContentLoaded', loadTheme);
</script>
</body>
</html>
Related
I might be really bad at this but I've spent the last two hours on it so if someone could indicate me what's wrong I would be eternally grateful.
I am training on Electron and I am trying to make this game, Visual Novel style, that features dialogs, pictures and minigames. I am trying to set up the dialogs so that they may switch when the player presses "Space". To do that, I created a js file and tried to set it up, and I think the code should be working, but nothing happens when I press space... My best guess is that the app doesnt recognize the js file even tho the pathing should be good !
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<script src="blanche.js"></script>
<meta charset="UTF-8" />
<title>Hello World!</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
</head>
<body tabindex="0">
<section class="sprite">
<h1>sprite</h1>
</section>
<section class="score">
<h1>score</h1>
</section>
<section class="dialog" id="dialog">
<p id="text" class="text">Défaut</p>
</section>
<section class="loading">
<h1>loading</h1>
</section>
<section class="rps">
<h1>rps</h1>
</section>
</body>
</html>
CSS:
html, body{
height: 100%;
margin: 0;
}
h1{
margin: 0;
padding: 0;
}
body{
display: grid;
grid-template-rows: 42% 5% 25% 3% 25%;
gap: 0;
}
.sprite{
background-color: grey;
margin: 0;
padding: 0;
}
.score{
border-top: 3px black solid;
}
.dialog{
border-top: 3px black solid;
margin: 0;
padding: 0;
background-color: rgb(56, 53, 53);
}
.text{
color: green;
font-size: 1.3em;
font-weight: 500;
display: block;
}
.loading{
border-top: 3px black solid;
}
.rps{
border-top: 3px black solid;
}
JS:
const dialog = document.getElementById("dialog");
const text = document.getElementById("text");
let dialogueIndex = 0;
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
dialogueIndex++;
switch (dialogueIndex) {
case 1:
text.innerHTML = "Je vais bien, merci ! Et toi ?";
break;
case 2:
text.innerHTML = "Je vais bien aussi, merci !";
break;
case 3:
dialog.style.display = "none";
break;
default:
break;
}
}
});
I tried showing a console log at the very beginning of the js file, nothing happened. I verified the names of my files and their pathing 10 times, nothing looks wrong...
Solved, thank you ! I didnt see the message in the right console, in fact my js was trying to execute before my html was fully loaded, and so, my code couldn't target the element that didnt exist yet. As a solution, I added a window.onload = function() condition with my js, so that it would only activate once the page is loaded. thank you for helping !
Total newb here. Buttons that insert text into a word document no longer work after implementing a drop down menu that hides buttons based on selection. It worked at first when I just had several buttons inserting text snippets but now that I have added a drop down menu to change what buttons are shown and accessible to be clicked, the buttons no longer work. I have been banging my head against the wall all day and cannot figure out what I messed up.
I was generally following Microsofts tutorial HERE and THIS youtube video on the dropdown box.
I am sure this is a really novice question but any help is appreciated. Thank you!
'use strict';
(function () {
Office.onReady(function () {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#rogincorporate').click(insertRogIncorporate);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertRogIncorporate() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a incorporate text.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
/* Page-specific styling */
#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.padding {
padding: 15px;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Word Add-In with Commands Sample</title>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<script src="Scripts/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<script src="Home.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<link href="../Content/Button.css" rel="stylesheet" type="text/css" />
<link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />
<!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<!-- To enable the offline use of Office UI Fabric Core, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Times New Roman', sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 70px 0;
max-width: 400px;
margin: 0 auto;
}
.menu,
.content {
width: 100%;
}
select {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 700;
font-family: 'Times New Roman', sans-serif;
border: none;
border-radius: 8px;
border: 2px solid #3f51b5;
box-shadow: 0 15px 15px #efefef;
background: #e8eaf6;
}
.padding {
justify-content: center;
}
.data {
display: none;
}
</style>
</head>
<body>
<div id="content-header">
<div class="padding">
<h1>Discovery Toolkit</h1>
</div>
</div>
<div class="wrapper">
<div class="menu">
<br />
<h2>Type of Discovery:</h2>
<br />
<select id="name">
<option value="rog">Interrogatories</option>
<option value="rfp">Requests for Production</option>
<option value="rfa">Requests for Admission</option>
</select>
<br />
<br />
</div>
<div class="content">
<div id="rog" class="data">
<h3>Interrogatory Objections</h3>
<p>Click the appropriate button to insert an objection.</p>
<br />
<button id="rogincorporate">Incorporate General Response and Objections</button>
<br /><br />
</div>
<div id="rfp" class="data">
</div>
<div id="rfa" class="data">
</div>
</div>
</div>
<div id="supportedVersion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
</body>
</html>
remove this from your html
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
this function is hiding your HTML element that has class data
I am brand new to coding and cannot figure out why this is not working. In brief, I want to make a Word add-in where I can click a button and it will insert a sentence into the Word document at the currently selected location. I had it working but broke it when I followed a tutorial on adding a dropdown box to change what buttons were shown to click. I was generally following Microsofts tutorial HERE and THIS youtube video on the dropdown box.
I am sure this is a really novice question but any help is appreciated. Thank you!
'use strict';
(function () {
Office.onReady(function () {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#rogincorporate').click(insertRogIncorporate);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertRogIncorporate() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Responding Party adopts and incorporates the General Response and Objections above in response to this interrogatory as though separately set forth herein. "\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a incorporate text.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
/* Page-specific styling */
#content-header {
background: #2a8dd4;
color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80px;
overflow: hidden;
}
#content-main {
background: #fff;
position: fixed;
top: 80px;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
}
.padding {
padding: 15px;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>Word Add-In with Commands Sample</title>
<script src="Scripts/jquery-3.6.0.js" type="text/javascript"></script>
<script src="Scripts/MessageBanner.js" type="text/javascript"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!-- To enable offline debugging using a local reference to Office.js, use: -->
<!-- <script src="Scripts/Office/MicrosoftAjax.js" type="text/javascript"></script> -->
<!-- <script src="Scripts/Office/1/office.js" type="text/javascript"></script> -->
<script src="Home.js" type="text/javascript"></script>
<link href="Home.css" rel="stylesheet" type="text/css" />
<link href="../Content/Button.css" rel="stylesheet" type="text/css" />
<link href="../Content/MessageBanner.css" rel="stylesheet" type="text/css" />
<!-- For Office UI Fabric Core, go to https://aka.ms/office-ui-fabric to learn more. -->
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.0/css/fabric.min.css">
<!-- To enable the offline use of Office UI Fabric Core, use: -->
<!-- link rel="stylesheet" href="Content/fabric.min.css" -->
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
outline: none;
}
body {
font-family: 'Times New Roman', sans-serif;
}
.wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 70px 0;
max-width: 400px;
margin: 0 auto;
}
.menu,
.content {
width: 100%;
}
select {
width: 100%;
padding: 15px;
font-size: 16px;
font-weight: 700;
font-family: 'Times New Roman', sans-serif;
border: none;
border-radius: 8px;
border: 2px solid #3f51b5;
box-shadow: 0 15px 15px #efefef;
background: #e8eaf6;
}
.padding {
justify-content: center;
}
.data {
display: none;
}
</style>
</head>
<body>
<div id="content-header">
<div class="padding">
<h1>Discovery Toolkit</h1>
</div>
</div>
<div class="wrapper">
<div class="menu">
<br />
<h2>Type of Discovery:</h2>
<br />
<select id="name">
<option value="rog">Interrogatories</option>
<option value="rfp">Requests for Production</option>
<option value="rfa">Requests for Admission</option>
</select>
<br />
<br />
</div>
<div class="content">
<div id="rog" class="data">
<h3>Interrogatory Objections</h3>
<p>Click the appropriate button to insert an objection.</p>
<br />
<button id="rogincorporate">Incorporate General Response and Objections</button>
<br /><br />
</div>
<div id="rfp" class="data">
</div>
<div id="rfa" class="data">
</div>
</div>
</div>
<div id="supportedVersion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#name").on('change', function () {
$(".data").hide();
$("#" + $(this).val()).fadeIn(700);
}).change();
});
</script>
</body>
</html>
Trying to use ScrollWatch.js to build a web page with infinite scroll but not getting any output. Nothing is being rendered when I run my code, here is a sample of my html
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>The Gradient Boost</title>
<link rel="stylesheet" href="{% static 'second/css/app/book.css' %}">
</head>
<body>
<h2><div data-scroll-watch>First Text</div></h2>
<h2><div data-scroll-watch>Second Text</div></h2>
<h3><div data-scroll-watch>Third Text</div></h3>
<script src="{% static 'second/js/app/book.js' %}"></script>
<script src="https://cdn.jsdelivr.net/npm/scroll-watcher#latest/dist/scroll-watcher.min.js"></script>
</body>
</html>
book.js
(function() {
var addElements = function() {
var txt = document.createTextNode('Testing');
var el;
el = document.createElement('div');
el.appendChild(txt);
document.body.appendChild(el);
// If we want newly injected elements to be watched, refresh ScrollWatch. It will re-query the dom and start watching new elements.
swInstance.refresh();
};
var swInstance = new ScrollWatch({
watch: 'div',
infiniteScroll: true,
infiniteOffset: 200,
onInfiniteYInView: addElements
});
})();
and book.css
.watch-container {
font-size: 2em;
width: 75%;
height: 150px;
padding: 20px;
margin: 50px auto;
background-color: #0681CD;
color: #fff;
overflow: auto;
text-align: center;
}
div {
text-align: center;
font-size: 1em;
margin: 200px 0;
opacity: 0;
transition: opacity 1s;
font-weight: normal
}
div.scroll-watch-in-view {
opacity: 1;
}
This is the documentation I am using as guidance
Running this code on codepen seems to give me the error message in my javascript
Uncaught ReferenceError: ScrollWatch is not defined
I think your cdn link is not correct, it's scroll-watcher not scrollwatch, you can try this https://cdn.jsdelivr.net/npm/scrollwatch#2.0.1/dist/ScrollWatch-2.0.1.min.js
It works on CodePen
Ubuntu 18.04
i am customizing the panel, this is the content in .css file
i have added ::first-line part to cusomize first line as shown in the below image. but it is not applied after reboot.
Content of .css file:
#panel .clock-display {
color: blue; }
#panel .clock-display::first-line {
color: green; }
Content of .js file:
var DateMenuButton = new Lang.Class({
Name: 'DateMenuButton',
Extends: PanelMenu.Button,
_init() {
let item;
let hbox;
let vbox;
let menuAlignment = 0.5;
if (Clutter.get_default_text_direction() == Clutter.TextDirection.RTL)
menuAlignment = 1.0 - menuAlignment;
this.parent(menuAlignment);
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
this._indicator = new MessagesIndicator();
let box = new St.BoxLayout();
box.add_actor(new IndicatorPad(this._indicator.actor));
box.add_actor(this._clockDisplay);
box.add_actor(this._indicator.actor);
this.actor.label_actor = this._clockDisplay;
this.actor.add_actor(box);
this.actor.add_style_class_name ('clock-display');
in this last line this.actor.add_style_calss_name ('clock-display'); i guess i have to specify its pseudo_calss or something but i dont have any idea.
in the below image if you see the day with time stamp, it is the default behavior when Ubuntu is freshly installed.
by using Clock Override Extension, it is possible to make our own text..
like in this image..
here is a clue, this Clock Override Extension have special feature to make a next line by adding %n in its settings https://developer.gnome.org/glib/stable/glib-GDateTime.html#g-date-time-format
Clock Override Extension Details: https://extensions.gnome.org/extension/1206/clock-override/
Question:
i am looking to configure both lines independently in .css file to choose the colors, heights, weights, shadows, borders etc.
is it achievable?
all related files here:
https://wetransfer.com/downloads/dd97a53972b17f746225efdfa345a03220181231063516/111ced
Can you try to add a style class to a specific object?
For example: #line 475
this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER, style_class: 'clock-label' });
CSS:
.clock-label { color: #101010; font-weight: bold; background: #fff; }
Try it.
It is working unless your text is considered as one line.
#panel .clock-display {
color: blue;
margin-left: 40px;
margin-right: 40px;
}
#panel .clock-display::first-line {
height: 40px;
width: device-width;
background: blue;}
.barfont {
height: 30px;
width: device-width;
color: blue;
font-size:15px;
font-weight: bold;
line-height:0px;
}
.barbackground {
margin: 0;
padding: 0;
height: 30px;
width: device-width;
background-color: green;
border-top-style: solid;
border-top-color: green;
line-height:0px;
}
<html>
<body background="https://i.stack.imgur.com/80hPG.png" >
<div class="barbackground">
<p class="barfont">data                       day first link </p></div>
</body>
</html>
Changing the first line.
.clock-display {
color: blue;
margin-left: 40px;
text-indent: 40px;
}
::first-line {
color: green;
/* WARNING: DO NOT USE THESE */
/* Many properties are invalid in ::first-line pseudo-elements */
margin-left: 20px;
text-indent: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body >
<pre class="clock-display">
121
data and time</pre>
</body>
</html>