I want to insert some HTML code inside a page, the code I insert should not be affected by the CSS and JS of that page, it should load it's own CSS and JS.
Example Code:
<div class="body">
<p>Example Content </p>
<p>Sample Content 2 </p>
<div class="special-div">
<p> No CSS and JS to be applied to this div 'special-div', it should load it's own CSS and JS </p>
</div><!-- /.special-div -->
</div><!-- /.body -->
In the above code div with class "special-div" should load it's own CSS and JS and should not be affected by page's CSS and JS
I've tried using iframes but firstly they are cross origin, secondly iframe has it's own scroll bar.
I am trying to insert a slider into wordpress page, I've built slider in a HTML site and tested it but the default wordpress styles and JS are changing the layout. I can easily remove the styles but I'm not sure how to get rid of the JS which is affecting the slider
Any help would be appreciate.
One way of doing it is Shadow DOM.
Shadow DOM provides encapsulation for the JavaScript, CSS and templating in a Web Component. Shadow DOM makes it so these things remain separate from the DOM of the main document. You can also use Shadow DOM by itself, outside of a web component.
Related
We are using the Summernote wysiwyg editor to review/preview html content of which some contain external stylesheet references. Some of this css changes not only Summernote itself but the parent page within which Summernote resides.
To demonstrate, just go to the summernote.org page and drop this css reference into the online editor (selecting "< / >" for code view first). You should see the toolbar (and contents on some pages) becoming centered and other undesired changes because of the css that's within the editor :-
<link href="https://owa.kccd.edu/owa/14.3.248.2/themes/resources/logon.css" rel="stylesheet" type="text/css" />
We have tried to put summernote within an iframe tag but this doesnt help so is there a way of isolating summernote thus preventing this css "leakage" to the surrounding page?
For reference, we are using asp.net Razor pages.
Thanks.
James
After much research it seems because Summernote does not reside within it's own iFrame, any CSS included within will naturally propogate to the surrounding page. Others have commented on this although I don't have that information source to hand.
We had no choice but to change to ckeditor, which is working really well for our needs.
The angular app that I am working on takes a while to apply the CSS. When any page first loads (or from refresh), everything is displayed as raw html (unordered lists, etc) like :
Here is the network log :
Not sure what the root cause of this is and what the best way to resolve it would be.
The best way to resolve it is to use a loading .gif which will be displayed until all elements of the page have been loaded.
HTML
<!-- Loading div with some CSS and possibly text to let the user know the page is loading -->
<div class="loading"></div>
<!-- Content div which will have the hidden class removed after the page has been fully loaded and rendered -->
<div class="content hidden"></div>
When the hidden class is removed from .content, it should be applied to .loading.
I would like to display an animated Javascript presentation on my homepage but I would like to fallback to just displaying some text and images if javascript is disabled.
Is placing the fallback content within the <noscript> tags sufficient for this?
you can use noscript tags and put your image, text with proper styling if needed. That will be rendered when js is disabled.
Reference
You can also skip the <noscript> tags and put your text and images in a normal div on the page. Then use JS to replace that content with your animated presentation.
I am trying to use .load so I can load an external page into a div on the current user's page. When I call .load , does it load the content and then style it with the current stylesheet defined in that page? If not how would I go about doing that? Example;
<head>
<link ref="stylesheet" href="main.css"/>
</head>
<body>
<div class="section">
<h2>Say this div was loaded with .load after page loaded</h2>
</div>
</body>
If .section was loaded via .load, would the style be loaded of the current page and modify that div after it loaded or is it just the html that got loaded with no styling. If it is the latter, how would I style it without using <style> tags?
Anytime you alter the DOM in a way that causes a redraw (such as adding visible elements to the DOM), each element is checked against all the rules in the CSS style-sheets.
So to answer your question directly. Yes, the styles will be added to elements that are added to the DOM at anytime.
If the css is available on the page which contains section div then the styles will be applied after load renders the content. Also if the styles are part of the load response then also it will be rendered with styles applied.
If the styles are not available on the page and also you are not getting it in the load response then you have to explicitly get it using ajax or adding a link tag with appropriate stylesheet url into the page.
Your style of the current page will apply to the content loaded via .load
You can specify CSS in your main .css file, so when DOM is added, styles are taken from the main CSS file.
I need to embed one webpage within another, the inner page will be wrapped by a <div> and not contain the <html>, <head><title> or stuff like that, however, the inner page can contain <link>'s to CSS that I don't want to affect the outer page
I currently fetch the HTML with AJAX and insert it into the outer DOM, to workaround the styles conflicting I extract any links prior to embedding into the DOM, fetch that CSS with AJAX, parse the styles and apply them inline using jQuery selectors.
That has obvious problems with things like pseudo-selectors, however, the main problem is that styles from the outer page affect the inner page, I cant reasonably reset every possible style, and I need to access the inner pages dom so using an iframe is out of the question.
Its a fairly complex setup, but I was wondering if anyone had seen anything along similar lines or had a nicer approach.
Cheers
Dale
You could assign a unique id to the div and prepend the selector to all the rules in the css.
HTML Before
<div>
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS Before
a {color:#999;}
HTML After
<div id="unique0001">
<!--start ajax content -->
Content
<!--end ajax content -->
</div>
CSS After
#unique0001 a {color:#999;}