Getting rid of background properties - javascript

I'm scraping this news website: http://www.nu.nl/
If you open console and type:
$('*').css('background', 'none');
You will see all the background properties being removed, except for one which is the "blue" squire in the first article. When I trace the original CSS I see it has the !important declaration assigned to it. I don't know whether this is causing its persistence. What can I try to get rid of that blue background in terms of Jquery and Javascript or CSS?
Please note I don't want to target the element itself but rather keep using the all (*) selector or some Javascript equivalent.

jQuery doesn't recognize the !important attribute in css definitions. You just need a more specific hierarchical selector here. Simply make a new class, and then use addClass.
$('head').append('<style type="text/css">html #page .noBG{ background:none !important; }</style>');
Then just add that class to everything.
$('*').addClass('noBG');
Edit
Based on comments below, you could try
$('head').append('<style type="text/css">html body#noBG *{ background:none !important; }</style>');
Then add the ID to the body
$('body').prop('id', 'noBG');
Which is a pretty specific selector. Some rules may still pass this, and you'll have to experiment with different variations depending on the scenario.

Related

Disable/Remove default !important declarations in elements

I have a CSS conflict going on with a major plugin in my wordpress site. The plugin maker found it handy to add !important declarations throughout all their styling sheets. From a developer's perspective; this is a disaster. In their defense they want to cover all themes that are using !important declarations, so it looks consistent. I do not agree, so I need a solution.
What happens is that my premium theme, who's not using those declarations, cannot override the styling. I have some solutions to remove certain classes by jQuery.
But there is a problem which cannot be resolved by removing classes. For example, the anchor:hover is default as border: none !important by the plugin. But I would like to see is that the anchor:hover border option is actually applied via the theme settings. The applied CSS is this (be aware that the .plugin class is not applied in the anchor, just from a CSS file):
.plugin a { border: none !important; }
Is there any way I can disable certain class combinations from the DOM? I'm happy to have this done with php or jQuery. Something like: .plugin is not applied to anchor I have no idea how to resolve this.
Surely this is just a case of overwriting the css with a better specified css line.
For example if the code is:
.plugin a::hover { border: none !important; }
You can overwrite this by doing:
body .plugin a::hover { border: 1px solid grey !important; }
Because you have added the element body to your css line it adds extra specificity meaning it overwrites the plugins css. You unfortunately have to use !important, as !important throws regular specificity ruling out the window (bad plugin creator).
More on css specificity here
Do you need any of the styles provided by the plugin? If not then it might be worth looking at dequeueing the plugin styles altogether and just adding your own styles where the theme doesn't cover it.
If you find out the registered name of the stylesheet (should be in the style tag) you can dequeue it with something like:
function remove_push_plugin_styles() {
wp_dequeue_style( 'plugin-stylesheet' );
}
add_action( 'wp_print_styles', 'remove_pushy_plugin_styles', 1000 );
You aren't able to edit an iframe's content, true. But the iframe's itself still belongs to your page, and you can edit the attributes. I just tested and was able to do something similar to:
var i = $('div.item iframe');
// Did the selector work?
console.log(i.length);
i.removeAttr('width');
i.removeAttr('height');
That being said, using !important in this situation is not bad. If you're worried about CSS maintenance, leave a comment that the !important is overriding the element's attributes. !important is often demonized, but in this case it is a valid use to increase the specificity of your CSS.
The advantage of doing it in CSS is that it will apply before your JavaScript is loaded, so you won't get a split second of those attributes and styles applying before the JavaScript removes the styles.

How to block outer CSS to modify div

Scenario
Visit this link for Codehttps://plnkr.co/edit/yjGTX0XvOZIqL17Co2MF?p=info
I do not want my innerDiv to get modified by CSS in outerDiv.
Is there some way to achieve this?
(contents(HTML) of InnerDiv are loaded via ajax call , and the resulting page already has its own CSS and both CSS files are messing up all the layouts and formats)
From a previous answer: all: initial isn't supported by Edge (Safari is finally OK)
So you can reset manually a hundred of properties if you really really really want to be sure (forget the most obscure ones you know you don't use. If you're a third party, well no luck).
You can (should) add the !important modifier (that's one of those cases where it isn't possible to do in some other way... Fine for me at least)
You can also add a whole lot of specificity to your selectors by adding an id to your component's parent and prefix each of your selectors with that id: #myComponent.my-component .my-component-descendant { color: #333 !important; }. If your existing CSS already uses id (meh), you can go even further (lower, quality wise) and use the same id multiple times in a single selector. #myComponent#myComponent#myComponent.my-component .my-component-descendant { color: #333 !important; }. What is one the crappiest thing you can imagine in a sane project is also a powerful tool when you need to add "enough" specificity.
Food for thought: the modern way of setting box-sizing by setting it on :root and then letting inheritance do its job can be helpful (or not) https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
Advantage: if you set another value on a descendant, descendants of the latter will inherit from it. You now have a whole part of your DOM inheriting from another value.
You can override the properties in you innerdiv; here I have overwritten the background-color property of the outerdiv
#outerMostDiv {background-color:red;}
#innerDiv {background-color:yellow;}
<div id="outerMostDiv">
<!-- SOME CSS HERE (say Outer CSS)-->
outer div
<div id="innerDiv">
<!-- some CSS HERE -->
innerdiv
</div>
</div>

CSS on SAPUI5 Controls

I have a sap.m.Input inside a div tag in HTML view of sapui5. When I apply css to the div, it works fine on all the div elements. However, I want to apply css on a single control inside the div tag. It is not working. The code is :
<div data-sap-ui-type="sap.m.Label" data-text="Sr.No :"></div>
<div data-sap-ui-type="sap.m.Input" id="id_SrNo_Val" data-width ="10%"></div>
The above code does not work if I apply css to the input. It works fine on the label. I am trying to reduce the height of the input. It works on Chrome console with runtime id. However I want to apply css with the given id which it does not accept.
Please help.
In SAPUI5 we don't know at which point time of CSS is applied to the Controls.
So you've to give "priority to your css class or id" which can be achieved using the property !important
Add your CSS property like following
#id_SrNo_Val {
height : 10px !important;
color : blue !important;
}
Use anything you want with !important property.
Update: Avoid !important because it'll become harder to debug at some point of time. Also in CSS, it's not suggested to use.
You may assign additional class to a control adding class="yourStylingClass" attribute.
You shouldn't use control ids for styling, since SAPUI5 may modify those, add prefixes etc.

jQuery show element with display:none !important

I have assigned an element a class which has following CSS:
.cls {
display:none !important;
}
When I try to show this element with jQuery
$(".cls").show();
It does not work.
How can I show this element?
$('.cls').attr('style','display:block !important');
DEMO
Although question has been asked long back but its still relevant for new coders/beginners. Generally this situation comes when you have already applied some class which overriding the display behavior using !important property.
Other answers are also relevant to the question and its a matter of achieving the same goal with different approach. I would recommend to achieve it using already available classes in the same library (bootstrap here), instead of writing custom class as these days when most of us are using Bootstrap classes to build the layout.
<div id='container' class="d-flex flex-row align-items-center">
.....
</div>
If you see in the above code, we are using d-flex class for setting display property of this container. Now if I am trying to show/hide this container using
$('#container').show()
or
$('#container').hide()
It will not work as per expectation because of
As d-flex is already using !important property
Jquery's show() method will add display:block not display:flex to the css property of container.
So I will recommend to use hidden class here.
To show container
$('#container').removeClass('hidden')
To hide container
$('#container').addClass('hidden')
2 ways of doing this,
1) Remove the !important from your .cls class,
.cls{
display: none;
}
But I assume, you'd have used this elsewhere so it might cause regression.
2) What you could alternatively do is, have a another class and toggle that,
.cls-show{
display: block !important;
}
And then in your javascript,
$('.cls').addClass(".cls-show");
Then when you need to hide it again, you can,
$('.cls').removeClass('.cls-show');
This will help you keep your markup clean and readable
!important; remove all rules and apply the css desfined as !important;. So in your case it is ignoring all rules and applying display:none.
So do this:
.cls {
display:none
}
See this also
If the only property in the CLS class selector is the display one, you can do this and don't need to add any extra classes or modify the inline style.
To show them:
$('.cls').removeClass("cls").addClass("_cls");
To hide them:
$('._cls').removeClass("_cls").addClass("cls");
Just had this exact issue, here's what I did
first, I added another class to the element, such as:
<div class="ui-cls cls">...</div>
Then in the javascript:
$('.ui-cls').removeClass('cls').show();
The nice thing is that you can also have this code to hide it again:
$('.ui-cls').hide();
and it doesn't matter how many times you hide/show, it'll still work

JavaScript Gallery glitch (layers??)

Hope someone can help me, I have an index.php setup and in the head I have a sideshow script set and this runs on all pages, and then in the portfolio.html (loads inside the index.php file when that page is called up) I have a gallery script.
My problem is when I click on a gallery image it opens up but behind this "header gallery" ...
image of what the problem is:
#pjumble is right about wanting to change the z-index. The problem you're having is probably related to the CSS Selectors priority.
When defining a CSS format you can write the selector statement in 3 basic ways and mix and match these as you please for advance selector definitions. Here are the 3 basic ways,
1.
Class's Looks something like this.
.class1
{
color:blue;
font-size: 24px;
background-color:red;
}
this is the Lowest priority
2.
ID's Looks something like this.
#id1
{
color:yellow;
font-size: 12px;
}
This is medium priority
3.
Tag's look something like this.
Div
{
color:green;
}
This one gets highest priority. This always seems counter intuitive to me. If I define and ID level format you think that would have priority over the one for that Tag name but it doesn't.
Here's and example of what I'm talking about.
So for an element like this
<Div id="id1" class="class1">
Text
</div>
The "Text" here is going to have a red background because "class1" is the only definition with a background-color.
But both "id1" and "class1" have definitions for font-size so the class definition is ignored and the id one is used making "Text" 12px.
Then all three definitions have "color" defined and the winner is "Div" making "Text" green.
so when you write your set up like this,
#lightbox a z-index of 100, .gallerylayer has a z-index of 1000
you have the right idea but your definition for ".gallerylayer" is a class and if the tag or id of that section of code has z-index defined, your class definition of z-index = 1000; will be ignored.
Just to make sure the definitions not ignored I'd give the tag that has class='gallerylayer' in it and add a id='somethingUnique' attribute and use that to define the z-index rule.
But the best way to check this is to use Firefox with the Firebug add-on and use the element selecting tool to see what styles are being apply and which are begin ignored on your page.
For more on selectors try looking here it should give you all the documentation you'll need.
hope this helps.

Categories