Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14
6
224 Views
Last Modified: 2013-12-16
Hi Experts,

Here is my first script:
<html>
<head>
</head>
<body>
<form>
<input type=text name="__SPLITTERLOC">
<table style="width:300px;border:1px solid #000000;position:relative;" cellspacing="0" cellpadding="0" id="tbl">
     <tr >
          <td id="f1">test data</td>
      <td width="6" rowspan="11" height="100%" id="mid"
       style="cursor:w-resize;" bgColor="black"
       onmousedown="bResize=true;">&nbsp;</td>
          <td id="f2">more test data</td>
     </tr>
     <tr>
          <td id="f1">test data</td>
          <td id="f2">more test data</td>
     </tr>
     <tr>
          <td id="f1">test data</td>
          <td id="f2">more test data</td>
     </tr>
</table>
</form>
<script language='javascript'>
bResize = false;
c1      = document.getElementById('f1');
c2      = document.getElementById('f2');
ttbl    = document.getElementById('tbl');
tmid    = document.getElementById('mid');
function resize(e){
     if(!bResize) return false;
     c1.className=c2.className='highlighted';
     if(!e) e=event;
     var w=e.clientX-ttbl.offsetLeft-5;
       if(w<ttbl.offsetWidth*.2) w=tbl.offsetWidth*.2;
       if(w>ttbl.offsetWidth*.8) w=tbl.offsetWidth*.8;
     c1.style.width=w;
     return false;
}
function up(){
     bResize = false;
     document.forms[0].__SPLITTERLOC.value =c1.style.width;
     c1.className=c2.className='normal';
}
document.onmousemove = resize;
document.onmouseup   = up;
</script>
</body>
</html>

Here is the second part to include with the first code:
<script>
var thePanel;
var sX, sY;

function drag(e, theBar){
  thePanel = theBar.parentNode;
  while(thePanel.nodeName!="DIV"){
    thePanel = thePanel.parentNode;
  }
  sX = e.clientX-parseInt(thePanel.offsetLeft);
  sY = e.clientY-parseInt(thePanel.offsetTop);
  document.onmousemove=move;
}
function drop(){
  thePanel = null;
}
function move(e){
  if(thePanel){
    if(!e) e= event;
    thePanel.style.left = e.clientX-sX;
    thePanel.style.top = e.clientY-sY;
  }
}
</script>


<div id="PanelForm" nowrap="nowrap" style="background-color:#C0C0FF;height:130px;width:600px;Z-INDEX: 106; LEFT: 88px; POSITION: absolute; TOP: 416px">

                    <TABLE id="TablePanelForm" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0"
                         border="1">
                         <TR>
                              <TD id="cell1" style="WIDTH: 100%; HEIGHT: 1%; cursor: hand;" bgColor="aliceblue"
                                  onMouseDown="drag(event, this)" onMouseUp="drop()"></TD>
                              <TD style="HEIGHT: 1%" vAlign="top" align="right"><INPUT type="button" value="Button"></TD>
                         </TR>
                         <TR>
                              <TD colSpan="2"></TD>
                         </TR>
                    </TABLE>
               
</div>


Thanks in advance for helping me to group those code in an unique webpage.
0
Comment
Question by:noulouk
  • 3
  • 2
6 Comments
 
LVL 5

Expert Comment

by:darksinclair
Comment Utility
Are you asking that you want us to pull out which functions would work well with other webpages and pull them into a separate webpage that you could include on both for better functionality / Design?

Or are you asking us to optimize this code ...?
0
 
LVL 9

Author Comment

by:noulouk
Comment Utility
darksinclair, those 2 codes works in separate pages as you can see.
Code 1: a table with a divider
Code 2: a layer that can move
I want the table and the layer in the same webpage.

Hope you understand what I want.
0
 
LVL 8

Expert Comment

by:_aaron_
Comment Utility
Here you go:

<html>
<head>
<script language='javascript'>

bResize = false;
c1      = ""
c2      = ""
ttbl    = ""
tmid    = ""

function init()
{
   c1      = document.getElementById('f1');
   c2      = document.getElementById('f2');
   ttbl    = document.getElementById('tbl');
   tmid    = document.getElementById('mid');
   document.onmousemove = resize;
   document.onmouseup   = up;
}


function resize(e){
     if(!bResize) return false;
     c1.className=c2.className='highlighted';
     if(!e) e=event;
     var w=e.clientX-ttbl.offsetLeft-5;
       if(w<ttbl.offsetWidth*.2) w=tbl.offsetWidth*.2;
       if(w>ttbl.offsetWidth*.8) w=tbl.offsetWidth*.8;
     c1.style.width=w;
     return false;
}
function up(){
     bResize = false;
     document.forms[0].__SPLITTERLOC.value =c1.style.width;
     c1.className='normal'
     c2.className='normal';
}



var thePanel;
var sX, sY;

function drag(e, theBar){
  thePanel = theBar.parentNode;
  while(thePanel.nodeName!="DIV"){
    thePanel = thePanel.parentNode;
  }
  sX = e.clientX-parseInt(thePanel.offsetLeft);
  sY = e.clientY-parseInt(thePanel.offsetTop);
  document.onmousemove=move;
}
function drop(){
  thePanel = null;
}
function move(e){
  if(thePanel){
    if(!e) e= event;
    thePanel.style.left = e.clientX-sX;
    thePanel.style.top = e.clientY-sY;
  }
}

</script>
</head>
<body onload=init()>
<form>
<input type=text name="__SPLITTERLOC">
<table style="width:300px;border:1px solid #000000;position:relative;" cellspacing="0" cellpadding="0" id="tbl">
     <tr >
          <td id="f1">test data</td>
      <td width="6" rowspan="11" height="100%" id="mid"
       style="cursor:w-resize;" bgColor="black"
       onmousedown="bResize=true;">&nbsp;</td>
          <td id="f2">more test data</td>
     </tr>
     <tr>
          <td id="f1">test data</td>
          <td id="f2">more test data</td>
     </tr>
     <tr>
          <td id="f1">test data</td>
          <td id="f2">more test data</td>
     </tr>
</table>
</form>

<div id="PanelForm" nowrap="nowrap" style="background-color:#C0C0FF;height:130px;width:600px;Z-INDEX: 106; LEFT: 88px; POSITION: absolute; TOP: 416px">

                    <TABLE id="TablePanelForm" style="WIDTH: 100%; HEIGHT: 100%" cellSpacing="0" cellPadding="0"
                         border="1">
                         <TR>
                              <TD id="cell1" style="WIDTH: 100%; HEIGHT: 1%; cursor: hand;" bgColor="aliceblue"
                                  onMouseDown="drag(event, this)" onMouseUp="drop()"></TD>
                              <TD style="HEIGHT: 1%" vAlign="top" align="right"><INPUT type="button" value="Button"></TD>
                         </TR>
                         <TR>
                              <TD colSpan="2"></TD>
                         </TR>
                    </TABLE>

</div>

</body>
</html>



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 8

Expert Comment

by:_aaron_
Comment Utility
I used the init function so that the script didn't have to occur after the creation of the page elements ( very difficult to maintain otherwise + can get rather messy )... Pretty cool table slider - though having multiple id's with the same name is a bit of a concern -- but it works so obviously the browser(s) dont mind this too much ;-)

-- Aaron
0
 
LVL 9

Author Comment

by:noulouk
Comment Utility
Thanks Aaron, but I have a little problem.
The slider moves when you don't move the layer.
When I move the layer, then the slider doesn't move after.
0
 
LVL 8

Accepted Solution

by:
_aaron_ earned 500 total points
Comment Utility
Hello,

The problem was that the drag was assigning the document.onmousemove to a different event... All that needed to be done was to reset the action, ie change the 'drop' function as follows:

function drop(){
  thePanel = null;
  document.onmousemove=resize;
}
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

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-…
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

743 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

18 Experts available now in Live!

Get 1:1 Help Now