Adding 2 Overlay Windows to the same page – different links

[Alissa Schultz]

I also have the same question about having two links on the same page using the overlay technique. My videos are a quicktime file and an avi file. I thought I had them working but in double checking it seems like I have the same file for both links even though both the link and file names are different.

Thanks for any advice.

Alissa

[Abraham Chaffin]

This is very doable. What you need to do is alter the Javascript a bit. You’ll need to have an array of elements that can be set as the innerHTML values for the top window. These values will best be chosen from a preset array of values in the javascript. You will modify the link tag to not only call for the clicker function that has the window come up but also pass along a variable deciding which HTML code will be placed on top.

First you’ll want to alter the clicker function to look something like this:

function clicker(wind){
	var thediv=document.getElementById('displaybox');
	if(thediv.style.display == "none"){
		thediv.style.display = "";
		var myWins=new Array();
		myWins[1]="PUT HTML 1 HERE";
		myWins[2]="PUT HTML 2 HERE";
                myWins[3]="3 And so on...";
		thediv.innerHTML = myWins[wind];
	}else{
		thediv.style.display = "none";
		thediv.innerHTML = '';
	}
	return false;
}

Then you’ll want to modify the click link to call for the correct window…

<a href='#' onclick='return clicker(1);'>Open Window 1</a>
<a href='#' onclick='return clicker(2);'>Open Window 2</a>
<a href='#' onclick='return clicker(3);'>More Windows...</a>

Abraham

[Alissa Schultz]

Worked great! Another question….one of my files is an avi, so do you know a good freeware converter program that doesn’t put a watermark on your video or how do I change the reader to windows media player?

Thanks!

[Phil Banks]

Hi Abraham,

Thank you for your tutorial and further info – it’s been helpful!!!

I have a slight issue with this, in that i can only seem to link to the last “myWins”, the ones above become redundant and are shown as the last when the relevant link is clicked. do you have any ideas what i might be doing wrong?? i’ve changed the array numbers as instructed and the rest of the code.

Also, i’m placing the links (thumbnail images) in a spry tab, so when activated a larger image will appear with dulled background. An issue i’m finding is spry objects aren’t affected by the alpha, the image or video is totally viewable and above the spry tabs, however they’re not being dulled….is this fixable?

thanks in advance, Phil

(P.S my expertise is not the greatest with anything programming or web, so please use as simple terms as possible haha!! i’m a graphic and 3d designer)

[Abraham Chaffin]

You might need to set the z-index of the over lapping layers even higher than the spry. The Spry z-indexes are set very high like to 1020 so you may need to set the z-index parameter of the #displaybox to like 10000. Try adding this code to the CSS of the displaybox:

z-index: 10000;

Final modified CSS code will look something like this:

#displaybox {
        z-index: 10000;
	filter: alpha(opacity=50); /*older IE*/
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
	-moz-opacity: .50; /*older Mozilla*/
	-khtml-opacity: 0.5;   /*older Safari*/
	opacity: 0.5;   /*supported by current Mozilla, Safari, and Opera*/
	background-color:#000000;
	position:fixed; top:0px; left:0px;
        width:100%; height:100%; color:#FFFFFF;
        text-align:center; vertical-align:middle;
}

Abraham

[Phil Banks]

Hi Abraham,

Thanks very much for the quick reply!! changing the Z axis worked a treat – you were spot on! sorry if that was newbie mistake…i should have thought about z axis having a 3d background!

did you have any thoughts on my other question regarding the clicker only recognising the last item?

Thanks very much again, Phil

[Abraham Chaffin]

Post a link to the page that is having the issue so I can take a look. Hard to debug that one without seeing the code.

Abraham

[Phil Banks]

[Abraham Chaffin]

I see the issue…

It’s in this block of code:

function clicker(wind){
       var thediv=document.getElementById('displaybox');
       if(thediv.style.display == "none"){
               thediv.style.display = "";
               var myWins=new Array();
               myWins[1]=thediv.innerHTML = "Eve_produ";
               myWins[2]=thediv.innerHTML = "your code";
       }else{
               thediv.style.display = "none";
               thediv.innerHTML = '';
       }
       return false;
}

The part that says:

myWins[1]=thediv.innerHTML =
and
myWins[2]=thediv.innerHTML =

should say:

myWins[1]=
and
myWins[2]=

then below that right before the

}else{

you should put

thediv.innerHTML = myWins[wind];

So the modified code block would be something like:

function clicker(wind){
  var thediv=document.getElementById('displaybox');
  if(thediv.style.display == "none"){
    thediv.style.display = "";
    var myWins=new Array();
    myWins[1]="Eve_prod";
    myWins[2]="your code";
    thediv.innerHTML = myWins[wind];
  }else{
    thediv.style.display = "none";
    thediv.innerHTML = '';
  }
  return false;
}

If that doesn’t work you might go back to the post you saw that work in and reevaluate it because it does deviate from how that post says you should be doing this.

Abraham

[Phil Banks]

that does do it!

brilliant, thanks so much for taking the time to work it out for me…i will go back over the tutorial though as i thought (obviously incorrectly) that i had followed it.

Thanks again Abraham!!! if you ever need to know where a particular key is on your keyboard, such as the spacebar, i might be able to help 😉

Cheers 🙂
Phil