I've got a page in my web app that dynamically loads a view containing html and some javascript. The javascript basically renders a chart into the view that's been retrieved. The issue is that the chart library I'm using (flot) requires that the container it is being rendered into has a width and height.
When the javascript is being executed, the CSS rules haven't been applied to the container and it doesn't have a size. How can I wait until the CSS has been applied before the javascript runs?
In JQuery, you can do
$(window).load(function()
{
//code fires after the layout has been calculated/rendered
});
The doesn't work if you have javascript changing CSS after the page has already been loaded tho...so be sure any JS changing CSS happens before anything else you're about to do
Turns out I was simply being a complete idiot!
I was passing the container ID to flot without the "#" so it wasn't finding a container at all. The CSS rules have been applied when the view is returned and it's now working fine :)
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 want to add testing with cypress for my blog page where images are keeps on changing and i am not able to use visual test plugins shared by cypress. These test failing with images changed. I tried with cypress-plugin-snapshot.
Is there any plugin which can help me to test all page elements are rendered at their place. Page structure is as expected?
May be you can have example of image below - just for reference. What inside a block is not necessary but block need to be tested rendered within expected distentions.
Image content may change but whole page layout is rendered as expected. Eg. may be a img styling forgot to add width 100% and it's getting rendered as per actual image width.
You can validate pictures src attributes like this:
cy.get('img').should('have.attr', 'src', '/location.png')
I need to measure the navigation of my site to determine the space available for a feature I am building. I recently added a custom font...
The trouble is that I measure the navigation before the new font is loaded. The new font then loads altering the width of the navigation. I am then left with an incorrect width.
Is there a way I can determine when the font has loaded with JavaScript. I am using CSS to load the font.
I assume you are waiting on $(document).load before running your jquery? This just waits for the DOM to become accessible. If you want to wait until the entire webpage (and associated files) are ready, use $(window).load:
$(window).bind("load", function() {
//nav resize code here
});
I wouldn't wrap your entire code in this, just the part that is dependent on the fonts.
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 working on a project where there's quite a lot of jQuery going on. So when I go to the page, I can see the jQuery running (e.g. $.button() elements on the page still appear as normal html elements before jQueryUI is loaded :S) so initially it looks all ugly THEN, once all the JS is loaded and executed, it looks "nice".
It's not just a case of preloading images or whatever, I want to RUN the jQuery code, but "hide" it from visitors so that once the page is opened, it looks "nice" straight away OR displays a black screen saying "Loading..." until the jQuery has finished running.
Take a look here: http://www.filamentgroup.com/ , though I'm not sure that actually runs the site's javascript before displaying it, but it shows the basic idea of having a dark screen saying "Loading...".. I suspect that's what happens in large web apps such as SlideRocket though it does use flash... :S
You answered the question yourself. Have some kind of loading screen that hides the page until all of the jQuery is run.
Try something like the following.
This goes at the top of your page:
<div id="loadingMask" style="width: 100%; height: 100%; position: fixed; background: #fff;">Loading...</div>
Here's your jQuery:
$(document).ready( function() {
/*
* ... all of your jQuery ...
*/
// At the bottom of your jQuery code, put this:
$('#loadingMask').fadeOut();
});
Wrap all of your jQuery that you want "preloaded" into this :
$(window).load(function() {
//Your jQuery here
});
or alternatively, not all of your jQuery code inside of that wrapper. Rather, put your jQuery DOM changes into a
$(document).ready(function(){
//jQuery
}))
and then have a wrapper for all your site content.
<div id="everything-wrapper">
<!-- put your body here -->
</div>
and set the display to none in your CSS
#everything-wrapper {
display : none;
}
and then with the window load like earlier
$(window).load(function() {
$("#everything-wrapper").show();
// or
$("#everything-wrapper").fadeIn("fast");
// to be fancy with it
});
I was having a similar issue with an artifact popping up briefly during page loads in IE8. The solution I used was to change the visibility of the container to hidden at line 1 of the css. Then showed the element at the end of the jquery file. If the css and jquery start arguing, the element isn't shown until the argument is resolved.
I would have a overlay as part of your static CSS and HTML, then when JQuery loads via
$(document).ready() you can hide the overlay
The answer by Christopher is most likely the way FilamentGroup do it. You can have javascript "preloaded", it loads inline with the rest of the page, and due to it usually being larger than the rest of the page takes longer to download. You can't make javascript load first, that's not the way it works.
However, the principle to make it work is to "hide" your page from view in CSS (or with inline styles as the CSS will still have to load) then once everything is ready in javascript show it all again. If you notice there is a gap between the page displaying (nothing) and the javascript loading showing on FilamentGroup. That is because they hide the page, the javascript loader loads, then once the rest of the javascript has finished it hides the loader and shows the page.
Dude, I did you up a sample. I hope you likes. I use something like this on my own site.
http://jsfiddle.net/jMVVf/