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:

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

Originally Posted by eredin

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

Originally Posted by molendijk

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.

Originally Posted by djr33

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