[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14
6
Medium Priority
?
237 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
ID: 12060680
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
ID: 12062367
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_
ID: 12062441
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
LVL 8

Expert Comment

by:_aaron_
ID: 12062459
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
ID: 12062916
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 2000 total points
ID: 12071907
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
Suggested Courses

612 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