javascript to swap content on page

StackOverflow https://stackoverflow.com/questions/20928450

  •  24-09-2022
  •  | 
  •  

Question

here is the jsfiddle of what im trying to accomplish.. http://jsfiddle.net/#&togetherjs=08LnngLQ1M

im trying to make the content in an html file swap in and out. The java script file is set up to apply the slide function to my div. Please show me what I need to add to the javascript in order to allow the information to swap in and out as well as display appropriately.

first my javascript file then under is the index.html file. also displayed the css in the head in order to show how i am trying to hide the content.

please show me how to implement the javascript i am lacking and then make appropriate changes to my html and css if necessary.

$(document).ready(function() {

  var hash = window.location.hash.substr(1);
  var href = $('#navigationMenu li a').each(function(){
      var href = $(this).attr('href');
      if(hash==href.substr(0,href.length-5)){
          var toLoad = hash+'.html #content';
          $('#content').load(toLoad)
      }                                           
  });

  $('#navigationMenu li a').click(function(){

      var toLoad = $(this).attr('href')+' #content';
      $('#content').hide('fast',loadContent);
      $('#load').remove();
      $('#wrapper').append('<span id="load">LOADING...</span>');
      $('#load').fadeIn('normal');
      window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);


      function loadContent() {
          $('#content').load(toLoad,'',showNewContent())
      }

      function showNewContent() {
          $('#content').show('normal',hideLoader());
      }

      function hideLoader() {
          $('#load').fadeOut('normal');
      }
      return false;



  });

});





    <style type="text/css">
    #page1, #page2, #page3, #page4, #page5 {
      display: none;
      overflow:hidden;
    }
    </style>


    </head>

    <body>
    <div id="top">
    </div>


    <!-- The navigation css is in styles.css -->

    <div id="main">

    <ul id="navigationMenu">
        <li>
          <a class="home" href="#home">
                <span>Home</span>
            </a>
        </li>

        <li>
          <a class="about" href="#about">
                <span>About</span>
            </a>
        </li>

        <li>
           <a class="services" href="#services">
                <span>Services</span>
             </a>
        </li>

        <li>
          <a class="portfolio" href="#portfolio">
                <span>Portfolio</span>
            </a>
        </li>

        <li>
          <a class="contact" href="#contact">
                <span>Contact us</span>
            </a>
        </li>
    </ul>

    </div>


    <!-- The css for the main area is in css.css-->
    <!-- The wrapper and the content div control the jquery slide up effect -->
    <div id="wrapper">
      <div id="content">

        <!-- The 5 pages content divs will display in this area -->           

      </div>
    </div> 

    <!-- The actual content I want to switch in and out of the panel, this is hidden -->
     <div id="page1" class="pages">
     <p>1 Whole bunch of text 1</div>

     <div id="page2" class="pages">
     <p>2 Whole bunch of text 2</div>

     <div id="page3" class="pages">
     <p>3 Whole bunch of text 3</div>

     <div id="page4" class="pages">
     <p>4 Whole bunch of text 4</div>

     <div id="page5" class="pages">
     <p>5 Whole bunch of text 5</div>
Was it helpful?

Solution

I suggest that you change your html so that your "pages" have ids that actually correspond to the href of the associated menu items:

<a href="#home">Home</a>

...
<div id="home" class="pages"><p>1 Whole bunch of text 1</p></div>

Then you can implement your slide animation paging thing something like this:

$(document).ready(function() {
    $("#navigationMenu a").click(function(e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $("#content").slideUp(function() {
            $(this).empty()
                   .append($("#" + item).clone().show())
                   .slideDown();
        });
    });
});

Note that there is no need to use .load() because you have all of the content already on the page. You can just empty the container and then append a clone of the relevant content.

Demo: http://jsfiddle.net/FtS8u/1/

Or in my opinion a neater option would be to move all of the content into the #content div to start with, show the #home "page" by default, and then just hide and show the pages in place:

$(document).ready(function () {
    $("#navigationMenu a").click(function (e) {
        e.preventDefault();
        var item = this.href.split("#")[1];
        $(".pages:visible").slideUp(function () {
            $("#" + item).slideDown();
        });
    });
    $("#home").show();
});

Demo: http://jsfiddle.net/FtS8u/2/

And a last thing to consider: if you remove the .pages { display : none; } CSS and instead use jQuery to hide the pages by adding this to the start of your document ready:

$(".pages").hide();

Then you'll still get the same effect: http://jsfiddle.net/FtS8u/7/ - except that if the user happens to have JavaScript disabled the page will still work because then the default anchor navigation will jump down to the associated div: http://jsfiddle.net/FtS8u/8/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top