Activity › Forums › Web Design (WordPress, Joomla, etc.) › Adding 2 Overlay Windows to the same page – different links
-
Adding 2 Overlay Windows to the same page – different links
Eric Juhola replied 16 years, 6 months ago 6 Members · 14 Replies
-
Abraham Chaffin
January 9, 2009 at 5:21 pmNiiiice =)
There were times when I couldn’t find certain keys but that was because my kids had pulled them out =o
Have fun
-
Richard Williams
February 1, 2009 at 4:03 pmAbraham / 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
-
Richard Williams
February 2, 2009 at 8:52 pmok… 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
-
Eric Juhola
November 10, 2009 at 7:05 pmHi, 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
Reply to this Discussion! Login or Sign Up