Load div contents in background?

snoopy75 · Sep 3, 2003

My site has a navigational menu with some sub-menus that are contained in hidden <div> tags, and appear when a link is clicked. One of these sub-menus is dynamically generated, and turns out to be huge, which makes the page take an average of 10-15 seconds to load, and is really annoying to my users.

I would like to load the main menus immediately, then load the contents of the hidden <div> tags in the background, after the rest of the page has displayed. Remember, the one big sub-menu is generated server-side, so it doesn't seem too simple to me. How would I go about such a thing? Thanks!

--Ryan

palbano · Sep 3, 2003

Don’t build the entire <div> contents on the server. Instead build the empty div with an ID attribute and build the contents as a javascript array. Then in the onload event of the <body> element use javascript to generate the HTML contents of the empty div and set it using the innerHTML property of the div element.

-pete

snoopy75 · Sep 4, 2003

Wouldn't that take just as long, whether I build the <div> in the page itself or in a Javascript function?

I'm thinking of something like you find on

http://msdn.microsoft.com/library/default.asp

where you click on a "+" sign, and the menu says "Loading..." for a second, then brings up the submenu. Anyone know how they did that?

--Ryan

palbano · Sep 4, 2003

>>m then load the contents of the hidden <div> tags in the background,

That's what you asked for so that was the answer you got.

>> click on a "+" sign, and the menu says "Loading..." for
>> a second, then brings up the submenu. Anyone know how
>> they did that?

So now you ask a completly different question. Ok, fine, they start by using an IE Behavior bound in a CSS file to the HTML Element. The source code file for the Behavior is 1297 lines of code. Obviously i won't explain the entire file. In a nutshell here is how they are dynamically loading a section of HTML that is not yet present in the browser memory.

They are using XML and XSL. You use an instance of MSXML and it's load() function to point to an url. This url can be an ASP page with a querystring of course. The returned XML is transformed using another MSXML document object containing a XSL(T) stylesheet that transforms the XML into HTML which is then added to the existing document. How they actual do that i didn't look. Perhaps using the innerHTML property i suppose. If you want more details you could look at the file yourself.

Please note, that is not happening in the background as you originally asked. For each instance there is a round trip to the server to obtain the XML data.

-pete

snoopy75 · Sep 9, 2003

The point is, I don't want my users to have to wait for that huge hidden layer to load before they can see the rest of the page. Sorry if I wasn't clear in the beginning.

Anyway, I finally figured it out, and I'll leave my solution here in case others have the same question.

After spending days trying to interpret Microsoft's HTC-CSS-XML-XSL convolutions, I gave up on XML entirely. I ended up using the Download Behavior described at

http://msdn.microsoft.com/library/d...or/behaviors/reference/behaviors/download.asp

The relevant portions of my code look like this:

Code:

<script language=&quot;JavaScript&quot;>
function openAccts() {
	document.all.acctRow.style.display='';
	document.all.openAcctsRow.style.display='none';
	document.all.closeAcctsRow.style.display='';
	if (document.all.nav.innerHTML == &quot;nothing&quot;) {
		document.all.nav.innerHTML='<strong><font color=&quot;#FFFF00&quot;>Loading, please wait...</font></strong>';
		oDownload.startDownload('navbarBrowse.asp', onDownloadDone);
	}
}

function closeAccts() {
	document.all.acctRow.style.display='none';
	document.all.closeAcctsRow.style.display='none';
	document.all.openAcctsRow.style.display='';
}

function onDownloadDone(s) {
	document.all.nav.innerHTML = s;
}
</script>

............

Code:

<IE:DOWNLOAD ID=&quot;oDownload&quot; STYLE=&quot;behavior:url(#default#download)&quot; />

............

Code:

  <tr id=&quot;openAcctsRow&quot;> 
    <td colspan=&quot;2&quot;><strong><a href=&quot;javascript:;&quot; onClick=&quot;openAccts();&quot;>Browse Accounts</a></strong></td>
  </tr>
  <tr id=&quot;closeAcctsRow&quot; style=&quot;display:none;&quot;>
    <td colspan=&quot;2&quot;><strong><a href=&quot;javascript:;&quot; onClick=&quot;closeAccts();&quot;>Close Account Menu</a></strong></td>
  </tr>
  <tr id=&quot;acctRow&quot; style=&quot;display:none;&quot;>
    <td colspan=&quot;2&quot;><div id=&quot;nav&quot;>nothing</div></td>
  </tr>

It's not as hard as I thought it would be... ;-)

snoopy75 · Sep 9, 2003

palbano,

I do appreciate your effort in trying to solve my problem.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Load div contents in background?

snoopy75

Technical User

palbano

Programmer

snoopy75

Technical User

palbano

Programmer

snoopy75

Technical User

snoopy75

Technical User

Similar threads

Part and Inventory Search

Sponsor