[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 376
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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