drop-in with alternate iframe source per anchor

[MiD-AwE]

1) Script Title: Drop-in content box

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../dropinbox.htm

3) Describe problem: Use onmousedown="initbox()" to open div with iframe and change src="page.html" from links on page.

MY CODE:
<div id="dropin" style="position: absolute; visibility: hidden; left: 125px; top: 12px; width: 500px; height: 300px; background-color: rgb(0, 0, 0);">
<div align="right"><a href="#" onclick="dismissbox();return false">[Close Box] </a></div>

<iframe src="page.html" marginheight="3" marginwidth="3" frameborder="0" height="290" scrolling="auto" width="490" name="auxdat"></iframe></div>

</div>
:MY CODE

How can I change the iframe source from links on my page? If I'm not clear, I'll try to explain. I have five anchors on my page. ex. <a href="#" onmousedown="initbox()">click here</a> I want to somehow use each link to activate the drop-in content box and with a different page loaded as the source of the iframe.

Please help, thanks in advance.

[MiD-AwE]

Yeah, it's a tough one. Actually, I suspect it's not too difficult but I'm having trouble finding the answer so I thought it would be a good idea to ask here. This is where the people who know this stuff help each other, or? not.

[aka Robbie]

What you need to do is modify the javascript to tell it you have extra initbox()

Here's how I did it for three links:

// Drop-in content box- By Dynamic Drive
// For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
// This credit MUST stay intact for use

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=8 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-100+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function initbox2(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin2").style : ie? document.all.dropin2 : document.dropin2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-100+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin2()",50)
}

function initbox3(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin3").style : ie? document.all.dropin3 : document.dropin3
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-100+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin3()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function dropin2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein2()",50)
}
}

function dropin3(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein3()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function bouncein2(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function bouncein3(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function dismissbox2(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function dismissbox3(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function redo(){
bouncelimit=8
direction="up"
initbox()
}

function redo2(){
bouncelimit=8
direction="up"
initbox2()
}

function redo3(){
bouncelimit=8
direction="up"
initbox3()
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

Then in your html you have:

<a href="#" onmousedown="initbox()">click here</a>
<a href="#" onmousedown="initbox2()">click here for 2nd link</a>
<a href="#" onmousedown="initbox3()">click here for 3rd link</a>

And to close would be:

<a href="#" onclick="dismissbox();return false">
<a href="#" onclick="dismissbox2();return false">
<a href="#" onclick="dismissbox3();return false">

Then just make sure your divs have the correct individual names to match.

[MiD-AwE]

Thanks. I would like the links to trigger -Drop-in content boxes- on other pages.

For instance, how can I click a drop-in link and a div drops in on some other page currently displayed so that I can have more that one drop-in content box displaying Iframes with working links to other drop-in content boxes that display outside of the origional DIV or Iframe, or so I can use "lytebox" and Drop-in content box?

[MiD-AwE]

Dead issue. All this and more is achievable with jQuery. No need to wrestle with the cumbersome method presented here.