Question

I was happy to cobble some code together that gives me a nice looking tabbed-box on my (wordpress) page – 2 tabs; a feed and recent comments. Only after a few days have I noticed a problem: Firefox shows 2 tab boxes, one below the other, each showing the other tab. IExplorer displays a single functional tab-box as intended.

Could some kind soul take a look at the code for an obvious glitch(?) – I kept in the php for completeness, but as the feeds and comments display fine, I assume that can be ignored…
[Currently showing the issue (with Firefox) here]

<script>
  function diarytabs(newtab,oldtab) {
    if (document.getelementbyid)
    {
      document.getelementbyid(newtab).style.display = "inline";
      document.getelementbyid(oldtab).style.display = "none";
      return false;
    }
    else if (document.all)
    {
      document.all[oldtab].style.display = "none";
      document.all[newtab].style.display = "inline";
      return false;
    }
    else 
    {
      return true;
    }
  }
</script>

<div class="diary-tab" id="diary1">
  <ul class="tabs">
    <li class="each-tab" id="diary11">New Comments 
    <li id="diary12"><a onclick="return diarytabs('diary2','diary1')" href="#">Decanter News</a> 
  </ul>
  <?php 
  $comments = $wpdb->get_results("SELECT comment_author, comment_author_url, comment_ID,  comment_post_ID FROM $wpdb->comments WHERE comment_approved = '1' ORDER BY comment_date_gmt DESC LIMIT 6");
  $numcomments = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->comments WHERE comment_approved = '0'");
  if ( $comments || $numcomments ) :?>
    <ul class="tab-list">
    <?php 
    if ( $comments ) {
      foreach ($comments as $comment) {
      echo '<li>' . sprintf(__('%2$s'), get_comment_author_link(), '<a href="'. get_permalink($comment->comment_post_ID) . '#comment-' . $comment->comment_ID . '">' . get_the_title($comment->comment_post_ID) . '</a>');
      edit_comment_link(__("Edit"), ' <small>(', ')</small>'); 
      echo '</li>';
      }
    }
    ?>
    </ul>
  <?php endif; ?>

  &nbsp;&nbsp;
  <?php if ( $numcomments ) : ?>
    <strong><?php echo sprintf(__('Comments in moderation (%s)'), number_format($numcomments) ); ?> &raquo;</strong>
  <?php endif; ?>
</div>
<div class="diary-tab" id="diary2">
  <ul class="tabs">
    <li id="diary21"><a onclick="return diarytabs('diary1','diary2')" href="#">New Comments</a></li>
    <li class="each-tab" id="diary22">Decanter News
  </ul>
  <?php
    require_once (ABSPATH . WPINC . '/rss-functions.php');
    // here's where to insert the feed address
    $rss = @fetch_rss('http://www.decanter.com/feeds/rss/news.xml');
    if ( isset($rss->items) && 0 != count($rss->items) ) {
  ?>
    <ul class="tab-list">
      <?php
      // here's (6) where to set the number of headlines
      $rss->items = array_slice($rss->items, 0, 6);
      foreach ($rss->items as $item ) {
      ?>
        <li>
        <a href='<?php echo wp_filter_kses($item['link']); ?>'><?php echo wp_specialchars($item['title']); ?></a>
        </li>
      <?php } ?>
    </ul>
  <?php } ?>
</div>

Answer 1

Javascript function names are case sensitive.

document.getElementById not document.getelementbyid

alert(typeof document.getelementbyid); // undefined
alert(typeof document.getElementById); // function

// you want to use this:
    if (document.getElementById)
    {
      document.getElementById(newtab).style.display = "inline";
      document.getElementById(oldtab).style.display = "none";
      return false;
    }