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.
Related
I'm trying to hide an HTML element using Google Tag Manager, but I am wondering which method is faster, JavaScript or CSS.
I always assumed that inserting CSS itself, will hide the HTML element faster than using JavaScript to insert some inline CSS. However, I tested both and it feels that JavaScript actually hides element faster. However, I don't have numbers that prove my point. What's the logic behind?
JavaScript:
<script>
document.querySelector(".hello-world").style.display = "none";
</script>
CSS:
<style>
.hello-world{
display: none;
}
</style>
CSS is by far the best way to apply styling to any element on page load. This is because CSS can be applied after the stylesheet loads, which is generally before the DOM has been rendered, so you don't get a flicker of content appearing and disappearing.
This is in contrast to JS, which has to wait until the DOM has loaded which means the element will be visible before it's suddenly hidden (excepting cached scripts etc). This issue is known as a 'Flash of Unstyled Content', or FOUC.
As a side note, CSS is hardware accelerated, so if you have any animation you'd like to show, it's also good practice to try and create it using only CSS/SVG instead of JS.
I am writing a free online e-book which needs a few minor formatting tweaks:
http://rperl.org/learning_rperl.html
The "Full Table Of Contents" at the very top of the page starts out by being visible for a few seconds, then finally collapses itself to be hidden. What we need is for it to start as hidden, and not be visible at all for the several seconds while the page loads. You can see that I have already tried to solve this issue by setting "var index_hidden=1;" at the following link, otherwise the table of contents would never hide itself at all:
https://github.com/wbraswell/rperl/blob/gh-pages/javascripts/metacpan_rperl.js#L832-L833
It probably shouldn't matter, but I'm using some custom Perl scripts to generate this file from Perl POD source, I can give more info if needed.
Although the described behavior does not appear for me (OSX + Firefox). Here's what you might do:
Hide the element by default using CSS. Add this to your head element (extend with stronger hiding CSS when needed).
<style>.wait-for-js { display: none; }</style>
And hide your element by adding the class
<div id="index-container" class="hide-index wait-for-js">
Last but not least, to make this trick functional. Remove the class as soon as JS is loaded, which would also mean that other logic has been loaded and you're save to show the table of contents. Be sure to load this JavaScript last thing you'll do.
<script>
document.getElementById('index-container').className = 'hide-index';
</script>
Or if you're using jQuery
<script>$('.wait-for-js').removeClass('wait-for-js');</script>
Welcome to SO!
I'm looking for a way to add some inline css to the body tag and another div in the page as the page loads to override some styles listed in the stylesheet which cannot be changed. The script itself forces the page to centre align but any onload event waits until the page has finished loading (with a left alignment) before centring it. I need the script to add this css as the page loads so the front end view is seemless.
I came across the DOMNodeInstered event but open to any ideas. I'm deploying the script through a tag manager so can only fire the script either in the head or in the body.
Really appreciate any help anyone can give.
If you dont want your style to be overriden, make sure you're setting the style as close to the element as possible, which is inline. Also make sure to add !important to it.
For example:
document.querySelector("body").style.backgroundColor = "red";
I am using a CMS page in Magento 1.7. The wysiwyg editor strips style tags but not tags. I do not have access to the wysiwyg .js to add the style tag. I also don't have access to adding an external css page or javascript page.
I want to make a modal window using HTML and Javascript. I can use a style attribute <div style="..."> but when I do this, I cannot use a pseudo-class like :target.
Basically what I would like to do is find a work around so I don't use this:
<style>.modalDialog:target {
opacity:1;
pointer-events: auto;</style>
Is there anything that I can do other than CSS style tag to get this to work?
I would like to have text linked to a modal window that opens up to an image. Do you know of another way of doing this without pseudo classes?
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.