We Keep Coding

How to disabled style from library css in React

I use the react-slick library to make a slider. I have images inside the tag responsible for the slider. Depending on the size of the screen I would like to hide the images but the property slick.css blocks my css style. How could I turn it off?

You can try to write a more specific css selector.
I assume your image has a class .cHgPZg.
If yes you can try the selector
.slick-slide img.cHgPZg { dsiplay: none; }
If this is not working you can always use the !important; but try to avoid it if possible.
.cHgPZg {display: none !important;} // not recomanded

The issue is specificity. You have to add a more specific selector in order to overwrite the dominating selector and hide the image. Try walking the selector tree backwards until the selector is specific enough; Something like this:
.slick-slider .slick-list .slick-slide img {
display: none;
}

transform: translateX makes hyperlink unclickable

I made a carousel slider(copied the code from some codepen then made some changes) and it looks something like this. Anyway the problem is that those images have hyperlinks that work unless i make a transform on x axis..for lets say 240px the hyperlinks stops working. What i mean by that its that its unclickable.
This is the structure of the html code.
I made a script that adds style = "transform:translateX(-240px); to the carousel div.
Expected behaviour: the hyperlink should pe clickable.
You can find the code at: https://github.com/AlexxW/AlexxW.github.io
and the webpage at https://watchwhatmovie.tk/ (for some reason its not updated yet)

Try posting code instead of images for better answers.
this question similar to - CSS - Transform function not working on links?
you need to make the link (i.e <a> tag) CSS to display: block; because transform doesn't work on display: inline; (which is default for a tag).

Because no css was provided, maybe the z-index is not correct (the layers). Try this:
.card {
position: /* set this to relative/absolute, depending on your preference */;
z-index: 1;
}

Toggle CSS Transform Button For All Elements with the * Selector

Been trying to solve this all day, but just can't work it out. It's probably something really simple, but nothing seems to work.
I am using Divi scroll animations. However, on some devices they are a bit too much, so I made a button that switched them off, by disabling transform globally. However, I also want to be able to turn it back on again. I tried toggle, but it didn't work.
Because I'm not targeting a style, I can't use class toggles etc. It probably needs to be a style toggle, but on the *. So I was wonder if there is a way of doing this; or even better, how can this can be done without Jquery?
This is the site I'm trying to get it to work on.
Any solutions, are really appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#turnOffNow").click(function(){
$("*").css("transform", "none");
});
});
</script>
<div id="turnOffNow" style="color:#fff;">
Turn Off Animations
</div>

I think this will solve your problem.
Add a class to your CSS:
.notransform * {
transform: none;
}
Append this class to your html tag in your page:
$("#turnOffNow").click(function(){
$("html").toggleClass("notransform");
});
You can also try transform: none !important to force that.

for be able to turn it on, assuming you has some inline transforms which was gone, better you give them css class, which will give them transform:none !important then remove it for turn on.
example css:
body.no-transform * {transform: none !important}
js (jQuery)
function removeTransform(){$('body').addClass("no-transform")}
function backTransform(){$('body').removeClass("no-transform")}
js (Vanilla)
function removeTransform(){document.body.classList.add("no-transform")}
function backTransform(){document.body.classList.remove("no-transform")}

how to style class element?

I have a js library on my website which is creating popups for me.
Im trying to style the popups but nothing is working.
the html output is
<div class="lpopup zoom" style="opacity: 1; transform: translate(435px, 200px); bottom: -6px; left: -54px;">
All that I have been trying to is change the bottom and left position.
When I inspect with fire bug the css is
element.style {
bottom: -6px;
left: -54px;
opacity: 1;
transform: translate(435px, 200px);
}
I have tried manipulating the css by doing
.lpopup, .lpopup zoom, .lpopup.style, lpopup element.style {
bottom: 30px;
}
But none of them are working, I've tried as many variations as I can think of.
I have also tried with js
$(".lpopup zoom").css("bottom", "30px");
and other variations
nothing happening though
Im really struggling just trying to change the element style of a popup.
Thanks for any help

The content in the style attribute is more specific then any rule-set, so it will always come last in the cascade and be applied.
The clean solution is: Move the initial CSS out of the style attribute and into the stylesheet. Then write your rules while paying attention to specificity.
The hacky solution is: Use the !important flag
The really nasty solution is: Use JavaScript to change the style attribute (which is what you are trying, but you have the selector wrong).
.lpopup zoom will match: <anything class="lpopup"><zoom> This element </zoom></anything>
You want .lpopup.zoom which will match an element that is members of both classes.

You need .lolup.zoom { css here }.
Sorry, I didn't fully comprehend the question like Mr. Alien did. Yes, inline styles will always override external styles, so you either need to use !important (which I'd avoid), or remove the inline style if possible.

writing style in your own page wont works....
You just open your popup js library and change the style which are added throught the script...
It is very easy way to customize your popup design in js file....

.lpopup{//css here}
.zoom{//css here} should exist in your css file.

Simple JavaScript OnClick Function

I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.
I have found this extremely difficult to implement.
The site is here:
www.samueljamesdesign.com
Any help would be greatly appreciated.

Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.
To make things stay flipeed when clicked, with your new CSS, you do:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});