Solved

Grouping scripts that works well in separate webpages

Posted on 2004-09-14

1 solution

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;"> </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.

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

6 Comments

LVL 5

Expert Comment

by:darksinclair

ID: 120606802004-09-14

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 ...?

LVL 9

Author Comment

by:noulouk

ID: 120623672004-09-15

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.

LVL 8

Expert Comment

by:_aaron_

ID: 120624412004-09-15

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;"> </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>

LVL 8

Expert Comment

by:_aaron_

ID: 120624592004-09-15

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

LVL 9

Author Comment

by:noulouk

ID: 120629162004-09-15

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.

LVL 8

Accepted Solution

by:_aaron_

_aaron_ earned 500 total points

ID: 120719072004-09-15

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;
}

Featured Post

Question has a verified solution.

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

Hex Maze

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-…

JavaScript

Bootstrap sequence for portable web applications

Article by: Roonaan

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…

JavaScript

Mailchimp WordPress Integration

Video by: Alex

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…

Introduction to jQuery (Part 1)

Video by: Jason

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)