Loading a div only after parent div loaded correctly - javascript

I am developing for a pre existing PHP based system.
I am trying to load this bit of code
<div style="border:1px solid #000000;height:20px;">
<marquee>This is some scrolling text<br>more text<br>more text</marquee>
</div>
Problem is, for a split second, when a visitor loads the page he sees the entire <marquee> content, and only after a second the parent div loads and fits the <marquee> into the bordered div.
How can I avoid this?
Note: I cannot use jQuery as it conflicts with many other loaded js files that are loaded to that page (even when using jQuery.noconflict()).

A q&d solution for these kinds of cases - I'm not saying it's the best for yours, or especially elegant - is to declare the marquee with visibility:hidden and unhide it by script at the end of the page, or at the end of whatever onload codd you have. And if it still unhides too soon, envelop the unhiding code in a setTimeout(function(){ ... }). That will usually force the browser to do a layout before running the code.

Note: I cannot leave comments yet...
Can you try putting the style directly in the marquee?
<marquee style="border:1px solid;height:20px;">text</marquee>
and like the previous commenter said, marquee is not recommended to use (and it's really annoying most of the time)

Related

CSS & Javascript, Need Hide Auto-Generated HTML By Default

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!

How to define javascript execution sequence

My webpage webpage link uses 3 javascripts. A TabSlideOut script, a SmoothDivScroll script and the TN3 Image Gallery script.
When the page is loaded for the first time or reloaded the script for the TN3 Image Gallery is running for a while because many images have to be loaded and this takes time.
During this time the script for the SmoothDivScroll waits and only executes when the script for the TN3 Image Gallery is finished. Because of that the page looks very ugly during this time because the images of the SmoothDivScroll script are shown one after each other instead scrolling smoothly as they do when the SmoothDivScroll script is executed. You can see this when you reload the page.
What I would like to achieve is that the script for the SmoothDivScroll is executed first and only then the script for the TN3 Image Gallery should be executed. Or anything else that could stop the webpage from looking ugly when it is reloaded.
I am not a very experianced web implementer and I don't have javascript programming knowledge. I tried for two days to find a solution but I struggled. I hope that somebody can help to solve my problem. Thanks
I'm going to call this a FOUC problem; e.g., a "Flash of Unstyled Content." Very common. Been around since the late 1900's, and Safari is notorious for this.
Short Answer: Initially set visibility:hidden on your elements with an inline style. Then use JavaScript to set visibility:visible after they've loaded.
Generally, the solution is to hide content until the content is loaded, and then display it when it's ready. Often while content is loading, you will display a spinner of some kind.
Technically, there are many ways to do this. You can toggle the CSS display, visible, and/or the opacity setting. You can show an overlay div with a high z-index--which I call a "veil" with id="veil"--and then remove it when content is loaded, and use a spinner as the veil. You can also move things completely off the screen until they've loaded, and then move them into place. You can combine these methods.
Personally I've had the best success cross-browser and cross-device with the CSS visibility property. I like how it reserves space for the object in the layout. The other solutions sometimes flake on mobile and some older browsers. Here's a couple of snippets to get you started.
First, set visibility to none with an inline style.
- DISCLAIMER: I am NOT a fan of inline styles, and understand the concept of separation of concerns. In this case, I deem it necessary because this must have the highest cascade priority, be applied as quickly as possible, and I've had good success with it cross-environment. Purists will argue that this should go in a CSS file, but I believe that we should not follow any guideline dogmatically; sometimes we must have the courage to break convention in the presence of strong justification. Let the reader decide.
<div id="pan-content" class="clearfix" style="visibility:hidden">
Then, on page load (using jQuery):
$('#window').load( function() {
$('#pan-content').css({visibility:'visible'});
});
This might prove to be a little slow, because you're waiting until the whole window loads until you display the banner. You can also attach the event to specific resources, which will speed things up. See the following post:
Detect image load
Hope this helps!
You should never rely simply on order of scripts to determine your execution. Put your calls TN3 in a function that is called in the SmoothDivScroll complete method.
It might be easiest to use the non-minified version to do this.

Dealing with non js users - set elements to display:none / opacity :0 before page is rendered

I have done a bit of a web development faux pas by not starting with a functioning page and then building js functionality on top. The site I am redeveloping is an old site which has lots of pretty jquery animations.
I have gone to great trouble to ensure all page loads can be handled with or without ajax but I have just realised this is entirely pointless since the initial page load produces several elements which load with properties of display:none; or opacity:0; and are animated to be visible on doc ready
I would very much like to rectify this but there are several reasons I did it in the first place:
1: to hide a flash of unstyled menu before a jquery plugin kicks in. (I will replace this with a non js menu and animate into the jquery menu to solve this)
2: The other reason is that I like the initial animation on page load and would ideally like to keep it. But this presents a problem since I would like to have the bulk of the page invisible for js users and visible for non js users on load but how can I ensure that my elements css properties are changed BEFORE the page is rendered - I have tried doing this with jquery but by the time the jquery library has loaded (without caching) my page has already rendered so the content is flashed up before being hidden and animated back in?
This block will be visible only for users with JS turned off.
<noscript>html code here</noscript>
You can add some styles like this:
<noscript>
<style>
#content{
background: red;
}
</style>
</noscript>
You can add the following in your <head>:
<script>document.documentElement.className+='js'</script>
Then you can style javascript-enabled browsers differently using the js class on the html element, f.ex:
html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */
The class is added already in the head, so there is no flicker in the rest of the DOM.
You can also use the noscript tag, but personally I think this is cleaner because you can administrate the styles in a single stylesheet.

Rails help getting javascript loading faster from bottom

I am have that problem, that I got some javascript that shows a flexibg image. It only works if it on the bottom of the page. just before
The problem is that the javascript gets loaded as the last. And I can see the flexi bg image just streching wish is not nice.
My code:
<%= javascript_include_tag 'flexibg.js' %>
</body>
What can I do so that the flexi bg javascript get loaded as the first or faster?
EDIT:
I have moved the javascript at the top of my body tag and it still works. But it is slow as hell.
Ok, to understand your problem you need a basic understanding of how a page loads. The short (not 100% accurate, but good enough) explanation is that the browser goes line by line, starting with the top line of the page. As it hits each script tag, it loads it (and does NOT move on to the rest of the lines until it is done, which is why it is considered best practice to put your script tags at the bottom).
As soon as the browser has (in its opinion) enough to be worth rendering, it starts rendering what it has. Very likely this is what is causing your problem: the browser is initially loading the image, with the wrong dimensions, and only when the JS gets loaded/run do the correct dimensions get set.
To solve this problem, what you have to do is hide the entire page initially, and then show it once the page has been loaded. Basically you want to do something to the effect of:
<script src="yourFile.js"/> <!-- This could go at the end -->
<body id="theBody" style="display:none"> <!-- rest of document --></body>
<script>document.getElementById("theBody").style.display = "";</script>
This way, the browser will hit the BODY tag, and subsequent content, but it won't render any of it because of the display:none style. Then, when the browser gets down to the end, it will hit the script tag that removes the display:none style, showing the page.
That's just a quick example, and some details might be off (I don't think script tags are allowed after the body tag, for instance), but hopefully you get the idea. If not, comment and I'll try to explain further.

Forcing external javascript files (from Digg, Reddit) to load last

I'm working on a WordPress site that has two external javascript files load about half-way down the page. The files are badges from Reddit and Digg, and often add about 4-8 seconds to the total loading time of page — while also preventing the bottom 50% of the page from loading too.
The Digg and Reddit javascripts render an <iframe> (which I assume needs to load completely before the rest of my web page is loaded), and thus adds a big amount of extra load time.
I tried moving the <script> tags to the bottom of the page, right before </body>, but the badges render just below the footer instead of where they need to be.
How can I force these two external javascript files to load last, but still render where they need to?
You could create a div ["divA"] where you want your Digg/Reddit iframes to go [So this is basically just a placeholder]. When the page is done loading, append a "script" element to head so the Digg/Reddit scripts can load. When they're done loading, you can move them from body to divA.
document.body.removeChild(iframe);
document.body.getElementById("divA").appendChild(iframe);
Where you render the script tags shouldn't necessarily imply where the UI those scripts generate appears-- that it does seems a goofy or questionably designed. Do the scripts have known functions in them that let you hand them a container div or something in which to render their UI?
You're correct, of course, in loading them last, before </body>. That's the right strategy.
The quick answer is - no simple way. If you user defer="true" on the script tags, and they use document.write, it will still write out the content where it was when it loaded and not where the script tag was inserted.
Some of the answers in this question might help you: How can I stop an IFrame reloading when I change it's position in the DOM?
Some of the other answers in this thread suggest removing the iframe and then reinserting it. However, that will lead you straight to the problem in the above-linked question -- it will cause the content of the iframe to load twice.
The general approach will be to put a placeholder where you want them and then move them into that placeholder when they are ready.

Categories

Resources