www.webdeveloper.com
Results 1 to 13 of 13

Thread: Need help: Changing page content with JavaScript

  1. #1
    Join Date
    Apr 2012
    Posts
    6

    Need help: Changing page content with JavaScript

    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>

  2. #2
    Join Date
    Apr 2012
    Posts
    55
    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(
    shownshown.style.display 'none';
        
    shown document.getElementById(id);
        
    shown.style.display 'block';
    }
    </script> 
    PHP Code:
    <li><class="link" href="#" onclick="show('home');">Home</a></li>
    <
    li><class="link" href="#" onclick="show('salesstaff');">Home</a></li>
    ... 

  3. #3
    Join Date
    Apr 2012
    Posts
    6
    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.

  4. #4
    Join Date
    Apr 2012
    Posts
    55
    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(
    shownshown.style.display 'none';
        
    shown document.getElementById(id);
        
    shown.style.display 'block';
    }
    window.onload = function() {
        
    show('home');
    };
    </script> 

  5. #5
    Join Date
    Apr 2012
    Posts
    6
    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.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    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>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Apr 2012
    Posts
    6
    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....

  8. #8
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    jQuery is a JavaScript library.. nice to use, but don't become dependent upon it. Learn the language. Just my $0.02 worth.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  9. #9
    Join Date
    Apr 2012
    Posts
    6
    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.

  10. #10
    Join Date
    Apr 2012
    Posts
    55
    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'

  11. #11
    Join Date
    Apr 2012
    Posts
    6
    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');"
    Last edited by Mike Anthony; 04-10-2012 at 10:16 PM.

  12. #12
    Join Date
    Apr 2012
    Posts
    55
    Great, I'm glad you're figuring things out!

  13. #13
    Join Date
    Apr 2012
    Posts
    1
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles