Results 1 to 10 of 10

Thread: Making Divs act like frames

  1. #1
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Making Divs act like frames

    I've created my online website(www.rgamarra.com) for all my art work;

    I was wondering if their's a way to have a column/Divs with a vertical
    scroll-bar(that is easy to update, like the way I have it now) link another column/Divs next to it without reloading the whole window.

    Just wonder if that is possible?

    ramon

  2. #2
    Join Date
    Jul 2007
    Location
    California
    Posts
    177
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Well I don't know the answer to your question, and I think your site looks very cool. I did want to note that the menu bar is very tight to the left of the screen, and your top left logo is high and cut off.

    I took a screenshot and uploaded it on my site so you could peek at it if you wish. http://www.usejeff.com/rgamarra.html Let me know when you've seen it so I can remove it. I'm using IE7 with a resolution of 1680x1050. Not the most common resolution for sure, but just thought with you having such a clean looking site you'd be interested.

  3. #3
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I think your site looks very cool.
    Thanks alot, I re-design it because in my previous one I had thumbnails for each work with a roll-over image, thats why a table inside a frame is much simpler for me to update, so I don't have to hassle on every single html page.

    I did want to note that the menu bar is very tight to the left of the screen, and your top left logo is high and cut off.
    I've seen the screen grab that you post.(you didn't had to do that ). For the logo I did it on purpose, I probably should change it it does look silly. .
    As for the menu links I might center it or align it next to the scroll bar.

    But first I really would like to find and answer to my question. hopefully

  4. #4
    Join Date
    Feb 2007
    Posts
    293
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    There are several scripts for scrollable content here http://www.dynamicdrive.com/dynamicindex17/

    Scrollable Content I is just regular scrollbars, Scrollable Content II uses arrows. If you use the first one and you just want a vertical scrollbar, not a horizontal one, replace "overflow:scroll;" with "overflow-x: hidden;overflow-y: scroll;"
    in the style for the div.

  5. #5
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thanks for the link, is very helpful , but is to bad I couldn't find anything on linkink one div to another.

    I'll keep searching.

  6. #6
    Join Date
    Jul 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I started to re-build my website with divs, I have the basic setup that I want.
    Im also using this script from the website as a work selection.
    http://www.dynamicdrive.com/dynamici...switchmenu.htm

    What I want to do is to have the links under SITE MENU, FAQ, etc(will change it to fit my portfolio) to open in the "image with detail shots" div.


    This is what I have right now:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>TEST_PAGE</title>
    <style>
    <style type="text/css">
    .menutitle{
    cursor:pointer;
    margin-bottom: 5px;
    background-color:#ECECFF;
    color:#000000;
    width:140px;
    padding:2px;
    text-align:center;
    font-weight:bold;
    /*/*/border:1px solid #000000;/* */
    }

    .submenu{
    margin-bottom: 0.5em;
    }


    .window{width:782px; height:448px; border:thin; border=: border-color:#000000;}
    .nav{width:150px; height:448px; overflow:auto; background-color:#999999; float:left; padding:2px }
    .content{width:628px; height:448px; float:right}
    .images{width:628px; height:380px; overflow:auto; padding:2px; background-color:#FFFFFF}
    .description{width:628px; height:49px; background-color:#999999; float:left}
    body {
    background-color: #999999;
    }
    </style>
    <script type="text/javascript">

    /***********************************************
    * Switch Menu script- by Martial B of http://getElementById.com/
    * Modified by Dynamic Drive for format & NS4/IE4 compatibility
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/

    var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
    var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only

    if (document.getElementById){ //DynamicDrive.com change
    document.write('<style type="text/css">\n')
    document.write('.submenu{display: none;}\n')
    document.write('</style>\n')
    }

    function SwitchMenu(obj){
    if(document.getElementById){
    var el = document.getElementById(obj);
    var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
    if(el.style.display != "block"){ //DynamicDrive.com change
    for (var i=0; i<ar.length; i++){
    if (ar[i].className=="submenu") //DynamicDrive.com change
    ar[i].style.display = "none";
    }
    el.style.display = "block";
    }else{
    el.style.display = "none";
    }
    }
    }

    function get_cookie(Name) {
    var search = Name + "="
    var returnvalue = "";
    if (document.cookie.length > 0) {
    offset = document.cookie.indexOf(search)
    if (offset != -1) {
    offset += search.length
    end = document.cookie.indexOf(";", offset);
    if (end == -1) end = document.cookie.length;
    returnvalue=unescape(document.cookie.substring(offset, end))
    }
    }
    return returnvalue;
    }

    function onloadfunction(){
    if (persistmenu=="yes"){
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=get_cookie(cookiename)
    if (cookievalue!="")
    document.getElementById(cookievalue).style.display="block"
    }
    }

    function savemenustate(){
    var inc=1, blockid=""
    while (document.getElementById("sub"+inc)){
    if (document.getElementById("sub"+inc).style.display=="block"){
    blockid="sub"+inc
    break
    }
    inc++
    }
    var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
    var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
    document.cookie=cookiename+"="+cookievalue
    }

    if (window.addEventListener)
    window.addEventListener("load", onloadfunction, false)
    else if (window.attachEvent)
    window.attachEvent("onload", onloadfunction)
    else if (document.getElementById)
    window.onload=onloadfunction

    if (persistmenu=="yes" && document.getElementById)
    window.onunload=savemenustate

    </script>

    </head>

    <body>
    <div id="window_frame" class="window">
    <div id="navigation_box" class="nav">
    <!-- Keep all menus within masterdiv-->
    <div id="masterdiv">

    <div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
    <span class="submenu" id="sub1">
    - <a href="new.htm">What's New</a><br>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
    <span class="submenu" id="sub2">
    - <a href="notice.htm">Usage Terms</a><br>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
    <span class="submenu" id="sub3">
    - <a href="http://www.codingforums.com">Coding Forums</a><br>
    </span>

    <div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
    <span class="submenu" id="sub4">
    - <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
    </span>

    </div>
    navigation</div>
    <div id="content_box" class="content">content
    <div id="images_box" class="images">images with detail shots</div>
    <div id="description_box" class="description"> description of image</div>
    </div>


    </div>
    </body>
    </html>


    THANK FOR THE VIEWING.

  7. #7
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by mon_stdnt View Post
    thanks for the link, is very helpful , but is to bad I couldn't find anything on linkink one div to another.
    in order to link 1 div to another you would need to use some javascript remote coding, more commonly known these days as AJAX. That's the ability to reload only portions of 1 page rather than the whole page itself. One drawback to AJAX is that like frames the user will NOT be able to bookmark the specific page, which can become frustrating.

    in any event check out http://dynamicdrive.com/forums/showthread.php?t=19247 for a beginning tutorial on AJAX

  8. #8
    Join Date
    Nov 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    your site is cool.....
    Thanks.....

  9. #9
    Join Date
    Dec 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Making Divs act like frames

    hi

    started to re-build my website with divs, I have the basic setup that I want.
    Im also using this script from the website as a work selection.
    http://www.dynamicdrive.com/dynamici...switchmenu.htm

    What I want to do is to have the links under SITE MENU, FAQ, etc(will change it to fit my portfolio) to open in the "image with detail shots" div.

  10. #10
    Join Date
    May 2007
    Location
    Boston,ma
    Posts
    2,127
    Thanks
    173
    Thanked 207 Times in 205 Posts

    Default

    Roberto Bent start this in another thread and find the correct link.

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
  •