JQuery load page into div with styles - javascript

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.

Related

When page is loading images are shown disproportionate

I have a page with a few images, I've used css to set the size of those images and it's working good, but when the page is loading for some miliseconds the images are shown disproportionate, it looks ugly. I believe they are showing before the css is applied on their current sizes.. Is it possible to correct this?
When loading page(it last miliseconds but doesn't looks good):
And once the page loads and css is applied:
HTML page render from top to bottom. Adding style on header will apply all available style to body elements.
Adding style at bottom of body will render HTML tags first and then load stylesheet and then render ui again to apply style
Make sure your stylesheet gets loaded as early as possible by placing it in the header of the HTML.
I believe adding stylesheets to <head> will fix your issue. They load too late.
3 options:
Add style in the header
add a page loader
page loader + hide content until is loaded jquery, hide content until loaded

change css element inside iframe

i have one probleme with iframe in my website i can't change css of some element inside the iframe. this the html of iframe when i inspect code via chrome.
i want to change the value of div under div class with class width-100.
i already try a lot of code without success.
i found this solution but i dont understand
/*******/
CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.
This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).
Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.
Css–selector for when a html-document is inside an iframe?
/*******/
Try it.
$('iframe').contents().find("width-100 div").css('height', '200px');

Javascript function to load a CSS file in an iframe not hosted on my website

I am using a service that creates a form that I load on my website within an iframe. I can put custom javascript to load inside the iframe when the form loads (I add the javascript in the form creator on the service's domain). I believe the function must use either both or one of the parameters "form" and "function". Like so:
function(field,form){
code
}
Is there a function I can call so that it will load a css file from a different domain that will apply to the content inside of the iframe?
The domain in the iframe does load jQuery, but I'm not sure if it will allow me to call a jQuery function. If you give me a jQuery function, that would normally work inside of an iframe, I will test it out.
If you append a stylesheet link tag to the header, jQuery will handle creating and loading the stylesheet.
jQuery("head").append('<link rel="stylesheet" type="text/css" href="URL_TO_CSS_FILE" />');
Note that this does depend on your ability to add JavaScript that runs inside the iframe.
With jQuery you could simply inject a CSS tag in the head section of the page :
As soon as the tag is inserted, it will load the CSS

Use CSS/Javascript received through AJAX

I'm experimenting with the jQuery UI tab control, and have three tabs that each load a different page through AJAX. The pages that are loaded are complete html-pages, with their own Javascript and CSS.
Scripts that are inline in the html body are ok, so are CSS in the style-attribute on tags, but Javascript and CSS in the head of the loaded pages are not used at all.
How can I make use of the Javascript and CSS in the head of the loaded pages? Or do I have to include all CSS and Javascript in the page containing the tab control?
The AJAX load is going to filter out anything that's not in the body element. You can put the CSS/Javascript tags in the body and they will be added to your page, but I would avoid that if at all possible. If you're not careful, you'll end up including things multiple times.
I suggest putting the common stuff like jQuery itself, plugins, etc. on the page containing the tabs and only put tab-specific scripts on the bits that are loaded via AJAX. You'll need to be careful to manage ids -- they have to be globally unique, not unique within the tab. Sticking with classes may be a better way to handle this or preface your ids with the tab name. For CSS I would try to make it so the CSS applies to the entire page, including tabs, and load it with the page.
YMMV.
You could add this line in your head:
<link rel="stylesheet" id="yourid" type="text/css" />
and this after your ajax call:
document.getElementById('yourid').href='css/'+yourvariable+'.css';}
And you can do the same for scripts (change rel and type).

How can I embed a webpage within another and isolate CSS

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;}

Categories