This question already has answers here:
Removing or replacing a stylesheet (a <link>) with JavaScript/jQuery
(9 answers)
Closed 7 years ago.
So quick question, I just bought a template of a website that I really like, only for the about us page. I use a Volusion website, so we have a main CSS for the main template, and I want to be able to just have one page, the about us page, use this new css. If I put it in the body for the about-us page, it is obviously over ridden by the sites main css.
If it put it in the header with the rest of the css, it then throws off CSS all over the website, when I only wanted it reference to the about-us page.
Without having to go back, and rewrite every piece of CSS to make it unique only to the about-us page, so there is nothing conflicting, is there any quick method of having a unique set of CSS for just one page with a special jQuery call, or href. I don't want to use a ton of !important either.
Wrap the About us in a id wrapper like this
<div id="about-us-wrapper" >
{...}
</div>
Then in the imported the CSS file, append
#about-us-wrapper .xxx
in front of each line.
Related
This question already has answers here:
Limit scope of external css to only a specific element?
(6 answers)
Closed 2 years ago.
when using jQuery load() to inject an HTML page into a DIV, the HTML could bring CSS files in its head, importing them in the DOM.
The problem is that these injected CSS rules are then applied globally, which is not always the case I need.
Is there a way to avoid this behavior and limit the imported HTML pages CSS only within the hosting DIV?
Just get the content:
$("#myDiv").load("page.html #contentContainer")
or
$("#myDiv").load("page.html body")
I want to make a snippet of javascript that my users can integrate in their website.The snippet would then load a series of elements such as divs, modals, toolstips.
A few years ago, I did this using an async javascript code that would load an iframe. Are there better ways to do this in 2019 than iframes?
Also, will my generic css iframe rules (i.e. a, div, common class names etc) interfer with the websites css? For example, can I use bootstrap or do I need to write custom css and be specific about targeting so I don't mess the other websites layout?
What else should I pay attention to?
This question already has answers here:
Can we hide javascript loading from the user?
(2 answers)
Closed 4 years ago.
So this is how it goes... I wanted to create a javascript that redirects links to my URL. So if anyone copies my webpage, they try changing my links, when they upload it to their server, her links will still redirect to my links. Is this possible with js? Or if I use PHP to hide the location of my js. I want that js to still work in the webpage they copied and use. Like a sticky clickjacker. That's hard to find and remove. Or if possible they cant at all.
I wanted to create a javascript that redirects links to my url.
This means that the user would have to already be at your URL because the JavaScript to redirect to your URL can only be added to pages that you control.
So if anyone copies my webpage, they try changing my links, when they
upload it to their server, her links will still redirect to my links.
As soon as they make a copy of your code, it's their code and they can upload it anywhere they want without your knowledge. And, if they can change your links, they can also just remove any JavaScript you may have had in the file.
What you want to do is not possible.
This question already has answers here:
How to create a <style> tag with Javascript?
(18 answers)
Closed 8 years ago.
With my question I suspect a lot of people may get confused between dynamic styling (what you can achieve by jQuery's .css() function and dynamic CSS rules. The first is where it only changes the styles of existing elements matching the selector. But what I am after is adjusting the rule so any new elements matching the selector will also use that (dynamic) rule.
As an example let's take a set of DIVs with class "pane".
I can change the background color of existing panes using $(".pane").css({"background-color": "#00f"});
But if I then add a new pane $("body").append("<div class='pane'></div>"); it won't use this new style because it isn't a rule.
I don't understand why adding/changing CSS rules isn't the default behaviour? Was this ever discussed by a W3C working group to anyone's knowledge?
Does anyone know if it is possible to add or change CSS rules dynamically client side (ie without communicating with the server)?
You can append the css in style tag to page head using:
$("<style>").prop("type","text/css").html(".pane{background-color: #00f;}").appendTo("head");
or
$("head").append($("<style>").prop("type","text/css").html(".pane{background-color: #00f;}"))
This question already has answers here:
Putting Javascript into CSS
(3 answers)
Closed 7 years ago.
Well basically I have a website with styles contained within various css files, now I'd like to add a certain js, but only in one style. So I would like to be able to add it in my css file, is such thing possible?
No, this is not possible, and nor should it be. Separate your application logic from your styling.
For when the two need to interact, you can detect certain styles with JavaScript and load various other JavaScript files from there.
No, this isn't possible. However, look into jQuery selectors to attach JavaScript functionality to certain CSS class names:
http://api.jquery.com/category/selectors/
For example, you could declare an element with a certain class name like this:
<div class="class-name"></div>
And then include some JavaScript in your document which does something to the element based on its class name, like this:
$('.class-name').click(function() {
alert('You clicked .class-name');
});
Here's a jsFiddle example of the above: http://jsfiddle.net/YAZpE/