Changing content in sections of a...

User 179746 Photo


Ambassador
10 posts

Hi!
I'm trying to connect a menu button to change a main section on my webpage (without using frames) using CSS while keeping other sections static. Any suggestions?

Terry
User 355448 Photo


Ambassador
3,144 posts

Terry,

I know of two ways to change content as you seem to want. The easy way is to use an iframe, which is not the same as using a frameset. The other way is something I read an tested some, by using CSS and DIV statements, you can have several divisions with all but one hidden, and when you click on the menu button/link, one of the hidden divisions becomes visible and all the others are hidden.

I can tell you how to do the iframe part now, but if you need to use the other method, it will need some research.

Using an iframe, your code would look something like this:
<!DOCTYPE HTML PUBLIC "-//WC3//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>using an iframe</title>
<style type="text/css">
.content{position: absolute;
top: 0px; left:200px; height:600px; width:719px; border:2;
}
</style>
</head>
<body>
<!-- this is one example of the link code - other code could be used -->


<ul>
<li><a href="content1.html" target = "iframe">Content one</a></li>
<li><a href="content2.html" target = "iframe">Content two</a></li>
<li><a href="content3.html" target = "iframe">Content three</a></li>
<li><a href="content4.html" target = "iframe">Content four</a></li>
<li><a href="content5.html" target = "iframe">Contnet five</a></li>
<li><a href="content6.html" target = "iframe">contnet six</a></li>
</ul>



<!-- This is the iframe code -->
<div class="content">
<iframe name="iframe" scrolling="auto" ></iframe>
</div>
</body>
</html>

You can adjust the position and size of the iframe, and if you want you can change the style statement from border:2 to border:0 to remove the iframe border.

Let us know if this is what you want.
User 179746 Photo


Ambassador
10 posts

Bill

Thanks for the suggestions. I didn't know about iframe
but I think was looking for the CSS way of doing things.
But's it's nice to have something to fall back on. I'll
keep this in my arsenal for later use if I can't find out the other way.

You've at least given me an idea about what I should be looking for with the CSS and DIV stuff.

Thanks,


Terry
User 355448 Photo


Ambassador
3,144 posts

Terry,

I think you could find something by googling html div hidden.

One site you can check is:

http://www.netlobo.com/div_hiding.html
User 133269 Photo


Registered User
2,900 posts

try a little javascript....

<script type="text/javascript"><!--
function show(id, cntl)
{
el = document.getElementById(id);
cntl = document.getElementById(cntl);
if (el.style.display == 'none')
{
el.style.display = '';
cntl.innerHTML = 'Hide';
} else {
el.style.display = 'none';
cntl.innerHTML = 'Show';
}
}
--></script>

<a href="#" onClick="show('text', 'link');" id="link">Show Calendar </a>
<div id="text" style="display:none;">
div contents
</div>
Have fun
~ Fe Pixie ~
User 179746 Photo


Ambassador
10 posts

Fe Pixie:

Thanks for the suggestion.
I've been trying to figure out the javascript code you suggested.
If I have a page that has a header section, footer section, left section and right section ( all DIVs) and I have a link that I want to click in the left section so that new content (called youth which is a different file for example) should appear in the right section but all other sections stay the same and appear unchanged.
I don't want to use frames if I don't have to. The javascript should do it but I"m confused over id's.

I can create a link that will work but if I want to update the left section I would have to update all the pages everytime. That's a serious
time user. I'm just trying to find an easier way of updating content without have to do major changes each time.

I hope all this rambling makes sense.
Hopefully you can help or at least tell me where to go!!! :)

Terry

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.