Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Control across the frame 1

Status
Not open for further replies.
webmast

webmast

Programmer
Dec 21, 2001
57
IN
Hi,

I am designing a frame based page, which has the upper toolbar in one frame and the contents in the bottom one. When I click on the links on the toolbar the contents in the content page must change without refreshing using div tags. I could get it done with links in same page but when i use frames and controls across the frame I dunno how to do it.

Plz help.....

Thanx,
Tommcat
 
Sort by date Sort by votes
say you have three frames named 'navabar', 'menu', and 'main'. If you want to access stuff in the 'main' frame from any of the other frames youwould do this:
window.parent.document.main (in JavaScript of course).

Take Care,
Mike
 
Upvote 0 Downvote
Tommcat...

You don't want to refresh the page that serves as your content page. I imagine that you are storing multiple divs on the content page, and that you wish to show/hide these divs based on the links clicked in the toolbar. Am I correct?

If this is the case, then put an id tag on all the divs, and use the visibility property in the style of the div to show/hide them (visibility -> visible or visibility -> hidden). The code snippet that Mike posted will allow you to reference the frame (don't make the mistake of naming the frames using reserved words like: top, window etc).

Another alternative is if you had the text sitting in many Javascript variables and, using just the single div, you could replace the content of the div programatically (again targetting the frame and then the function on the content page that may control this action.

If you can identify which direction you are going in, I'm sure we can provide more specific help.

Jeff
 
Upvote 0 Downvote
Jeff,

I think I will follow the multiple div tags, can you help me with an example plz.

Thanx,

Tommcat...
 
Upvote 0 Downvote
OK... here is a working example using a simple frameset, a navigation and a content page (3 pages all told). The code was written to show you how you might access the different frames/divs... I'm sure once you understand how it is done you will come up with a much better implimentation.

Save this file as test.html:
Code: 
<html>
<frameset rows=&quot;100,*&quot;>
<frame id=&quot;navFrame&quot; src=&quot;navigation.html&quot;>
<frame id=&quot;contentFrame&quot; src=&quot;content.html&quot;>
</frameset>
</html>

Save this file as navigation.html:
Code: 
<html>
<head><title>Navigation</title>
<script type=&quot;text/javascript&quot;>
function pageMe(_divToShow)
{
	top.contentFrame.pageOne.style.visibility = 'hidden';
	top.contentFrame.pageTwo.style.visibility = 'hidden';
	top.contentFrame.pageThree.style.visibility = 'hidden';
	if (_divToShow == &quot;pageOne&quot;) top.contentFrame.pageOne.style.visibility = 'visible';
	if (_divToShow == &quot;pageTwo&quot;) top.contentFrame.pageTwo.style.visibility = 'visible';
	if (_divToShow == &quot;pageThree&quot;) top.contentFrame.pageThree.style.visibility = 'visible';
}
</script>
</head>

<body>
<a href=&quot;javascript:pageMe('pageOne');&quot;>Page One</a> ! 
<a href=&quot;javascript:pageMe('pageTwo');&quot;>Page Two</a> ! 
<a href=&quot;javascript:pageMe('pageThree');&quot;>Page Three</a>
</body>
</html>

Save this file as content.html:
Code: 
<html>
<head><title>Text Content</title>
<style type=&quot;text/css&quot;>
div#pageOne
{
position:absolute;
width:300px;
top:40px;
left:40px;
visibility:hidden;
}
div#pageTwo
{
position:absolute;
width:300px;
top:40px;
left:40px;
visibility:hidden;
}
div#pageThree
{
position:absolute;
width:300px;
top:40px;
left:40px;
visibility:hidden;
}
</style>
</head>

<body>
<div id=&quot;pageOne&quot;><h3>One</h3></div>
<div id=&quot;pageTwo&quot;><h3>Two</h3></div>
<div id=&quot;pageThree&quot;><h3>Three</h3></div>
</body>
</html>

All the best,
Jeff
 
Upvote 0 Downvote
Jeff, Thanx a lot... It was very useful.

:) Tommcat
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
915
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
815
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
727
coldbohemia
coldbohemia
AbidingDude
  • Locked
  • Question
Where Does The &quot;name&quot; Attribute Stand?
Replies
1
Views
357
gmmastros
gmmastros
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
261
amrmnabil
amrmnabil

Part and Inventory Search

Sponsor

Back
Top