user7186746 user7186746 - 11 days ago 7
Javascript Question

Javascript (Jquery) code for next article in 'memory'

First of all, I know of the (easier) possibilities of css for my question. But I am trying to learn JS (Jquery) so please bear with me.

My plan:
Menu-items (hooked to articles within my content division). Initially only the first article (#intro) is shown. All the articles within the #menu should be in an javascript array. When I hit next or previous another article corresponding with the chronology of the menu (articles) int he array should show.

this is a preview of what I want it to eventually look like (mind this is the 'bone-structure'): enter image description here

Please find my code below:

I am new to JS. I cannot figure out why the separate articles won't show. The first function of hiding everything initially works though.

my html code:

<div id="wrapper">
<header>

<div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'">
<img src="img/logo.png" alt="logo" />
<h1>Hartmeting voor fitte mensen</h1>
</div>

</header>

<!-- Stappenplan Menu -->
<nav id="menu">
<ul>

<li><a href="#menu_a"> Introductie </a></li>
<li><a href="#menu_b"> Het Probleem </a></li>
<li><a href="#menu_c"> Stappenplan </a></li>
<li><a href="#menu_d"> Hartmeting </a></li>
</ul>

</nav>

<!-- HET STAPPENPLAN -->
<div id="content">

<!-- Intro Slide -->
<article id="menu_a">
<h2>Introductie</h2>
<br>
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Intro Afbeelding" />
</figure>
<p>BLA BLA BLA BLA BLA BLA</p>
</article>

<!-- Slide 1 -->

<article id="menu_b">
<h2>Het Probleem</h2>
<br>
<figure>
<img src="img/hetprobleem1.jpg" , alt="Eerste Afbeelding" />
</figure>
<p>BLA BLA BLA BLA BLA BLA</p>
</article>

<!-- Slide 2 -->

<article id="menu_c">
<h2>Hoe kan mijn hartslag meten?</h2>
<br>
<figure>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Tweede Afbeelding" />
</figure>

<p>BLA BLA BLA BLA BLA BLA</p>

</article>

<!-- Slide 3 -->

<article id="menu_d">

<h2>Hart Meten</h2>
<br>
<figure>
<!-- Hartmeet tool -->
<div>
<div id="klik_Hart" class="heart">
<h3 id="uitleg">

</h3>
</div>
<br>
<br>
<br>

<!-- Einde hartmeet tool-->

</figure>

<p>BLA BLA BLA BLA BLA BLA</p>
</article>

<!-- ABOUT -->
<!-- <div id="about">

<p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p>

</div> -->


<!-- Buttons -->
<table id="volgorde">
<th>
<button class="button" name="previous">Vorige</button>
</th>
<th>
<button class="button" name="next">Volgende</button>
</th>
<th>

<!-- Checkbox Auto Slider -->
<div class="auto_menu">
<input type="checkbox" id="checkbox">
<label for="checkbox">Auto Manual</label>
</div>
<!-- -->
</th>

</table>

<div id="buffer"></div>
<footer>
<a href="#wrapper"> to the top! </a>
</footer>


My js code:

$(document).ready(function() {
$('#content').hide();
});

var visible = $('#menu_a').first();

var show_me = function(article) {

visible.hide();
visible = article;
visible.show();
}

$("#menu_a").click(function(event) {

var id_of_article = $(this).attr('href');
var the_article = $(id_of_article);
show_me(the_article);
even.preventDefault();
});


$('#next').click(function(event) {
var next = visible.next();
if (next.length != 0) { // is there another article left?
show_me(next);
}
event.preventDefault();


my CSS Stylesheet:

#titel {
color: #B0C4DE;
text-align: center;
}

body {
background-color: #708090;
color: grey;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
font-size: 12pt;
width: 100%%
}

#wrapper {
width: 90%;
margin-left: auto;
margin-right: auto;
background-image: url("../img/bg.jpg");
background-size: cover;
background-position: left top;
border: 2px groove #191970;
overflow: auto;
}

#content {
margin-left: auto;
margin-right: auto;
float: left;
width: 70%;
}

#content img {
height: 250px;
width: 450px;
}

#menu {
font-weight: thin;
color: grey;
float: left;
width: 15%;
text-align: center;
margin-left: 5%;
margin-top: 6.7%;
font-size: 10pt;
}


/*#about{
margin-left: auto;
margin-right: auto;
margin-bottom: 50%;
clear: left;
float: left;
float: right;
width: 15%;
text-align: center;
}*/

ul {
list-style-type: none;
}

h1 {
text-shadow: 1px 1px 3px #00008B;
}

a {
display: block;
text-decoration: none;
color: #FFA07A;
background-color: grey;
border: 1px solid #B0C4DE;
padding: 5px;
}

a:hover {
background-color: #FAEBD7;
color: blue;
}

footer {
overflow: hidden;
clear: both;
}

#volgorde {
font-weight: thin;
color: grey;
width: 10%;
text-align: center;
clear: both;
margin-left: 3%;
margin-bottom: 2%;
}

.button {
background-color: #5F9EA0;
color: #FFA07A;
border: none;
color: white;
padding: 5px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
}

.heart {
color: #FBF9FF;
background-image: url("../img/hart4.png");
background-size: 150px 150px;
height: 150px;
width: 150px;
}

.heart:hoover {
color: #FFA07A;
background-color: grey;
}

#uitleg p {
color: #FA8072;
}

#logo img {
float: left;
width: 60px;
height: 60px;
margin-left: 2%;
}

#logo h1 {
position: relative;
top: 15px;
left: 10px;
}

#klik_ {
text-align: center;
}

article p {
height: 200px;
width: 450px;
font-size: 10pt;
color: grey;
font-weight: bold;
overflow: scroll;
margin-left: 4%;
margin-bottom: 5%;
text-align: justify;
text-justify: inter-word;
}

#buffer {
clear: both;
height: 10%;
}

#stappen {
font-weight: bold;
font-size: 10pt;
}

.auto_menu {
position: relative;
margin: 5px auto;
width: 160px;
font-size: 14px;
}


What am I doing wrong in my JS? My intention was to put all the menu items into a variable and with the buttons 'next' / 'previous' display the content of the menu-items.

JSFiddle Preview

EDIT

var articleIds=['menu_a', 'menu_b', 'menu_c', 'menu_d'];

var visible = $('#menu_a').first();

var show_me = function(article) {

visible.hide();
visible = article;
visible.show();
}

$("#menu_a").click(function(event) {

var id_of_article = $(this).attr('href');
var the_article = $(id_of_article);
show_me(the_article);
even.preventDefault();
});

$('#next').click(function (event)
{
var next;
if (visible.attr('#content') == articleIds[articleIds.length - 1])//article is the last one
next = $('#' + articleIds[0]); //come back to first one
else
next = visible.next();
show_me(next);
event.preventDefault();
});

Answer

I did some changes in your code. some divs had no end tag and in images you put a ',' between src="" , alt="". between them must be only space. And the script must be in the end of document. And button next you wrote name='next' it must be id="next". Then I removed the line $('#content').hide(); You must know $('#asdf') only works with id of elements. so must set id for your links:

<a id="Some_Name" href="#menu_a">Introductie </a>

and tested next button and it did some things to me but i do not know what you exactly want. And finally your code is this please test:

<body>
<div id="wrapper">
    <header>
        <div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'">
            <img src="img/logo.png" alt="logo" />
            <h1>Hartmeting voor fitte mensen</h1>
        </div>
    </header>
    <nav id="menu">
        <ul>
            <li><a href="#menu_a">Introductie </a></li>
            <li><a href="#menu_b">Het Probleem </a></li>
            <li><a href="#menu_c">Stappenplan </a></li>
            <li><a href="#menu_d">Hartmeting </a></li>
        </ul>
    </nav>
    <div id="content">
        <article id="menu_a">
            <h2>Introductie</h2>
            <br>
            <figure>
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Intro Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <article id="menu_b">
            <h2>Het Probleem</h2>
            <br>
            <figure>
                <img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>

        <article id="menu_c">
            <h2>Hoe kan mijn hartslag meten?</h2>
            <br>
            <figure>
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Tweede Afbeelding" />
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <article id="menu_d">
            <h2>Hart Meten</h2>
            <br>
            <figure>
                <div>
                    <div id="klik_Hart" class="heart">
                        <h3 id="uitleg">asdfasdf
                        </h3>
                    </div>
                </div>
                <br>
                <br>
                <br>
            </figure>
            <p>BLA BLA BLA BLA BLA BLA</p>
        </article>
        <table id="volgorde">
            <th>
                <button class="button" name="previous">Vorige</button>
            </th>
            <th>
                <button class="button" id="next">Volgende</button>
            </th>
            <th>
                <div class="auto_menu">
                    <input type="checkbox" id="checkbox">
                    <label for="checkbox">Auto Manual</label>
                </div>
            </th>
        </table>
        <div id="buffer"></div>
        <footer>
            <a href="#wrapper">to the top! </a>
        </footer>
    </div>
    </div>
    <script>
    $(document).ready(function ()
    {
        $('#content').hide();
    });

    var visible = $('#menu_a').first();

    var show_me = function (article)
    {

        visible.hide();
        visible = article;
        visible.show();
    }

    $("#menu_a").click(function (event)
    {

        var id_of_article = $(this).attr('href');
        var the_article = $(id_of_article);
        show_me(the_article);
        even.preventDefault();
    });


    $('#next').click(function (event)
    {
        var next = visible.next();
        if (next.length != 0)
        { // is there another article left?
            show_me(next);
        }
        event.preventDefault();
    });
</script>