FORUMS: list search recent posts

Adding 2 Overlay Windows to the same page - different links

COW Forums : Web Design

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Ruth AmbroseAdding 2 Overlay Windows to the same page - different links
by on Nov 8, 2008 at 11:53:15 am

Hi Guys,

great website and thanks for the overlay window tutorial. I have implemented this successfully on to a page but would like to be able to have more than one instance of this on a page linking to different flash objects.

Can you confirm this is possible and point me in the right direction as I just can't get the second link to work.

Any advice would be much appreciated.

Many thanks
Ruth


Return to posts index

Alissa SchultzRe: Adding 2 Overlay Windows to the same page - different links
by on Nov 17, 2008 at 4:21:06 pm

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


Return to posts index

Abraham ChaffinRe: Adding 2 Overlay Windows to the same page - different links
by on Nov 17, 2008 at 4:48:19 pm

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


Return to posts index


Alissa SchultzRe: Adding 2 Overlay Windows to the same page - different links
by on Nov 20, 2008 at 8:25:27 pm

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!


Return to posts index

Phil BanksRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 2:37:17 pm

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)



Return to posts index

Abraham ChaffinRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 3:58:14 pm

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


Return to posts index


Phil BanksRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 4:07:38 pm

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





Return to posts index

Abraham ChaffinRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 4:33:29 pm

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


Return to posts index

Phil BanksRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 4:44:13 pm

unfortunately i'm working on it at the moment so it's not uploaded anywhere.
the code parts which it relates to is here - i'm not sure which to upload so i hope the sections are ok.....it's probably a jumbled mess as i (embarrassingly) let dreamweaver do all the hardwork - i'm new to this....but learning!:)
I've just put some wording in at the moment to represent link number 1, the other i've kept as your creative cow example....at least that way you'll see it working :)
 
<link href="Eve_Products.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#displaybox {
z-index: 10000;
filter: alpha(opacity=80); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .80; /*older Mozilla*/
-khtml-opacity: 0.8; /*older Safari*/
opacity: 0.8; /*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;
}
<!--
body {
background-image: url(Eve_Products_Twist_banner_images/images/background_01.gif);
background-color: #ddd9d9;
background-repeat: repeat-x;
}
...................
-->
</style>
<script>
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_products_Twist_banner_images/Eve_Products_Artwork-guidelines.jpg";
myWins[2]=thediv.innerHTML = "<table width='100%' height='100%'><tr><td align='middle' valign='centre' width='100%' height='100%'><object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='400' height='400'><param name='src' value='http://cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4'><param name='bgcolor' value='#000000'><embed src='//cowcast.creativecow.net/after_effects/episodes/Shape_Tips_1_POD.mp4' autoplay='true' pluginspage='http://www.apple.com/quicktime/download/' height='500' width='640' bgcolor='#000000'></embed></object><br><br><a href='#' onclick='return clicker();'>CLOSE WINDOW</a></td></tr></table>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
..............

<div class="TabbedPanelsContent">
<p><a href='#' onclick='return clicker(1);'>why won't you work</a></p>
<p><a href='#' onclick='return clicker(2);'>test test test</a></p>
</div>
............
Once again Abraham - a huge thank you for helping!!!

<br><br>


Return to posts index


Abraham ChaffinRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 5:06:17 pm

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


Return to posts index

Phil BanksRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 5:14:27 pm

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




Return to posts index

Abraham ChaffinRe: Adding 2 Overlay Windows to the same page - different links
by on Jan 9, 2009 at 5:21:53 pm

Niiiice =)

There were times when I couldn't find certain keys but that was because my kids had pulled them out =o

Have fun

Abraham


Return to posts index


Richard WilliamsRe: Adding 2 Overlay Windows to the same page - different links
by on Feb 1, 2009 at 4:03:11 pm

Abraham / Fernando,

What am i missing here...?

i am putting in this code, and it all works ok as it should, with the click on window 1 bringing in the text PUT HTML 1 HERE etc etc,

Now, i want to put in a link to an image... So how should this look???
Sorry to be such a dumb dumb... The code given is below, and i am guessing the only thing i need to chage is highlighted bold, but still not sure how to put it in there correctly.


function clicker(wind){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
var myWins=new Array();
myWins[1]="<b>PUT HTML 1 HERE</b>";
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>




Richard Williams


Return to posts index

Richard WilliamsRe: Adding 2 Overlay Windows to the same page - different links
by on Feb 2, 2009 at 8:52:50 pm

ok... i sussed it. the problem i was having was i was inserting an image into a blank page, then copying the code of the insert into the code above (where it says "insert the HTML HERE")
i deleted the "s and replaced with 's, but it still did not work. It did not work because it did not like the white spacing that the code creates in dreamweaver. I depeted all the gaps in the code, bringing all the bits together in one row and this fixed the problem.

so i was putting in this...
<table width="10%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img name="image1.jpeg" src="" width="273" height="241" alt="" /></td>
</tr>
</table>


and i changed it to
<table width='10%' border='0' cellspacing='0' cellpadding='0'><tr><td><img name='image1.jpeg' src='' width='273' height='241' alt='' /></td></tr></table>

Richard Williams


Return to posts index

Eric JuholaRe: Adding 2 Overlay Windows to the same page - different links
by on Nov 10, 2009 at 7:05:32 pm

Hi, This tutorial worked really well on two of my pages - thanks for posting.

It's not working on my 3rd page however and I'm wondering if I have to adjust the code. I have 5 map coordinates I want to link to the overlay window. They are spread across three different divs all which are hidden when you first visit the page. The divs with the overlay links become visible upon clicking separate links on another div - these are all working fine.

The funny thing is, the links to the overlay window are working perfectly fine on one of my divs, but not the other two. Without being a javascript pro, I feel like I've tried countless variations of the code trying to figure it out with no success. Any help would be greatly appreciated.

Also, just a note - I'm using firefox on a mac. It's not working at all on safari, even my simpler pages.

And one other note. On two of my overlay windows, I'd like to embed video from a different Site. This is also not working at all when I copy and paste the object code.

Thanks so much!

eric


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]