I have a file mycomponent.module.css
button {
width: 10vw;
min-width: 150px;
}
Unfortunately this css is affecting globally instead of the specific component where I am importing it. Does CSS modules not work on element names and only works on class-names? So .button instead of button?
Write like this.
Make a Class or ID and call them where is needed.
.bu{
width: 10vw;
min-width: 150px;
background-color:red;
}
<button class="bu">button1 </button><br><br>
<button>button2 ! </button>
If you want to style a current button, you should give a className or Id to your button. In this case it was global, for all butons.
Related
I am trying to add an image when an area of a canvas is clicked. I would prefer to use jquery but vanilla js or css is fine.
The problem is, I can add a click function using click and append, however it does not appear in the exact place i clicked, and this is what i want to happen.
also i am trying to add a touch event to the click event, and I get the error "expected one argument but got two"
(I am using a typescript / scss / pug preprocessor, gulp compiler)
i tried to randomize the x and y coordinates, however this just randomized them and didn't "bind" them to my click event. i also did attempt this with css using the :Active ~ selector, however it did not appear where the user was active, only at the top left of the container it's in. so i don't know if CSS is the way to go.
$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
});
$('#clickimage').ontouchstart = ();
css looks like:
#clickimage {
display: none;
}
attempted css:
:active ~ #clickimage{
display: block;
}
html
<canvas width="632" height="418" id="clickimage"></canvas>
Maybe something like this in vanilla JS will help you - the trick is using position fixed with offsetX/Y.
function paintImage(e){
document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
}
document.addEventListener('click', paintImage);
img {
position: fixed;
display: block;
background: #f00;
width: 100px;
height: 100px;
}
#wrapper {
width: 100%;
height: 100vh;
}
<div id="wrapper"></div>
I see this css code in the "style" tab of the Chrome developer tools window:
element.style {
height: auto;
width: 100%;
margin-top: -148px;
}
I want to overwrite it with this css code in my .css file:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto;
height: 244px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
But the style definitions of the element.style is already there.
I cant find the .js so fast.
Can someone help me?
Thx
What you see in the chrome developer window as element style is the styles on a element which are written inline
element.style {
/*this all are the inline written styles*/
}
Now coming to the point But with this codes the element.style is allready there you are not able to overwrite the styles because of the CSS Priorities. In this scenario the rule is Inline CSS has more priority than external CSS
So what can you do??
You have to either remove the inline css where ever its written. That way your external css will apply
If you cannot modify the inline CSS for some reason then only option is to set the styles as !important in your external CSS files. People here have already mentioned this solution, But this is not always recommended.
Take all the Inline CSS written on that element and create a new class in your external file and then put it there, Now give this class name to the element. So the original styles are applied back. Now comes the point to your new Styles that you have to override. Also the new CSS priority rule when using 2 classes. CSS rule which is read last (in the css file, not the order you put in the element) will have priority. So make sure you place the new CSS rule below the other class you just created as mentioned above.
What if you have to use 2 separate files to write these 2 classes?? Then comes one more CSS priority rule. The file that is placed last in the DOM will have the priority (remember its not when the file is loaded into the DOM, its about where its placed in the DOM)
you can add !important to end of every styles.
for example use this:
height: 244px !important;
instead of
height: 244px;
You can always go with:
.so-widget-sow-simple-masonry-simple-masonry-d75171398898 .sow-masonry-grid-item img {
width: auto !important;
height: 244px !important;
margin-top: 0px !important;
margin-left: auto;
margin-right: auto;
}
Important styles will overwrite inline styles, unless inline styles also have !important clause (but this is rare actually).
Sure, you can remove the style attribute on the element:
element.removeAttribute('style');
If the element.style is gone, your CSS file's rules will be visible.
I'm working on an ecommerce store product page and need to show an "in-stock" graphic and an "out-of-stock" graphic. The platform has some limitations but there's a setting to show an out of stock graphic but not an in stock one.
What I'd like to do is have the in stock graphic hardcoded into the page by default. Like this:
<div class="inStock"></div>
CSS below:
.inStock {
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
When a product goes out of stock, the platform backend automatically adds a div that looks like this into the page:
<div class="CurrentlySoldOut">
<p>
<span lang="en">Sorry but this item is currently unavailable.</span>
</p>
</div>
When the class "CurrentlySoldOut" appears, which is generated from the platform automatically, I'd like to override the current hardcoded "in stock" graphic with the out of stock via the background atrribute. Something like this:
background: url('../product_images/uploaded_images/out-of-stock.jpg');.
In short, is there a way to override a CSS class based on the presence of another class. Sort of like "if "CurrentlySoldOut class is showing, then addClass to another div" (where I will control the graphic.)
If you only need this to happen when the page initially loads, you can just change the class if any element with matching selector .CurrentlySoldOut exists like this:
if ($('.CurrentlySoldOut').length > 0) {
$('.inStock').removeClass('inStock').addClass('outOfStock');
}
Then of course you need to add the style/image-url for the outOfStock class to your css.
If your page is being updated while the user is already viewing it, then it would be slightly more involved. You could listen for changes to the DOM, and then call the code above. Something like this works in Chrome and Firefox:
function updateInStockStatus() {
// same code as above
if ($('.CurrentlySoldOut').length > 0) {
$('.inStock').removeClass('inStock').addClass('outOfStock');
}
}
// listen for DOM updates, calling above function
$('body').bind('DOMSubtreeModified', function() {
updateInStockStatus();
});
Since you probably want to support IE though ;) you could use setInterval with the function above to check periodically that the status has changed:
window.setInterval(updateInStockStatus, 5000);
That would check every 5 seconds, since the delay is in ms.
Try this:
if($('.CurrentlySoldOut').length)//true when CurrentlySoldOut exists
$('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");; //change bg image
You can add a class with the new background, since the class name seems to be updated already:
.inStock {
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
.CurrentlySoldOut{
width: 143px;
height: 40px;
background: url('../product_images/uploaded_images/in-stock.jpg');
margin-left: 60%;
margin-top: 5%;
position: absolute;
}
Try this
if ($(".CurrentlySoldOut")[0])
$('.inStock').css("background", "url(../product_images/uploaded_images/out-of-stock.jpg");
I have now one page which has a default.css style
I have one style1.css file and another one is style2.css file.
I have one UI dropdownlist which has two options.
When I select one then apply style1.css and same thing for other.
The page should not be refresh.
How can I do this?
Given you have no specific context I would suggest looking into using jQuery toggleClass().
Say you have HTML like this where the div in this example uses a default style style1 and a button will switch out styles:
<div id="myDiv" class="style1"></div>
<button id="myButton">Switch Styles</button>
In addition to style1 you have also another style defined, say style2 likes this:
.style1{
width: 100px;
height: 100px;
border: 1px solid red;
}
.style2{
width: 200px;
height: 150px;
border: 3px solid blue;
}
To switch them when clicking on the button using the toggleClass() method you can do this:
$(document).ready(function(){
$("#myButton").on("click", function(){
$("#myDiv").toggleClass("style2");
});
});
See DEMO
You can off course trigger the toggle from anywhere, not just the button, this was only an example.
look at http://api.jquery.com/addClass/ and http://api.jquery.com/removeClass/
This is a really quick question :)
Just wondering here if its possible for javascript to select objects which aren't part of the DOM... like selecting an :after or :before content created by CSS?
for example...if I have a div and create a box through
div:after{
content: '.';
display: block;
width: 200px;
height: 200px;
background: green;
}
I still having difficulties to understand how those elements are created and since they can draw elements on screen but are not part of them DOM, does this mean it's not possible to interact with them?
Cheers
No, you won't be able to interact with them.
They're not part of the DOM, but rather are a manifestation of the style that was assigned.
If you need to add/remove the content, you can use class names.
<div id='myElem' class='withAfter'>some content</div>
div.withAfter:after{
content: '.';
display: block;
width: 200px;
height: 200px;
background: green;
}
Then add/remove the class as needed.
Check out the docs, I see that you cannot modify the properties directly, nor does it appear you can interact with the content created via pseudo-selectors. The best you can do is look at the properties: http://jsfiddle.net/uaN6z/
It looks something like this:
window.getComputedStyle(document.getElementById('test'), ':after')
The only viable way I've see to change it is to alter document style sheet. See this SO answer: Setting CSS pseudo-class rules from JavaScript
Good luck!