Organic tabs has stopped working
In December I began using the organic tabs plugin as featured on
this site. I have been without a computer for over a month so I'm not sure if Firefox had a recent update and if that's possibly the cause for the plugin no longer working. Here is
the page I'm using it on. Clicking on the tabs does nothing in Firefox or Safari. I'm not sure about other browsers. Is there an updated version of Organic Tabs, or does the code need to change? Thanks in advance.
Below is the code for about.html:
- <html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Tab Style CSS -->
<link href="http://fightfayre.net/tabstyle.css" rel="stylesheet" type="text/css" />
<meta charset="UTF-8">
<title>Fight Fayre</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://fightfayre.net/js/organictabs.jquery.js"></script>
<script>
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="http://fightfayre.net/js/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="http://fightfayre.net/js/jquery.magnific-popup.js"></script>
</head>
<div class="outer">
<center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<img src="/banner.png">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7" rowspan="3"></td>
<td height="10"></td>
</tr>
<tr>
<td height="1" background=""></td>
</tr>
<tr>
<td width="341">
<div id="example-one">
<ul class="nav">
<li class="nav-one"><a href="#intro" class="current">Intro</a></li>
<li class="nav-two"><a href="#rhein">Rhein</a></li>
<li class="nav-three"><a href="#fight">Fightfayre</a></li>
<li class="nav-four last"><a href="#about">About me</a></li>
</ul>
<div class="list-wrap">
<ul id="intro">
<li><span class="h2">introductions.</span> The novel is, for the moment, tentatively named <i>A Moth Under the Skin</i>. It primarily takes place in the country of Rhein, focusing on Kastel, the capital.</li>
</ul>
<ul id="rhein" class="hide">
<li><span class="h2">rhein.</span> The country of perpetual nightfall. Rhein has an awfully strict border control policy which means no one is allowed to enter or leave without written consent from the Ministry of Interior. Except if you're being trafficked, of course.</li>
</ul>
<ul id="fight" class="hide">
<li><span class="h2">fightfayre.</span> I came up with this using the last name of my story's main antagonist. I thought it was clever and cute. Shows what I know.</li>
</ul>
<ul id="about" class="hide">
<li><span class="h2">about me</span> I write fiction. I read a lot. I live in Pompton Lakes, NJ with my fat bunny.<br><br>You can contact me at <a href="mailto:fightfayre@REMOVETHISgmail.com">fightfayre@gmail.com</a><br><br><span class="h2">me at other sites</span><br><br><img src="/images/tumblrico.png"> <a href="http://visualheresy.tumblr.com">Heresy</a> @ tumblr.com<br><img src="/images/asico.png"> <a href="http://www.last.fm/user/miyaomiyao">Miyao</a> @ last.fm<br><img src="/images/twitterico.png"> <a href="https://twitter.com/glamrockhoney">Honey</a> @ twitter.com</li>
</ul>
</div> <!-- END List Wrap -->
</div> <!-- END Organic Tabs (Example One) -->
</td>
</tr>
</table>
</td>
<td width="30"></td>
<td valign="top">
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="1" background=""></td>
</tr>
<tr>
<td>
<font class="x">
<b><a href="/about">ABOUT</a></b><br>
Clueless? I should have known.<P>
<b><a href="/synopsis">SYNOPSIS</a></b><br>
Spoiler-free.<P>
<b><a href="/char">CHARACTERS</a></b><br>
Bios, fun facts, attack stats.<P>
<b><a href="/arts">CONCEPT ART</a></b><br>
Sketchy works.<P>
<b><a href="/playlist">PLAYLIST</a></b><br>
Listen on Spotify.<P>
<b><a href="/write">EXCERPT</a></b><br>
Read.<P>
<b><a class="popup-vimeo" href="http://vimeo.com/65044182">VIDEO</a></b><br>
The unofficial book trailer.<P>
<b><a href="/quotes">QUOTES</a></b><br>
Snarky quotes! I mean, words of wisdom.<P>
<b><a href="/exit">LINKS OUT</a></b><br>
Flee while you still can!<P>
<b><a href="http://visualheresy.tumblr.com">MY TUMBLR</a></b><br>
<div class='ji-tumblr-photos'><a id='ji-tumblr-url-tumblwidget-1' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-1' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-2' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-2' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-3' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-3' src='' alt='' /></a><a id='ji-tumblr-url-tumblwidget-4' href=''><img border='0' style='margin:2px' id='ji-tumblr-photo-tumblwidget-4' src='' alt='' /></a>
</div>
<script type='text/javascript' src='http://visualheresy.tumblr.com/api/read/json?number=4&type=photo'></script>
<script type='text/javascript'>
document.getElementById('ji-tumblr-photo-tumblwidget-1').setAttribute('src', tumblr_api_read.posts[0]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-1').setAttribute('href', tumblr_api_read.posts[0]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-2').setAttribute('src', tumblr_api_read.posts[1]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-2').setAttribute('href', tumblr_api_read.posts[1]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-3').setAttribute('src', tumblr_api_read.posts[2]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-3').setAttribute('href', tumblr_api_read.posts[2]['url-with-slug']);
document.getElementById('ji-tumblr-photo-tumblwidget-4').setAttribute('src', tumblr_api_read.posts[3]['photo-url-75']);
document.getElementById('ji-tumblr-url-tumblwidget-4').setAttribute('href', tumblr_api_read.posts[3]['url-with-slug']);
</script>
</table>
</td>
</tr>
</table>
</center></div>
<div id="footer">
<div id="short">
<ul class="go">
<li><strong>Go.</strong></li>
<li><a href="javascript:history.go(-1)">backward</a></li>
<li><a href="http://fightfayre.net">home</a></li>
<li><a href="#">top</a></li>
<li><a href="javascript:history.go(+1)">forward</a></li>
<li><a href="/exits">exits</a></li>
<li><a href="http://fightfayre.net/contact">contact</a></li>
</ul>
<ul class="nu">
<li><strong>Characters.</strong></li>
<li><a href="/chars/fang">runner</a> - Mai Suiko</li>
<li><a href="/chars/siege">ruin</a> - Vaine Fayre</li>
<li><a href="/chars/pierce">catalyst</a> - Pierce Gaultier</li>
<li><a href="/chars/kaiser">emissary</a> - Rikt Stein</li>
<li><a href="/chars/saber">director</a> - Yukio Kuhn</li>
</ul>
<ul class="sc">
<li><strong>Contents.</strong></li>
<li><a href="/about">about</a></li>
<li><a href="/synopsis">synopsis</a></li>
<li><a href="/arts">concept art</a></li>
<li><a href="/playlist">playlist</a></li>
<li><a href="/write">excerpt</a></li>
<li><a class="popup-vimeo" href="http://vimeo.com/65044182">video</a></li>
<li><a href="/quotes">quotes</a></li>
</ul>
<ul class="dc">
<li><strong>Disclaimer.</strong></li>
<li><b>Fight Fayre</b> is created and maintained by<a
href="http://fightfayre.net/contact">Jessy</a>. <em>Moth</em>
and its characters © 2013 Jessica Cavero. All rights reserved.</li>
</ul>
</div>
</div>
<script>
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});</script>
</body>
</html>
And the tabstyle.css file I linked to:
- /*
Organic Tabs
by Chris Coyier
http://css-tricks.com
*/
#example-one .nav { margin: 0; padding: 0; }
#example-one .nav li { margin: 0; padding: 0; }
#example-one ul { margin:0; padding: 0;}
html { overflow-y: scroll; }
a:focus { outline: 0; }
#page-wrap { width: 440px; margin: 80px auto; }
/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }
/* Specific to example one */
#example-one { background: none; padding: 10px; margin: 0 0 20px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }
#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 70px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #f2f2f2; color: #777; font-size: 11px; text-align: center; border: 0; text-transform: uppercase; }
#example-one .nav li a:hover { background-color: #fff; color: #777;}
#example-one ul { list-style: none; }
#example-one ul li a { border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover { color: #66525B; }
#example-one ul li:last-child a { border: none; }
#example-one ul li.nav-one a.current, #example-one ul.intro li a:hover { background-color: #fff; color: #777; }
#example-one ul li.nav-two a.current, #example-one ul.rhein li a:hover { background-color: #fff; color: #777; }
#example-one ul li.nav-three a.current, #example-one ul.fight li a:hover { background-color: #fff; color: #777; }
#example-one ul li.nav-four a.current, #example-one ul.about li a:hover { background-color: #fff; color: #777; }
/* Specific to example two */
#example-two .list-wrap { background: #eee; padding: 10px; margin: 0 0 15px 0; }
#example-two ul { list-style: none; }
#example-two ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-two ul li a:hover { background: #333; color: white; }
#example-two ul li:last-child a { border: none; }
#example-two .nav { overflow: hidden; }
#example-two .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-two .nav li.last { margin-right: 0; }
#example-two .nav li a { display: block; padding: 5px; background: #666; color: white; font-size: 10px; text-align: center; border: 0; }
#example-two li a.current,#example-two li a.current:hover { background-color: #eee !important; color: black; }
#example-two .nav li a:hover, #example-two .nav li a:focus { background: #999;}