Solved

Vertical separator that can move

Posted on 2004-08-03
18
351 Views
Last Modified: 2008-03-10
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
Comment
Question by:noulouk
  • 8
  • 7
  • 3
18 Comments
 
LVL 36

Expert Comment

by:Zyloch
ID: 11707105
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
 
LVL 19

Expert Comment

by:dakyd
ID: 11707191
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
 
LVL 9

Author Comment

by:noulouk
ID: 11708770
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
 
LVL 19

Expert Comment

by:dakyd
ID: 11709050
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11709058
Which browser are you using?
0
 
LVL 36

Expert Comment

by:Zyloch
ID: 11709062
Ooops, stale window, sorry dakyd.
0
 
LVL 9

Author Comment

by:noulouk
ID: 11709209
I try the code with IE and opera and have the same trouble.I'll try on Mozilla.
0
 
LVL 36

Assisted Solution

by:Zyloch
Zyloch earned 20 total points
ID: 11709218
I tried the code on Mozilla. It seemed fine.
0
 
LVL 9

Author Comment

by:noulouk
ID: 11709300
Yes, works fine in Mozilla, Could you make it work for IE ?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 36

Expert Comment

by:Zyloch
ID: 11709467
Is the problem you're having still the error code, or is it the onmousedown, onmouseup thing
0
 
LVL 9

Author Comment

by:noulouk
ID: 11709520
Sorry,this is the onmousedown,onmouseup problem.
The error is solved in ie now.
0
 
LVL 19

Accepted Solution

by:
dakyd earned 480 total points
ID: 11711104
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
 
LVL 9

Author Comment

by:noulouk
ID: 11711190
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
 
LVL 9

Author Comment

by:noulouk
ID: 11749046
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11749195
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
 
LVL 9

Author Comment

by:noulouk
ID: 11777709
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
 
LVL 36

Expert Comment

by:Zyloch
ID: 11778494
What Netscape version?
0
 
LVL 9

Author Comment

by:noulouk
ID: 11778593
The last 7.02
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now