Scripts should be included in the <head> part is what I learned from w3c.
Why does Boostrap suggest to load itself in the <body> part as seen here:
http://getbootstrap.com/getting-started/#template
Scripts are technically supposed to be loaded and executed at where they are placed in the body. Imagine that your browser reads your HTML from top to bottom. If the script include is at the top of the document, then the browser is supposed to idle while it fetches the script from the web server.
A more detailed answer is available at
Unobtrusive JavaScript: <script> at the top or the bottom of the HTML code?
if the loading script is at the bottom of the body tage then it will be loaded last, making the rest of the page appear as if it is loaded faster
That really depends on that is on your page. If your page has things that need the js in order to work before displaying to the user, it would be wiser to load them before showing the html to the user
Related
This is weird!
I have set up a form using RapidMailer, and on an external site it works fine. (Just to complicate matters, the form is within a <div> as I display a background image, and then use the <div> to position the signup box halfway down the page)
But ...
Put it within an Facebook (Thunderpenny) StaticHTML page, (which I think is <iframe>?) and whilst I can enter name/email, and the submit button shows mouse up/mouse down events, it just won't submit.
I tried adding "pointer-event:auto" to the div so that it was to the fore, but no go. And no good asking the app creator as I doubt I'll get a response. Anyone any ideas? (** I could include page code, but it's 90% links to external js files Rapidmailer sets up)
Is it 'cos I got a <div> within an <iframe>? Do I need to add an <object> to the code somewhere???
It turns out that for some reason, the HTML code cannot find / use the javascripts even with direct URL's. I strongly suspect it's to do with "cross browser" limitations. In otherwords, the StaticHTML <iframe> is on one server, and the HTML code is trying to access javascript on a second server. And as the RapidMailer script is using three scripts direct from jquery.com, it's difficult to know what can be eliminated as they all contain error trapping routines.
In the end, I had to add a direct link to a status update on the Facebook page, and redirect it to the signup form on my blog. I then pinned the post the top. Alas, now for some reason it won't display a graphic with the link, and instead insists on showing the URL itself! Oh well!
Usually in a web page the <body> tag and <head> loads together in a webpage, Because of this often the webpage looks dull because sometimes the style sheets and java script load slowly and even several times it didn't load. So I am searching for a loader which will load the content which are in the head tag first and then after loading the content in the head tag then it will load the body content.
Is there such kind of script or any other trick to let the <head> tag load first
Pages load linearly from top to bottom. It will retrieve additional linked assets as it encounters them in the source. The order those assets are returned to the browser will depend on the path it takes and size of the files.
Your JS should not be linked from the HEAD section due to the fact that JS files can block concurrent loading of other assets. Instead, place your JS file links immediately before the </body> tag.
As for the CSS files, you COULD write a script that waits for the CSS to fully load before 'displaying' the rest of the page, but I'd strongly recommend AGAINST that, as this is simply how the internet works. The 'dull look' you are concerned about is really of no concern to anyone else that uses the internet.
I have a personal website, which I have made (to the best of my ability) without a template. I am not very experience in HTML so am not entirely sure if this is bad practice or not, but here is my issue.
My website consists of a frameset, which has 3 frames. Two do not change (banner and nav panel), and the other is content. The way I display my content in the main frame is through an iframe. Here's where the trouble comes. I have suggested my website to the crawler, and it crawls all the pages for content, of course. When I click on one of my links suggested by google (say, a project), the browser loads that individual .html file, without any of the rest of my frames. In other words, it does not link to the page through my index.html which sets up the formatting and page frames, but simply loads the html as a stand-alone page.
Is there a way I can avoid this, so that if a link for my website is clicked from an external link (not from my domain), the page first loads my index.html, and then the page of interest, so that it appears as if it were accessed normally from my index? I am not sure whether I should find a new way of displaying my content in the main frame so that it avoids iframes, or just need a simple script to redirect the user.
Not sure if it's useful but I've attached a photo of my page just to better explain what the frame layout is that I am working with.
Many thanks!!!
iFrames are definitely not the route to take when you are displaying consistent content... Which from what appears to be the Navigation, Header, and of course, the Content. Of course there will be an issue when a "Search Engine Spider" crawls your page... From my understanding, seeing as you are calling "content" from another page, the spider will crawl that page but will not crawl the index.html page we are currently viewing. When a "Spider" crawls a page it looks for STATIC HTML Tags/Content/Keywords/etc, and seeing as you are calling all of your content from other pages the "Spider" will treat that content as being on another page as well.
You want me recommendation? Avoid using an iFrame at all times. The point of an iFrame is to display content from another location (external), and or display static content on a page without having to scroll the current page you are viewing the iFrame on.
It is bad practice to use an iFrame, I would suggest using DIVs. Within these DIVs you may place content, images, links... Virtually anything you want, with all of the benefits of having people view your website, along with Search Engine Spiders.
I hope this helps!
Thanks,
Aaron
iFrames are a bad choice. AJAX is VERY simple these days. Just replace the big iFrame with a Div, and AJAX a page, putting the contents into that Div.
Replace your anchors with tags, and replace href with name, like so:
<div name='main.html' class='link' />
You need a div with the id 'loadHere':
Then include jQuery (it's pretty easy, google it) and at the end of your HTML put this:
$('.link').click(function(){
$.post(this.name,function(dat){
$('#loadHere').html(dat); }); });
I have several HTML pages that share a menu area. Every time I update the menu area (eg with new "breaking news") I need to update all 10 pages manually.
With frames, they all point to same frame page so I only need to change one page. But I was told frames are bad and I should use divs. Is there a simple way to do this with divs? (preferably without JQuery or Ajax)
You could use an iframe. It still is sort of a frame, but you would avoid a frameset-index-page and if you set borders to 0 and content that fits in you won't even see borders or scroll-bars and it will behave like a div
<iframe style="border-width:0px;" src="news.html"/>
You should use fixed width-heights though to avoid scrollbars. To me its the simplest "html-only"-solution to your problem.
You could use jQuery's load() function.
You'd have to add the following to the head of each of your pages:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Then you'd have to add the following DIV where you want the content to be loaded.
<div id="breakingNews"></div>
<script type="text/javascript" src="http://example.com/news.js"></script>
Be sure to edit the link to the news.js file.
Then you'd create the news.js on your server, and add the following code:
$('#breakingNews').load('path/to/breakingnews.html');
More about load():
http://api.jquery.com/load/
Not the nice solution, but if you really want to have single point of menu definition, include it in the script which includes setMenu function and you load the script in every page's head and call a setMenu function on every page's body onload, which then sets the menu as innerHTML of the div that you include in every page specifically as a menu placeholder.
Client side templating may be a solution if you are trying to avoid server side solutions for dynamically generating your content.
Using ICanHaz.js templating, http://icanhazjs.com/, you could store your html as objects. Then either include them directly as .js files, or make ajax requests for them.
We have a web content management system and I can't get to the header portion of the page. I can see it in the full page when debugging, but can't upload a revised file.
In the header, there's a portion of the same Javascript - about six lines, but it's truncated and not closed.
In the body, I have the full slideshow Javascript which works great in Firefox, Safari, and Chrome. Strangely it even works in IE8 on my PC, but not on the other 10 pcs I've tested it on.
The only thing I can edit/save changes is the body portion of the page.
I originally thought javascripts had to be in the header, but clearly not since the body script is working in the other browsers. Do you know though if IE8 requires the script to be in the header?
I think the problem is defintitely 1) a partially coded, unclosed script in the header and/or 2) perhaps javascripts have to be in the header for IE8?
In that case, I would need the remote server company to post the javascript that's currently in the body into the header.
Thanks for your help,
Debby
Script elements are allowed in many places and MSIE doesn't impose any additional requirements.
If a script element is unclosed, then everything until the next </script> will be treated as part of that script. If that includes HTML then it will error and stop running that script.
Script tags doesn't have to be in the head section. You should place them there unless you have a good reason not to, but it works just fine to have script tags in the body also.
The unclosed tag is quite likely to cause problems. At worst the browser will just ignore everything until it finds a closing tag for it. If you can't get rid of it you should at least put an empty script tag first in the code that you can control.
There are no limitations on where you keep your code, it is common practice that included javascript libraries (such as jQuery, mooTools, etc) go in the <head> element, while custom javascript goes in the end of the <body> element, because it will only run after all the other things in the page were already downloaded.
The reason for your problem is probably the unclosed <script> tag in the head. It makes everything until the closing </script> tag as script, even critical HTML. Which makes the page render incorrectly, and your javascript to throw errors.
Close the tag and resume with your own body
</script>
</head>
<body>
//... your code