Solved

Vertical separator that can move

Posted on 2004-08-03
18
350 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
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…

747 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

7 Experts available now in Live!

Get 1:1 Help Now