CODEWITHSUNDEEP
javascriptjqueryhideshowshow-hide
Jameel
Jameel

Reputation: 43

Hiding Next and Previous buttons when First or Last items are active

I am having an issue hiding previous/next buttons for first/last items. I'm trying to hide the previous button on the first and hide the next button on the last. The current item has the class "active".

HTML:

<div class="container content">
    <div class="row">
        <div class="col-xs-3 lefty">
            <div id="left-nav">
                <ul>
                    <li><a class="nav-button" href="#1">Link 1</a></li>
                    <li><a class="nav-button" href="#2">Link 2</a></li>
                    <li><a class="nav-button active" href="#3">Link 3</a></li>
                    <li><a class="nav-button" href="#4">Link 4</a></li>
                    <li><a class="nav-button" href="#5">Link 5</a></li>
                    <li><a class="nav-button" href="#6">Link 6</a></li>
                </ul>
            </div>
        </div>
        <div class="col-xs-9 righty">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. Vivamus dolor nulla, tempor a vulputate at, auctor ac ex. Praesent vestibulum lorem vitae lectus fringilla, vitae aliquet velit consequat. Mauris erat urna, dictum ut aliquam at, accumsan eget leo. Cras vel egestas arcu, quis scelerisque libero. Pellentesque vulputate varius scelerisque. Proin elementum urna vitae enim tincidunt, et commodo massa sagittis.</p>

            <div class="bottom-links">
                <a class="prev-button" href="#">Left</a>
                <a class="next-button" href="#">Right</a>
            </div>

        </div>
    </div>
</div>

Working jQuery:

$(document).ready(function () {
    $('.next-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $next = $el.parent().next();

        if ($next.length === 0) $next = $('#left-nav li:first');

        $next.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $next.find('a.nav-button').attr('href');

    });


    $('.prev-button').click(function () {
        var $el = $('#left-nav li a.active').removeClass('active'),
            $prev = $el.parent().prev();

        if ($prev.length == 0) $prev = $('#left-nav li:last');

        $prev.find('a.nav-button').addClass('active');

        // Added window.location.href to follow the selected links href
        window.location.href = $prev.find('a.nav-button').attr('href');

    });
});

My Attempt:

$(document).ready(function () {
    if($('.nav-button').eq(-1).is(':not(.active)')){
        $('.next-button').show();
    }
    else {
        $('next-button').hide();
});

$(document).ready(function () {
    if($('.nav-button').eq(1).is(':not(.active)')){
        $('.prev-button').show();
    }
    else {
        $('prev-button').hide();
});

Fiddle: http://jsfiddle.net/jameelmoses/uo17qc94/

Upvotes: 1

Views: 1885

Answers (4)

Jacob Finamore
Jacob Finamore

Reputation: 797

So I just added a couple of conditions to hide and show the next/prev buttons

               //Bottom links
   $(document).ready(function() {
       $("#prev-button").text("link 2");
       $("#next-button").text("link 4");
       $('#next-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[$(".nav-button").length - 2]) {
               $("#next-button").hide()
           }
           $("#prev-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $next = $el.parent().next();

           if ($next.length === 0) $next = $('#left-nav li:first');

           $next.find('a.nav-button').addClass('active');
           if ($next.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($next.prev().find('a.nav-button')[0].innerText);
           }
           if ($next.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($next.next().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $next.find('a.nav-button').attr('href');

       });


       $('#prev-button').click(function() {
           if ($("a.nav-button.active")[0] == $(".nav-button")[1]) {
               $("#prev-button").hide()
           }
           $("#next-button").show();
           var $el = $('#left-nav li a.active').removeClass('active'),
               $prev = $el.parent().prev();

           if ($prev.length == 0) $prev = $('#left-nav li:last');

           $prev.find('a.nav-button').addClass('active');
           if ($prev.next().find('a.nav-button')[0].innerText != undefined) {
               $('#next-button').text($prev.next().find('a.nav-button')[0].innerText);
           }
           if ($prev.prev().find('a.nav-button')[0].innerText != undefined) {
               $('#prev-button').text($prev.prev().find('a.nav-button')[0].innerText);
           }

           // Added window.location.href to follow the selected links href
           window.location.href = $prev.find('a.nav-button').attr('href');

       });
   });

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try utilizing onhashchange event

var prev = $(".prev-button"), next = $(".next-button");
    window.onhashchange = function(e) {
    var active = $(".nav-button.active");
        if (active.index(".nav-button") === $(".nav-button").length -1) {
            next.hide(0);
            prev.show(0);
        } else {
          next.show(0);
            if (active.index(".nav-button") === 0) {
              prev.hide(0)
            }
        }
}

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

This will toggle visibility of the previous and next buttons, based on whether the first or last .nav-button is active:

$('.prev-button, .next-button').click(function() {
  $('.prev-button').toggle($('.nav-button:first').is(':not(.active)'));
  $('.next-button').toggle($('.nav-button:last').is(':not(.active)'));
});

You can combine this code with your existing code like this:

$('.prev-button, .next-button').click(function() {
  var $el = $('#left-nav li a.active').removeClass('active'),
      $link = $(this).hasClass('prev-button') ? $el.parent().prev() : $el.parent().next();

  $link.find('a.nav-button').addClass('active');

  $('.prev-button')
    .toggle($('.nav-button:first').is(':not(.active)'))
    .html($link.prev().text());

  $('.next-button')
    .toggle($('.nav-button:last').is(':not(.active)'))
    .html($link.next().text());

  window.location.href = $link.find('a.nav-button').attr('href');
}).click();

This will also change the text of the buttons to match the link text.

Snippet

//Bottom links
$(document).ready(function () {

  $('.prev-button, .next-button').click(function() {
    var $el = $('#left-nav li a.active').removeClass('active'),
        $link = $(this).hasClass('prev-button') ? $el.parent().prev() : $el.parent().next();

    $link.find('a.nav-button').addClass('active');

    $('.prev-button')
      .toggle($('.nav-button:first').is(':not(.active)'))
      .html($link.prev().text());
          
    $('.next-button')
      .toggle($('.nav-button:last').is(':not(.active)'))
      .html($link.next().text());
      
    window.location.href = $link.find('a.nav-button').attr('href');
  }).click();
    
});
body { padding: 30px 0; font-family: Arial; }

a, a:hover { text-decoration: none; }

.lefty {
    padding: 0;
}

#left-nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #eee;
}

#left-nav ul li a, #left-nav ul li a:visited {
    padding: 8px 16px;
    display: block;
    background-color: lightgray;
    color: navy;
}

#left-nav ul li a.active, #left-nav ul li a:hover, #left-nav ul li a:active {
    border-left: 4px solid orange;
    background-color: #eee;
    padding-left: 12px;
}

#left-nav ul li a.active {
    font-weight: bold;
}

.bottom-links a, .bottom-links a:visited {
    background-color: lightgray;
    padding: 6px 12px;
    border-radius: 4px;
    margin-top: 30px;
    color: navy;
    min-width: 60px;
    text-align: center;
}

.bottom-links a:hover, .bottom-links a:active {
    color: white;
    background-color: navy;
}

.prev-button {
    float: left;
    margin-left: 8%;
}

.next-button {
    float: right;
    margin-right: 8%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container content">
    <div class="row">
        <div class="col-xs-3 lefty">
            <div id="left-nav">
                <ul>
                    <li><a class="nav-button" href="#1">Link 1</a></li>
                    <li><a class="nav-button" href="#2">Link 2</a></li>
                    <li><a class="nav-button active" href="#3">Link 3</a></li>
                    <li><a class="nav-button" href="#4">Link 4</a></li>
                    <li><a class="nav-button" href="#5">Link 5</a></li>
                    <li><a class="nav-button" href="#6">Link 6</a></li>
                </ul>
            </div>
        </div>
        <div class="col-xs-9 righty">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan efficitur nunc, ut suscipit nisl. Phasellus vitae tellus a nunc feugiat commodo eget ac lorem. </p>

            <div class="bottom-links">
                <a class="prev-button" href="#">Left</a>
                <a class="next-button" href="#">Right</a>
            </div>

        </div>
    </div>
</div>

Upvotes: 1

Ted
Ted

Reputation: 14937

I added a separate function so you could call it regardless of which nav was clicked (left or bottom, etc):

function setButtonDisplay(){
    var hidePrev = $('#left-nav li:first a.nav-button').hasClass('active'),
        hideNext = $('#left-nav li:last a.nav-button').hasClass('active');

    $('.prev-button')[hidePrev ? 'hide' : 'show']();
    $('.next-button')[hideNext ? 'hide' : 'show']();
}

Upvotes: 0

Related Questions