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 derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Keeping information visible at all times 2

Status
Not open for further replies.
NKA

NKA

Programmer
Joined
Mar 20, 2002
Messages
76
Location
NZ
I am trying to put together HTML pages WITHOUT using frames (if that's at all possible).

I want to be able to keep the "Title" area visible at the top of the page, even if the information scrolls below the visible area.

Is this possible? If so, would some kind genius let me in on the secret??? [;-)] NKA

The answer's always easy - if you know it! ;-)
 
Sort by date Sort by votes
Thank you! I didn't think to check out Static Menus! I suppose a Header will work the same!

I originally started out with frames, but wanted to move away from them!!! I will give this a go anyway.

Cheers NKA

The answer's always easy - if you know it! ;-)
 
Upvote 0 Downvote
You could use CSS positioning as such:
Code: 
<h1 style=&quot;position: fixed; top: 1em; left: 1em;&quot;>Fixed Title</h1>
...and make sure that the next higher element is the <html> element. One big problem, this is NOT supported well by browswers. My testing reveals:
IE no
Mozilla yes
 
Upvote 0 Downvote
Thanks sonnysavage for the idea, but I couldn't get it to work - so will struggle on with the &quot;static&quot; menu idea... unless someone else has any other ideas.... NKA

The answer's always easy - if you know it! ;-)
 
Upvote 0 Downvote
You could use divs with an overflow property:


<div style=&quot;height:100%; width:100%&quot;>
<div id=TitleDiv style=&quot;height:20%; width:100%; overflow:auto; background-color:red&quot;>
top text<br>top text<br>top text<br>top text<br>top text<br>top text<br>top text<br>top text<br>top text<br>
</div>
<div id=CotentDiv style=&quot;height:80%; width:100%; overflow:auto; background-color:blue&quot;>
bottom text<br>bottom text<br>bottom text<br>
</div>
</div>


You could then use scripting to dynamically change the content in the bottom div ie,

ContentDiv.innerHTML = &quot;...&quot;;
 
Upvote 0 Downvote
Thanks for the <Div> idea. Being relatively new to HTML, I didn't quite know what the Overflow business was all about, but with your simple code I can see it!

I actually need the scroll facility on the &quot;body&quot; bit rather than the &quot;header&quot;, so I can swap them around no problem.

Can you please explain a bit more about the ContentDiv.innerHTML you spoke about - this has gone completely over the top of my head now! NKA

The answer's always easy - if you know it! ;-)
 
Upvote 0 Downvote
The innerHTML property is a javascript method of dynamically changing the HTML on a page without having to refresh it. Its supported in all IE borwser from 1e4 onwards and is also supported in Netscape 6 and above.

If you want to replace an area of text in a page with another area of text then I will show you how this is done, using the previously submitted code:


<div style=&quot;height:100%; width:100%&quot;>


<div id=TitleDiv style=&quot;height:20%; width:100%; overflow:auto; background-color:#999999&quot;>
<!--
this div will hold the links that will call the javascript to replace the text in the ContentDiv div below
-->
<a href=&quot;#&quot; onclick=&quot;ReplaceContent(1)&quot;>Section 1</a>
&nbsp;&nbsp;
<a href=&quot;#&quot; onclick=&quot;ReplaceContent(2)&quot;>Section 2</a>
&nbsp;&nbsp;
<a href=&quot;#&quot; onclick=&quot;ReplaceContent(3)&quot;>Section 3</a>

</div>


<div id=CotentDiv style=&quot;height:80%; width:100%; overflow:auto; background-color:#ffffff&quot;>
<!--
we will replace the text in here by clicking a link in the TitleDiv div above
-->
This is the text to be replaced<br>
</div>

</div>

<div id=Section1Content style=&quot;display:none&quot;>
Section 2 <br> <B>HTML</b> <br> goes here
</div>

<div id=Section2Content style=&quot;display:none&quot;>
Section 2 <br> <B>HTML</b> <br> goes here
</div>

<div id=Section3Content style=&quot;display:none&quot;>
Section 3 <br> <B>HTML</b> <br> goes here
</div>
<!--
This is the script that the links above call to replace the content in ContentDiv
-->
<script language=javascript>
function ReplaceContent(sectionNumber)
{
eval(&quot;CotentDiv.innerHTML=Section&quot;+sectionNumber+&quot;Content.innerHTML&quot;);
}
</script>

thats it! Hope this helps

The script sample I have shown is IE only, you will have to detect if Netscape browser is being used and then change the script accordingly for the script to work for both browsers
 
Upvote 0 Downvote
Thank you so much! That is really useful! You're an absolute star! I don't understand Javascript at all, but your simple example makes it easy for me to find where things change!

Cheers NKA

The answer's always easy - if you know it! ;-)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question Question
Table not formatted correctly in all browsers
Replies
2
Views
501
PeDa
PeDa
LyndonOHRC
  • Locked
  • Question Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
906
vacunita
vacunita
lupidol
  • Locked
  • Question Question
How do I place an element at the center of its' ancestor?
Replies
5
Views
513
datamasher
datamasher
ggriffit
  • Locked
  • Question Question
Adding a CSS attribute overlay using ::after
Replies
8
Views
601
ChrisHirst
ChrisHirst
garcosta
  • Locked
  • Question Question
CSS Coding for Gradient Color Background for all Platforms
Replies
3
Views
393
1DMF
1DMF

Part and Inventory Search

Sponsor

Back
Top