?
Solved

How to?  Two instances of this DHTML script on the same page.

Posted on 2005-03-02
9
Medium Priority
?
308 Views
Last Modified: 2010-08-05
I can't figure this out.. got the script at Dynamicdrive.com
I want to run two complete instances of this script on the same page and
I can't seem to figure out how to do it. Getting confused with classes, css, etc....
This is way above my knowledge level at the present time but I still have to get it done.

This is the script.

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]

}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback2(){
partscollect[curpart].style.display="none"
curpart=0
partscollect[curpart].style.display="block"
updatenav()
}




function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>

In the body area I have:

<div class="multiparts" style="display: block">
<b><span style="position: absolute; left: 677; top: 837" id="Up1">
<textarea rows=4 cols=30 wrap=virtual name="upit1" size="93" style="font-size: 8pt; font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000; background-color: #000000"></textarea></span>
  </font></b></div>

   
<div class="multiparts" >
<span style="position: absolute; left: 677; top: 837" id="Up2">
<b><textarea rows=4 cols=30 wrap=virtual name="upit2" size="93" style="font-size: 8pt; font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000; background-color: #000000"></textarea></b></span></div>

etc......


And for the navigation buttons I use this:

<div id="formnavigation" style="width:95; display:none; height:34px; position:absolute; left:682px; top:896px">
<a id="backbutton" href="javascript:cycleback()" style="float:left">
<img src="images/arrow_on_mirror.gif" border="0" width="30" height="30"></a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">
<img src="images/arrow_on.gif" id='arrow' border="0" style="visibility:'hidden'" width="30" height="30"></a>
</div>

All works great with one instance of the script.
How can I change the above script so that I can get another complete script
and navigation buttons to work on another set of 'multiparts' textareas?






0
Comment
Question by:larrypjr
[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
  • 6
  • 3
9 Comments
 
LVL 6

Expert Comment

by:benwiggy
ID: 13443924
<div class="multiparts" style="display: block">
<b><span style="position: absolute; left: 677; top: 837" id="Up3">
<textarea rows=4 cols=30 wrap=virtual name="upit3" size="93" style="font-size: 8pt;

font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000;

background-color: #000000"></textarea></span>
  </font></b></div>

   
<div class="multiparts" >
<span style="position: absolute; left: 677; top: 837" id="Up4">
<b><textarea rows=4 cols=30 wrap=virtual name="upit4" size="93" style="font-size: 8pt;

font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000;

background-color: #000000"></textarea></b></span></div>
<div id="formnavigation2" style="width:95; display:none; height:34px; position:absolute;

left:682px; top:896px">
<a id="backbutton2" href="javascript:cycleback()" style="float:left">
<img src="images/arrow_on_mirror.gif" border="0" width="30" height="30"></a>
<a id="forwardbutton2" href="javascript:cycleforward()" style="float:right">
<img src="images/arrow_on.gif" id='arrow2' border="0" style="visibility:'hidden'" width="30"

height="30"></a>
0
 
LVL 6

Expert Comment

by:benwiggy
ID: 13443935
</div>

Sorry - missed the copy and paste - in a hurry.
0
 

Author Comment

by:larrypjr
ID: 13445064
Here is another version of it with your suggestion.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>script type=</title>


<script type="text/javascript">

/***********************************************
* Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]

}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback2(){
partscollect[curpart].style.display="none"
curpart=0
partscollect[curpart].style.display="block"
updatenav()
}




function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>




</head>

<body>
<body bgcolor="#000000">
<div class="multiparts" style="display: block">
<b><span style="position: absolute; left: 263; top: 49" id="Up1">
<textarea rows=4 cols=30 wrap=virtual name="upit1" size="93"
style="font-size: 8pt; font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000; background-color: #000000">UPIT 1</textarea></span>
  </font></b></div>

   
<div class="multiparts" >
<span style="position: absolute; left: 456; top: 47" id="Up2">
<b><textarea rows=4 cols=30 wrap=virtual name="upit2" size="93"
style="font-size: 8pt; font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000; background-color: #000000">UPIT2</textarea></b></span></div>




</p>

<div id="formnavigation" style="width:95; display:none; height:34px; position:absolute; left:143px; top:53px">
<a id="backbutton" href="javascript:cycleback()" style="float:left">
<img src="images/arrow_on_mirror.gif" border="0" width="30" height="30"></a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">
<img src="images/arrow_on.gif" id='arrow' border="0" style="visibility:'visible'" width="30" height="30"></a>
</div>

<div class="multiparts" style="display: block">
<b><span style="position: absolute; left: 268; top: 179" id="Up3">
<textarea rows=4 cols=30 wrap=virtual name="upit3" size="93" style="font-size: 8pt;
font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000;
background-color: #000000">UPIT 3</textarea></span></font></b></div>

   
<div class="multiparts" >
<span style="position: absolute; left: 461; top: 176" id="Up4">
<b><textarea rows=4 cols=30 wrap=virtual name="upit4" size="93" style="font-size: 8pt;
font-family: Arial; color: #00FF00; font-weight: bold; border: 0px solid #000000;
background-color: #000000">UPIT 4</textarea></b></span></div>


<div id="formnavigation2" style="width:95; display:none; height:34px; position:absolute;

left:142px; top:173px">
<a id="backbutton2" href="javascript:cycleback()" style="float:left">
<img src="images/arrow_on_mirror.gif" border="0" width="30" height="30"></a>
<a id="forwardbutton2" href="javascript:cycleforward()" style="float:right">
<img src="images/arrow_on.gif" id='arrow2' border="0" style="visibility:'visible'" width="30" height="30"></a>



</body>

</html>


What I was looking for was two complete setups on the same page
ex: 1 set of forward & back butons that control the display of upit1 and upit2
Another set of forward & Back buttons that control the display of upit 3 nad upit 4
and both sets residing on the same page.


Am I missing something here?

Larry
0
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 
LVL 6

Expert Comment

by:benwiggy
ID: 13448202
I'll have a proper look at the script for you in a couple of hours.
0
 
LVL 6

Expert Comment

by:benwiggy
ID: 13449084
Larry, have got it working, sorry to take so long!
<HTML>
<HEAD>
<TITLE>DD Script</TITLE>
<style type="text/css">
/*specify height of broken up content */
.multiparts{
height: 50px;
}

</style>

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}


function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function cycleforward2(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav2()
}

function cycleback2(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav2()
}


function updatenav2(){
document.getElementById("backbutton2").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton2").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

function onloadfunct2(){
getElementbyClass("multiparts2")
partscollect[0].style.display="block"
document.getElementById("formnavigation2").style.display="block"
updatenav2()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

if (window.addEventListener)
window.addEventListener("load", onloadfunct2, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct2)
else if (document.getElementById)
window.onload=onloadfunct2
</script>
</HEAD>
<body>
<div class="multiparts" style="display: block">
<p>Content 1</p>
</div>

<div class="multiparts">

<div>Content 1 more</div>
</div>

<div class="multiparts">
<p>Content 1 more +</p>
</div>
<BR><BR>
<div id="formnavigation" style="width:200px; display:none">
<a id="backbutton" href="javascript:cycleback()" style="float:left">Back</a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">Forward</a>
</div><br>

<div class="multiparts2" style="display: block">

<p>Content 2</p>
</div>

<div class="multiparts2">
<div>Content 2 more</div>
</div>
<BR><BR>
<div id="formnavigation2" style="width:200px; display:none">
<a id="backbutton2" href="javascript:cycleback2()" style="float:left">Back</a>
<a id="forwardbutton2" href="javascript:cycleforward2()" style="float:right">Forward</a>
</div><br>


</body>
</html>
0
 

Author Comment

by:larrypjr
ID: 13450016
Thanks Benwiggy for working on this. It must be great to know enough about js and dhtml to understand these scripts.

But for some strange reason, it doesn't seem to work in my browser correctly. (Using IE 6.0)
Strange huh?

The top forward  and back work perfectly on the top Content 1, Content 1+, etc...

The bottom sets of forward and back only seem to affect this upper Content area.
(The bottom set has no effect on the bottom content area)

I was hoping that the bottom set of forward and back buttons would only affect the Content 2 area alone. And the upper forward and back affect only the upper content area.

<scracthin my head here!!!> <g>


Someone else suggested to try this? Maybe this will help us figure it out.


try changing this function:

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

to:

function onloadfunct(){
getElementbyClass("multiparts")

for (i=0; i<partscollect.length; i++){
partscollect[i].style.display="block"
}

document.getElementById("formnavigation").style.display="block"
updatenav()
}


Perhaps you might have some additional ideas as to what's going on with this script.

Seems ODD that I can't run two independent set of it on one page....

Thanks again for your interest and expertise....

regards;

Larry
0
 
LVL 6

Accepted Solution

by:
benwiggy earned 2000 total points
ID: 13451452
Sorry, I've concluded what your script cannot be run on one page - there is a possible workaround, it requires two pages:

First page:

<HTML>
<HEAD>
<style type="text/css">
/*specify height of broken up content */
.multiparts{
height: 50px;
}

</style>

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}


function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)?

"hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>
</HEAD>
<BODY>


<div class="multiparts" style="display: block">
<p>Content 1 here</p>
</div>

<div class="multiparts">
<div>Content 2 here</div>
</div>

<div class="multiparts">
<table><td>Content 3</td></table>
</div>

<div id="formnavigation" style="width:200px; display:none">
<a id="backbutton" href="javascript:cycleback()" style="float:left">Back</a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">Forward</a>
</div><br>

<iframe src="page2.html" frameborder="0" width="100%"></iframe>
</body>
</html>

page2.html:
<HTML>
<HEAD>
<style type="text/css">
/*specify height of broken up content */
.multiparts{
height: 50px;
}

</style>

<script type="text/javascript">

/***********************************************
* Multi-Part Content script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){
document.write('<style type="text/css">')
document.write('.multiparts, #formnavigation{display:none;}')
document.write('</style>')
}

var curpart=0

function getElementbyClass(classname){
partscollect=new Array()

var inc=0
var alltags=document.all? document.all : document.getElementsByTagName("*")
for (i=0; i<alltags.length; i++){
if (alltags[i].className==classname)
partscollect[inc++]=alltags[i]
}
}

function cycleforward(){
partscollect[curpart].style.display="none"
curpart=(curpart<partscollect.length-1)? curpart+1 : 0
partscollect[curpart].style.display="block"
updatenav()
}

function cycleback(){
partscollect[curpart].style.display="none"
curpart=(curpart>0)? curpart-1 : partscollect.length-1
partscollect[curpart].style.display="block"
updatenav()
}


function updatenav(){
document.getElementById("backbutton").style.visibility=(curpart==0)? "hidden" : "visible"
document.getElementById("forwardbutton").style.visibility=(curpart==partscollect.length-1)? "hidden" : "visible"
}

function onloadfunct(){
getElementbyClass("multiparts")
partscollect[0].style.display="block"
document.getElementById("formnavigation").style.display="block"
updatenav()
}

if (window.addEventListener)
window.addEventListener("load", onloadfunct, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunct)
else if (document.getElementById)
window.onload=onloadfunct

</script>
</HEAD>
<BODY>


<div class="multiparts" style="display: block">
<p>Content 1 here</p>
</div>

<div class="multiparts">
<div>Content 2 here</div>
</div>

<div class="multiparts">
<table><td>Content 3</td></table>
</div>

<div id="formnavigation" style="width:200px; display:none">
<a id="backbutton" href="javascript:cycleback()" style="float:left">Back</a>
<a id="forwardbutton" href="javascript:cycleforward()" style="float:right">Forward</a>
</div><br>

</BODY>
</HTML>

I hope that sorts it for you,
Benjamin
0
 

Author Comment

by:larrypjr
ID: 13453196
Wow! I'm impressed

That's pretty darn clever.
Just for our general information here's what Dynamic Drive had to say in thier forums:

{ "To save everyone time, please note that the following two types of questions we generally will skip over when posted on the forums due to their time consuming nature:

1) Questions regarding how to get multiple copies of the same script to work on the same page, or multiple, different scripts. The reasons for two scripts suddenly not working when put on the same page can be many, including duplication in the two scripts' variable names, functions, or access to an event handler etc. The only advise we can give is to try and remove the lesser important script(s) to see if that resolves the conflict" }

Anyway,
Thanks a lot for your input. It will make a big difference to this amateur web designer.

If you'd like to see my attempts at using this script take a look at:
http://www.pennypockets.com/indexnew.htm

Select the ORDER button at the botton of the page
NEW ORDER and then select JACKETS
Hit the button labeled BUTTON to bypass manual selection of jackets
(only the Three Seasons and Spectator work so far)
Use the NEXT button to get to the UPLOAD page... that's where the script comes into play for the first time and then the second instance is under EXTRAS - CUSTOMIZED TOP LETTERING
As you can see I have a way to go for completion of this site but at least you can see what I'm working at.

It's in 3 frames and the order form that designs the jackets is in the middle frame.
I have it bookmarked to several different places in order to desing the look of thier garment embroideries. There is one submit button for the form page in the middle frame.
I'll now try to figure out how to incorporate your soultion into this frame somehow (maybe an linline frame) and  and then
get the submit button on the page to include this new page worth of info to save all at once.

If I run into any problems with the submit, etc... would you mind if I contact you again?

Thanks again for all of your input.
You made a big difference to the site....(and me... phew!)


Larry
0
 
LVL 6

Expert Comment

by:benwiggy
ID: 13453362
Firstly - Mozilla's popup blocker blocks your new site from opening.

Use <input type="button" value="Launch Site" onClick='javascript:window.open("webpagehere.html");'>

Secondly,
Nice design!

Finally, I'm really busy but if you would like help with other problems them feel free to post up on EE and then email me with the address of your post: webmaster at nospambenwiggy.com - replace 'at' with '@' and remove 'nospam'.

Glad your happy with the solution,
Benjamin
0

Featured Post

Major Serverless Shift

Comparison of major players like AWS, Microsoft Azure, IBM Bluemix, and Google Cloud Platform

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

770 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