Sorry if this is obvious but I just don't know what more to do.
I am using fancybox jQuery plugin to load html content into a modal, but the content doesn't show the css styles of the main document.
CSS rules are called in the main document AND inside the loaded html in a <style> tag, but nothing.
How can I fix this without having to apply individually each element's css with jQuery .css() calls?
Thank you
Note: I know this may be over-duplicated, but I still haven't found the right solution.
Edit: Ajax-loaded content is inside an iframe
Since, as you mention in the comments, you're actually loading content into an iframe, this loaded content will not be affected by styles in the container document. They're two distinct HTML pages, despite the illusion created by the iframe.
Your best bet is to configure the content you're loading to use the same set of styles and style sheets as the container document, or a subset thereof. Treat it like just another HTML page on your site.
Related
I have a html page and i insert a iframe in this page.
I have a problem with iframe contants. In iframe show a button which have link to go on website anywhere, i want to that button does not show how set in CSS
{display: none}
but how in iframe button no detect any css rule for displaying none.
Help me CSS MASTERS
You must use seamless attribute:
This Boolean attribute indicates that the browser should render the
inline frame in a way that makes it appear to be part of the
containing document, for example by applying CSS styles that apply to
the <iframe> to the contained document before styles specified in that
document, and by opening links in the contained documents in the
parent browsing context (unless another setting prevents this). In
XHTML, attribute minimization is forbidden, and the seamless attribute
must be defined as <iframe seamless="seamless">.
The problem is that browser support is currently negligible. Meanwhile, you can watch Seamless iframes. The future, today!, a slideshow which can give you some ideas of how to implement those functionalities.
I'm having problems with the content loaded with AJAX inside a DIV.
I need custom CSS for the loaded content, but using <style> tag inside the div (or anywhere outside the <head>) does not respect the W3C standards.
Even more, in IE8 using <style> inside the div is not working as expected.
How can we solve this situation?
You could have the AJAX response modify the the contents of the <head> tag and add a new style tag. Your response would have two parts to it, the HTML and the CSS. The CSS should be added to the document before the HTML to ensure it is used.
Check out this post for adding CSS to the head: i prepend the css to the end of head tag
I'm assuming you have already been able to load something with AJAX into your page. Just convert your response to a JSON response with two parts, the CSS and the HTML. The JSON Spec might help too. You will need to escape any HTML or CSS that you send as a response.
I have a div- workarea, where, I want to load contents of body of a template. I could load the content, but how to load css of the template. If I tried to load it, it overrides the default css of the page into which I'm loading the template's body content. I don't want to use iframes in my project.
Thanks in advance
Another alternative is to create a reset stylesheet just for that div container. Put aa id selector on the container div in which you load content and use that ID as a prefix for styles you use in the template.
<div id="template_content"></div>
and css as
#template_content h2 {....}
#template_content p {...}
If you cannot do this than your only option is iframe.
Your only simple option here is to use an <iframe>, styles cascade down, that's just how they work and were intended to work, if you want a section of the page with drastically different styling that also doesn't inherit, an <iframe> is the perfect tool do this.
Many people think frames are bad, that that's a different thing from iframes, no matter which side of the line you're on <iframe> elements are perfectly legitimate to use here. Why try to solve the problem in a very round-about way when the perfect tool for the job is laying there ready to use?
For example this is how almost every rich-text-editor works in a page, via an <iframe>, for many reasons but to keep the styling separate is one of them :)
Give Some id to that div like WorkArea. Now in css file, write your styles and from. Do not attach anything to any divs of the body from css, using body as parent class
might be hard but give the display or preview area important dominance...
like...
#template_content {
background: green !important;
}
then when you load in another style sheet, #template_content's background cannot be changed unless you have !important defined on the stylesheet you are loading in.
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)
This is a general question about iframes.
When including another full webpage within an iframe, is it possible for the "iframed" site's CSS stylesheet to conflict with the CSS for the outer document?
No. The page in iframe uses its own rendering context. For all practical purposes, it is a treated as a separate window.