Page 1 of 1

jarring screen swap

Posted: Tue Jun 06, 2006 11:37 am
by bimo
A site I am working on is giving me a problem in IE. I wasn't sure if it was a PHP problem so I put it the UI forum at first. Then I read more posts in that forum and it seemed pretty design oriented. My problem could be because of how the included files are being handled so it might be a PHP problem.

On the site bfa.cctsbaltimore.org, if you are viewing it in ie (firefox doesn't have this problem), every time a user changes pages within the site the screen goes comepletley white and everything has to reload again. That sounds normal but in ie it loads the text first, then the includes, and then the stylesheets, which makes for a pretty jarring visual experience. I was wondering if anyone could think of anything that might be causing this?

One aspect of the site is that some of the pages' content comes from an rss feed which I originally thought might be causing it except that it happens on the pages that don't use rss feeds. Then I decided it has something to do with the included files. Then I thought that it might have something to do with the browser not storing th page in its history correctly or something but I don't know what to do about that. Can anyone think of what might be causing the stylesheets to load so belatedly in ie and not firefox?

thanks

Posted: Tue Jun 06, 2006 12:40 pm
by Christopher
Please post some code so we can help find the problem. Moved to Client Side.

Posted: Wed Jun 07, 2006 1:38 am
by bimo
Sorry... this is the head of the actual pages:

Code: Select all

<?php
require("../includes/head.php");
require("../includes/footer.php");
require("../includes/top_nav.php");
require("../includes/r_nav.php");
require_once("../includes/rss_fetch.inc");

head("secondary", "Announcements - ");
top_nav("ann");
?>
		
		<div id="contents">
			<div id="star_header">...
head.php

Code: Select all

<?php
/**
 * Short Description:	head() determines which version of page head to print.  This includes
 *						which extra php, js, and css files to include but not secondary 
 *						navigation.	
 *
 * @project:    baltimorefreedomacademy.org
 * @file:       includes/cal_feed.php
 * @author:		A H Sphar
 * @copyright:	2006 general
 * @param:		$pg tells which type of page it is (home, secondary, or form)
 * @param:		$title tells what the title for a page is 
 **/

function head($pg = "secondary", $title = NULL)
{
	switch($pg){
	  case "home":
	  	$begin = "";
		$js = "<script type=\"text/javascript\"><!--
				function qt_win(thsLnk) {
					window.open(thsLnk, null, 'height=265,width=340,scrollbars=no,resizable=no,location=no,menubar=no,titlebar=no,toolbar=no',false);
				}
				--></script>";
		$slogan = "<span class=\"first\">R</span>aising standards and expectations for Baltimore's youth";
		break;
	  case "form":
	    $begin = "../";
		$js = "<script type=\"text/javascript\" src=\"../js/formval.js\"></script>\n
			<script type=\"text/javascript\" src=\"../js/form_check.js\"></script>"; 
		$slogan = "<span class=\"first\">A</span>t some schools, kids get lost in the system.  At the Baltimore Freedom Academy, the kids <em>are</em> the system.";
		break;
	  default:
	    $begin = "../";
		$js="";
		$slogan = "<span class=\"first\">A</span>t some schools, kids get lost in the system.  At the Baltimore Freedom Academy, the kids <em>are</em> the system.";
		break;
	}
	//if($pg = "form") 
	print("<?xml version=\"1.0\" encoding=\"utf-8\"?>
	<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
	<html xmlns=\"http://www.w3.org/1999/xhtml\">
	<head>
	<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/>
	\n$js\n
	<style type=\"text/css\" media=\"screen\">@import url(\"".$begin."styles/bfa_index.css\");</style>
	<!--[if lt IE 7]>
	<style>
		#nav_home ul { 
			margin-left: 493px; /* ie hack */
		}
	</style>
	<![endif]-->");
	
	if($pg == "home") print("");
	
	if($pg == "secondary")
	{
		print("\n<style type=\"text/css\" media=\"screen\">@import url(\"../styles/bfa_secondary.css\");</style>");
	}
	
	if($pg == "cal")
	{
		print("\n<style type=\"text/css\" media=\"screen\">@import url(\"../styles/bfa_calendar.css\");</style><style type=\"text/css\" media=\"screen\">@import url(\"../styles/bfa_secondary.css\");</style>\n<script type=\"text/javascript\" src=\"../js/prototype.js\"></script>\n<script type=\"text/javascript\" src=\"../js/eventShow.js\"></script>"
		);
	}
	
	if($pg == "form" )
	{
		print("\n<style type=\"text/css\" media=\"screen\">@import url(\"../styles/bfa_secondary.css\");</style>\n<style type=\"text/css\" media=\"screen\">@import url(\"../styles/bfa_forms.css\");</style>"
		);
	}
	
	print("\n<title>".$title."Baltimore Freedom Academy</title>
	</head>	
	<body>
		<div id=\"container\">
			<div id=\"header\">
				<a href=\"".$begin."index.html\"><img src=\"".$begin."images/logo-clear.gif\" id=\"clear_home\" alt=\"homepage\" /></a>
				<div id=\"slogan\">
					$slogan
				</div>
			</div>");
}
?>
top_nav.php...

Code: Select all

<?php

function top_nav($sec)
{
	switch($sec) 
	{
		case "stud_par":
		  $stu = " class=\"active\"";
		  break;
		case "sta":
		  $sta = " class=\"active\"";
		  break;
		case "sup":
		  $sup = " class=\"active\"";
		  break;
		case "con":
		  $con = " class=\"active\"";
		  break;
		case "cal":
		  $cal = " class=\"active\"";
		  break;
		case "ann":
		  $ann = " class=\"active\"";
		  break;
		case "voi":
		  $voi = " class=\"active\"";
		  break;
		default:
		  break;
	}
	
	print("
		<div id=\"nav_top\">
			<ul>
				<li$stu id=\"line2\"><a href=\"../students/index.html\" title=\"Students & Parents\">Students & Parents</a></li>
				<li$sta><a href=\"../staff/index.html\" title=\"Staff\">Staff</a></li>
				<li$sup><a href=\"../support/index.html\" title=\"Supporters\">Supporters</a></li>
				<li$cal><a href=\"../calendar/index.html\" title=\"Calendar\">Calendar</a></li>
				<li$ann><a href=\"../announcements/index.html\" title=\"Announcements\">Announcements</a></li>
				<li $voi><a href=\"../student_voices/index.html\" title=\"Student Voices\">Student Voices</a></li>
				<li$con id=\"con\"><a href=\"../contact/index.html\" title=\"Contact Us\">Contact Us</a></li>
			</ul>
		</div>");
}

?>
footer has basic logic like the above ones... Would you like to see the others?

I'm wondering now if it would make a difference if the includes were included at the points at which they were used... ??? (for instance, if the footer weren't included until the end...)

That would be a pain to implement, but possible... would that make a difference?

Posted: Wed Jun 07, 2006 9:30 am
by bimo
Does anyone have any ideas? Did I give enough code to go on? I would really appreciate anything that anyone has to offer...

Thanks