Solved

Vertical separator that can move

Posted on 2004-08-03
18
363 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
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
 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…
Suggested Courses

635 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