Ways to hide navigation links when on first or last post of a storyline?

[tnog]

I was just wondering if there was a way to hide the paging navigation previous_webcomic_link(), first__webcomic_link() for the first post in a storyline; and also similarly the corresponding next, last links for the last post in a storyline?

I'm using my own custom theme where I've created a template single-webcomic1.php to handle a specific collection:

 <?php get_header(); ?>

<!-- Row for main content area -->
    <div class="small-12 large-9 columns" role="main">      

        <?php /* Start loop */ ?>
        <?php while (have_posts()) : the_post(); ?>
            <article <?php post_class() ?> id="post-<?php the_ID(); ?>">
                <header>
                    <h1 class="entry-title"><?php the_title(); ?></h1>
                    <?php reverie_entry_meta(); ?>
                </header>
                <?php tn_cstm_webcomic_pagination(); ?>

                <section class="webcomic-content entry-content">
                    <?php the_webcomic(); ?>
                </section>
                <?php tn_cstm_webcomic_pagination(); ?>
                <?php //comments_template(); ?>
            </article>
        <?php endwhile; // End the loop ?>

    </div>
    <?php get_sidebar(); ?>

<?php get_footer(); ?>

The paging navigation is below:

function tn_cstm_webcomic_pagination() {

  ?>

  <nav class="webcomic-paging">
          <div class="button-bar">

            <ul class="first-panel button-group">
              <li class="secondary button"> 
                <?php previous_webcomic_link( '%link', '<i class="icon-reply"></i>Previous', true ); ?>
              </li>

              <li class="secondary button"> 
                <?php first_webcomic_link( '%link', '<i class="icon-ccw"></i>First', true ); ?>
              </li>
            </ul>
            <ul class="next-panel button-group">
              <li class="secondary button"> 
                <?php last_webcomic_link( '%link', 'Last <i class="icon-cw"></i>', true ); ?>
              </li>

              <li class="secondary button"> 
                <?php next_webcomic_link( '%link', 'Next <i class="icon-forward"></i>', true ); ?>
              </li>

            </ul>
          </div>

        </nav>

<?php }

I'd like to be able to target the corresponding paging navigation if one visits the first or last post, by hiding the previous & first webcomic_links for the former; and the 'next&last`webcomic_links for the latter. Am I missing something, or is there a inbuilt way to do this?

[mgsisk]

You should be able to do this with some basic CSS. When you're on the first or last Webcomic in a collection (or storyline, if that's how your navigation is setup), Webcomic should be adding a current-webcomic class to the appropriate links (first/previous or next/last). Adding something like this to your theme's style.css should hide them when that happens:

.webcomic-paging .current-webcomic { display: none; } /* alternatively, you might try visibility: hidden, which will make the links invisible but maintain their layout. */

[tnog]

Thanks Michael that's exactly what I needed to know. I used the class and some jQuery to override the click behavior and opacity of the button on the first and last Webcomic in a storyline:

add_action( 'wp_footer', 'tn_cstm_webcomic_disable_click', 101 );

  function tn_cstm_webcomic_disable_click() {
     //Targets single posts of webcomic1 CPT
      if( is_singular('webcomic1') ) { ?>
        <script>

        jQuery(document).ready( function($) {  
         // Override default click behavior and changes cursor from pointer to default on hover
          $('.current-webcomic').bind('click',false);
         // The parent button style is dimmed
          $('.current-webcomic').parent().css({ 'opacity': '0.25', 'cursor': 'default'});

        });
        </script>
      <?php
      }
  }