PDA

View Full Version : Dynamically loaded pages with CSS cross browser?


SmyersM
11 Apr 2007, 3:44 PM
Hi.

I load a page dynamically with:



Controller.dynamicLoad = function (element, path){
var c = new Ext.ContentPanel(element);
c.setUrl(
{
url: path,
scripts: true,
text: "loading..."
});
c.refresh();
//c.destroy();
c = null;
},


I use it like so:



Controller.dynamicLoad('schedule', 'app/view/Controller.window.schedule.htm');


Inside the page I have this code:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="app/view/Controller.window.schedule.css" />
<script type="text/javascript" src="app/view/Controller.window.schedule.js" ></script>
</head>
<body>
...
<body>
</html>


In firefox my style sheet loads and displays the HTML content on schedule.html correctly. But in IE7 the table loads without the new sheet.

Is there a work around? Or is my method flawed on principle?
jack.slocum
11 Apr 2007, 4:38 PM
I always load all stylesheets in my master page so I can't be of much help with this. Can I ask why you want to load them dynamically?
SmyersM
11 Apr 2007, 5:00 PM
Maybe it's a habit of Visual Basic and Custom Controls, but I like to put everything in a separate place. I like to create WidgetX in the following pattern:

WidgetX.css
WidgetX.js
WidgetX.htm

the HTM is loaded and references both the CSS and JS needed.

Maybe I am architecting it wrong?
SmyersM
11 Apr 2007, 5:09 PM
So what I am gathering is, push everything together in one big file so it transfers to the client efficiently.

Dividing up code is good for development, but bad for delivery.

I should be looking into your JSBuilder thing, shouldn't i...
jack.slocum
11 Apr 2007, 5:10 PM
There should be some type of process that then takes the css files and concats them for inclusion in the header of the page. This will also help improve performance. Is that possible?
SmyersM
11 Apr 2007, 5:19 PM
There should be some type of process that then takes the css files and concats them for inclusion in the header of the page. This will also help improve performance. Is that possible?

It should be possible, thank you. Luckily i'm early in the layout stage that I can rip out my dynamicLoad function and throw it in the trash.
brian.moeskau
11 Apr 2007, 8:06 PM
You generally want to limit the total number of includes in each page if possible because each one causes a separate HTTP connection to the server, and there is a limit to how many concurrent connections can be made by the browser (3 if I remember correctly?). If you're interested, add a bunch of static includes to a page and then watch the page load in Firebug's Net tab or in Fiddler. If you have a bunch of images, it's even worse! They will stack up behind each other and wait. Granted, ideally the js/css will be cached anyway after load, but everything else being equal, 1 file will always load faster than 10 files the first time even when the aggregate size is the same.

Most people keep stuff separate like you're doing for development and have a build process of some sort to combine js and css for deployment (this is exactly what we do with Ext + JSB!) JSB also has a console version designed to be automated with Ant scripts and the like for this very reason.
rtannert2
12 Apr 2007, 2:55 AM
There's a timely article on the subject of concurrent loads (http://yuiblog.com/blog/2007/04/11/performance-research-part-4/) at the YUI Blog.