Conditional stylesheet in .vue component - javascript

I'm working with vue component (cli .vue)
I need to have my stylesheet appear only if certain boolean is true/false.
Simplest explanation would be something like :
When myVar==false, component is not loading styles.
<style v-if="myVar" lang="scss"> #import 'mystyles.css' </style>
I know it is impossible in that way, but how I'm able to do 'similar' thing?
I need to load my styles in vue if user want to use default Styles, if not I need to prevent them from being loaded.
My component is used not once but many times in page, but that condition of using/not using default css need to be apply by all components as well, so no problem here.
Any ideas?
Thanks for help or any ideas in advance :)

Using SCSS, you can wrap that CSS in a class, something like this:
<style lang="scss">
.conditional-class {
#import 'stylesheet.scss';
}
</style>
And then use a Vue class binding for that class:
<div :class="{ conditional-class: true }">
...
</div>
This way the CSS won't apply unless the class is active on that element. If you want the styles to apply all over the app, then put that class on the app root element.

Related

Navbar.module.css usage

I am very new to this react stuff. I tried to add styling to my navbar component from module CSS file but it is showing me an error where style can only have objects, not strings.
Below is my code for react component.
I have first imported the file :
import styles from './Components/Navbar.module.css'
Then i tried to give the styles to my component div :
<div className='navbar' style = {styles.navbar}>
I would appreciate your help!
Everything has been mentioned above. Please Help!
Here you are assigning a className as string, rather assign the {styles.navbar} to className and remove the style attribute. This is because the {styles.navbar} is a string and it will assign the component styles as per the className. This will fix your code.
<div className={styles.navbar}>

If element has class, apply class to body

I have a website where each section displays as a full screen panel.
I would like to style all the other elements on the page according to what panel is displaying.
For example, if the panel with the class .style-reality-green-bg is active, I would like to style the navigation and other items to compliment the green.
Currently when you scroll, the full screen panel has a constant class called .onepage-section. When you scroll between panels, a second class is added depending on which panel is currently on screen.
This is handled by the theme, but I set the panel classes
At the moment I have a few sections which have classes such as...
.style-reality-green-bg
.style-rebel-red-bg
.style-rethink-blue-bg
I can't style all the elements I need to because they are not children of these panels so I was trying to find a way to add the same class to the body when each panel was active. So - if .onepage-section has a class of .style-reality-green-bg add the class .style-reality-green-bg to the body as well.
I have done some digging but I can mostly only find examples for 'click' actions
My latest attempt is
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$(this)body().addClass('style-reality-green-bg');
}
But it just returns an error saying
$ is not a function
****** EDIT
To clarify
What I am trying to achieve is...
If the full screen container has a class of
.onepage-section
AND a class of
.style-reality-green-bg
add
.style-reality-green-bg
to the body, and so on
I'm not sure if that was clear
The reference to body seems malformed, the code should be
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
if $ is still undefined, do you have jQuery included? https://jquery.com/
Your error means that you dont include the external Jquery Library. You can use for example a cdn to include jquery. Add this line above your closing body tag. Good would be to inlcude jquery before your Jquery command is calling.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
It looks like you're trying to use jQuery but haven't imported the library. For that, see https://jquery.com/download/
Additionally, in your code snippet you should select the body with $('body').
Alternatively, if you want to use vanilla JavaScript, you can use the following snippet:
if (document.querySelector('.onepage-section').classList.contains('style-reality-green-bg')) {
document.body.classList.add('style-reality-green-bg');
}
For information on classList, see https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
$(this)body() doesn't exists. Better write this instead:
if ($('.onepage-section').hasClass('style-reality-green-bg')) {
$('body').addClass('style-reality-green-bg');
}
And rememer to include jquery library.

How to include CSS for a specific part of the page

In my website, the users have to enter markdown in a textarea, for which I am using a markdown editor. The problem is: it uses icomoon font, and my websites too. Both uses the same class to define the fonts, but not both uses the same icons. The question is simple: is there a way to define the editor.css for a special div?
Like that:
<div css="editor.css"></div>
Give the DIV a Class and then add a CSS file like this:
.markdown
{
color: red;
}
If you import a new css dynamic, the old styles will be overwritten.
Some help, for dynamic css loading: How to apply inline and/or external CSS loaded dynamically with jQuery
Namespace your editor styles
You can add a selector that namespaces your editor and allows you to style it:
<div class="editor-style">
<div id="cool-custom-editor">...</div>
</div>
In your css:
.editor-style .icon-thumbs-up { color: green; }
Using Scoped Styles (needs polyfill)
As mentioned in #adeneo's comment below your question there is the option of using scoped style tags.
Supposing your editor looks like this:
<div id="cool-custom-editor">...</div>
You can apply a specific style using the scoped attribute like so:
<div>
<style scoped>#import url(editor.css);</style>
<div id="cool-custom-editor">...</div>
<div>
Caveats
According to can I use the scoped attribute is only natively supported by Firefox 26+.
If you want to use it you will have to polyfill:
Plain JavaScript polyfill
jQuery scoped plugin
Further Reading
HTML5 Doctor - The scoped attribute
CSSTricks - Saving the day with scoped styles
HTML5Rocks - A new experimental feature - Scoped Styles
You dont need multiple files. You can give the div an id or class like so
<div class="div1">
<span></span
...
</div>
and now in you css you do this
.div1 span{
font:(whatever font);
}
I don't think so, no. At least not without using any js workarounds. The best solution would be to use kind of namespace for user-specific css classes.
No you can't do that.. I think you should solve the conflit by changing the icomoon class names in this file.
OK solved: renaming the classes in editor for icomoon was a lot easier than I dared tough.
not a good way but it can help:
$("[css]").each(function(i){
var elm = $(this);
$.when($.get(elm.attr("css"))).done(function(response) {
var newresponse=response.replace(/(.+{)/gi,".customCss"+i+" $1");
elm.addClass("customCss"+i);
elm.before('<style>'+newresponse+'</style>');
});
});

Can I have a css div class mock a different css div class?

I just started using bootstrap for my site. I love the look and I want to make some changes to a ton of different blog post to include the bootstrap style. I don't want go through hundreds of post to change the div's class element. Can I do something like this:
<div class="important_note">
this is a old note that I want to use bootstrap styling on.
</div>
css:
<style>
.important_note{
mimick(.alert)
}
</style>
alert is a bootstrap styling.
I apologize if this is a simple question, but web dev isn't much my thing. I also couldn't find any similar questions. Thanks for your help!
with css you can do the following:
.important_note, .alert{
//styling
}
this will apply the same styling to important_note and alert classes
Without "upgrading" your CSS, if it's just about adding a class to each affected element, you can use a small script:
[].forEach.call(document.getElementsByClassName('important_note'), function(node) {
node.classList.add('alert');
});
jQuery equivalent:
$('.important_note').each(function() {
$(this).addClass('alert');
}

Which CSS selector to use?

Sorry for vague title, I am not able to describe my question in one line. question is regarding page titles, which are generated from common backend template, which is
<h2 class='page-title'> {title} </h2>
where {title} is dynamically generated by application. so I will have one on each page of my site generated from that same template.
About page: <h2 class='page-title'>About</h2>
Services page: <h2 class='page-title'>Service</h2>
Home Page: <h2 class='page-title'>Home</h2>
What I want to do is, to hide that from 3. Home page, but let it display on all other pages using CSS or Javascript. I stupidly tried h1 {display:none} but that just hides everything, I only want to hide <h2 class='page-title'>Home</h2>
Any idea on how to do that?
Either use backend code to give your home page title a specific id, or use in-page css on the home page itself:
h2.page-title {
display:none;
}
You will need to add a style to just the home-page, or have a class that indicates that you're currently viewing the homepage:
h2.page-title is the very specific way of selecting the element, but it will affect all pages.
.page-title could work if you know the class is only going to ever happen on an h2 element.
If you're using a class on the body you could do the following:
body.frontpage h2.page-title
or body.frontpage .page-title depending on how specific you want to be.
I recommend being as generic as possible to avoid specificity issues.
I would give your <html> element an id (unique for each page):
<html id='{pageid}'>
...
<h2 class='page-title'> {title} </h2>
...
</html>
Then use the selector
#home .page-title { display: none }
If you have a CMS or something similiar, dumping content into a single template, then I think you're better off with javascript for this. I don't know of a selector in css for innerText of an element.
I commonly use the jquery library - I would recommend something like:
$(document).ready(function() {
$("h2.page-title:contains('Home')").css('display', 'none');
}
This is best done by the very same server-side language which is used to dynamically generate this, you simply add a condition that if page is 'Home' nothing is outputted.
If this is not an option for you, I'd suggest Mel's way as it will simply work, and there's no need for javascript.
Also I think Mel's code should be above the h2 you want to hide, and wrapped into <style></style> tags.

Categories

Resources