Menu, Header, Footer, Sidebar, jQuery Includes

HTML pages used as jQuery webpage includes

Support for Allwebco Web Templates that use jQuery "include" files. The template will have a folder named "includes" that contains the "include" files. See your "help.html" to see if your download has jQuery "includes".

What are jQuery includes?
A website "include" is a file or other webpage that is embedded into another HTML webpage. Include files can be js, php, txt or htm files. A "jQuery include" means that a jQuery script is being used to embed the file into the webpage. Allwebco templates use htm files for the "includes".


jQuery Include GolfPro Sample


Before You Start... Editing Software Note
In some HTML wysiwyg editing software, when you open one of the main pages like the about or index, you'll see a blank white or black area over the page. This is caused by the page fade-in script. To work around this, edit the "style.css" and near the top change the "#fadediv" to "#fadedivxxx". Be sure to change this class name back when you are done editing.


Template include files:
Inside the template "includes" folder will be some HTML pages. These are not normal HTML pages in the sense that they do not include meta tags and contain only the type of HTML code that is normally used in the body of an HTML file. This is because the HTML page that they will be "included" or "embedded" into already has the meta, body, head and other tags and css styles required to render the webpage. The "include" page is only part of the page and is used for the header, menu, sidebar, footer and contact info. This allows these areas to be global so they can be updated by editing only a single file.

jQuery Includes

The "includes" are unformatted HTML pages. If you open an htm page in the "includes" folder you will not see any styling, just plain text and links. You can only view the styled includes by opening one of the template HTML pages like the "about.htm" or "index.html". The following visual is an example of the un-styled "footer.htm". This appearance is normal.
visual

Make Backups: Working with includes is complicated and errors can compromise the formatting making the "includes" not work as designed. Periodically make backups of the files in the "includes" folder.


Editing the includes files:
You can edit the .htm pages in the includes folder like txt files or as HTML webpages. If you use an HTML editor be sure it is not automatically adding the meta and body opening and closing tags. You may need to check in your HTML editor options for a "preserve existing HTML code". The following visual is an example source code view of a "sidebar.htm".
visual

If your HTML editing software adds meta, html and body opening and closing tags you may need to remove them using a plain text editor.


Contact info include:
Contact info, phone number, address and email, on the contact page, is rendered using the include file "contact-info.htm". This info is placed in an include so harvesting software can not see your email and you'll get less spam.


Menu editing:
See Mega Menu Editing for details.


.js files in the "includes" folder:
There may be multiple .js files in the "includes" folders. The .js includes are used for Javascripts for the header, footer, dynamic faq and other functions. The "javascripts-header.js" has the jQuery include script, the "javascripts-footer.js" may contain a fade out script. These are important files and need to be uploaded with the other .htm includes.


Includes and SEO:
The include files may not be read by search engines. It is recommended that you include a link to the "site map" html page on your "index.html", and list all your pages on the "site map" html page for both SEO and high mobile device and tablet compatibility. This action will ensure that all your webpages are listed in Google and other search engines.


Adding scripts to the include files:
Some types of Javascripts will work in the .htm include files, some will not. It is best to either add your 3rd party scripts to one of the .js file includes or to add them to the regular webpages like the "index.html" or "about.htm". For example: you can globally add Google Analytics code to the "javascripts-header.js" file if you strip the Google script opening and closing tags.

The document.write(' function should not be used in any .htm include file.


Editing with Frontpage:
Although templates with jQuery includes are HTML5 templates, you can still edit the header, menu, sidebar files in Frontpage if you set your options first. Select "Tools" then "Page Options" then "HTML Source" and click on "Preserve Existing html". Frontpage will now not disturb any existing html code.


Troubleshooting:

HTML pages in the includes folder don't look right in a web browser
If you open an "include" page like the "menu.htm" in a web browser it will appear unformatted. This is normal. You need to view one of your template pages like the "about.htm" or "index.htm" to see the menu with the font and color formatting.
visual

Includes (header, menu) not working off-line when first downloaded
Includes use jQuery code to display the "header.htm", "menu.htm", "sidebar.htm", "footer.htm" and "contact-info.htm" as an embedded page in your main template pages. Some browsers will not display the embedded page off-line.
  • Some browsers can not display jQuery "includes" off-line. Try using a different browser for off-line testing.

  • In Windows Google Chrome you can use the switch "--allow-file-access-from-files". Create a desktop icon to Google Chrome, right click for properties and add the switch like the following (copy only the switch code, use one space before):

    "C:\Documents and Settings\user\Local Settings\Application Data\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files

  • On Mac you can open Google Chrome through Terminal using the switch "--allow-file-access-from-files".

    (Warning: For advanced Mac users only): Close all open Google Chrome browser windows. Navigate to /Applications/Utilities, open Terminal. In Terminal change to the root directory. Enter the following command:

    open -a "Google Chrome" --args --allow-file-access-from-files

    Chrome will open and the "includes" will display when the template is viewed. This solution works only for the current Google Chrome session.

    If you are an experienced Mac user you can add a terminal command launcher to the dock (Save it with the type "Application" and place it in your Applications folder). See also wikiHow terminal help.

  • If the jQuery "includes" are not working off-line, you can download different browser software for off-line testing.

  • If you can not use a browser that shows the menu when working off-line you may need to upload for testing.

Problem: Includes not working after an edit
Review section above first, then the following section.

This error can happen if you are using a wysiwyg HTML editor (Dreamweaver, Frontpage, etc) to edit the header, footer and menu includes. You can edit your top level html pages (about.htm, services.htm, index.htm) using an HTML editor. The header, footer, menu and other HTML pages in the "includes" folder are jQuery "includes" and do not use standard HTML headers and closing tags.

What is happening is that the HTML software is adding standard html head, body and meta tag code at the top and bottom of the webpages in the "includes" folder.

Solutions:
  1. If editing in Frontpage see "Editing with Frontpage" above.

  2. Edit the .htm files in the "includes" folder using a plain text editor like Notepad or TextEdit.

  3. Edit your include file (header.htm, menu.htm, footer.htm, sidebar.htm, contact-info.htm), then after you are done editing you can remove the head, body and meta tag code. After each edit, at the top, remove the "body" line and everything above it. Also be sure to remove the 2 closing tags, </html> and </body> at the bottom. Make file backups before you start!!


Includes not working after an edit problem #2
Check that the include files (header, menu, footer, sidebar, etc) in the "includes" folder are named with a .htm extension and have not been changed to .html


Editing software shows a blank white or black page
See section above "Before You Start... Editing Software Note".


Header. menu footer not working after uploading
Check that you have uploaded the "includes" folder and all files in this folder. Check the letter "case" for the include files. Hosting is case sensitive.


End Troubleshooting

How includes work in the main template webpages:
The "jquery-1.8.3.min.js" in the "jQuery" folder is the library script. The "javascripts-header.js" in the "includes" folder has the script function that allows for the "includes" to run. In each HTML page in the main template folder the includes are embedded in each page using the following code (example for the header):

<!-- HEADER INCL -->
<div data-load="includes/header.htm" class="incld"></div>