Need help: Changing page content with JavaScript

**Mike Anthony** · 04-09-2012, 08:23 AM

I have a menu bar at the top of the page, and I want to change part of the page content upon clicking one of the menu buttons. I can't figure out how the program the JavaScript, I'm very new to programming. If someone could give me a hand that'd be awesome!

Here's the basic code below without any CSS. Not sure how to begin with the JavaScript.

HTML Code:

<html>

<head>
</head>

<body>
<div class="menubar">
    <ul>
        <li><a class="link" href="#">Home</a></li>
        <li><a class="link" href="#">Sales Staff</a></li>
        <li><a class="link" href="#">About Us</a></li>
        <li><a class="link" href="#">Services</a></li>
        <li><a class="link" href="#">Training</a></li>
        <li><a class="link" href="#">Rentals</a></li>
        <li><a class="link" href="#">Affiliations</a></li>
        <li><a class="link" href="#">Articles</a></li>
        <li><a class="link" href="#">Careers</a></li>
    </ul>
</div>

<div id="home" display:none>
     <!-- Content -->
</div>

<div id="salesstaff" display:none>
     <!-- Content -->
</div>

<div id="aboutus" display:none>
     <!-- Content -->
</div>

<div id="services" display:none>
     <!-- Content -->
</div>

<div id="training" display:none>
     <!-- Content -->
</div>

<div id="rentals" display:none>
     <!-- Content -->
</div>

<div id="affiliations" display:none>
     <!-- Content -->
</div>

<div id="articles" display:none>
     <!-- Content -->
</div>

<div id="careers" display:none>
     <!-- Content -->
</div>


</body>

</html>

**nathanwall** · 04-09-2012, 10:11 AM

By the display:none parts I assume you mean that the styles will be set to display:none in your CSS file.

This is really all you need for the js part:

PHP Code:


<script type="text/javascript">
var shown;
function show(id) {
    if(shown) shown.style.display = 'none';
    shown = document.getElementById(id);
    shown.style.display = 'block';
}
</script>

PHP Code:


<li><a class="link" href="#" onclick="show('home');">Home</a></li>
<li><a class="link" href="#" onclick="show('salesstaff');">Home</a></li>
...

**Mike Anthony** · 04-09-2012, 11:15 AM

Yeah they will be set to display:none in my CSS file. I was looking for example online and they all had the divs set to display:none, but I just couldn't understand what the code was doing or how it worked. I figured setting it to display:none would be the logical thing to do though since.

Now the thing is, when "home" is clicked, only the "home" HTML should be shown, and the rest should be hidden. Etc. will the code you gave me do that? I will give it a try after I get off work today.

Thank you for the help! I appreciate it.

**nathanwall** · 04-09-2012, 11:43 AM

Yes, it will, assuming all of them start with a style of none.
Probably you will want to show one of them by default, so call show('home'); at the end of the script as well so that it's the one that is shown when the page is first loaded. Here's an edited script for you that will show home by default:

PHP Code:


<script type="text/javascript">
var shown;
function show(id) {
    if(shown) shown.style.display = 'none';
    shown = document.getElementById(id);
    shown.style.display = 'block';
}
window.onload = function() {
    show('home');
};
</script>

**Mike Anthony** · 04-09-2012, 12:02 PM

Sweet! I didn't even think of that. Thank you very much. I'll post back with results later on.

I hope I can push myself to learn all this JavaScript so I can do this myself in the future.

**Padonak** · 04-09-2012, 12:18 PM

one else

Code:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>123</title>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{text-align:center;font-family:Verdana,Arial;font-size:11px;background-color:#fff;color:#000;padding:0px;margin:0px;}
a:link,a:active,a:visited{text-decoration:none;color:#777;background-color:transparent;font-weight:bold;}
a:hover{color:Crimson;background-color:transparent;}
ul{text-align:left;}
b.r{color:Salmon;font-size:14px;}
.hiddiv{display:none;}
</style>
<script type="text/javascript" id="voodoomagic">
$(document).ready(function(){
$('li a').click(function(){
$(this).parent().animate({'padding-left':'20px'},'fast',function(){$(this).siblings().css('padding-left','0px');});
var id=$(this).text().replace(/ /ig,'').toLowerCase();
$('div[class=hiddiv]').each(function(){
if($(this).attr('id')==id){$(this).fadeIn('slow');}
else if($(this).attr('id')!=id && $(this).css('display')!='none'){$(this).fadeOut('fast');}
});
});
});
</script>
</head>
<body>
<div class="menubar">
    <ul>
        <li><a class="link" href="#null">Home</a></li>
        <li><a class="link" href="#null">Sales Staff</a></li>
        <li><a class="link" href="#null">About Us</a></li>
        <li><a class="link" href="#null">Services</a></li>
        <li><a class="link" href="#null">Training</a></li>
        <li><a class="link" href="#null">Rentals</a></li>
        <li><a class="link" href="#null">Affiliations</a></li>
        <li><a class="link" href="#null">Articles</a></li>
        <li><a class="link" href="#null">Careers</a></li>
    </ul>
</div>

<div id="home" class="hiddiv">
     Content <b class="r">HOME</b>
</div>

<div id="salesstaff" class="hiddiv">
     Content <b class="r">Sales staff</b>
</div>

<div id="aboutus" class="hiddiv">
      Content <b class="r">About us</b>
</div>

<div id="services" class="hiddiv">
     Content <b class="r">Services</b>
</div>

<div id="training" class="hiddiv">
     Content <b class="r">Training</b>
</div>

<div id="rentals" class="hiddiv">
    Content <b class="r">Rentals</b>
</div>

<div id="affiliations" class="hiddiv">
    Content <b class="r">Affiliations</b>
</div>

<div id="articles" class="hiddiv">
      Content <b class="r">Spam</b>
</div>

<div id="careers" class="hiddiv">
      Content <b class="r">Careers</b>
</div>

</body>
</html>

**Mike Anthony** · 04-09-2012, 10:39 PM

Nathan - That worked perfectly. Thank you. I'll show you the website when I am finished. Might be a few days though.

Is there an advantage of JQuery over JavaScript? That looks like a mess....

**WolfShade** · 04-10-2012, 12:25 AM

jQuery is a JavaScript library.. nice to use, but don't become dependent upon it. Learn the language. Just my $0.02 worth.

**Mike Anthony** · 04-10-2012, 07:12 PM

Advice taken!

Quick question. Say I wanted to hide a div with JavaScript. Could I switch out that "show();" function with something to "hide" the div instead of show it?

I searched google and got completely lost.

**nathanwall** · 04-10-2012, 08:22 PM

To hide a div set its display style to "none", just like you would with CSS.

PHP Code:


var div = document.getElementById('someDivId');
div.style.display = 'none';

**Mike Anthony** · 04-10-2012, 09:57 PM

But how would I set that up using the onClick() command to hide the div? I'm assuming I can't just copy and past the original code and switch the var to something different because the function is still show().

I want it to work the same way as with the original code, just when the button it clicked, the div will be set to display:none;

I am going to keep trying to figure this out myself because I feel like a free-loader haha

EDIT: NEVERMIND! I figured it out. I wasn't aware that you could make the function yourself. I thought the the function was a pre-made JavaScript command. All I did was change the function name to "hide" and I changed the variable to "hidden." Then changed the display from block to none and it worked perfectly.... Now to figure out how to reference two divs in one "onclick()"

EDIT: Got it! onclick="hide('div');hide('div');"

**nathanwall** · 04-11-2012, 01:39 AM

Great, I'm glad you're figuring things out!

**Blitz143** · 04-24-2012, 01:00 AM

Hello Mike,

I too am starting my path learning JavaScript. Your question is just what I was asking and found your post. Thank you for asking these questions and posting your results they have helped me a lot. I would like to ask you though, when I load my page all the results are shown first then are hidden and display the right page once I click on the links. Do you know what I am missing to show just the Home page on load? I even used the on load option.

Thanks in advance

Thread: Need help: Changing page content with JavaScript

Thread Tools

Display

Need help: Changing page content with JavaScript

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions