We Keep Coding

Update iframe contents (hide some HTML elements)

I have an Angular project, and I need to render an iframe inside one of pages.
This iframe renders another web tool that I need to use inside my project but with limited usage as there is many buttons and icons I don't need. So I need the iframe to just render the required icons. What I think is about display: none; the unneeded elements.
I found some suggestions about updating iframe contents using jQuery, but don't work with me.
Note: The web tool is installed locally but I don't need to edit its original code.

How to add a popup with css to an existing website (such as google.com) in JavaScript?

I am new to JavaScript. I have a task to write a js script that will be injected to google.com using Chrome DevTools and run on top of it. The script needs to add certain popups on mouseover action - so if I hover over certain elements of the page (such as the Google logo), a certain popup will be shown. The popups all have css stylings.
So far, I have managed to create alerts on mouseover action using EventListener (on google.com). And I have managed to create custom popups with css on my own website. However, I'm having serious trouble combining both.
The problem is essentially: in my own custom website, I put the css bit under "style" tag, and the js script itself under "script" tag. The script than uses the css properties of the popup to create it. However, in Chrome DevTools I'm only able to inject the actual js script (by copy-pasting it the console), and not the css bit.
How should I get around that? Is there a way to add the css within the js, so running the script will lead to the css being added to the "style" section? Is there a different way to inject the script in the DevTools, and separately inject the css and js? Or is there another way to solve this?
Thanks a lot :)

You can do this by creating and running a snippet, to create a snippet:
Open chrome-devtools
Create new snippet (Ctrl+Shift+P, type show snippets, and hit Enter)
document.head.insertAdjacentHTML("beforeend",`<style>
/*Write your css here, sample below*/
body{
color:red !important;
}
</style>`);
// your main script can go here, note, the below code is just a sample
document.body.addEventListener("mouseover", function(){
console.log("logged..")
})
Run the snippet (Ctrl+Enter)
You can also save and use the snippet later, to run the snippet later:
Ctrl+p type ! and the name of your snippet.

How to load dark theme without an delay

I am creating a webpage with dark-mode theme feature. I got my bundle.css where I have defined dark-mode class. I am using a javascript onclick event to set the cookie value and if the value is true after reload, javascript will generate class on the body element. However, if I reload the page, initially style will be loaded firstly so I can see the white background (light theme) for a few milliseconds and then the dark theme is loaded. And this delay is an issue.
I have also tried to add my JavaScript into the head, however, it did not solve the issue. I am using webpack in this project. Css, js and html files are divided into modules.
My question is:
Is there any solution or way to load dark theme quickly without this delay or white blinking background by using javascript? Or backend is needed here? Thanks for your suggestions.

I think, the way to go is to replace the css file before it is loaded, I use the smarty template engine and create a variable which replaces the css path. Only problem is you need to reload once if you change the theme, so no instant color-swap.

I changed my way of handling dark-mode a bit: I still use a template engine which has a template for a page without content. The template engine excecutes a php script before displaying the website itself, so I check for dark mode first, then if it is enabled (e.g. a Cookie is set), I add the dark class to the body while displaying the html (So no delay). So every css class you want to change can be addressed like
body.dark .text1
{
color: #fffff;
}
so it will override the color of .text1. Using body.dark also allows you to instantly change the theme without reloading the page and with no delay. You can add and remove the dark class on the fly with JS and every class with body.dark as a prefix will change when you add the dark class to the body of the website. If you want to see a more detailed example, feel free to ask.

Adding CSS Class Based on URL with Javascript or Jquery within Wordpress Template

I am attempting to write a small script which will look at page URL and, based on what URL it sees, add a new class to an HTML element. More specifically, on this page:
http://pamaphilly.wpengine.com/volunteer/
I'm going to add a class for the active URL which will add an arrow marker to the appropriate left hand nav marker. I have tried this strategy: jQuery add class based on page URL and, when I used the script on a dummy page, it works fine. But when I try adding it to the Wordpress Template, nothing happens. I've tried adding the script at the bottom of the template file and just (as a test) embedding it in the php template. I'm guessing my failure relates to a Wordpress issues (probably a failure of knowledge on how to do this) but I would appreciate any guidance.
Thanks.

You need to include .slick before you can use it. (before script.js + in the same way you include your script.js file)

Why not do this with CSS and WordPress directly, and skip JavaScript?
You can use WordPress's body_class() function to dynamically add a class to the <body> of your page. Using CSS, you can then target your appropriate .volunteer .sidebar-member li via CSS.

Unstyled text flashes before page fully loads in Firefox

I have a web page which loads inside of a JQuery UI Dialog. When the page loads in Firefox, the plain text appears for a second before all the css and javascript runs. Once everything loads, the text appears properly. Is there a way to prevent the text from showing until all the CSS/JavaScript runs? I have tried turning on and off the visibility but that did not work correctly.
This only seems to happen in Firefox, and not in other browsers.

Some people like to call this the FOUC (Flash Of Unstyled Content). If you are using Google Fonts embedded via javascript (resource) then it adds a class to the html tag that allows you to hide content whilst the scripts are loading using normal rules like html.wf-loading #content{display:none}.
However, in my experience this isn't bombproof though. The only way I've found to fairly consistently achieve no FUOC during is to convert your fonts to BASE64 and embed that directly in your CSS (Font Squirrel provide a great resource for doing this). This way your fonts will wait before the CSS has loaded before revealing themselves.

Create a class that hides elements. Add that class to the elements that you want to hide initially. Remove the class after you've run the javascript that you want executed. Something like the following should help you.
.js-needed
{
display: none;
}
//Add this line after you've run the code you want executed
$(".js-needed").each(function() { $(this).removeClass(".js-needed"); } );
<div class="js-needed">Stuff to hide initially</div>