Right way of duplicating the website's structure (Header, bottom.. )

Question

I build my website by using html and javascript ( I have no access to php ), and the thing is that as most of the websites, it contains a header, and a bottom that it is the same in all the pages.

For me, the simplest solution was to create a javascript that inserts the html content by using document.write().

So the content of my html pages is something like this:

<head>
   non relevant code
</head>

<script type="text/javascript" src="-javascript/websites_top.js"></script>


 Page content..

<script type="text/javascript" src="-javascript/websites_bottom.js"></script>

This principle works pretty good, but I realized that when the content takes some time to load there is an annoying problem..

The problem:

The website has the following structure:

+------------------+
|    MENU          |
+----+--------+----+
|td1 |  td2   |td3 |    
|    |        |    |
|    |        |    |
+----+--------+----+
|    Bottom        |
+------------------+

So websites_top.js: ends on <td> (td2), and websites_bottom.js starts on </td> (td2)

The problem is that when the content of the html page takes some time to load, the website is displayed like this:

+-------------+
|   MENU      |
+----+--------+
|td1 |  td2   |    
|    |        |
|    |        |
+----+--------+

Until the html content finish of loading. ( the content of each page )

I'm currently searching a solution to this, and I've thought the following fixes:

1) Mix websites_top.js and websites_bottom.js, and inserting the html content of the td by using another javascript. Option that I would like to avoid because this would mean that all the html content should be a javascript string and that's annoying. Also I'm afraid that search engines have problems reading the content of the page, since all will be written as a javascript string.

2) Do some sort of preloading. The problem with this is that I don't want to preload all the pages of the website, so how would I know which one does the user will click?

I tough in making a script for my menu, something like: on click preload, and then send to the page.

For the programming I think that the solution 2 its better, but for the users and the website I think that the solution 1 its better because there will be no "lag" when switching between pages.

What do you think? Is there a better way of doing this? (without php or shtml includes, my "server" its pretty basic)

In reference to the preloading you mentioned you could set the body via css to invisible and use window.onload = function() { document.getElementById('myBody').style.display='block';}. In case you would like to use php, simply change the provider and use php - it does not costs a lot nowadays. — Alexander, Feb 21 '15 at 13:40
Removed my answer, I didn't check the actual site. My answer was based solely on your statement above "websites_top.js: ends on (td2), and websites_bottom.js starts on (td2)" which wouldn't be valid HTML. And assumption that "complete newbie" means "complete newbie" :) — Peregrino69, Feb 21 '15 at 13:48
Check http://stackoverflow.com/questions/17171916/include-html-in-html-through-javascript — Roope, Feb 21 '15 at 13:50
@AMartinNo1 I'm sorry but I can't change of provider so php is not an option. I got interested by your solution, the problem is that the user will see a white screen while the content is loading. I guess it stills a solution. Another Idea would be to `block` the content of the `td` and un block it at the end of `websites_bottom.js`, But i think that there is no css code to hide, and prevent from loading — , Feb 21 '15 at 14:00
@Arimo What I meant with "ends" is that `websites_top.js` writes an html content that ends by ``. I think that there is no need of taking a look to my website, I just add it in case it was useful. I guess that there are different perceptions of what a complete newbie is :P, I said that because I've never build a website before and I didn't read about how are they made (by professionals), I consider my javascripts as simple hacks. If you take a look to the way that I use to translate my website to spanish and french you may laugh because that's another hack :P — , Feb 21 '15 at 14:07
True enuff :) But I disagree - I had a peek at your site source and the script, and found out I misunderstood your description. I've honestly got nothing on you here - wouldn't occur to me to output HTML tags via scripting in the first place... — Peregrino69, Feb 21 '15 at 14:16
@Roope I take a look and they are using javascript to add the content to the website. So it is the same that I'm already doing. Maybe with some other advantages of not using `document.write()` but that leads to the same problem of my fix 1) — , Feb 21 '15 at 14:17
@Arimo Yeah I understand, that's why I said that those were "hacks", because I don't really think programmers do that. Also my English is not the best, so some times its hard to explain my hacks and Ideas ! Anyways, I'm happy that adding the website clears the question :) — , Feb 21 '15 at 14:19
@charlietfl no, I don' t have access. But you can still post your solution as a comment in case some one else do :) — , Feb 21 '15 at 14:54
Oh okay, no problem. The blank page is a problem indeed. A possible solution is to display a loading icon until the loading is finished. — Alexander, Feb 21 '15 at 15:50
@AMartinNo1 Yeah I was thinking on that too :), i was thinking in doing the solution 2) and display a "loading cursor" the problem with this is that it doesn't works for the first time that the user opens the website since he' s not clicking the menu. I think that I'll do your solution :) — , Feb 21 '15 at 15:57

Daniel Cheung · Accepted Answer · 2015-02-22T04:05:24.790

Other than your asked issues, there are other problems related to your question in your webpage.

Why is the content loading weird? (The problem is that when the content of the html page takes some time to load, the website is displayed like this:)

I don't actually understand what is the result. However, I suggest it is related to the document.write() function.

As HTML file loads from top to bottom, the browser will run any code loaded, therefore, JS does not run in total procedural order, but according to the load and run speed.

Solution:

I rarely see people use document.write to modify a styled webpage, because the code will:

append HTML while HTML is loading
delete webpage and overwrite HTML when webpage is fully loaded

It is usually used only for testing and not for productive usages.

Instead, you should:

Create an empty frame for the webpage: Write basic structure.
Full in content when loaded instead of appending content.
Modify any further without overwriting webpage.

By using document.getElementById("foo").innerHTML = "<p>Bar</p>", we can create the basic effect.

http://jsfiddle.net/zhL2ctqe/

By putting the parts of HTML in another file, e.g. main.html and load the webpage via Ajax.

I prefer using JQuery as it simplifies the process into a simple function:

_{Jquery JS:}

$( "#foo" ).load( "bar.html" );

Otherwise:

Read websites like this to write Ajax from scratch: http://www.tizag.com/ajaxTutorial/
Use <iframe> to settle this problem.

Problems:

Like you have said, search engines will not read your page correctly since they do not process JS on webpages. The only solution for this is server-sided scripting such as PHP or ASP.

I was thinking about what you said, and I was going to do some tests until I realized that this is not the reason of my problem. I explain my self: The website is divided in 3. 1) the top, 2) the html content of each page, 3) the bottom ( that includes the 3thrd td). When the content takes some time to load, for example an image, the td3 and the bottom are not shown until 2) finish everything. As you said html is procedural. So actually I think that the only way of not having this problem is to add the content after the bottom loads. Like it was proposed in the solution 1) — , Feb 21 '15 at 20:25
If you want to check by your self, you can visit my website by using Tor. The home page bottom is written in html not javascript, and the problem its the same. — , Feb 21 '15 at 20:27
@rsm, It is not true, the method I proposed is called Ajax, asynchronous JavaScript and XML. You should put the code in one place, when the browser scans through the code, it will load the page as if it has open different threads. — Daniel Cheung, Feb 22 '15 at 04:01
@rsm, JS function does not run procedurally, but the code line scanning is procedural. — Daniel Cheung, Feb 22 '15 at 04:02
You were right! Once I removed `websites_top.js` on my home index, all the structure was loaded even if the image was still loading. Thanks Daniel — , Feb 22 '15 at 06:13

Right way of duplicating the website's structure (Header, bottom.. )

1 Answers1