Making Divs act like frames

**mon_stdnt** · 07-24-2007, 02:55 PM

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

**Sliight** · 07-24-2007, 04:36 PM

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.

**mon_stdnt** · 07-24-2007, 06:06 PM

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

**Veronica** · 07-24-2007, 08:45 PM

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.

**mon_stdnt** · 07-25-2007, 12:07 PM

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.

**mon_stdnt** · 11-01-2007, 01:07 PM

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">

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

**boogyman** · 11-01-2007, 01:31 PM

Originally Posted by mon_stdnt

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

**vanny** · 11-21-2008, 05:19 PM

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

**RobertoBent** · 12-01-2008, 11:33 AM

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.

**bluewalrus** · 12-05-2008, 07:41 PM

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

Thread: Making Divs act like frames

Thread Tools

Search Thread

Making Divs act like frames

Making Divs act like frames

Bookmarks

Bookmarks

Posting Permissions