View Full Version : Content Window on top (more)

06-24-2005, 12:52 AM
Drop-in Content box

Ok, I've answered some of my own questions, but I still am totally lost when it comes to programming in javascript. I have a lot of Fortran experience, and a smidgen of C, and a good background in basic HTML, but no java.

So here is what I've got so far. I was able to figure out how to get rid of the bounce, and I think I figured out how to not have the content window open on page load (it didn't seem to work on the page I created anyway, but now I think I've explicitly removed it). Now what I am looking to do is pass a variable to an iframe in the DIV section so that it opens the page from a selected link. Is this possible?

If there is an easier way to do what I am trying to do I'd love to hear it.

Here is the code as I've modified it so far -

In the head section:
<script language="JavaScript1.2">

// 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
//Modified 05/06/23 by Thomas Perry - removed bounce and load on pageload

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

function initbox(){
if (!dom&&!ie&&!ns4)
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.visibility=(dom||ie)? "visible" : "show"

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)

function dismissbox(){

function redo(){

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


And then in the Body


<div id="dropin" style="position:absolute;visibility:hidden;left:210px;top:200px;width:550px;height:760px;background-color:rgb(222,222,222)">

<div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div>

<iframe src="Win_About.htm" width="100%" height="100%" frameborder="0"></iframe>

What I'm thinking is something like this, but I don't know how to do it, or if it is possible

I'll have two links something like:

<p><a href="javascript:redo(doctoload="Win_about.htm")">About</a></p>
<p><a href="javascript:redo(doctoload="Win_cal.htm")">Calendar</a></p>

And I want to pass doctoload to the iframe src in the above DIV. I realize my nomenclature is way off, but hopefully you can understand what I am trying to do. Is this possible?

My other questions still are out there:
Is it possible to round the corners of a content box?

What browsers do iframes not work in?

And a new one:

What is a content box? I've been using it, but I don't know what it is :-) I'm thinking if I understand more about what it is, I can figure out how to round the corners.



06-24-2005, 02:14 AM
You seem determined to go a long way to get an effect similar to:


Have a look at that and see if it isn't easier to adapt to your purposes.

06-24-2005, 02:27 AM
Well, I don't know. It seems to me (and maybe I just don't see the possibilities) that each switch (link) opens its own content (window?).

What I am looking for is a way to fill the same content window with different external content depending on which link is selected (and the link should also open the content window if it is not already open)(and I'd love to have the window appear to open from the link that is selected if that is possible, but that is not necessary. IOW, I would prefer to have the content window expand from the selected link instead of dropping in from the top of the page as it does now.).

Check out my page http://www.flyingscool.com, go to the main page and select the "About" link. That should open a content window on top of the main page. I'd like to round the corners of the content window as well if that is possible. If you select the Calendar link, it opens up a secondary page. I would prefer to fill the content window that the About link is using with the calendar instead of going to a secondary page. I realize I could just set up frames and do it the old-fashioned way, but I saw an effect similar to this on another page (built in flash I think), and I liked it, so I thought I'd try it.

I am not averse to trying different things, however.



06-24-2005, 03:49 AM
OK, that looks more like:


You'll notice that with that script you can choose which url to load when clicking a link and the 'display onload' is already optional. This means you can load in various external pages as content. The demo is made to look like a browser window but, it can be customized to look like whatever you want.

If you want to round out the corners, you will have to engage in a bit of css gymnastics. I haven't mastered this yet but, it involves using small graphics with rounded edges in the corners:




I'm sure there are other tutorials on this.

06-24-2005, 10:57 AM
Thank you so much for the leads, they look like just what I was looking for. I'll let you know when I've applied it,

Thanks again,