Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xSplitter] 3 resizable columns

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 July 3, 2009 3:03:37 am

Johnny
Member
Registered: July 3, 2009
Posts: 12

[xSplitter] 3 resizable columns

Is there anyone who can help me to make a 3 pane div which is resizable.
The demo's are really nice with the 2 columns, but unfortunately it's not enough for me.


Until now i've recoded xsplitter.js like this but it doesn't work :-(

// xSplitter r3, Copyright 2006-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xSplitter(sSplId, uSplX, uSplY, uSplW, uSplH, bHorizontal, uBarW, uBarPos, uBarLimit1, uBarLimit2, bBarEnabled, uSplBorderW, oSplChild1, oSplChild2)
{
  // Private

  var pane1, pane2, pane3, splW, splH;
  var splEle, splEle2, barPos, barLim1, barLim2, barEle, barEle2;

  function barOnDrag(ele, dx, dy)
  {
    var bp;
    if (bHorizontal)
    {
        bp = barPos + dx;
        if (bp < barLim1 || bp > splW - barLim2) { return; }
        xWidth(pane1, xWidth(pane1) + dx);
        xLeft(barEle, xLeft(barEle) + dx);
        xWidth(pane2, xWidth(pane2) - dx);
    xLeft(barEle2, xLeft(barEle2) + dx);
    xWidth(pane3, xWidth(pane3) - dx);
        xLeft(pane3, xLeft(pane3) + dx);
        barPos = bp;
    }
    else
    {
        bp = barPos + dy;
        if (bp < barLim1 || bp > splH - barLim2) { return; }
        xHeight(pane1, xHeight(pane1) + dy);
        xTop(barEle, xTop(barEle) + dy);
        xHeight(pane2, xHeight(pane2) - dy);
        xTop(barEle2, xTop(barEle2) + dy);
     xHeight(pane3, xHeight(pane3) - dy);
        xTop(pane3, xTop(pane3) + dy);
        barPos = bp;
    }
    if (oSplChild1) { oSplChild1.paint(xWidth(pane1), xHeight(pane1)); }
    if (oSplChild2) { oSplChild2.paint(xWidth(pane2), xHeight(pane2)); }
    if (oSplChild3) { oSplChild3.paint(xWidth(pane3), xHeight(pane3)); }

  }

  // Public

  this.paint = function(uNewW, uNewH, uNewBarPos, uNewBarLim1, uNewBarLim2) // uNewBarPos and uNewBarLim are optional
  {
    if (uNewW == 0) { return; }
    var w1, h1, w2, h2, w3, h3;
    splW = uNewW;
    splH = uNewH;
    barPos = uNewBarPos || barPos;
    barLim1 = uNewBarLim1 || barLim1;
    barLim2 = uNewBarLim2 || barLim2;
    xMoveTo(splEle, uSplX, uSplY);
    xResizeTo(splEle, uNewW, uNewH);
    if (bHorizontal)
    {
      w1 = barPos;
      h1 = uNewH - 2 * uSplBorderW;
      w2 = uNewW - w1 - uBarW - 2 * uSplBorderW;
      h2 = h1;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, w1, 0);
      xResizeTo(barEle, uBarW, h1);
      xMoveTo(pane2, w1 + uBarW, 0);
      xResizeTo(pane2, w2, h2);
      xMoveTo(barEle2, w1, 0);
      xResizeTo(barEle2, uBarW, h1);
  xMoveTo(pane3, w1 + uBarW, 0);
      xResizeTo(pane3, w2, h2);
    }
    else
    {
      w1 = uNewW - 2 * uSplBorderW;;
      h1 = barPos;
      w2 = w1;
      h2 = uNewH - h1 - uBarW - 2 * uSplBorderW;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, 0, h1);
      xResizeTo(barEle, w1, uBarW);
      xMoveTo(pane2, 0, h1 + uBarW);
      xResizeTo(pane2, w2, h2);
      xMoveTo(barEle2, 0, h1);
      xResizeTo(barEle2, w1, uBarW);
      xMoveTo(pane3, 0, h1 + uBarW);
      xResizeTo(pane3, w2, h2);
    }
    if (oSplChild1)
    {
      pane1.style.overflow = 'hidden';
      oSplChild1.paint(w1, h1);
    }
    if (oSplChild2)
    {
      pane2.style.overflow = 'hidden';
      oSplChild2.paint(w2, h2);
    }
  };

  // Constructor

  splEle = xGetElementById(sSplId); // we assume the splitter has 3 DIV children and in this order:
  pane1 = xFirstChild(splEle, 'DIV');
  pane2 = xNextSib(pane1, 'DIV');
  pane3 = xNextSib(pane2, 'DIV');
  barEle = xNextSib(pane2, 'DIV');
  barEle2 = xNextSib(pane3, 'DIV');
  //  --- slightly dirty hack
  pane1.style.zIndex = 2;
  pane2.style.zIndex = 2;
  pane3.style.zIndex = 2;
  barEle.style.zIndex = 1;
  barEle2.style.zIndex = 1;
  // ---
  barPos = uBarPos;
  barLim1 = uBarLimit1;
  barLim2 = uBarLimit2;
  this.paint(uSplW, uSplH);
  if (bBarEnabled)
  {
    xEnableDrag(barEle, null, barOnDrag, null);
    barEle.style.cursor = bHorizontal ? 'e-resize' : 'n-resize';
  }
  splEle.style.visibility = 'visible';

} // end xSplitter




Thanks for the help.

Last edited by MikeFoster (July 3, 2009 7:15:43 am)

Offline

 

#2 July 3, 2009 7:14:56 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Hi Johnny, Welcome to the forums!

Since xSplitter is nestable, just nest a horizontal splitter in another horizontal splitter and that should give you 3 panes. I tried it on the demo page. It needs some tweaking but it works.

Offline

 

#3 July 3, 2009 9:52:08 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

After playing with it a little I see that my idea above, while workable, doesn't quite give the same effect as a true 3-pane splitter - because when you resize the left pane you resize the entire nested splitter on the right (2 panes). I'll be kicking around some ideas.

Offline

 

#4 July 6, 2009 8:05:44 am

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

Thanx Mike!

This is almost what I'm looking for.
The problem with the right nested splitter isn't a problem for me, actually I like it!

But there is a problem on window.resize in your example xsp8 the width of the temp-container doesn't change.
So I thought let's take a look at the script and something was missing there:

s8.paint(w, h, w/2, w/2, w/2);
s81.paint(w, h, w/2, w/2, w/2);

So I pasted this but now the whole container freezes on a resize.

I'm looking forward for the solution :-)

Thanks a lot!

Offline

 

#5 July 6, 2009 10:03:19 am

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

Never mind!

It's working!


s8.paint(w, h, w/2, w/2, w/2);
s81.paint(w, h, w/2, w/2, w/2);

-------------------------------------------------------------


The sizes doesn't fit, so that's why the splitterbars froze, the new values that work perfectly at your example are:

function win_onload()
{
  var w = xClientWidth();
  var ch = xClientHeight();
  var h = ch - 60;
                   // sSplId,  X, Y, W, H, Horz , BarW, BarPos, BarLim1, BarLim2, BarEn, BorW, oSplChild1, oSplChild2

  s8 = new xSplitter('xsp8'  , 0, 0, w, h, true , 6,    160,     10,     w*.75,     true,  2, null, s81);
  s81 = new xSplitter('xsp81', 0, 0, w, h, true, 6,    w*.2,  10,     h/5,     true,  0);


  xAddEventListener(window, 'resize', win_onresize, false);
};

function win_onresize()
{
  var w = xClientWidth();
  var ch = xClientHeight();
  var h = ch - 60;
  s8.paint(w, h, 160, 10, w*.75);
  s81.paint(w, h, w*.2, 10, h/5);

}


------------------------------------------------------------------------------
with these values and code it's a screenfilling application.

Thnx a lot for all the good DHTML scripts!! I can really  use them!

Offline

 

#6 July 6, 2009 1:56:46 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Awesome! Thanks very much, Johnny.

Adding this to the demo made me think of some possible improvements - but that'll have to be postponed. I'm currently working on some big projects for the next version of X.

Offline

 

#7 August 17, 2010 2:32:32 am

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

Hi Mike,

The Xsplitter is still working perfect, but when I refresh the page the Xsplitters were reset to the initial values. Now I want to work with a cookie that will remember the values that has been set by the user. I discovered that in the function dragEnd(e) there is a variable that holds the right value of the Xsplitter, the problem is I need to find out which of the 2 xplitters it is that have been changed. So I need the id of the changed splitter and than I can make a nice cookie function.

Here is what I've got so far (read it as: this what you've got so far and I added a few lines of code ;-)): 

function dragEnd(e)
  {
    var ev = new xEvent(e);
    xPreventDefault(e);
    xRemoveEventListener(document, 'mouseup', dragEnd, false);
    xRemoveEventListener(document, 'mousemove', drag, false);
   
    document.getElementById('scrollDivSubCat').style.zIndex = 2;
   
    if(mapBuffer == true){
      top.frames['scrollDivSubCat'].document.getElementById('gMapMid').style.zIndex = 2;
    }
   
    el.style.background = "background-image: url('http://img.example.com/splitter.png') repeat-y";
    enableSelection(document.body);
   
    if (fE) {
      fE(el, ev.pageX, ev.pageY, ev);
    }
    if (xEnableDrag.drop) {
      xEnableDrag.drop(el, ev);
    }
    alert(xLeft(el)+''+ el.id); // This is the line I added but el.id doesn't work, so how do I get the id of el?

  }


I'm looking forward for the solution :-)

Thanks a lot!

Offline

 

#8 August 17, 2010 10:20:02 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Hi Johnny, it's great to hear from you again!

I'm busy with a work issue right now, but I'll try to take a look at this as soon as I can today.

Thanks!

Offline

 

#9 August 17, 2010 2:49:40 pm

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

That would be great!

Thanks!

Offline

 

#10 August 18, 2010 1:02:10 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Hi Johnny, I got somewhat caught up on some other things I had started before you posted... but now I'm wiped out smile gotta hit the sack. I'll be sure to follow up on this tomorrow.

Offline

 

#11 August 18, 2010 9:47:09 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

G'mornin! I found an easy way to provide what you need. I added a public method, setDragEnd, so you can designate a function which will be called at the end of a bar-drag. Visit xSplitter to see the new code. I have not yet added it to the X distribution download file - it will be part of the next release. All the xSplitters on the demo page make use of this new feature. It displays its arguments on the status line.

This was a great idea. Thanks, Johnny!

BTW, xSplitter is 4 years old this month! Happy birthday xSplitter!!! smile

Offline

 

#12 August 18, 2010 9:50:28 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Oh, BTW, you may need to 'refresh' on the demo page to get my latest changes.

Offline

 

#13 August 18, 2010 3:30:20 pm

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

That's great!! Happy birthday xsplitter indeed! ;-)

You did a great job with that function, thanks a lot, but .......

The problem is because I'm using r8 (2002 - 2007) and the last xsplitter version to download is r5 (2010) and I've completely tweaked everything so the function setDragEnd isn't working, I'll show you my code:


I've puted some comment at the end of the function dragEnd(e) there I explain the problem.

Is there a big difference between r5 and r8 especially for cross browser compatibility?

// xEnableDrag r8, Copyright 2002-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

//function against selection
function disableSelection(target){
  if (typeof target.onselectstart!="undefined") //IE route
  target.onselectstart=function(){return false}
  else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
  target.style.MozUserSelect="none"
  else //All other route (ie: Opera)
  target.onmousedown=function(){return false}
    target.style.cursor = "default"
}

function enableSelection(target){
  if (typeof target.onselectstart!="undefined") //IE route
  target.onselectstart=function(){return true}
  else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
  target.style.MozUserSelect="1"
  else //All other route (ie: Opera)
  target.onmousedown=function(){return true}
    target.style.cursor = "default"
}

var hostName = location.protocol+'//'+location.hostname;

function xEnableDrag(id,fS,fD,fE)
{
  var mx = 0, my = 0, el = xGetElementById(id);
  if (el) {
    el.xDragEnabled = true;
    xAddEventListener(el, 'mousedown', dragStart, false);
  }
  // Private Functions
  function dragStart(e)
  {
    if (el.xDragEnabled) {
      var ev = new xEvent(e);
      xPreventDefault(e);
      mx = ev.pageX;
      my = ev.pageY;
      xAddEventListener(document, 'mousemove', drag, false);
      xAddEventListener(document, 'mouseup', dragEnd, false);
      if (fS) {
        fS(el, ev.pageX, ev.pageY, ev);
      }
      document.getElementById('scrollDivSubCat').style.zIndex = -2;
      
      if(mapBuffer == true){
        top.frames['scrollDivSubCat'].document.getElementById('gMapMid').style.zIndex = -2;
      }
            
    el.style.background = "background-image: url('http://img.example.com/splitterblue.png') repeat-y";
    disableSelection(document.body);
    }
  }
  function drag(e)
  {
    var ev, dx, dy;
    xPreventDefault(e);
    ev = new xEvent(e);
    dx = ev.pageX - mx;
    dy = ev.pageY - my;
    mx = ev.pageX;
    my = ev.pageY;
    if (fD) {
      fD(el, dx, dy, ev);
    }
    else {
      xMoveTo(el, xLeft(el) + dx, xTop(el) + dy);
    }
  }
  function dragEnd(e)
  {
    var ev = new xEvent(e);
    xPreventDefault(e);
    xRemoveEventListener(document, 'mouseup', dragEnd, false);
    xRemoveEventListener(document, 'mousemove', drag, false);
    
    document.getElementById('scrollDivSubCat').style.zIndex = 2;
    
    if(mapBuffer == true){
      top.frames['scrollDivSubCat'].document.getElementById('gMapMid').style.zIndex = 2;
    }
    
    el.style.background = "background-image: url('http://img.example.com/splitter.png') repeat-y";
    enableSelection(document.body);
    
    if (fE) {
      fE(el, ev.pageX, ev.pageY, ev);
    }
    if (xEnableDrag.drop) {
      xEnableDrag.drop(el, ev);
    } 


   //  ATTENTION

    //   !!!!!!  AT THIS PLACE YOU CAN GET THE POSITION OF el   IT IS THE SAME AS barPos

   //   !!!!!!  BUT I CAN'T GET splEle to be alerted 

   //   !!!!!! I need the id of the xsplitter bar because I've a nested xsplitter in another one so I've got 2 bars (example 8). Now I get the barposition of a bar and I don't know which one it is. 
  //    To set an cookie I need    to know which bar I need to give the cookievalue. 

    alert(xLeft(el));

   

  }
}

xEnableDrag.drops = []; // static property



// xFirstChild r4, Copyright 2004-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xFirstChild(e,t)
{
  e = xGetElementById(e);
  var c = e ? e.firstChild : null;
  while (c) {
    if (c.nodeType == 1 && (!t || c.nodeName.toLowerCase() == t.toLowerCase())){break;}
    c = c.nextSibling;
  }
  return c;
}



// xNextSib r4, Copyright 2005-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xNextSib(e,t)
{
  e = xGetElementById(e);
  var s = e ? e.nextSibling : null;
  while (s) {
    if (s.nodeType == 1 && (!t || s.nodeName.toLowerCase() == t.toLowerCase())){break;}
    s = s.nextSibling;
  }
  return s;
}

// xSplitter r3, Copyright 2006-2007 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xSplitter(sSplId, uSplX, uSplY, uSplW, uSplH, bHorizontal, uBarW, uBarPos, uBarLimit1, uBarLimit2, bBarEnabled, uSplBorderW, oSplChild1, oSplChild2)
{
  // Private

  var pane1, pane2, splW, splH;
  var splEle, barPos, barLim1, barLim2, barEle;

  function barOnDrag(ele, dx, dy)
  {
    var bp;
    if (bHorizontal)
    {
        bp = barPos + dx;
        if (bp < barLim1 || bp > splW - barLim2) { return; }
        xWidth(pane1, xWidth(pane1) + dx);
        xLeft(barEle, xLeft(barEle) + dx);
        xWidth(pane2, xWidth(pane2) - dx);
        xLeft(pane2, xLeft(pane2) + dx);
        barPos = bp;
    }
    else
    {
        bp = barPos + dy;
        if (bp < barLim1 || bp > splH - barLim2) { return; }
        xHeight(pane1, xHeight(pane1) + dy);
        xTop(barEle, xTop(barEle) + dy);
        xHeight(pane2, xHeight(pane2) - dy);
        xTop(pane2, xTop(pane2) + dy);
        barPos = bp;
    }
    if (oSplChild1) { oSplChild1.paint(xWidth(pane1), xHeight(pane1)); }
    if (oSplChild2) { oSplChild2.paint(xWidth(pane2), xHeight(pane2)); }
  }

  
  // Public

  this.paint = function(uNewW, uNewH, uNewBarPos, uNewBarLim1, uNewBarLim2) // uNewBarPos and uNewBarLim are optional
  {    
    if (uNewW == 0) { return; }
    var w1, h1, w2, h2;
    splW = uNewW;
    splH = uNewH;
    barPos = uNewBarPos || barPos;
    barLim1 = uNewBarLim1 || barLim1;
    barLim2 = uNewBarLim2 || barLim2;
    xMoveTo(splEle, uSplX, uSplY);
    xResizeTo(splEle, uNewW, uNewH);
    if (bHorizontal)
    {
      w1 = barPos;
      h1 = uNewH - 2 * uSplBorderW;
      w2 = uNewW - w1 - uBarW - 2 * uSplBorderW;
      h2 = h1;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, w1, 0);
      xResizeTo(barEle, uBarW, h1);
      xMoveTo(pane2, w1 + uBarW, 0);
      xResizeTo(pane2, w2, h2);
    }
    else
    {
      w1 = uNewW - 2 * uSplBorderW;;
      h1 = barPos;
      w2 = w1;
      h2 = uNewH - h1 - uBarW - 2 * uSplBorderW;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, 0, h1);
      xResizeTo(barEle, w1, uBarW);
      xMoveTo(pane2, 0, h1 + uBarW);
      xResizeTo(pane2, w2, h2);
    }
    if (oSplChild1)
    {
      pane1.style.overflow = 'hidden';
      oSplChild1.paint(w1, h1);
    }
    if (oSplChild2)
    {
      pane2.style.overflow = 'hidden';
      oSplChild2.paint(w2, h2);
    }
  };

  // Constructor
  splEle = xGetElementById(sSplId); // we assume the splitter has 3 DIV children and in this order:
  pane1 = xFirstChild(splEle, 'DIV');
  pane2 = xNextSib(pane1, 'DIV');
  barEle = xNextSib(pane2, 'DIV');
  //  --- slightly dirty hack
  pane1.style.zIndex = 2;
  pane2.style.zIndex = 2;
  barEle.style.zIndex = 1;
  // ---
  barPos = uBarPos;
  barLim1 = uBarLimit1;
  barLim2 = uBarLimit2;
  
  this.paint(uSplW, uSplH);
  if (bBarEnabled)
  {
    xEnableDrag(barEle, null, barOnDrag, null);
    barEle.style.cursor = bHorizontal ? 'e-resize' : 'n-resize';
  }
  splEle.style.visibility = 'visible';

} // end xSplitter

// xSplitter Application

var s8, s81;

/*
  Note:
  Calling xAddEventListener before window.onload means that you must include
  the xAddEventListener source code "before" this application code.
*/

xAddEventListener(window, 'load', win_onload, false);

function win_onload()
{
  var w = xClientWidth();
  var h = xClientHeight()-51; 


                   // sSplId,  X, Y, W, H, Horz , BarW, BarPos, BarLim1, BarLim2, BarEn, BorW, oSplChild1, oSplChild2

  
  s81 = new xSplitter('xsp81', 0, 0, 0, 0, true, 5,    300,      240,      20,     true,  0, null);
  s8 = new xSplitter('xsp8'  , 0, 0, w, h, true, 5,    160,      90,   w-160,     true,  0, null, s81);

  xAddEventListener(window, 'resize', win_onresize, false);
};

function win_onresize()
{
  var w = xClientWidth();
  var h = xClientHeight()-51; 
  
  s81.paint(w, h, null, 240, 20);
  s8.paint(w, h, null, 90, w-160);
  
}

//  END SCRIPT



I'm looking forward to your reply although I know I'm asking a lot because the script is a little bit old.

I promise you when I can get the id of the xsplitterbar and the value, I update this script with the cookie functionality and send it back to you!

Thanks a lot!

Last edited by MikeFoster (August 18, 2010 9:01:21 pm)

Offline

 

#14 August 18, 2010 9:01:54 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

FYI. I put your code post in a code block.

Offline

 

#15 August 18, 2010 9:06:53 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

I'm only talking about xSplitter - not xEnableDrag. My recent change was only in the xSplitter code. I see you have xSplitter r3. Go here: xSplitter, copy the source of the new rev, paste it in place of the r3 version you have, and see if it works smile

Offline

 

#16 August 19, 2010 5:48:37 am

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

Hi Mike,

It's working!!!! Thanks a lot!!!

You were right about xEnableDrag, it's also possible with xEnableDrag, I made a workaround for it. But you're solution is better so I implemented r5 of xsplitter and now it's working also the cookies!!

Now it's working I want to find out why when you drag the bar over a hyperlink or an image and even over text, IE won't call the 'mouseup' event Firefox, Opera and Chrome are perfect but IE 6,7 and 8 working with hickups and when you release the button on a blank piece of your website there is no problem. Javascripts were also a problem but I fixed it with the z-index: -2 option in the DIV of that javascript! Unfortunately z-index doesn't work for the problem with img, hyperlinks, text en backgroundimages in IE.

I'm looking forward to your pro solution! Because you're a real JS pro! ;-) 

here is the code with the cookies!!

// xSplitter r5, Copyright 2006-2010 Michael Foster (Cross-Browser.com)
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xSplitter(sSplId, uSplX, uSplY, uSplW, uSplH, bHorizontal, uBarW, uBarPos, uBarLimit1, uBarLimit2, bBarEnabled, uSplBorderW, oSplChild1, oSplChild2)
{
  // Private

  var pane1, pane2, splW, splH, splEle, barPos, barLim1, barLim2, barEle, deFn;

  function barOnDrag(ele, dx, dy)
  {
    var bp;
    iFrameVis(false);
    if (bHorizontal) {
        bp = barPos + dx;
        if (bp < barLim1 || bp > splW - barLim2) { return; }
        xWidth(pane1, xWidth(pane1) + dx);
        xLeft(barEle, xLeft(barEle) + dx);
        xWidth(pane2, xWidth(pane2) - dx);
        xLeft(pane2, xLeft(pane2) + dx);
        barPos = bp;
    }
    else {
        bp = barPos + dy;
        if (bp < barLim1 || bp > splH - barLim2) { return; }
        xHeight(pane1, xHeight(pane1) + dy);
        xTop(barEle, xTop(barEle) + dy);
        xHeight(pane2, xHeight(pane2) - dy);
        xTop(pane2, xTop(pane2) + dy);
        barPos = bp;
    }
    if (oSplChild1) { oSplChild1.paint(xWidth(pane1), xHeight(pane1)); }
    if (oSplChild2) { oSplChild2.paint(xWidth(pane2), xHeight(pane2)); }
  }

  function barOnDragEnd(ele)
  {
    iFrameVis(true);
    if (deFn) deFn(splEle, barPos);
   
    alert(splEle.id +' '+ barPos);
    setCookie(splEle.id,barPos,30);
  }

  function iFrameVis(show)
  {
    var i;
    i = xFirstChild(pane1, 'iframe');
    if (i) {
      i.style.display = show ? 'block' : 'none';
    }
    i = xFirstChild(pane2, 'iframe');
    if (i) {
      i.style.display = show ? 'block' : 'none';
    }
  }
 


  // --------------- SETCOOKIE FUNCTION ------------------------------------



  function setCookie(c_name,value,expiredays)
  {
     var exdate=new Date();
     exdate.setDate(exdate.getDate()+expiredays);
     document.cookie=c_name+ "=" +escape(value)+
     ((expiredays==null) ? "" : ";expires="+exdate.toUTCString()+" path=/");
  }

  // Public
 

  this.setDragEnd = function(fn) { deFn = fn; };

  this.paint = function(uNewW, uNewH, uNewBarPos, uNewBarLim1, uNewBarLim2) // uNewBarPos and uNewBarLim are optional
  {
    var w1, h1, w2, h2;
    if (uNewW == 0) { return; }
    iFrameVis(false);
    splW = uNewW;
    splH = uNewH;
    barPos = uNewBarPos || barPos;
    barLim1 = uNewBarLim1 || barLim1;
    barLim2 = uNewBarLim2 || barLim2;
    xMoveTo(splEle, uSplX, uSplY);
    xResizeTo(splEle, uNewW, uNewH);
    if (bHorizontal) {
      w1 = barPos;
      h1 = uNewH - 2 * uSplBorderW;
      w2 = uNewW - w1 - uBarW - 2 * uSplBorderW;
      h2 = h1;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, w1, 0);
      xResizeTo(barEle, uBarW, h1);
      xMoveTo(pane2, w1 + uBarW, 0);
      xResizeTo(pane2, w2, h2);
    }
    else {
      w1 = uNewW - 2 * uSplBorderW;;
      h1 = barPos;
      w2 = w1;
      h2 = uNewH - h1 - uBarW - 2 * uSplBorderW;
      xMoveTo(pane1, 0, 0);
      xResizeTo(pane1, w1, h1);
      xMoveTo(barEle, 0, h1);
      xResizeTo(barEle, w1, uBarW);
      xMoveTo(pane2, 0, h1 + uBarW);
      xResizeTo(pane2, w2, h2);
    }
    if (oSplChild1) {
      pane1.style.overflow = 'hidden';
      oSplChild1.paint(w1, h1);
    }
    if (oSplChild2) {
      pane2.style.overflow = 'hidden';
      oSplChild2.paint(w2, h2);
    }
    iFrameVis(true);
  };

  // Constructor

  splEle = xGetElementById(sSplId); // we assume the splitter has 3 DIV children and in this order:
  pane1 = xFirstChild(splEle, 'DIV');
  pane2 = xNextSib(pane1, 'DIV');
  barEle = xNextSib(pane2, 'DIV');
  //  --- slightly dirty hack
  pane1.style.zIndex = 2;
  pane2.style.zIndex = 2;
  barEle.style.zIndex = 1;
  // ---
  barPos = uBarPos;
  barLim1 = uBarLimit1;
  barLim2 = uBarLimit2;
  this.paint(uSplW, uSplH);
  if (bBarEnabled) {
    xEnableDrag(barEle, null, barOnDrag, barOnDragEnd);
    barEle.style.cursor = bHorizontal ? 'e-resize' : 'n-resize';
  }
  splEle.style.visibility = 'visible';

} // end xSplitter

// xSplitter Application

var s8, s81;

/*
  Note:
  Calling xAddEventListener before window.onload means that you must include
  the xAddEventListener source code "before" this application code.
*/



//-----------------GETCOOKIE FUNCTION -----------------------------




function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}

var barPosition;

if(getCookie('xsp81')==''){
     barPos81 = parseInt(300);
}else{     
     barPos81 = parseInt(getCookie('xsp81'));
}

if(getCookie('xsp8')==''){
     barPos8 = parseInt(160);
}else{     
     barPos8 = parseInt(getCookie('xsp8'));
}

xAddEventListener(window, 'load', win_onload, false);

function win_onload()
{
  var w = xClientWidth();
  var h = xClientHeight()-51; //was 74
                   // sSplId,  X, Y, W, H, Horz , BarW, BarPos, BarLim1, BarLim2, BarEn, BorW, oSplChild1, oSplChild2
 
  s81 = new xSplitter('xsp81', 0, 0, 0, 0, true, 5,    barPos81,      240,      20,     true,  0, null);
  s8 = new xSplitter('xsp8'  , 0, 0, w, h, true, 5,    barPos8,      90,   w-160,     true,  0, null, s81);

  xAddEventListener(window, 'resize', win_onresize, false);
};

function win_onresize()
{
  var w = xClientWidth();
  var h = xClientHeight()-51;
 
  s81.paint(w, h, null, 240, 20);
  s8.paint(w, h, null, 90, w-160);
 
}

Last edited by MikeFoster (August 19, 2010 11:21:52 am)

Offline

 

#17 August 19, 2010 11:22:07 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Hey, that's great! Glad to hear of your success smile

I'll be thinking about the problem you mentioned with IE.

btw, I enclosed the code in your last post in a code block. Just a friendly reminder, it makes it easier for others who are browsing thru this thread. When you have a good bit of code to post just enclose it inside these tags:
[code]
...code here...
[/code]

This will preserve indentation, newlines, etc.

ttyl

Offline

 

#18 August 20, 2010 2:39:05 pm

Johnny
Member
Registered: July 3, 2009
Posts: 12

Re: [xSplitter] 3 resizable columns

That's OK. Next time when I post a piece of code I will use the code tags

Is there any progress with IE mouse-up 'bug'?

Have nice weekend!

Offline

 

#19 August 20, 2010 11:18:10 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xSplitter] 3 resizable columns

Thanks, Johnny. I hope you have a nice weekend too.

No, sorry, I haven't done anything on the IE drag issue. When I get a little spare time to spend on this site or the X Library I try to divide it fairly between different user requests - so I will probably be taking a look at xFenster next - and there are several things that need to be done to the core library functions as well.

xEnableDrag is quite old - I've often thought that it needs to be rewritten to utilize native drag events in browsers that support them. When I get a chance to come back to this, that is probably the approach I'll take.

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load