Bounding a Resizable Table

bgraphics2031

12 New Member

Hey everyone, thanks for your previous help. My new problem is trying bound this table in Firefox so when you resize via the middle bar it doesn't resize to the right to infinity. Basically, I want these two cells to resize within the screen and not past the right edge of the screen. If you resize to the left, it works perfect and I just need the right to do the same. I hope I explained it well, let me know if anyone needs more clarification.

Here's the code:

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title> Dynamic Table </title>

<style type="text/css">

#DragColumn_0

{

     position:relative;

     z-index:5;

}
 
#ContentColumn_1

{

     border: solid 1px black;

     position:absolute;

     overflow:hidden;

     background-color: #eaf4f3; 

     z-index:10

}
 
#DragColumn_1

{

     position:absolute;

     cursor:e-resize;

     z-index:11;

}
 
#ContentColumn_2

{

     border: solid 1px black;

     position:absolute;

     overflow:hidden;

     background-color: #eaf4f3; 

     z-index:10

}
 
#DragColumn_2

{

     position:absolute;

     cursor:e-resize;

     z-index:11;

}

</style>
 
<script type="text/javascript">
 
window.onload = function()

{

     PageSetup();

}
 
// global constants

var ZERO_AMOUNT = 0;

var ONE_MILLISECOND = 1;

var SIX_MILLISECONDS = 6;
 
// global variables

var _xMousePosition = 0;

var _yMousePosition = 0;

var _mouseButtonDown = false;
 
// event handlers

function MouseMoveHandler(event) {

     var e = event || window.event;

     _xMousePosition = e.clientX + document.body.scrollLeft;

     _yMousePosition = e.clientY + document.body.scrollTop;

}
 
function MouseDownHandler(event) {

     var e = event || window.event;

     var elementID = e.srcElement ? e.srcElement.id : e.target.id;

     var columnIndexValue = elementID.slice(elementID.length-1, elementID.length);

     _mouseButtonDown=true;

     ChangeColumnWidth(columnIndexValue);

}
 
function MouseUpHandler(event){

     var e = event || window.event;

     _mouseButtonDown = false;

     var cursorResetFunctionCall = 'document.body.style.cursor = ""';

     window.setTimeout(cursorResetFunctionCall, SIX_MILLISECONDS);

}
 
function PageSetup()

{

     document.onmousemove = MouseMoveHandler;

     document.onmouseup = MouseUpHandler;
 
     var drag0 = document.getElementById("DragColumn_0");

     var drag1 = document.getElementById("DragColumn_1");

     var drag2 = document.getElementById("DragColumn_2");

     var column1 = document.getElementById("ContentColumn_1");

     var column2 = document.getElementById("ContentColumn_2");

     var colWidth1 = _columnWidthSettings[1];

     var colWidth2 = _columnWidthSettings[2];
 
     drag0.style.left = TABLE_LEFT + "px";

     drag0.style.top = TABLE_TOP + "px";

     drag0.style.height = TABLE_HEIGHT + "px";
 
     column1.style.left = TABLE_LEFT + "px";

     column1.style.width = colWidth1 + "px";

     column1.style.top = TABLE_TOP + "px";

     column1.style.height = TABLE_HEIGHT + "px";
 
     drag1.style.left = (TABLE_LEFT + colWidth1) + "px";

     drag1.style.width = DRAG_WIDTH + "px";

     drag1.style.top = TABLE_TOP + "px";

     drag1.style.height = TABLE_HEIGHT + "px";

     drag1.onmousedown=MouseDownHandler;
 
     column2.style.left = (TABLE_LEFT + colWidth1 + DRAG_WIDTH) + "px";

     column2.style.width = colWidth2 + "px";

     column2.style.top = TABLE_TOP + "px";

     column2.style.height = TABLE_HEIGHT + "px";
 
     drag2.style.left = (TABLE_LEFT + colWidth1 + DRAG_WIDTH + colWidth2) + "px";

     drag2.style.width = DRAG_WIDTH + "px";

     drag2.style.top = TABLE_TOP + "px";

     drag2.style.height = TABLE_HEIGHT + "px";

     drag2.onmousedown=MouseDownHandler;

}
 
function ChangeColumnWidth(columnIndexValue){

     //alert("You reached to the top of the ChangeColumnWidth method!");

     var columnIndex = parseInt(columnIndexValue);
 
     if(columnIndex >= 0){

          document.body.style.cursor = "e-resize";
 
          var previousDragColumn = document.getElementById("DragColumn_" + (columnIndex-1));

          var currentDragColumn = document.getElementById("DragColumn_" + columnIndex);

          var currentContentColumn = document.getElementById("ContentColumn_" + columnIndex);
 
          var leftString = previousDragColumn.style["left"] ? previousDragColumn.style["left"]:previousDragColumn.currentStyle["left"];
 
          var previousDragLeftColumnPosition = parseInt(leftString.slice(0,leftString.length-2));

          var previousDragRightColumnPosition;

          if(columnIndex > 1)

          {

               previousDragRightColumnPosition = previousDragLeftColumnPosition + DRAG_WIDTH;

          }

          else

          {

               previousDragRightColumnPosition = previousDragLeftColumnPosition;

          }
 
          var distanceFromMouseToPreviousColumn = _xMousePosition - (previousDragRightColumnPosition);

          var dragColumnLeftPosition = 0;
 
          if(distanceFromMouseToPreviousColumn < MINIMUM_ALLOWED_WIDTH)

          {

               _columnWidthSettings[columnIndex] = MINIMUM_ALLOWED_WIDTH;

               dragColumnLeftPosition = previousDragLeftColumnPosition + MINIMUM_ALLOWED_WIDTH;

          }

          else

          {

               _columnWidthSettings[columnIndex] = distanceFromMouseToPreviousColumn;

               dragColumnLeftPosition = _xMousePosition;

          }
 
          currentContentColumn.style.width = (_columnWidthSettings[columnIndex]) + "px";

          currentDragColumn.style.left = dragColumnLeftPosition + "px";

          currentDragColumn.style.width = DRAG_WIDTH + "px";
 
          for(iteration=(columnIndex+1); iteration<_columnWidthSettings.length; iteration++)

          {

               var nextDragColumn = document.getElementById("DragColumn_" + iteration);

               var nextContentColumn = document.getElementById("ContentColumn_" + iteration);
 
               nextContentColumn.style.left = (dragColumnLeftPosition + DRAG_WIDTH) + "px";

               nextContentColumn.style.width = _columnWidthSettings[iteration] + "px";

               nextDragColumn.style.left = (dragColumnLeftPosition + DRAG_WIDTH + _columnWidthSettings[iteration]) + "px";

               nextDragColumn.style.width = DRAG_WIDTH + "px";
 
               dragColumnLeftPosition += DRAG_WIDTH + _columnWidthSettings[iteration];

          }
 
     }
 
     var recursiveFunctionCall = "ChangeColumnWidth('"+columnIndex+"')";
 
     if(_mouseButtonDown)

     {

          window.setTimeout(recursiveFunctionCall, ONE_MILLISECOND);

     }

}
 
// CUSTOMIZABLE LAYOUT SETTINGS - FEEL FREE TO MODIFY THESE.

var MINIMUM_ALLOWED_WIDTH = 30;

var MINIMUM_ALLOWED_HEIGHT = 30;

var TABLE_LEFT = 0;

var TABLE_TOP = 0;

var TABLE_HEIGHT = window.innerHeight;

var DRAG_WIDTH = 1;

var halfscreenwidth = document.documentElement.clientWidth/2;

var _columnWidthSettings = new Array(0, halfscreenwidth, halfscreenwidth);
 
</script>

</head>
 
<body>
 
<div id="DragColumn_0"></div>

<div id="ContentColumn_1" align=center valign=middle><iframe frameborder="0" src="" width=40% height=100%></iframe></div>

<div id="DragColumn_1"></div>

<div id="ContentColumn_2" align=center valign=middle><iframe frameborder="0" src="" width=40% height=100%></iframe></div>

<div id="DragColumn_2"></div>
 
</body>

</html>

May 24 '07 #1

Subscribe Reply

1507

acoder

16,027

Recognized Expert Moderator MVP

This viewport link may help.

Jan 29 '08 #2

Similar topics

1935

TTF text bounding box problem (imagettftext)

by: ljb | last post by:

Using PHP-4.3.11 with GD extension, bundled GD library, and freetype-2.1.9 (with X.org 6.8.1). I can't get the TrueType Font (TTF) bounding box to come out right. Whether using imagettftext() or imagettfbbox(), for some angles of text (like 45 degrees), the box comes back in the wrong place. Sample code below; just change the $font assignment to point to a TTF font file. You should see a text string with a box around it, but my box isn't...

PHP

2287

Bounding box on clusters in a 2D list

by: superprad | last post by:

If I have ex: x = , , , ] what I want is a boundingbox over the region where we find clusters of 1's.So for instance in the above list first 3 roes and colums have 1's so the area of that box is 3x3 so my final array should have an array of approx areas of clusters of

Python

2603

Create bounding box for image processing in C#

by: nor | last post by:

Hi, I’m doing a project to recognize shape of object. I had completed filtering part and now I’m starting for recognition part. First, I want to create bounding box of the object in the image so the bounding box will appear automatically around the object detected in the image. However, I'm stuck in the process. Any body could help me please… :o I’m doing the programming in C#.

.NET Framework

16975

Resizable, sortable, findable and scrollable HTML table

by: since | last post by:

I figured I would post my solution to the following. Resizable column tables. Search and replace values in a table. (IE only) Scrollable tables. Sortable tables. It is based on a lot examples I found on the web. Works in IE and mozilla. http://www.imaputz.com/cssStuff/bigFourVersion.html

Javascript

9647

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10356

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10098

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9958

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

6743

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5390

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5523

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3662

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2890

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General