We Keep Coding

React jquery .toggleClass() does only work after compiler reloading

I´m trying to build this sideboard for my react application:
https://codepen.io/illnino/pen/nwPBrQ . Anyways, I ran into a problem and I´m not able to solve this on my own.
So what is my exact problem ?
This code does NOT work if I try to hover on the sideboard icon as it should. After refreshing the page manually, it doesnt work either. But I noticed, if my react compiler reloads this application (after any change in my file) and I DON'T refresh the page manually, it works.
So .toggleClass() does only work, after my compiler reloads the code. After reloading the page on my own, it doesnt work again.
My Code
My css code is exact the same as on codepen. Of course the javascript and the html code are in the same file. The html code is also the same, so I´ll only give you my JS code (In fact I´m using typescript, but that shouldn't matter):
React.useEffect(() => {
$(".gn-icon-menu").hover(function () {
let e = $(".gn-menu-wrapper")
e.toggleClass("gn-open-part")
});
$(".gn-menu-wrapper").hover(function () {
$(this).toggleClass("gn-open-all")
});
}, []);
What have I tried ?
I really dont know, what to try. I´ll hope somebody maybe has a clue, what the error could be...

JQuery manipulates the DOM, React schedules updates to its own Virtual DOM. You should try to avoid using both. They don't get along with one another. If you write all the styles in a css sheet and then use those, you can achieve the same results.
.gn-menu-wrapper {
/* Base Styles */
}
.gn-menu-wrapper:hover {
/* Hover Styles here */
}
Also double check your style sheets are SCSS and not CSS. In this codepen example they are using the format: (&) this will not work in CSS.
&::placeholder{
color: $f-c;
}

Toopltip only in Javascript (&Not every tooltip on the whole page)

How can I do this(or something alike this) tooltip in only javascript without linking any template styles (I don't want to implement It to all the tooltips on the whole page). I'm designing the webpage on SharePoint which deletes all the ...
https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_top

You can always add inline styles via JS.
var a = document.getElementsByClassName("class-name");
a.forEach(function(e) {
e.style.property = "value";
});
For adding :hover effects however, I think you need to append a stylesheet. Example.
Your other option is to use mouseover effects, but that is ridiculous when :hover exists.

How to dynamically add css to ckeditor without a css file

I have a situation where I am storing dynamic css data about a text object in a database as json. I need to map that same css data into styles in CKEditor. I am successfully able to load the classes into the CKEDITOR styles dropdown by parsing the json into the style set by running:
CKEDITOR.stylesSet.add('myStyles',styleObj);
Unfortunately this does not fully work with the onscreen text because the css does not exists as a file.
I've also successfully generate the css into the head of the dom by appending the dynamically generated css to a style tag. Unfortunately this still does not connect the actual css generated to the CKEDITOR because it is in a separate context.
Does anyone know how I can either connect document level css to the CKEDITOR instance or generate the CSS in a way that CKEDITOR understands? I'd prefer not to write a temporary CSS file to disk for every single user who needs to view the text object.

I figured out the answer to this by using the CKEDITOR.addCss() function.
Instead of trying to load the css into the document head as styles, the process can be much simpler by running CKEDITOR.addCss() function.
The code looks like:
for each css style found in the json:
styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
CKEDITOR.addCss(cssSheetString);
after the loop ends then also add the styles object:
if(!CKEDITOR.stylesSet.registered.myStyles){
CKEDITOR.stylesSet.add('myStyles',styleObj);
}

Just for posterity. I've seen answers that say this will work
CKEDITOR.on('instanceCreated', function (event) {
event.editor.addCss(styles);
});
but it does not, you have to use
CKEDITOR.on('instanceCreated', function (event) {
CKEDITOR.addCss(styles);
});
also if your styles variable changes you have to destroy and recreate your ckeditor instance with the new styles.

Injection new stylesheet rules

I am using some javascript on my page to put some addons on page, but javascript add some css styles and those new css styles override existing css styles on page.
Is there a way to disable new css styles. I know I can use javascript to delete new created css rules, but I dont want to use javascript. Is it posible?
Thanks

You can try to raise the priority of your css rules by some simply tricks.
For example, you can give an id attribute to your most external container element in the html, for example id="yourContainerId".
Then you can raise the priority of your css classes by prepending #yourContainerId to all your classes that you want to raise:
#yourContainerId .yourClass1 {
}
#yourContainerId .yourClass2 {
}
etc..
if you want to know more about css priority, this is a good resource:
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
Note: this trick cannot work in some particular conditions, because if your javascript writes inline style on your html elements there is nothing to do, you can only remove them with js.
Tell me if you need a jsFiddle example

Just look at this css path and do the next code:
$("rel").each(function(){
if($(this).attr("href")=="insert you path here"){
$(this).attr("disabled", "disabled");
}
});

Theme support for single page application in javascript

I would like to add a theme support to my single page application. The requirement is that the theme change must be done locally by javascript (no server calls) to be used in offline mode. I use angularjs, so html will be changed in the router.
The only problem that I have, is how to treat css. Is there any js library to help me load css files? Are there any problems involved in that?
EDIT: I have found the following library https://github.com/rgrove/lazyload/ which should do the job of loading css files. The only downside of the library is that the last update of the library is more than one year ago. A more actively developed library would be appreciated.

style elements can be added and removed in JavaScript. Simply create the element and add it to the page to apply the rules therein, and remove the element to remove its rules. You can do the same with link elements referring to external stylesheets, but if you want to be sure to work in offline mode and if the sheet may not have been cached, style elements with inline rules might work better.
Here's an example using a style element:
(function() {
var css = "body { color: green; }";
document.getElementById("theButton").onclick = toggleStyle;
function toggleStyle() {
var style = document.getElementById("styleOne");
if (style) {
// Remove it
style.parentNode.removeChild(style);
}
else {
// Add it
style = document.createElement('style');
style.id = "styleOne";
if (style.styleSheet) {
style.styleSheet.cssText = css;
}
else {
style.appendChild(document.createTextNode(css));
}
document.body.appendChild(style);
}
}
})();
Live Copy | Source
Using a link would be even easier, because you don't have to deal with browser differences around where the style text goes.

If your theme only change the color, what I will do is using different css class to address this issue. Since CSS can be overwrote, you just need to attach themename as a class to parent element, and create corresponding rule for it. I would suggest to put all theme related css rule in a different file, that will be easier to maintain.
like
.themename.cssclassname{
color: red;
}
will trump
.cssclassname{
color: green;
}
And you can use less to create nested rules easily
By doing this, you will have 3 benefits.
All browsers accept this including IE7. (I think IE7 has some problems when you dynamically insert style tag)
All CSS file will be cached.
easy to maintain. (I really don't like mix CSS and JS together too much.)