HTML - Includes Slow Down?

hey everyone. i'm taking a course in website design this semester and we've gotten to SSI which I am a bit confused over. we're supposed to have built a page with header, menu, footer and then we will be using those three on another 4 pages. so he wants us to pull the header, menu, footer code out and use it with SSI. my question is, what do i need to pull out of this code to make a SSI file that i can then bring in on various pages so they look the same on each?


the site is at: http://thing.cs.usm.maine.edu/~mckenney/demo/index.html

Hi,

I've just put some of the finishing touches to

www.oisinmcgann.com

which works just fine in IE7, Firefox, Safari and every other browser I've checked.

Except IE6 (of course), where some of the pages just hang loading one of the background images.

There's a lot of CSS and some transparent PNGs involved, but I've followed tutorials and tips on-line and think everything should be technically alright.

More annoying is that there are three layouts involved. The one on the home page seems to work fine, while if you check out the books>Mad Grandad or books>Forbidden Files IE6 just gives up after putting in the CSS menus and the text.

Could any give me some pointers on what I can do here? (Aside from ask everyone visiting the site to upgrade...)

Cheers,

M

Hi There,

First post

Ive just redesigned my site in HTML and uploaded it to www.sibarber.co.uk

Occasionally I find the front page (index) taking nearly a minute to load which is obviously far too long.

Im at a loss to understand why.

I use a fowarding source (Freeparking) to redirect visitors to my 'true' web address which is http://www.users.globalnet.co.uk/~sibarber/ . Maybe this is part of the problem but my previous site at this was fine.

Im not particularly HTML savvy, so if anyone can throw some light on the issue I would appreciate it.


S

Hi ,

I've been wondering why my simple HTML website has slower drop down menu's at the top at LaptopBackpacks.com

It takes a moment for the menu to drop down at the top ..Mens | Womens | Youth

Compared to my competitor who's drop down menu's drop now instantly after hovering over them.

What causes this slower speed?

Suggestions?

Hello All,

With building a nested vertical navigation element, I am using "onmouseover" and "onmouseout" behaviors with some CSS.

The problem I have is that, for people who have a hard time clicking quickly on the left side vertical navigation submenu elements, sometimes they mouse out before they click when the mouse is over the element.

I made the onmouseover area larger than the actual sub-entries, which helps, but is not good enough.

What I want to do: Somehow prolong the onmouseover event to allow maybe 1.25 seconds of onmouseout before the submenu disappears, or slow down the onmouseout for the same reason.

Anyone have any ideas?

Thank you,
edsager

P.S. I include some of the relevant code below.

HTML stuff:

Code:

<ul>
<li onmouseover="this.firstChild.style.display=&quot;block&quot;" onmouseout="this.firstChild.style.display=&quot;none&quot;"><ul class="popout">
<li class="popout"><a class="popout" href="orig_flood.html">Stuff111111111</a></li>
<li class="popout"><a class="popout" href="title.html">Stuff11111111</a></li>
<li class="popout"><a class="popout" href="appraisal.html">Stuff1111111</a></li>
<li class="popout"><a class="popout" href="AVM.html">Stuff111111</a></li>

<li class="popout"><a class="popout" href="BPO.html">Stuff11111</a></li>
<li class="popout"><a class="popout" href="orig_fraud.html">Stuff1111</a></li>
<li class="popout"><a class="popout" href="lien.html">Stuff111</a></li>
<li class="popout"><a class="popout" href="orig_tax.html">Stuff111</a></li>
</ul><a>Home</a></li>

CSS stuff:

Code:

@charset "utf-8";
/* CSS Document */

#services a

{

	display: block;

	height: 100%;

	cursor: default;

}



#services li:hover

{

	color: #999;

	border: 1px solid RGB(179, 179, 179);

	background-color: RGB(230, 230, 230);

}



#services a:hover

{

	color: #666;

}



#services ul.popout

{

	white-space: nowrap;

	width: auto;

	position: absolute;

	left: 180px;

	background-color: white;

	padding-top: 5px;

	padding-bottom: 5px;

	padding-left: 5px;

	padding-right: 5px;

	z-index: 5;

	display: none;

	border: 1px solid RGB(179, 179, 179);



}



#services li.popout

{

	margin: 0px;

	padding: 0px;

	height: auto;

	font-size: 10pt;

	font-weight: normal;

	color: #666;

}



#services a.popout

{

	padding: 5px;

	padding-left: 15px;

	padding-right: 15px;

	display: block;

	height: 100%;

}



#services a.popout:hover

{

	color: #333;

	background-color: RGB(230, 230, 230);

	cursor: pointer;

}

Hi,

adding rows with the clear:both; attribute causes a huge slow-down and I need an alternative or a solution.

I'm composing a friend's resume in html. I'm using nested divs to create a two column format. Each row is a div block that contains two smaller divs--one for each column.

Each row uses the attribute clear:both; so that the next row will form cleanly beneath it. I am getting the desired format, but as I add more and more rows, the web browser becomes dramatically slower. 20 rows will make the page un-loadable and the browser crashes.

Am I doing something wrong or is there another way to do this?

Hi people,

hopefully you can help. I've made a website for a artist-run collective here in Edinburgh, Scotland and everything is getting under way. I had a few questions with some issues I have been encountering and perhaps you could send me some information on if there is anyway to fix this.

http://www.modular9.co.uk/

That's the site. Some things aren't up yet but you get the idea. The main issue is with the index page anyway.

I have used a collection of image paths and rollovers and if you take a look at the source you'll see my very basic, yet required, html/css.

One of the issues is the delay in rollover. I understand it is because it is loading a whole image each time you rollover the tally marks, but is there any way to speed this up? Or use a script that isn't as ineffective as javascript? I don't mind the delay but I know that the rollover is meant to exist so I give it a second or two, but people coming to the site for the first time might not notice the navigation and leave :/

Also, on some of my friend's computers at college, when they click on, artists, or the about section, or contact, for example, the background doesn't show up as the colours I put down. Is this because I used css to do so? Are there actually some browsers that can't take css yet?

I know it's a bit vague and a general query but any tips and things would be great to make the site more effective and smooth running.

Hope you are all well.

Rich

Greetings,

I have a script that needs to load a ~250Mb file from an FTP server in order to function. During this 20+ minute process, the connection between the server and client is lost; is there a header I can use to make sure the connection does not timeout?

Thank you and Godspeed!

Hello, I have a simple html form drop down list as a quick reference and link to pages on my site. It is not nested with subcategories, however there are still hundreds of options in the list, and it is causing the page load time to slow considerably.

When the list is created dynamically it is painfully slow. I tried to speed things up by making a static html file of the code and using INSERTFILE on my pages. This helped a little, but not enough to suit me.

Is there a way to cache this code snippet, or something like that, to speed up the load time?

Thanks!

Introduction:

Seeing as this question is brought up very often, I hope this short guide will be a destination for users seeking information about the topic. Although this is a server-side issue, those who are not aware of this fact generally seek help in HTML/XHTML, so this is where the topic will remain

Note: Read the answers to Frequently Asked Questions in the next post!

Hasn't this been done before?

Absolutely; this is meant as a straightforward stickied version that brings a few things together and references previous threads where you can find further details.

If your question is somewhere in the realm of one of these, you're in the right place: How do large websites manage their content? How do I make the same content appear in multiple pages without copy/pasting? How do I automatically update parts of different pages, without editing every file? How do I avoid duplicating code in multiple files? Is there an alternative to IFrames?
The answer is using PHP Includes, SSI (Server Side Includes), or ASP Includes. Each will be discussed below.

Basic Concept:

Let's assume we have a basic HTML page with a few links that represent a navigation menu (we're using HTML5 markup for simplicity):

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>
<div>
	<ul>
		<li><a href="home.html">Home Page</a></li>
		<li><a href="gallery.html">Gallery Page</a></li>
		<li><a href="about.html">About Page</a></li>
		<li><a href="contact.html">Contact Page</a></li>
	</ul>
</div>
</body>
</html>

This HTML page is now our basic template for subsequent pages that we create, which traditionally meant that we copy and paste our menu into each one. However, what if we end up creating 50 pages and then find out we have to add another link to the menu? Our only solution would be to add the link to each page.

In order to avoid this, we separate our menu from the rest of the page like so:

Code:

<div>
	<ul>
		<li><a href="home.html">Home Page</a></li>
		<li><a href="gallery.html">Gallery Page</a></li>
		<li><a href="about.html">About Page</a></li>
		<li><a href="contact.html">Contact Page</a></li>
	</ul>
</div>

Save it in a file, and then place an include on every page where we want to display the menu:

Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Main Page</title>
</head>
<body>

     code for including menu would go here 

</body>
</html>

This setup lets us update our menu file, and have the changes be immediately reflected everywhere we placed our include.

The concept is most often used with things like menus, headers, and footers, but it can be used with anything and we'll now discuss how it's done in practice.

Note: The attached zip contains working examples of all three methods.

PHP Includes:

General Requirements: Your web-hosting provider must support PHP, which most of them do. If your host does not support PHP, I would suggest switching hosts. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to run PHP. The easiest way to do this at once is by installing XAMPP. Required Filetypes: By default, servers will only parse PHP code inside files with the .php extension. Therefore, you must change the extension of any files you want to use includes in to .php (e.g. index.html becomes index.php). Although your main file must have a .php extension, you can include files with extensions such as .html, .txt, .inc, other .php files, and more. Syntax Here are two ways to include a file in PHP:

PHP Code:
<?php include('file_to_include.html');?>

or:

PHP Code:
<?php include 'file_to_include.html';?>

Note that you can also include full URLs if URL file-access is enabled in your server's configuration:
PHP Code:
<?php include("http://www.google.com/");?>


Code Example: (some_page.php)
Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PHP Include</title>
</head>
<body>

    <?php include("menu.html");?>

</body>
</html>

Server Side Includes (SSI):

General Requirements: Your web-hosting provider must support Server Side Includes, which most of them do. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support Server Side Includes. If you are using Apache, you can find information on enabling SSI here. If you are using IIS, you can install Server Side Includes inside Windows Features > World Wide Web Services > Application Development Features > Server Side Includes, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse Server Side Includes inside files with the .shtml, .shtm or .stm extensions. Therefore, you must change any files you want to use includes in to have one of these extensions (e.g. index.html becomes index.shtml). Although your main file must have one of the above extensions, you can include files with extensions such as .ssi, .html, .txt, .inc, and more. Syntax Here are two ways to include a file using SSI:

Code:

<!--#include file="menu.ssi" -->

Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.ssi are in the same directory.

Code:

<!--#include virtual="includes/menu.ssi" -->

Is used to specify a path relative to the web root. The above assumes that menu.ssi is located inside webroot/includes
Code Example: (some_page.shtml)
Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>SSI Include</title>
</head>
<body>

    <!--#include file="menu.ssi" -->

</body>
</html>

ASP Includes:

General Requirements: Your web-hosting provider must support ASP. If you do not have a hosting provider, and you're attempting this on your local computer, it must be set up as a local server and configured to support ASP. If you are using Apache, you can find information on enabling ASP here. If you are using IIS, you can install ASP inside Windows Features > World Wide Web Services > Application Development Features > ASP, although this path may differ depending on your version of Windows. Required Filetypes: By default, servers will only parse ASP code inside files with the .asp extension. Therefore, you must change the extension of any files you want to use includes in to .asp (e.g. index.html becomes index.asp). Although your main file must have a .asp extension, you can include files with extensions such as, .html, .txt, .inc, other .asp files, and more. Syntax Here are two ways to include a file using ASP (The syntax is exactly the same as SSI):

Code:

<!--#include file="menu.html" -->

Is used to specify a relative path, i.e. a path to your include in relation to where your main file is. The above assumes that your main file, and menu.html are in the same directory.

Code:

<!--#include virtual="includes/menu.html" -->

Is used to specify a path relative to the web root. The above assumes that menu.html is located inside web root directory/includes
Code Example: (some_page.asp)
Code:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>ASP Include</title>
</head>
<body>

    <!--#include file="menu.html" -->

</body>
</html>

Hi all,

I have a query that I hope somebody can help with as my site has been brought to a standstill because of this problem.
I have just posted the new version of my site online and I have a folder below the domain root which contains things like database info, form scripts etc.

When I process the form I get a 404 error. the action is something like

HTML Code:

action="../includes/process_form.php"

There is no need to any output from these files as they process the information and direct to the relevant files above the domain root using php header scripts.

At the beginning of most of my files I have the following
PHP Code:
<?php
$security = 'secure';
require('../includes/default.php');
require('../includes/error_handlers.php');
require('../includes/db.php');
?>

and there is no problem with these whatsoever.
I had all of the scripts working fine when I tested them at
domainroot.co.uk/take2/public/
domainroot.co.uk/take2/includes/

Does anybody have any ideas why this is happening

Any help would be appreciated
John