Menu, Header, Footer, Sidebar, Not Displaying

jQuery includes not displaying off-line

Pinned Note Error
This support page is only for web templates that use jQuery includes and have an "includes" folder in the download.

See Instead…

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.

  1. If editing in Frontpage see "Editing with Frontpage" on the jQuery Includes support page.

  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
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. See also: editor displays a blank page.

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.