• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 378
  • Last Modified:

Vertical separator that can move

Hi Experts,

I have 2 tables and want a vertical separator between them.
This separator could work as a frame and resize those tables when it moves.

Hope it's possible instead of using frameset.

Thanks in advance for your answers.
0
noulouk
Asked:
noulouk
  • 8
  • 7
  • 3
2 Solutions
 
ZylochCommented:
You could use iframes:

<iframe name="firstTable" src="htmlFileWithTable.html" width="100" height="100">You must have Iframes to view</iframe>
<iframe name="secondTable" src="htmlFileWithTable2.html" width="100" height="100">You must have Iframes to view</iframe>

If course, this is similar to framesets so might not be what you're looking for. The other option would be to build a custom <div> tag that has five parts. Two sides, two bottoms, and a middle one for the table. The border divs when clicked and dragged would move the whole div. This is complicated by the <table> but tell us if that's your route.

Regards,
${Zyloch}
0
 
dakydCommented:
How about something like this?  The tables re-size based on the position of the "vertical separator", which in this case is just a blank image.  You can make it whatever you like.  Hope that helps.

<html>
<head>
<script type="text/javascript">
var mark = false;
function setMark()
{
  mark = true;
}

function clearMark()
{
  mark = false;
}

function moveDivider(e)
{
  if (mark)
  {
    var x = window.event? window.event.x: e.clientX;
    var total = window.innerWidth? parseInt(window.innerWidth): parseInt(screen.availWidth);
    var percent = x/total * 100;
    document.getElementById("theImg").style.left = percent + "%";
    var tbl1 = document.getElementById("table1");
    tbl1.style.width = (percent-0.5) + "%";
    var tbl2 = document.getElementById("table2");
    tbl2.style.width = (100-percent) + "%";
    tbl2.style.left = (percent+0.5) + "%";
  }
}

document.onmousemove = moveDivider;
</script>
</head>

<body>
<table id="table1" style="width: 49%; position: absolute; left: 0%;">
  <tr><td>Cell 0 in Table 1</td></tr>
  <tr><td>Cell 1 in Table 1</td></tr>
</table>

<img id="theImg" src="" style="position: absolute; left: 49.5%; height: 100%; width: 1%;"

onmousedown="setMark()" onmouseup="clearMark()" />

<table id="table2" style="width: 49%; position: absolute; left: 50.5%;">
  <tr><td>Cell 0 in Table 2</td></tr>
  <tr><td>Cell 1 in Table 2</td></tr>
</table>
</body>
</html>
0
 
nouloukAuthor Commented:
That code helps me very much dakyd. Thanks.
But an error appears when I move the separator to the left border of my browser. Could you help me again ?

And also, I can't move the separator when the mouse is down. I must use mouse down, then mouse up and finally I can move the separator and click to stop moving it, instead of mouse down, move and mouse up to stop moving it.

Zyloch, thanks for your help, but I ask the question because I don't want to use frameset.
0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
dakydCommented:
The error is because I tried to set a small padding between the image and the left hand table.  When you move all the way to the left, it tried to set the width of the left-hand table to -0.5%, which is obviously bad.  I fixed that below.

The mouse behavior you're seeing is very strange, it seems to be confined to IE only.  I have to step away from my computer for a bit, but I will look into when I get back.

<html>
<head>
<script type="text/javascript">
var mark = false;
var obj = null;
function setMark(img)
{
  mark = true;
  obj = img;
}

function clearMark()
{
  mark = false;
  obj = null;
}

function moveDivider(e)
{
  if (mark)
  {
    var x = window.event? event.clientX: e.pageX;
    var total = window.innerWidth? parseInt(window.innerWidth): parseInt(screen.availWidth);
    var percent = x/total * 100;
    if (percent < 0.5)
      percent = 0.5;
    if (percent > 99.5)
      percent = 99.5;
    obj.style.left = percent + "%";
    var tbl1 = document.getElementById("table1");
    tbl1.style.width = (percent-0.5) + "%";
    var tbl2 = document.getElementById("table2");
    tbl2.style.width = (100-percent) + "%";
    tbl2.style.left = (percent+0.5) + "%";
  }
}

document.onmousemove = moveDivider;
</script>
</head>

<body>
<table id="table1" style="width: 49%; position: absolute; left: 0%;">
  <tr><td>Cell 0 in Table 1</td></tr>
  <tr><td>Cell 1 in Table 1</td></tr>
</table>

<img id="theImg" src="" style="position: absolute; left: 49.5%; height: 100%; width: 1%;"

onmousedown="setMark(this)" onmouseup="clearMark()" />

<table id="table2" style="width: 49%; position: absolute; left: 50.5%;">
  <tr><td>Cell 0 in Table 2</td></tr>
  <tr><td>Cell 1 in Table 2</td></tr>
</table>
</body>
</html>
0
 
ZylochCommented:
Which browser are you using?
0
 
ZylochCommented:
Ooops, stale window, sorry dakyd.
0
 
nouloukAuthor Commented:
I try the code with IE and opera and have the same trouble.I'll try on Mozilla.
0
 
ZylochCommented:
I tried the code on Mozilla. It seemed fine.
0
 
nouloukAuthor Commented:
Yes, works fine in Mozilla, Could you make it work for IE ?
0
 
ZylochCommented:
Is the problem you're having still the error code, or is it the onmousedown, onmouseup thing
0
 
nouloukAuthor Commented:
Sorry,this is the onmousedown,onmouseup problem.
The error is solved in ie now.
0
 
dakydCommented:
Okay, figured it out.  IE was firing one of its propietary events, ondrag, and that screwed with the dragging.  You can use the script below, sorry for the delay.

<html>
<head>
<script type="text/javascript">
var obj = null;
var total = window.innerWidth? parseInt(window.innerWidth): parseInt(screen.availWidth);

function setMark(img)
{
  obj = img;
}

function clearMark()
{
  obj = null;
}

function moveDivider(e)
{
  if (obj)
  {
    var x = window.event? event.clientX: e.pageX;
    var percent = x/total * 100;
    if (percent < 0.5)
      percent = 0.5;
    if (percent > 99.5)
      percent = 99.5;
    obj.style.left = percent + "%";
    var tbl1 = document.getElementById("table1");
    tbl1.style.width = (percent-0.5) + "%";
    var tbl2 = document.getElementById("table2");
    tbl2.style.width = (100-percent) + "%";
    tbl2.style.left = (percent+0.5) + "%";
  }
}

document.onmousemove = moveDivider;
</script>
</head>

<body>
<table id="table1" style="width: 49%; position: absolute; left: 0%;">
  <tr><td>Cell 0 in Table 1</td></tr>
  <tr><td>Cell 1 in Table 1</td></tr>
</table>

<img id="theImg" src="img10.jpg" style="position: absolute; left: 49.5%; height: 100%; width: 1%;
z-index: 1;" onmousedown="setMark(this)" onmouseup="clearMark()" ondrag="return false;"/>

<table id="table2" style="width: 49%; position: absolute; left: 51%;">
  <tr><td>Cell 0 in Table 2</td></tr>
  <tr><td>Cell 1 in Table 2</td></tr>
</table>

</body>
</html>
0
 
nouloukAuthor Commented:
Thanks follow this link if you want to help me again and define a minimum left margin:
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21081334.html
0
 
nouloukAuthor Commented:
Post a comment to this question if you want me to grade you more.
http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/ASP_DOT_NET/Q_21080830.html

Thanks again.
0
 
ZylochCommented:
Unfortunately and fortunately depending on how you look at it, we can't accept more than 500 points per question. You should ask for a refund on that question.
0
 
nouloukAuthor Commented:
Hi, I'm really sorry: I have tested the code today and there is a troubleshouting with Netscape. I was very surprised because it works fine with Mozilla !!!

In Netscape, table2 stays on the left side and doesn't move with the splitter.
If you want I can open a new question.

Thanks for helping me.
0
 
ZylochCommented:
What Netscape version?
0
 
nouloukAuthor Commented:
The last 7.02
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

  • 8
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now