I am loading url in a div, as div is loaded with url it includes css file which are disturbing my parent page layout. i want to restrict the css to that loading div only, so it may not disturb the other contents on page. I don't want to use iframes as there is some dragdrop work with jquery and it doesn't support a nice way to drag elements from parent page to iframe.
is there any solution?
Assuming you are using the jQuery load function with something similar to:
$('#mydiv').load(myUrl);
You can select only the HTML you are interested in from the loaded page by appending a selector to the url (see jQuery docs for Loading Page Fragments):
$('#mydiv').load(myUrl + ' #content');
If you require the full page at the url to be rendered using it's own CSS, then the only reliable way of sandboxing this from your own page is using an iframe.
give your parent's elements a specific class/id name, and use that class/id name in your css as the specific selector
Add only div specific css code in that css file.
Related
I've ran into some weird cases of positioning problems when lazy loading CSS in Chrome, e.g. the positioning of some elements (absolute, relative and cascaded) is off by sometimes huge margin.
Basically what I'm doing is leaving out the standard loading of the stylesheet via an link-Tag and instead placing a placeholder span-Tag for the sake of having an easy way to retrieve the URL later on at the end of the body-Tag. After the DOM loaded fully, I replace the span-Tag with a generated link-Tag like this:
loadCSS: function()
{
var el = jQuery('.is_css');
if(!el.length) return;
// Build link element
var linkEl = jQuery('<link />').attr({
media: 'all',
type: 'text/css',
rel: 'stylesheet',
href: el.data('src')
});
el.replaceWith(linkEl);
}
I can verify that the CSS is fully loaded as most of the elements are looking exactly as if I embed the CSS directly in the head-Tag. My guess is that Chrome doesn't correctly calculate positions in some circumstances for absolute or relative positioned elements when the CSS is loaded after the DOM has been loaded.
I would like to provide you with HTML / CSS Snippets, unfortunately it's out of scope to isolate the falsely rendered Elements. So instead I'm asking if anybody encountered similar problems that can cause this behaviour. Maybe there are some general hints on how to fix such problems.
Kind regards
Sutuma,
The methodology you are trying could have strong performance impact.
As a principle CSS need to be loaded before html DOM is rendered to have an effect. My guess is your html is rendered before CSS get loaded.
Here are the option you may try:
1. Load all css in html header tag
2. Reload your html page one css is content is downloaded.
3. You can use html templating with (require js + require css plugin) for lazy loading.
require js ,
require-css plugin
I have included JQuery on my main page which is a html page, in the main page there is an iFrame and in the iFrame I am calling another HTML page. I want to use jquery in the html page which is being called in the iFrame, is it possible to use the JQuery which is included in the main page? if it is then please let me know how?
Are the pages in the same domain? (Same origin policy.)
If so then from the iframe do parent.$(xxx) but be aware the jquery will be manipulating the top level document! Not the iframe!
If you want to manipulate the iframe do $(xxxx, $('iframe').contents()) - i.e. you set the context to the iframe, then use jQuery like usual. You would probably want to set $('iframe').contents() to a variable - and if you have more than one iframe give them an ID so jquery can find the right one.
I'm using jQuery for pagination. When the content is loaded into the (#results) div, it shows up on the page but I do not see it in the source code.
I believe this is the cause of issues I am having with CSS and jQuery functions related to that (#results) div. The CSS doesn't see any content in the div so the height doesn't actually cover the content in the div.
$("#results").load('pagination.php?page=' + page + ' #results-tbl > *');
I'm loading the #results-tbl div from pagination.php into the #results div on the current page.
Is there a better way to be loading this? What am I doing wrong?
Like Phil said,
View source will only show source when the page initially loaded. Any alterations to the DOM / source after this point will not be reflected in normal browser view source.
In addition to browser inspecting tools like Firebug etc, you can use add-ons like web developer add-on.
With the CSS issues, have a look with firebug to see your IDs and classes are actually hooking up to the CSS properties you have in your CSS file. As long as they hook up any new elements added to the DOM should get styled when added.
With height of your parent element, if you don't set its height explicitly, adding any content via AJAX should cause the parent element to stretch vertically to fit its new contents.
I'm using jQuery for styling only, while divs are created using html tags in the body section. The problem is that the browser first displays the content of the page aligned to the left side then after a few seconds the content is arranged according to the jQuery css styling. My question is: Is there a way to make the browser display the content in the correct location without aligning it first to the left side? Thanks.
Your options:
Don't use jQuery to apply style information for everything, that's not it's purpose
Start the page with all the content hidden, apply your class information and style attributes to the hidden content. Once you're done, unhide the content
First add this in a script tag in head section:
document.documentElement.className += ' js';
This adds a class to html element if js is enabled. You can use this class in css like:
.js #wrapper{
display:none;
}
We use this 'js' class because you should not hide content from people with no javascript support.
wrapper is here is the element id which you using jQuery to style. Then when you complete jQuery operations, show the styled element with jquery.
For the jQuery to have an element to apply a style to, it must have been already rendered by the browser. So the content will necessarily be first shown without the javascript-applied styles. To avoid the flash of unstyled content, add display:none to that content and then use jQuery to show it after it is styled.
<div id="myJqueryStyledStuff" style="display:none">content</div>
<script>$('#myJqueryStyledStuff').show();</script>
If you set display:none or visibility:hidden; on your main <body> tag before the page has loaded and make things visible on the $(document).ready(); event, it should work.
I have written a Firefox extension which alters the look and feel of Facebook. For this I used JS code to inject CSS styles to override FB defined values. But for some url patterns I don't want to force my styles. The issue here is the FB doesn't seem to load the full page but parts of page (but somehow the url in address changes).
This means when the new page loads my old styles will still remain applied and I want to restore them to their original values. How should I do that?
You should inject all your custom CSS styles into one <style> element, and then remove this <style> element (using JavaScript) when a new page is loaded on which you don't want your custom CSS.
Here's an example using jQuery: http://jsfiddle.net/thirtydot/BAPZF/