PDA

View Full Version : User-adjustable split screen



eredin
03-28-2008, 07:39 PM
1) CODE TITLE: User-adjustable split screen

2) AUTHOR NAME/NOTES: Bradley Davis

3) DESCRIPTION: I just wanted to split the screen. I wanted an adjustable width navigation menu area, and I couldn't find one anywhere that wasn't 6 pages of code or a third-party tool. It had to be easier - and it was. It is kind of a hack, but it works great in IE. FireFox hasn't implemented onDrag yet, but it degrades gracefully, the screen is still split, it just doesn't adjust.

- Black.png is simply a 1x1 image (one black pixel) - it's essential, but you'll have to create it yourself - a task worthy of MS Paint.
- The iframe src (navmenu.html) is whatever you want it to be (or leave it out if you want - the effect is still there).
- For full effect, put another full-size iframe in the content area.

Comments welcome. Enjoy!

4) CODE:



<html>
<head>
<title>Split Demo</title>
<script language="JavaScript">
loaded = false;
function dragSplit(dragEvent){
if (loaded) eval("document.getElementById('leftDiv').width=Math.max(dragEvent.x-3,1)");
}
</script>
</head>
<body style="margin: 0px;" onload="loaded=true;">
<table cellpadding=0 cellspacing=0 border=0 height=100% width=100%>
<tr><td id="leftDiv" width=150px><iframe src ="navmenu.html" height="100%" width="100%"></iframe></td>
<td width="4" onmouseover="style.cursor='w-resize';"><img src="black.png" width="4" height="100%" onDrag="dragSplit(event)"></td>
<td>Content</td></tr>
</table>
</body>
</html>

eredin
03-30-2008, 02:02 PM
http://www.greenroombooks.com/test/split.html

http://www.greenroombooks.com/test/split2.html

hmsnacker123
04-08-2008, 03:56 PM
Cant u just use a frameset?. Cool idea though

eredin
04-08-2008, 08:08 PM
Using a frameset leads to bookmarking problems, which is what led to a search for this functionality. We're using master pages, so with a header, footer and the left frame (navigation) pre-filled from the master page, bookmarks will be clean and will represent the right frame contents, which is exactly what we want.

BYK
04-09-2008, 09:43 PM
This method is not working on any browser but IE as you said and here is a simple cross-browser alternative which is not 6 pages long ;)

http://dynamicdrive.com/forums/showthread.php?t=27750

djr33
04-09-2008, 10:16 PM
Hmm... Yes, indeed. Do you have a test page for that script available, though?

molendijk
04-09-2008, 10:49 PM
I wanted an adjustable width navigation menu area
I wonder why you should want an adjustable navigation area. I would say that what the user wants (I think) is a menu that folds out on top of the window, without obliging him/her to adjust whatever part of the screen in order to see the menu items.
But I may have misunderstood what you want to achieve.
---
Arie Molendijk.

eredin
04-09-2008, 11:13 PM
The short answer is "user requirements." If after explaining all the options, that's still what they want, then that's what they get.

The fact is that the menu changes fairly regularly, and some of the links are user defined and quite long (in a will-not-wrap kind of way), so while the user wants a "static," yet relatively narrow, left-hand menu area, they also want the ability to slide the menu open further to be able to see the entire text of a link. Our users use IE exclusively, so this works great for us.

I am hoping to see a test page for the cross browser script, though. I certainly prefer to implement more widely accepted solutions.

BYK
04-10-2008, 06:30 AM
I wonder why you should want an adjustable navigation area. I would say that what the user wants (I think) is a menu that folds out on top of the window, without obliging him/her to adjust whatever part of the screen in order to see the menu items.
But I may have misunderstood what you want to achieve.
---
Arie Molendijk.

I think you have misunderstood :) This feature is needed in some cases. Not just for the menu, but also while splitting multiple contents. ;)


Hmm... Yes, indeed. Do you have a test page for that script available, though?

Of course I have :) It is included in the zip file but if you want a quick look you can also test it from here: http://amplio-vita.net/JSLib/demos/slider