Results 1 to 5 of 5

Thread: Content Window on top (more)

  1. #1
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Content Window on top (more)

    http://www.dynamicdrive.com/dynamici.../dropinbox.htm
    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)
    return
    crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    crossobj.top=scroll_top-250+calunits
    crossobj.visibility=(dom||ie)? "visible" : "show"
    dropstart=setInterval("dropin()",50)
    }

    function dropin(){
    scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
    if (parseInt(crossobj.top)<100+scroll_top)
    crossobj.top=parseInt(crossobj.top)+200+calunits
    else{
    clearInterval(dropstart)
    }
    }

    function dismissbox(){
    crossobj.visibility="hidden"
    }

    function redo(){
    initbox()
    }

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

    </script>

    And then in the Body

    </div>

    <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>
    </div>
    </body>


    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.

    Thanks,

    Thomas
    Last edited by Wildfire563; 06-24-2005 at 02:02 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You seem determined to go a long way to get an effect similar to:

    http://www.dynamicdrive.com/dynamici...tchcontent.htm

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    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.

    Thanks,

    Thomas

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    OK, that looks more like:

    http://www.dynamicdrive.com/dynamici...htmlwindow.htm

    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:

    http://www.alistapart.com/articles/customcorners/

    and:

    http://www.neuroticweb.com/recursos/....php?idioma=en

    I'm sure there are other tutorials on this.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jun 2005
    Posts
    63
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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,

    Thomas

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •