Is it possible to not load an element in the DOM of an HTML page with CSS or Javascript ?
I have a <div> that I want to load only when the resolution is a smartphone one.
Just to do a display: none; while I don't want it doesn't work because a script (iScroll) is linked to the <div>.
I really have to not load it in the DOM (or to delete it from the DOM when I load my page).
I believe that I can do it using removeChild(). But is there a way in CSS ?
I think you are missing some details but if you are trying to prevent a image from loading there is a dirt way of doing this. If you only use the image as a 'background-image' in the css and set the "display: none" the image will only load if you change the "display"
No. Css does not interact with the DOM, and your page must load before the DOM exists.
You can remove an element as follows:
var itemToRemove = document.getElementById("itemToRemove");
document.body.removeChild(itemToRemove);
If your element is nested deeper in the DOM, you'll need to Walk the DOM:
http://javascript.about.com/od/byexample/a/dom-walknodes-example.htm
I suppose, theoretically, you could prevent an element from loading with some voodoo ajax, but i wouldn't recommend that.
Additionally, the JQuery remove() method is a popular alternative to the DOM method above, as it can be called on the element itself.
No, if the content exists in the file/resource you're requesting you have to receive it and then (as you say) manipulate it out of the DOM. CSS can only alter its appearance.
Related
I'm developing a Firefox WebExtension for a foreign website. It has many scripts and ads that I want to remove. I have two files in my extension, a CSS and a JS file. In CSS file, I hide these elements:
/* Hide some parts before removing them */
aside,
#site-footer,
.ads,
iframe,
script {
display: none
}
And in JS file I remove them with jQuery:
// List of selectors to remove
var removeList = [
'aside',
'#site-footer',
'.ads',
'iframe',
'script'
];
// Remove them
$(removeList.join(",")).remove();
I realised that hiding elements using CSS is much faster than jQuery.remove() function. My question is that, do I really need removing these elements after hiding with CSS? Can there be any performance when I remove them from DOM? I mean, for example, do iframes still use CPU after display:none? If so I should continue using JS code. Otherwise what potential gains can offer this extra removal?
Property display:none only hiding your element but not deleting from DOM. And all your iframes will still use CPU after this, because CSS controls only how element shows on screen.
After some research, I decided to use both display:none and $.remove(). After hiding, maybe the browser doesn't create the visual data form scratch but it makes all the rest. For example:
<iframe src="https://www.youtube.com/embed/X18mUlDddCc?autoplay=1" style="display: none;"></iframe>
Music plays on the page using Firefox v53. It does load all the HTML/JS/CSS files. So the perfomance gain of the display:none is really questionable in this case. I also need to remove the element.
Although it's slow to remove elements from DOM, it's still the best option for me. Maybe not for the static data but for elements like iframe, .ads (they usually contain iframes) it's a must. Still, I can try to use pure JS instead of jQuery for a little more.
Basically what i want to do is grab all CSS that is referenced in an external stylesheet e.g <link rel="stylesheet" href="css/General.css"> and append it to any existing styling for each HTML element in my page. (make all CSS inline)
The reason for this is because i need to call .html() to grab a div and send to server to be made into a PDF. The downside with this tool is that it only recognises inline CSS.
Are there any ways to do this?
Edit: the question that was linked to mine as a "possible duplicate" spoke only of putting everything in the <style> tag. while that may be useful, im mainly concerned with loading into the style="" html atribute
In the past I've used window.getComputedStyle(element); for this purpose. It will return a map of all styles applied to the element, which you can then loop across and apply as an inline style. I wouldn't apply them to the actual DOM if you can avoid it (just create a document fragment / concat it in the style of the string you're sending up). It will be a performance nightmare to actually apply that many inline styles to an element.
Using computed styles still might not be enough, as there are vendor prefixed styles in the user agent stylesheet. If you send up markup from Firefox to PhantomJS(webkit), you will obviously not get the same looking element.
I have an entire page that will be PHP included onto an already established website. The website will include my site after the <body> tag on their own site. I do not have access to the <head> section of the page. I am including my <link> and <script> tags in my page (so after the <body> of the parent page). I can change the title dynamically with javascript after the fact.
However, the CSS from the parent page is causing some interference with some of my elements that aren't explicitly styled. I would like a blanket way to stop CSS from cascading to my own elements without using an iframe. Is there a CSS reset that will work? How about a javascript solution? Would HTML5 scoped styles fix this issue eventually?
I can't give you a good answer. The closest I can think of is to take one of the CSS Reset scripts and apply them to your root <div>.
It's still a long list of things you're cancelling but at least it's maintained by someone else...
You can try by wrapping content and appending CSS rules only to wrapped content, for example.
CSS
#wrapper1 .className{/* RULES */}
#wrapper1 div{/* RULES */}
#wrapper2 .className{/* OTHER RULES */}
#wrapper2 div{/* OTHER RULES */}
HTML
<div id="wrapper1">content 1</div>
<div id="wrapper2">content 2</div><!-- CONTENT YOU APPEND LATER -->
Another solution, not the best1 is maybe to use jQuery and replace all class-es or ID-s in body when content is changed, here again you should define CSS before.
There is one thing I must note, in my experience appending HTML as pure text (like innerHtml='html') get right CSS rules in Google Chrome and Mozilla, but on IE you need to use proper JS and append content differently to get those CSS rules used. By different I mean like creating element should really be creating new element with JS function.. that was before I am not sure anymore if this thing is changed.
Seems like to me there should be an option for that but i can't seem to find it.
This question was asked many times but only workarounds were answered and that's not what i'm looking for.
I am changing my css incode and i want to load the original css back instead of coding it myself, how can that be achived?
I don't wanna reload the entire file, just load some div or class css.
See this post for a solution.
Based on that you can do something like this:
$("#fix").click(function(e) {
e.preventDefault();
$("div").removeAttr("style");
});
Note: This assumes you are using JQuery to change the styles in the first place
Here is a working example
if you're using jQuery apply
$(selector).removeAttr('style')
to your elements
I want to load the original css back instead of coding it myself
This is not necessary. You are trying to reload a resource that should just continue to exist. Once it's loaded, you don't need to load it again. If you need to override a style, apply a class to it. To revert to original, remove the class. That's how cascading style sheets work.
If there is a particular reason the css needs to be dynamic, you can try loading css into the Document via the DOM (document.createElement("style") etc.), but support for this is a bit sketchy I believe.
if you want to reset the WHOLE style and not only divs' you'd better use the all selector
$('*').removeAttr('style');
Is there an attribute that I can place JavaScript into that executes as soon as the element is finished parsing by the browser?
In effect, I would like to have an onload and be able to pass this as a parameter to a function.
The only work around I have found is specifying an id on the element and passing that to a function (within a SCRIPT tag) immediately after my element.
I'd like this:
<div onload="doSomething(this);"></div>
Instead of this:
<div id="myId"></div>
<script>doSomething("myId");</script>
Also, the solution should be cross browser compatible.
You do not admit to this openly, but the only reason you 'd want to do something like that is in order to iterate over a number of elements and perform the same kind of processing on all of them. If so, you are headed down the wrong path.
Simply give all these elements a common class and then use e.g. document.querySelectorAll to find them and do what you need. You can do this when the load event triggers for the body element.
For normal page loads I don't believe there is that level of granularity. You can detect when ALL of the HTML is loaded and when is has ALL finished rendering. Most people just process things when the page is ready and iterate over the elements in-turn.