Don't apply css on specific page - javascript

Is it possible and how to do not apply css on specific web page?
For example, i have some div's on Master Page and some css for them
.header {...}
But i have also some page (Home page), which is different from all site-style.
So i don't want to appy css from Master Page and i don't want overwrite existing css rules like this :
#specific.header{...}
Maybe there is solution such as add new Master Page.
Is it good to add some css using JS before page is loaded?

Maybe you can try any of these options:
Wrap all your standard pages under a <div id="whatever">, except the specific page you want free of your general css. Then prefix your css rules with #whatever, so a {color:red;} would be #whatever a {color:red}
This approach is very easy using LESS, because there is no need of prefixing every rule, just wrap them inside #whatever { ALL YOUR RULES}
Dynamically loading of your css, via JS or your server logic if you are using any MVC flavoured framework.

Related

ajax load and conflicting css classes and IDs

I am building a simple single page application which contains some divs which I would like to fill with content from my wordpress website.
In order to do that, I am using ajax load and inserting the loaded content into my divs:
$('#my_div').load("https://example.com/page/")
The problem is that my application uses css from bootstrap which is different from the css from my wordpress website. However, because classes and IDs are identical, the css from the loaded page is replacing the css from my app.
How can I avoid that problem? I don't want to use iframes. Would it be possible to automatically rename every Class and ID name from the imported page so that it does not conflict?
I think the best way is to use get instead of load and replace the classes inside with replace if possible. In your case you can do like this:
$.get("https://example.com/page/", function(data) {
// replace classes
$("#my_div").replaceWith(data);
});

How can we clear cache in angular JS?

I am new in angular Js, creating a small project with 5 pages.
I have written some scripts and CSS for the home page, when I click on another page the same CSS and scripts run on that page also.
My problem is I have kept that CSS and scripts on home page only then why another pages inherit that ?
How can I make clear cache ?
AngularJS is used to make Single Page Applications. When you are creating CSS classes, your entire document inherits the classes and their properties.
If you don't want other pages to inherit these CSS properties, you should create CSS class specific to homepage having unique names. Implies, each page will have their own classes with required properties. However that totally defeats the purpose of reusable CSS classes.
Will this be helpful for you -- https://docs.angularjs.org/api/ng/type/$cacheFactory.Cache
if we use css in index or root page , it will inherit from other pages so , you have to write unique css for the index or root page which it does't have other page element style , and include css for other page.
Its better to use angular ui router its what i understood can help you tho go with this.
According to css you can use !important in every view you want to change css and to apply in that view. For example:
.item {
border-color: #111 !important;
border-width: 0px;
}

Widget CSS being interfered with by external page CSS

Just created a javascript widget that injects the content on the 3rd party site using DOM. I include a css file with the widget. However, I keep running into instances where the external pages css will interfere with the widget css and add something weird like a background image or border too my widget elements that I don't have defined in my css. Any easy way to go around this? I've already added
!important
to all the css rules. Thanks!!
As in my opinion, I, with no doubt, say that in the external css, not the widget css, have added something that would add the border or background to ALL divs. You might want to check that out.

Remove all CSS rules

Is there a way to wipe out all CSS rules once style sheets have already been loaded?
I have to use a proprietary JavaScript library (ESRI's ArcGIS Server API) which is built on top of Dojo. I make extensive use of Dojo's widgets and would like to use Dojo's claro theme but unfortunately the ESRI library mungs up the CSS by loading in off-site CSS files (and probably CSS rules hard-coded in the JS). This ends up mangling the Claro theme.
So many Dojo widget CSS classes get rewritten and new rules get created that just wiping out all CSS and reloading the standard Dojo stylesheets seems easier/safer.
Something like the following would be nice:
* {none}
but I figure I'll have to end up using either Dojo or jQuery to accomplish this.
check out this bookmarklet called RefreshCSS by Paul Irish:
javascript:(function(){var h,a,f;a=document.getElementsByTagName('link');for(h=0;h<a.length;h++){f=a[h];if(f.rel.toLowerCase().match(/stylesheet/)&&f.href){var g=f.href.replace(/(&|%5C?)forceReload=\d+/,'');f.href=g+(g.match(/\?/)?'&':'?')+'forceReload='+(new Date().valueOf())}}})()
It refreshes the CSS stylesheets on a page, without refreshing the page itself.
I think you could do some alterations to it and get it to do what you want?
Another approach using jQuery that might work is to run this once the page has loaded:
$('head link, head style').remove();
Nope. Sadly, such a thing does not exist.
The answers to these related questions give pretty much the rundown on what is possible in terms of workarounds.
Is there a way to “sandbox” an html block away from its page's CSS without using iframes?
Reset CSS for a certain area of the page?
prevent meyer reset css to mess with dynamic content
How to reset css in middle of html document ?
There is always document.head.innerHTML = ""; But it really cleans house so you have to store away any scripts,metatags, titles or whatever you want to save and add them again.

How do I prevent CSS interference in an injected piece of HTML?

I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc).
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. I've also tried to add "CSS reset" classes, etc, but nothing seems to be working.
What's the best way to go around preventing the CSS from interfering with my HTML?
You can't prevent that from happen. However, you can override the CSS rules. Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html.
Your plugin:
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css:
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected.
Further... It might be hard to see what rules are the most important. You can use firebug or similar to understand which is overriding another. You'll have a hard time without it when developing your application.
that's a tough one. two options as I see it.
You could set a wrapping div around all your content and prefix all your css with that. example:
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet:
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div.
Issues:
Only possible if you are injecting
other site content onto your own
site.
This could get complicated
depending on where you are injecting
html.
The other option is to load a resetting stylesheet that targets your injected html specifically. In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. No real issues here, just not very elegant...
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues...
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside.
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. The idea is to override the css,usually with the "!important" clause. But you might have some problems on different browsers
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css

Categories