Inserting Frames

[Intense]

Hi, i'd like to say a big well done to everyone at W3Schools to start with, i've been lurking on here for a while but only just registered.Anyway, heres my problem.I've got the image below (trying to make own site), and i'm wanting to insert some frames in so I can scroll and view content in the box marked. I also want it so that when you scroll, the image dosen't move, and neither does the part of the image in the frames (if that makes sense!)Any feedback appreciated.Thanks.

[Skemcin]

Hi and welcome to the forums. I'm not quite and expert on CSS, although I know my share, but I think what you describe is not going to be easy with frames. However, it would seem that you would use an <iframe> tag. And on any page that gets called into the <iframe> you would set a fixed background image(the part of your outlined image). this way, when the <iframe>page loads, it fills in the blank - for a lack of better terms.However, you might be better off using a scrollable <div> - and here is where I am at my CSS limits since I have not created one before. But, conceptually, you would set your page up the same way as the <iframe> but replace the that with a <div> tag. It would be classed to have a fixed background and be scrollable, something like this I think:

<style type="text/css"><!--div.scroll {	height: 200px;	width: 300px;	overflow: auto;	border: 1px solid #666;	background-color: #ccc;	padding: 8px;}--></style>

and

<div class="scroll">  <p>This is a scrolling are created with the CSS property overflow.</p>  <p>  <span style="color: red;">This is red color</span>  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>  <p>This is a normal paragraph.  <span style="font-weight: bold; font-size: 22px;">This is big bold text</span>  </p>  <p>This scrolling are can contain normal html like <a href="index.php">link</a></p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p></div>

I'm sure someone will correct me if I am wrong.EDIT: replaced the code after I googled "scrollable div" . The example is cited from:http://www.domedia.org/oveklykken/css-div-scroll.php

[Intense]

Hi and welcome to the forums.  I'm not quite and expert on CSS, although I know my share, but I think what you describe is not going to be easy with frames.  However, if you used and <iframe> and on any page that gets called into the <iframe> you would set a fixed background image of the part that outlined image.  this way, when the <iframe>page loads, it fills in the blank - for a lck of better terms.

Yeah I was thinking about going about it this way, would this be easier than the whole css thing?

[Skemcin]

I think the CSS would be easier to manage - when you introduce frames, you have to worry about link targeting - which can spiral out of control if you don't mind your P's and Q's - especially if search start spidering your <iframe> pages and there is nothing there to reload them into the parent page.

[real_illusions]

hmm..ok..but how do you link to that div??its all good creating it if you cant use it

[Skemcin]

hmm..ok..but how do you link to that div??its all good creating it if you cant use it

I'm not quite following your remark.If you are suggesting that Intense wants to change the content inside that div, then I could see your point. The <iframe> would allow one page to be loaded as the parent and then have the <iframe> be the target for all the links. But since Intense seemed to be more interested in the CSS route and didn't clarify any other functionality.From a design perspective, the scrollable <div> is no different from an well coded <iframe>. But they differ in functionality.On one side, if you use the <div> you don't have to worry about making sure you use the "target" attribute with all your links. You also don't have to worry about search engine issues since all your content is on that page. In fact, the scrollable <div> would be more advantagous to use for search engine due to the amount of content that would not be "visible" until you scroll but would no doubt physically be there - which is what the search engine would pick up.On the other hand, if you use <iframes> you have one page that acts as a parent which could make applying a redesign very easy. But you will have to take three things into consideration. One, search engines can't spider your frame page as easily. Two when a search engine finds you target pages, they will not be wrapped in you parent window when linked to. Which means , three, every page will need a reloader script to solve this.There ya have it . . .

[real_illusions]

i think what i'm asking for hasn't been invented yet..basically, theres a set of links in a menu, in a div (d1), and when you click on the links, new text appears in another div (d2) on another part of the page, without reloading the menu and background. without using frames. and also any links you click in d2, also changes the text in d2 to the appropiate stuff. probably calling the new stuff from a seperate document into that one page.

[Skemcin]

i think what i'm asking for hasn't been invented yet..basically, theres a set of links in a menu, in a div (d1), and when you click on the links, new text appears in another div (d2) on another part of the page, without reloading the menu and background. without using frames. and also any links you click in d2, also changes the text in d2 to the appropiate stuff. probably calling the new stuff from a seperate document into that one page.  

Yes, this can be done very easily. The left navigation would simply run a show/hid script that changes the display:visible; setting of a <div>. On the page you would have ALL the <div>'s load with display:none;. This is very easy to do. However, those links are all javascript and therefore are quite often ignored by search engines - as would any "invisible" content. Thus, making your site invisible (lol) to search engines - but if thats a sacrafice one is willing to make - then its a cool effect.I've done this in an intranet site I launched this past spring. Since it was an intranet site, I didn;t have to worry about search engines so I jumped on the opportunity to implement this code.

[Intense]

Hi all.http://www.thedjsniperz.co.uk/How do I change that white background to black? I've tried background-colour=#000000 and i've also tried putting in the CSS but no luck?

[real_illusions]

Hi all.http://www.thedjsniperz.co.uk/How do I change that white background to black? I've tried background-colour=#000000 and i've also tried putting in the CSS but no luck?

<{POST_SNAPBACK}>

umm..you have no body tag.. no link to an external css file, no internal css stuff..in the main page.the page in the frame...looks more like a proper coded page from the code.which page do you want the black background on?and i dont understand what the page is about either...

[Intense]

Right.www.thedjsniperz.co.ukLoad up the popup.How do I get that bit where the content is, into an iframe?Would make things a lot easierThanks

[Skemcin]

here is some code that was requested. it is an example of how you can have a navigation on one page load content into a selected area without reloading the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>xxxxxx</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><meta name="author" content=""><meta name="robots" content="nofollow"><!-- prevent caching in netscape. very important cause netscape tends to mangle cached code --><meta http-equiv="expires" content="0"><meta http-equiv="Pragma" content="no-cache"><script language="javascript" type="text/javascript">/************************************************ Switch Content script- © Dynamic Drive (www.dynamicdrive.com)* This notice must stay intact for use* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/[/url] for full source code***********************************************/var enablepersist="on" //Enable saving state of content structure? (on/off)if (document.getElementById){document.write('<style type="text/css">')document.write('.switchcontent{display:none;}')document.write('</style>')}function getElementbyClass(classname){ccollect=new Array()var inc=0var alltags=document.all? document.all : document.getElementsByTagName("*")for (i=0; i<alltags.length; i++){if (alltags[i].className==classname)ccollect[inc++]=alltags[i]}}function contractcontent(omit){var inc=0while (ccollect[inc]){if (ccollect[inc].id!=omit)ccollect[inc].style.display="none"inc++}}function expandcontent(cid){if (typeof ccollect!="undefined"){contractcontent(cid)document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"selectedItem=cid+"|"+document.getElementById(cid).style.display}}function revivecontent(){selectedItem=getselectedItem()selectedComponents=selectedItem.split("|")contractcontent(selectedComponents[0])document.getElementById(selectedComponents[0]).style.display=selectedComponents[1]}function get_cookie(Name) { var search = Name + "="var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search)if (offset != -1) { offset += search.lengthend = document.cookie.indexOf(";", offset);if (end == -1) end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue;}function getselectedItem(){if (get_cookie(window.location.pathname) != ""){selectedItem=get_cookie(window.location.pathname)return selectedItem}elsereturn ""}function saveswitchstate(){if (typeof selectedItem!="undefined")document.cookie=window.location.pathname+"="+selectedItem}function do_onload(){getElementbyClass("switchcontent")if (enablepersist=="on" && getselectedItem()!="")revivecontent()}if (window.addEventListener)window.addEventListener("load", do_onload, false)else if (window.attachEvent)window.attachEvent("onload", do_onload)else if (document.getElementById)window.onload=do_onloadif (enablepersist=="on" && document.getElementById)window.onunload=saveswitchstate</script><style type="text/css">.switchcontent {	margin:0px;	padding:15px;	border:1px solid black;	display:hidden;	position:absolute;	top:0px;	left:100px;}</style></head><body bgcolor="white" marginheight="0" marginwidth="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0"><a name="top"></a><!-- begin navigation for detailed information --><a href="java script: void(0);" onclick="expandcontent('aaaaaa');" title="AAAAAA">AAAAAA</a><br><a href="java script: void(0);" onclick="expandcontent('bbbbbb');" title="BBBBBB">BBBBBB</a><br><a href="java script: void(0);" onclick="expandcontent('cccccc');" title="CCCCCC">CCCCCC</a><br><div id="aaaaaa" class="switchcontent"><strong>Paragraph AAAAAA</strong><br />I cdnuolt blveiee taht I cluod aulaclty uesdnatnrd waht I was rdgnieg.<br /></div><div id="bbbbbb" class="switchcontent"><strong>Paragraph BBBBBB</strong><br />The phaonmneal pweor of the hmuan mnid. Aoccdrnig to a rscheearch sduty at Cmabrigde Uinervtisy, it deosn't mttaer inwaht oredr the ltteers in a wrod are, the olny iprmoatnt tihng is taht the frist and lsat ltteer be in the rghit pclae.<br /></div><div id="cccccc" class="switchcontent"><strong>Paragraph CCCCCC</strong><br />The rset can be a taotl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae the huamn mnid deos not raed ervey lteter by istlef, but the wrod as a wlohe.<br /></div></body></html>

Just remember, content that is hidden can't be spidered by many search engines.

[Intense]

Many thanks. Appreciated. I will give it a go. :)Edit: Didn't realise you only need to edit one page this way, neat little trick!