Home/ Questions/Q 798393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T22:57:44+00:00

So, I’m trying to replicate MSDN pseudoframes here. Their pages are laid out like

  • 0

So, I’m trying to replicate MSDN “pseudoframes” here. Their pages are laid out like they’re using an old-school frameset, but inspecting their elements with firebug reveals they’ve done this with purely div’s.

Here’s my attempt at it. Its not perfect though, it only works in Chrome and Firefox, it has this weird highlight select behavior that I don’t like, any takers?

<!doctype html>
<html>
<head>
  <title>msdn "pseudoframe"</title>
  <style>
body
{
  background-color: #aaa;
  margin: 0;
  padding: 0;
}

div#pseudoframe, div#main
{
  border: solid 1px black;
  background-color: #fff;
}

div#pseudoframe
{
  position: absolute;
  left: 0;
  width: 180px;
  height: 100%;
  overflow-x: auto;
  overflow-y: none;
}

div#sizeMod
{
  background-color: #a0a;
  position: absolute;
  left: 220px;
  height: 100%;
  cursor: e-resize;
}

div#main
{
  font-weight: bold;
  font-size: 2em;
  padding: 24px;
  margin-left: 224px;
}
  </style>
  <script type="text/javascript">

function initialize()
{
  // get the pseudoframe and attach an event to the mouse flyover.

  var pf = document.getElementById('pseudoframe');
  var main = document.getElementById('main');
  var resize = document.getElementById( 'sizeMod' );

  pf['onmouseover'] = function( event )
  {
    event = event || window.event;
    var el = event.srcElement || event.target ;

    // are we within 5 px of the border?  if we are,
    // change the mouse cursor to resize.
  };

  pf['onscroll'] = function( event )
  {
    event = event || window.event;
    var el = event.srcElement || event.target ;

    var sizeMod = document.getElementById( 'sizeMod' );

    //alert( el.scrollLeft );
    sizeMod.style.right = '-' + (el.scrollLeft) + 'px';
    //alert( sizeMod.style.right );
    // are we within 5 px of the border?  if we are,
    // change the mouse cursor to resize.
  };


  resize['onmousedown'] = function( event )
  {
    event = event || window.event;
    var el = event.srcElement || event.target ;

    window.lockResize = true;
  };

  window['onmouseup'] = function( event )
  {
    event = event || window.event;
    var el = event.srcElement || event.target ;

    window.lockResize = false; //release on any mouse up event
    //alert('unlocked');
  };

  window['onmousemove'] = function( event )
  {
    event = event || window.event;
    var el = event.srcElement || event.target ;

    if( window.lockResize == true )
    {
      // resize.  get client x and y.
      var x = event.clientX;
      var y = event.clientY;

      pf.style.width = x + 'px';
      resize.style.left = x + 'px';
      main.style.marginLeft = x + 'px';
      //alert( pf.style.width );

      event.stopPropagation();
      event.preventDefault();
      return false;
    }
  };
}


  </script>
</head>
<body onload=" initialize(); ">
    <div id="pseudoframe">
      <ul>
     <li>Code</li>
  <li>MICROSOFT CODE
    <ul>
      <li>WINDOWS XP SOURCE</li>
   <li>WINDOWS VISTA SOURCE</li>
   <li>WINDOWS 7 SOURCE</li>
   <li>WINDOWS 8 SOURCE</li>
    </ul>
  </li>
  <li>DOWNLOAD ALL MICROSOFT CODE EVER WRITTEN</li>
  <li>DOWNLOAD ALL MAC OS CODE EVER WRITTEN</li>
  <li>DOWNLOAD ALL AMIGA GAME CONSOLE CODE</li>
  <li>DOWNLOAD ALL CODE EVER WRITTEN PERIOD</li>
   </ul>

    </div>

    <div id="sizeMod">&nbsp;&nbsp;</div>


    <div id="main">
      lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
   lorem ipsum microsoft pseudoframe
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you’re familiar with jQuery, then you could go for this Splitter plugin. You can see a live demo here.

    • 0