Is it possible to run the same script twice on one page?

**NanasNumber3** · 01-10-2013, 12:13 PM

1) Is it possible to run the same script twice on one page?

2) http://www.dynamicdrive.com/dynamici...amazondrop.htm

3) I just love this script and have it enabled just where I want it on my website on the left hand side of the page but I would like it also to appear on the right hand side. Eg: var dropboxleft=0 var dropboxtop=0 AND var dropboxleft=1100 var dropboxtop=0

Any help greatly appreciated. Many thanks.

**djr33** · 01-10-2013, 03:31 PM

It is possible to run the same script twice; however, it may require significant rewriting to allow that to work.

The problem happens when there is a specific thing (maybe a property, maybe variable, maybe a command) that is unique in the script. As an example, let's call it "the menu". Once you create two copies, they will cease to work properly because each time you try to manipulate one "the menu" the other "the menu" will be manipulated along with it, creating all sorts of conflicts. (Or, as a clearer example, just imagine yelling out "John" in a crowded room and expecting to find a specific individual.)

This can be fixed in one of two ways: 1) manually rename all properties so that they no longer share any names for things. That would make them very similar but not the same. 2) modify the script so that each instance is automatically defined in a unique, independent way (such as automatically appending a number to each instance).

Please also see this thread: http://www.dynamicdrive.com/forums/s...do-NOT-support

That said, someone may be able to help you. But I wanted you to be aware of the situation. We do often get requests like this, and some of these scripts already have adjusted versions available; I'm not sure about this one.

**NanasNumber3** · 01-11-2013, 11:18 AM

Thanks for the advice. I missed the thread about what I had asked so apologies. I have tried to modify all the variables by dropping a letter from each of them but it then only displays the one I want on the right of the page. Not to worry I am having a rethink on how I am presenting that page so may use something else. Regards.

**djr33** · 01-11-2013, 06:38 PM

It may not just be variables-- another frequent conflict is when some kind of event (such as .onload) is used in the script and cannot be used independently twice; the solution there is to somehow merge the two commands, but that can be a little tricky.
Check in the archives in here because someone may have asked a similar question.

**vwphillips** · 01-11-2013, 08:38 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

#dropinbox{
left:200px;
top:100px;
width: 320px; /*change width to desired */
height: 212px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:fixed; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility:hidden;
}

.dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
left: 0;
top: 0;
}

.mask {
  background-Color:#FFCC66;
/* Moz */
  opacity: .5;
/* IE5-7 */
  filter: alpha(opacity=50);
/* IE8 */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}


#dropinbox2{
left:800px;
top:100px;
width: 320px; /*change width to desired */
height: 212px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:fixed; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility:hidden;
}

</style>
</head>

<body>
 Drop In Box (11-January-2012)<br />
 by Vic Phillips - http://www.vicsjavascripts.org.uk/
 <br /><br />
 Functional Code Size 3.46K

 <div id="dropinbox">
  <div class="dropinboxv2">
   INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br>
   <p align="right"><a href="#" id="close">Close It</a></p>
  </div>
 </div>
 <div id="dropinbox2">
  <div class="dropinboxv2">
   INSERT YOUR CONTENT HERE. DO NOT REMOVE THE TWO OUTER DIVS<br>
   <p align="right"><a href="#" id="close2" onclick="zxcDropInBox.Drop('dropinbox2',false);">Close It</a></p>
  </div>
 </div>

<div style="height:2000px;" ></div>

<script type="text/javascript">
/*<![CDATA[*/
// Drop In Box (11-January-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

// Functional Code Size 3.46K


var zxcDropInBox={

 init:function(o){
  var id=o.DropBoxID,obj=document.getElementById(id);
  if (obj&&obj.getElementsByTagName('DIV')[0]){
   var mcls=o.MaskClass,mde=o.Mode,dm=o.DisplayMode,ms=o.AnimateSpeed,ah=o.AutoHideDelay,dd=o.DropDelay,dd=typeof(dd)=='number'?dd:1000,mde=typeof(mde)=='string'?mde.charAt(0).toUpperCase():'N',div=obj.getElementsByTagName('DIV')[0],close=document.getElementById(o.CloseID),msk=document.createElement('DIV'),days=typeof(dm)=='string'?dm.replace(/\D/g,''):'X';
   msk.className=mcls;
   msk.style.position='fixed';
   msk.style.zIndex='101';
   msk.style.overflow='hidden';
   msk.style.visibility='hidden';
   msk.style.left='0px';
   msk.style.top='0px';
   msk.style.width='100%';
   msk.style.height='100%';
   document.body.appendChild(msk);
   obj.style.position='fixed';
   obj.style.zIndex='102';
   obj.style.overflow='hidden';
   document.body.appendChild(obj);
   o=zxcDropInBox['zxc'+id]={
    id:id,
    msk:msk,
    mode:mde,
    div:div,
    obj:obj,
    mcls:typeof(mcls)=='string',
    ah:typeof(ms)=='number'?ah*1000:false,
    ms:typeof(ms)=='number'?ms:1000
   }
   this.addevt(window,'resize','resize',o);
   this.addevt(msk,'mouseup','Drop',id,false);
   this.resize(o);
   if (close){
    this.addevt(close,'click','Drop',id,false);
   }
   days=typeof(dm)=='string'?dm.replace(/\D/g,''):'X';
   dm=dm=='always'||!dm?0:typeof(dm)=='number'?Math.floor(Math.random()*dm):this.cookie(id);
   document.cookie=id+'='+dm+';'+(isFinite(days*1)?'expires='+(new Date(new Date().getTime()+days*86400000).toGMTString())+';path=/;':';');
   if (dm==0&&(this.cookie(id)!='session'||dm!='session')){
    setTimeout(function(){ zxcDropInBox.Drop(id,true); },dd);
   }
  }
 },

 Drop:function(id,ud){
  var o=zxcDropInBox['zxc'+id];
  if (o){
   clearTimeout(o.to);
   this.animate(o,o.now,ud?o.max:o.min,new Date(),o.ms,!ud);
   o.obj.style.visibility='visible';
   o.msk.style.visibility=o.mcls?'visible':'hidden';
   if (o.ah){
    o.to=setTimeout(function(){ zxcDropInBox.Drop(id,false); },o.ah);
   }
   return false;
  }
 },

 animate:function(o,f,t,srt,mS,ud){
  clearTimeout(o.dly);
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   o.now=Math.max(now,f<0||t<0?now:0);
   o.obj.style[o.mde]=o.now+'px';
  }
  if (ms<mS){
   o.dly=setTimeout(function(){ oop.animate(o,f,t,srt,mS,ud); },10);
  }
  else {
   o.now=t;
   o.obj.style[o.mde]=t+'px';
   if (ud){
    o.obj.style.visibility=o.msk.style.visibility='hidden';
   }
  }
 },

 cookie:function(nme){
  var re=new RegExp(nme+'=[^;]+','i');
  if (document.cookie.match(re)){
   return document.cookie.match(re)[0].split("=")[1];
  }
  return null;
 },

 resize:function(o){
  o.mde=o.mode=='D'||o.mode=='U'?'top':o.mode=='L'||o.mode=='R'?'left':'height';
  var mde=o.mode,os=mde=='L'||mde=='R'?'offsetWidth':'offsetHeight',sz=o.div[os],msz=o.msk[os];
  if (mde=='C'){
   o.obj.style.left=(o.msk.offsetWidth-o.obj.offsetWidth)/2+'px';
   o.obj.style.top=(msz-sz)/2+'px';
  }
  o.obj.style[o.mde]=(mde=='D'?-sz:0)+'px';
  o.max=mde=='D'?0:mde=='U'||mde=='R'?msz-sz:mde=='L'?0:sz;
  o.min=mde=='D'?-sz:mde=='U'||mde=='R'?msz:mde=='L'?-sz:0;
  o.now=o.min;
 },

 addevt:function(o,t,f,p,p1){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](p,p1);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](p,p1); });
  }
 }


}

zxcDropInBox.init({
 DropBoxID:'dropinbox',  // the unique ID name of the Drop DIV,                                       (string)
 Mode:'Down',            //(optional) the mode of execution, 'Down', 'Up', 'Left', 'Right', 'Center'. (string, default = the CSS left and top position)
 MaskClass:'mask',       //(optional) the mask class name.                                            (string, default = no mask)
 DisplayMode:0,          //(optional) the display frequency.                                          (number, default = 'session')
                         //(optional) the display mode 'session'.                                     (string, 'session')
                         //(optional) the display mode 'Xday', do no display again for X days.        (string, default = 'session')
 CloseID:'close',        //(optional) the unique ID name of element to close the Drop DIV.            (string, default = AutoHideDelay)
 AnimateSpeed:1000,      //(optional) the animation duration in milli seconds.                        (number, default = 1000)
 DropDelay:2000,         //(optional) the delay before displaying the Drop DIV.                       (number, default = 1000)
 AutoHideDelay:20        //(optional) the automatic hide delay seconds.                               (number, default = no automatic hide)
});

zxcDropInBox.init({
 DropBoxID:'dropinbox2'  // the unique ID name of the Drop DIV,                                       (string)
});

/*]]>*/
</script>
</body>

</html>