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

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;
}

Related

How to get <body> in React JS without DOM Manipulation

I'm rebuilding a project in React JS which i did in Vanilla JS, i came across to add, remove classes from <body> tag, i am also doing something when screen resizes.
I did this, this is a related piece of code, there's actually bunch of code:
...
document.body.onclick = (e) => {
const { lengua } = e.target.dataset
setLenguaOpen(lengua ? true : false) // if the target i or you clicked has data-lengua attr (a button has), a dropdown shows up
switchTheme // in another component i'm toggle 'switchTheme' (it is boolean), and here what i'm doing depending on it
? document.body.classList.add('dark-theme') // in my css, i'm changing values of variables i defined for colors and background-colors if body.dark-theme
: document.body.classList.remove('dark-theme')
}
window.addEventListener('resize', (e) => {
if (e.target.innerWidth >= 850) {
document.body.classList.remove('menu-open')
}
})
...
<FaBars onClick={() => document.body.classList.toggle('menu-open')}/> // a menu is located on 0 top: -60px when screen size < 850, i'm transforming body to y:60px to slide down the menu
It's working fine, but i think DOM Manipulation is preferably not used by most developers in React. I could do it differently to achieve what i wanted, but now i'm curios to learn how good React developers do what is done by DOM M..., especially the above example. If you have a better approach, i would love to hear it.
If you wanna see what exactly i'm talking, see that project: axelreid-store.netlify.app.
The code i shown is related to header section (languages dropdown, theme switcher, and menu toggle)
I'm sorry if this is a weird question!
Thanks!
Avoiding direct DOM manipulation when working with React is a good general principle, however there are quite a few cases when it is the best or only approach for solving a problem.
Accessing elements above the React application's top level element requires direct DOM manipulation. This also — definitely — is not going to clash with React's own DOM updating methods because they only affect elements inside the application.

How to Style/Reduce Width of Material UI Alert Bar?

For now, I am not using any other styling or .css files on my page. The Alert's width extends to the whole page. I am trying this but it doesn't make any difference:
function StatusMessage(){
if (isRemoved){
return (
<Alert style={{
width:'50%',
}}
className='alerts' severity="success"> User Removed</Alert>
)
}
}
Can't reproduce, just threw into my React project and style={{width:'50%'}} works.
Ideas for debugging:
remove redundant className='alerts', that as well may mess it up when yourself or some library by accident defines CSS on such class.
report within what container it resides: block, flex-box and others behave differently, although I tested on first two and both worked fine for me.
Use browser debugger and report what CSS rules actually applied or were overruled to the element that may give more insights to help you.

Wordpress: Is it possible to use post-type as part of a css selector in block editor stylesheet?

I created a Wordpress theme and now I am working on an editor-stylesheet for the block editor to better reflect the look of the theme in the editor. For this, I need to be able to address different post types in there.
For the frontend, there is the body_class() function to be used in templates, which inserts - among others - a class which identifies the post-type and can be used in combined selectors to adress certain elements only in a particular post-type.
Now, the post-type class is in the body tag of the page, also in edit mode, but apparently the editor-stylesheet CSS is applied in a kind of "isolated" way – combined selectors which contain classes that are in the body tag won't work in the editor.
So I am looking for something similar which would work in the block editor, so that I can use it in combined selectors which only apply to certain elements in a particular post-type.
Any ideas how to do that?
BTW, I also tried to check the post-type using Javascript/jQuery:
wp.domReady(function() {
var postType = jQuery('form.metabox-base-form input#post_type').attr('value');
if(postType == 'post'){
alert("It's a post!");//in real life some other action...
}
});
But although it would be logical to at least trigger the alert I put in there, nothing happens when I load the edit page of a post, where that input element including its "post" value is clearly present. (?)
Addition: Trying everything I can think of to find a workaround solution, I also tried this script to just see if I can check for body classes at all when I am using the editor:
jQuery(document).ready(function() {
if(jQuery('body').hasClass('post-type-page')) {
alert("It's a page!");
} else {
alert("It's not a page");
}
});
The result on editor pages (i.e. the web page displaying the WP block editor): No alert at all! Why that??? Does the block editor Javascript block/prevent all other Javascript?
P.S.: I posted the first part of this question on StackExchange WordPress development before, but got no reactions at all, so i am trying it here...
I found a solution myself (but with a hint from #JobiWon9178 - thank you!!!). Not pure CSS, but involving some JS/jQuery. It's a script similar to the one I already posted in the question, with the necessary additions to add classes to relevant HTML elements dynamically:
$(document).ready(function() {
if($('body').hasClass('post-type-page')) {
$('#editor').addClass('post-type-page');
} else if($('body').hasClass('post-type-post')) {
$('#editor').addClass('post-type-post');
}
});
This adds the relevant post-type-xxxx class to the #editor DIV, which is one of the outer containers of the block editor. Contrary to the body classes, the classes of this element are relevant for the editor contents and can be used in combined selectors in the editor stylsheet.
(Note: Initially I tried to add the class to the wrapper DIV which has the classes edit-post-visual-editor editor-styles-wrapper, but that wouldn't work - the post-type class simply didn't get added.)
An example: The following CSS rule in the editor stylesheet will now apply to all paragraph blocks in the editor, but only when the post-type is a page:
.post-type-page .wp-block-paragraph {
/* (CSS settings here) */
}
An important detail, which #JobiWon9178 pointed out in a comment: The jQuery script above has to be added using admin_enqueue_scripts , not together with the scripts for the frontend. So I put that script into a file called admin_scripts.js and enqueued that as follows in functions.php:
function my_admin_scripts($hook) {
if ( 'post.php' != $hook ) {
return;
}
wp_register_script('adminscripts', get_template_directory_uri() . '/js/admin_scripts.js', '', null, true);
wp_enqueue_script('adminscripts');
}
add_action( 'admin_enqueue_scripts', 'my_admin_scripts' );
So that's my working solution. If someone still comes up with a pure CSS solution, I'd be very happy, but I guess for now (i.e. in Wordpress 5.3) there is no CSS-only method for this.
I was able to do this with purely CSS. Are you sure your CSS is getting added correctly?
add_action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
.post-type-page .wp-block-paragraph {
font-size: 5rem;
}
</style>';
}
If I go into the editor this paragraph text is only modified under a page.
This is running WP 5.3.2.
add_editor_style is technically used for custom TinyMCE.
Using enqueue_block_editor_assets was added in WP 5.0 to add styles and functionality to blocks.
https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/
Edit:
CSS only version
function custom_block_editor_styles() {
wp_enqueue_style( 'legit-editor-styles', get_theme_file_uri( '/css/style-editor.css' ), false, '1.0', 'all' );
}
add_action( 'enqueue_block_editor_assets', 'custom_block_editor_styles' );

Auto Swap External CSS Stylesheet with toggle scripting

Hi I am trying to get this script to toggle back to original CSS external stylesheet.
I have the following code that works.
$(document).ready(function() {
$("#css-master2").click(function() {
$("link[title=change]").attr({href : "css/master2.css"});
});
});
Whenever someone clicks on anything with id #css-master2 it changes the external style sheet to master2.css (that part works fine).
What I would like it do is change back to the original master1.css if they click on it again. Something like toggle?
Any help would be greatly appreciated.
Check for the link tag's href, if it equals master2, switch back to master1 like the same way above.
Can't think about why you'd do this, considering the exact thing can be done using css classes instead of two different files.

Javascript,Jquery does not work when i change the tabs

I apply the below script to add color to the comments I add in my application (JIRA).
<script type="text/javascript">
$(document).ready(function() {
$(".activity-comment:even").css("background-color","#6699FF");
$(".activity-comment:odd").css("background-color","#B2CCFF");
});
comments http://i.minus.com/jFoE7kcaTqdrp.JPG
After applying the script the comments appear as above , however the script does not work when i move to other tabs (i.e. Worklog , History) or i add a new comment. I need to refresh the page for the script to execute .
Can someone please help me how i can permanently set the colors ?
Note : I am applying the javascript on the application announcement banner this makes the script run on every page of the application , I can make changes to the source files.
Thanks in Advance :)
I think you can achieve this thing in 2 ways:
1- By using CSS: In your css file just add following lines of code:
.activity-comment:even{
background-color: #6699FF;
}
.activity-comment:odd{
background-color: #B2CCFF;
}
2- By Jquery: In this case use .live() function of jquery to achieve style on dynamic added comments. Like get the id of comment submit button (suppose: comment_add) , and then:
$("#comment_add").live('click',function(){
$(".activity-comment:even").css("background-color","#6699FF");
$(".activity-comment:odd").css("background-color","#B2CCFF");
});
I think it will help you.

Categories