Automatic DIV Scrolling

[DMAN3021]

Hello,

I am trying to emulate the windows file explorer using a combination of html, coldfusion and javascript. I must admit, I have built something very similar, but there is a small bug that I must fix before I continue. I am not using frames, but coldfusion includes into a <table> tag.

The left navigation cell, which is set in a <div> tag that uses its own scroll bar to compensate for overflow, auto scrolls to the selected folder using a <a name></a> tag. However, when the cell on the right is filled with informatin that overflows off the screen (towards the bottom, enabling the vertical scroll bar), and a folder is opened, the link actually pushes the whole window, not just the <div> tag, down to the specific <a name> tag in the navigation cell.

This hides my menu found at the top of the screen. Any ideas on how to make this work without hiding my menu?

 

[cLFlaVA]

huh? pretty impossible to tell without some code. Reg flags went up in my head when you said a <td> was contained within a <div> which is not valid html by any means.

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

 

[Vragabond]

If you are at privilege (i.e. intranet site) to use only Gecko-based browsers (NN7, Mozilla, FF), then you can use position: fixed; on your menu which will make it fixed on the screen at the same position all the time. Otherwise, you can use overflow: auto; on the main section as well, but I don't know if that will make anchors stop working. As a third solution, you could write a JavaScript function which would keep menu on screen at all times.

 

[DMAN3021]

I see how this can be sorta complicated, but theres nothing invalid about it, so here we go...!

This is my index's code.

<table border=1 width="775">
	<tr>
	<td colspan="2"><cfinclude template="menu.html"></td>
	</tr>
	<tr>
		<td width=200 valign="top"><cfinclude template="navigation.cfm"></td>
	  	<td width=575 valign="top"><cfinclude template="pane.cfm"></td>	
	</tr>
</table>

- Menu.html is my top menu
- Navigation.cfm is my left navigation cell (which acts like the folder tree in Windows Explorer)
- Pane.cfm is my application cell, where folders and files are displayed as icons

Now, to avoid navigation.cfm from being to long and scrolling off the bottom of the users screen, I've set it up in a <div> tag. The following code is the first line in the navigation.cfm file:

<DIV align=left style='width: 200px; height: 360px; overflow: scroll; border: 1px solid;'>

Once again, the navigation.cfm file is like the Windows Explorer folder tree, it contains a list of folders, with icons, and those folders have sub-folders, and files. Whenever a specific folder is clicked, it opens that folder in pane.cfm. Remember, I am not using frames, so when the page is refreshed, the navigation.cfm is too, defaulting back to its top (within the div box). I set the file up so that every folder and sub-folder in the navigation.cfm contains a <a name> tag, and that whenever a specific folder is clicked, it adds the specific <a name> tag to the end of the page's address, scrolling navigation.cfm to the currently opened folder. So everything works fine! Until...

This is where the problem lies. Everything does work fine, but if the pane.cfm file contains a lot of data, then IE will add a vertical scroll bar. And when a <a name> tag is called to align the navigation.cfm file, the whole page drops, hiding the menu.html. This is what I want to avoid, I want that menu bar to remain at the top of the screen, and not dissapear because of to much data.

 

[CliveC]

Use overflow-y:scroll

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

 

[DMAN3021]

Hey Vragabond,

I was so busy writing the previous response, I didnt see yours until now.

I am on an intranet, but at priviledge of using IE, not Gecko, so unfortunately I can't do that, but man would that be an easy solution.

But after reading your post, I put the main page in a <div> similar to the navigation page (as you mentionned) and it works perfectly! Since the <div> stops the main page from overflooding, there is never a scroll bar on the right, and everything remains in place.

Thanks!