[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14
6
Medium Priority
?
236 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Restore individual SQL databases with ease

Veeam Explorer for Microsoft SQL Server delivers an easy-to-use, wizard-driven interface for restoring your databases from a backup. No expert SQL background required. Web interface provides a complete view of all available SQL databases to simplify the recovery of lost database

Question has a verified solution.

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

This article provides a case study on how our local youth baseball league deployed a new website, including the platform selection, implementation and benefits to the league.
Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses
Course of the Month18 days, 19 hours left to enroll

834 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