Cannot get HTML5 Loading data-section when click on Navigation link to work

Question

Getting here through Google search and following mainly this and this thread (and some other third party sources for gaining more knowledge about the subject), I think I pretty much am trying to accomplish something similar to what user Combustion007 from the threads is trying.

BUT to my disappointment I could not get it to work. I am not at home at all with JS and have much to learn about CSS and what HTML5 brought along so I guess there's simply something I am missing here. I would appreciate if someone could take a look and tell me what I need to do to get this thing working.

I've been at this for hours and simply at this point I think I have to ask for some guidance. Thank you in advance! :)

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>

<link rel="stylesheet" href="css/css.css">

<!--[if lt IE 9]-->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]-->

</head>

<body>

<div class="container">
  <header class="headermod">
    <h1>Title</h1>
  </header>
  <nav>
  <ul>
    <li><a href="#" data-section="#home">Home</a></li>
    <li><a href="#" data-section="#photo">Photography</a></li>
    <li><a href="#" data-section="#about">About</a></li>
    <li><a href="#" data-section="#contact">Contact</a></li>
  </ul>
  </nav>
  <div class="content">


    <section id="home">
      <h2>Home</h2>
      <p>Home</p></section>

    <section id="photo">
      <h2>Photos</h2>
      <p>Photos</p>
    </section>

    <section id="about">
      <h2>About</h2>
      <p>About</p>
    </section>

    <section id="contact">
      <h2>Contact</h2>
      <p>Contact</p>
    </section>

  <!-- end .content --></div>
  <footer>
  <div class="footermod">
  <hr class="footer-hr">
    <p style="text-align: left;">&copy; Copyright</p>
  </div>
  </footer>
  <!-- end .container --></div>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/modernizr.js"></script>

<script type="text/javascript">
$("a").on("click", function(e) {
    e.preventDefault();
    var sectionID = '#'+ $(this).data("section");
    $("#content section:visible").fadeOut();
    $(sectionID).fadeIn();
});
</script>

</body>

</html>

CSS

body {
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #FFF;
    font-size: 90%;
    background-color: #000000;
}

ul, ol, dl { 
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;   
    padding-right: 15px;
    padding-left: 15px; 
    color: #FFF;
    background-color: #000;
}
a img { 
    border: none;
}

a:link {
    color: #FFF;
    text-decoration: none; 
}
a:visited {
    color: #000000;
    text-decoration: none;
}
a:hover, a:active, a:focus { 
    color: #FFF;
    text-decoration: none;
}

.container {
    width: 890px;
    margin: 0 auto; 
    background-color: #000000;
}

header {
    background: #000000;
}

.headermod {

    padding-top: 20px;  

}

.sidebar1 {
    float: right;
    width: 0px;
    background: #000000;
    padding-bottom: 10px;
}
.content {
    padding: 10px 0;
    float: left;
    overflow:auto; 
}


.content tr, .content ol {
    padding: 0 15px 15px 40px; 
}


nav ul {
    list-style: none; 
    border-top: 1px solid #000; 
    margin-bottom: 15px; 
    background-color: #000;
}
nav ul li {
    border-right: 0px solid #000;
    float: left;
    display: inline;
}
nav ul a, nav ul a:visited { 
    padding: 5px 5px 5px 15px;
    display: block; 
    width: 200px; 
    text-decoration: none;
    background: #39F;
}
nav ul a:hover, nav ul a:active, nav ul a:focus { 
    color: #FF6;
    background-color: #000000;
}

footer {
    padding: 10px 0;
    background: #000000;
    position: relative;
    clear: both; 
}

.footermod {
    font-size: 60%;
    text-align: left;
}

.footer-hr {
    width: 880px;
}

header, section, footer, aside, nav, article, figure {
    display: block;
    background-color: #000;
}

section
{
    display: none;
    text-align: left;
}

#home { height: 400px; width: 890px; display: block; }
#photo { height: 400px; width: 890px; }
#about { height: 400px; width: 890px; }
#contact { height: 400px; width: 890px; }

I think you need to replace var sectionID = '#'+ $(this).data("section"); with var sectionID = '#'+ $(this).attr("data-section"); — Anze Jarni, Jul 31 '12 at 22:19
Sorry, that doesn't do the trick. But thank you very much for taking a look. :) — Valle, Jul 31 '12 at 22:40

score 1 · Answer 1 · answered Jul 31 '12 at 22:26

1

Change

var sectionID = '#'+ $(this).data("section");

to

var sectionID = $(this).data("section");

You are doubling the "#", resulting in selectors like ##home and ##about

answered Jul 31 '12 at 22:26

MrOBrian

2,189
16
13

Thank you! After this change it was the first time I actually got the links to do something. There is still something wrong, though. The old section doesn't fade out when clicking on a link. It remains open. So each click opens another section and if I click on all of the links, it opens all of them. So there is a problem with closing the previous section when clicking to open a new one. – Valle Jul 31 '12 at 22:29
EDIT: I changed the code to $(".content section:visible").fadeOut(); So it now works! But there is a noticeable delay with the fades (for a moment the old and new section are both visible). I guess it has something to do with the JS part of this which I'm not familiar with. – Valle Jul 31 '12 at 22:36
You might want to put the `fadeIn()` call in the callback of `fadeOut` so that the new section doesn't start to fade in until the other one is done fading out – MrOBrian Jul 31 '12 at 22:38
I don't know what would be the correct thing instead of text() function there or if this helps at all but it now looks better. Especially thanks to added time measure so it looks nice and quick. BUT now I found another problem (big shocker, right?): after I click each link, the content disappears and links won't work anymore. Only thing that helps is refresh. Script right now: $("a").on("click", function(e) { e.preventDefault(); var sectionID = $(this).data("section"); $(".content section:visible").fadeOut(10, function() { text(); }); $(sectionID).fadeIn(); }); – Valle Jul 31 '12 at 23:33
Which links stop working? Unless you are adding or replacing links, they should continue working. – MrOBrian Aug 01 '12 at 00:05
All links stop working after I've clicked through each one of them. It's like you can only click once on each link and then none of the links work anymore and no section content is displayed any more. – Valle Aug 01 '12 at 20:49
are you using `.on()` or `.one()`? – MrOBrian Aug 01 '12 at 20:51

Cannot get HTML5 Loading data-section when click on Navigation link to work

1 Answers1