Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14
6
230 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
  • 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
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 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 500 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

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

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-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
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)

717 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