CODEWITHSUNDEEP
javascriptjquerycssajax
Joe Torraca
Joe Torraca

Reputation: 2018

JQuery load page into div with styles

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?

Upvotes: 4

Views: 2592

Answers (4)

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9498

You can specify CSS in your main .css file, so when DOM is added, styles are taken from the main CSS file.

Upvotes: 1

xdazz
xdazz

Reputation: 160833

Your style of the current page will apply to the content loaded via .load

Upvotes: 1

ShankarSangoli
ShankarSangoli

Reputation: 69905

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.

Upvotes: 1

Jasper
Jasper

Reputation: 75993

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.

Upvotes: 2

Related Questions