?
Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14
6
1 solution
Medium Priority
?
231 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
[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
Join The Community
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Take Survey Now!
 
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

WordPress Tutorial 1: Installation & Setup

WordPress is a very popular option for running your web site and can be used to get your content online quickly for the world to see. This guide will walk you through installing the WordPress server software and the initial setup process.

Read the Guide Now
Question has a verified solution.

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

Understanding JavaScript part - 1 (getting started)
Article by: d4durvesh
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Equal comparison operator vs Strict comparison operator - in JavaScript
Article by: Mrunal
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
How to Manually Back Up WordPress Database
Video by: Alex
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
Mailchimp Facebook Integration
Video by: Alex
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…
Advertise Here
Suggested Courses

752 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

Advertise Here