Content Slider Fader in jQuery

Question

On http://www.elitedeafpoker.com/dev/ in the "Hand Strength" section, Im trying to make the content (fade in and out) to display on the right area where it says "Royal Flush". I have 10 hand strength information lined up behind the "Royal Flush". When I click one of the list items, it doesnt work and it doesnt do anything.

HTML

<ul class="hand-strength" style="margin-left:15px;">
   <li class="selected-royalflush" id="nav-fragment-1"><a href="#fragment-1">ROYAL FLUSH</a></li>
   <li class="selected-straightflush" id="nav-fragment-2"><a href="#fragment-2">STRAIGHT FLUSH</a></li>
   <li class="selected-fourkind" id="nav-fragment-3"><a href="#fragment-3">FOUR OF A KIND</a></li>
   <li class="selected-fullhouse" id="nav-fragment-4"><a href="#fragment-4">FULL HOUSE</a></li>
   <li class="selected-flush" id="nav-fragment-5"><a href="#fragment-5">FLUSH</a></li>
   <li class="selected-straight" id="nav-fragment-6"><a href="#fragment-6">STRAIGHT</a></li>
   <li class="selected-threekind" id="nav-fragment-7"><a href="#fragment-7">THREE OF A KIND</a></li>
   <li class="selected-twopair" id="nav-fragment-8"><a href="#fragment-8">TWO-PAIR</a></li>
   <li class="selected-onepair" id="nav-fragment-9"><a href="#fragment-9">ONE-PAIR</a></li>
   <li class="selected-highcard" id="nav-fragment-10"><a href="#fragment-10">HIGH-CARD</a></li> 
</ul>

(info to display)

<div id="fragment-1" class="ui-tabs-panel">  
   <div class="info" >  
      <h2><strong>ROYAL FLUSH</strong></h2>  
      <p>An ace high straint flush.</p> 
      <p class="cards"><img src="img/cards-royalflush.png" alt="Royal Flush" width="466" height="121" /></p>   
   </div>  
</div> 
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">  
   <div class="info" >  
      <h2><strong>STRAIGHT FLUSH</strong></h2>  
      <p>A five-card straight, all of the same suit.</p> 
      <p class="cards"><img src="img/cards-straightflush.png" alt="" /></p>   
   </div>  
</div>  
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">  
   <div class="info" >  
      <h2><strong>FOUR OF A KIND</strong></h2>  
      <p>Four cards of equal rank - also called "Quads."</p> 
      <p class="cards"><img src="img/cards-fourkind.png" alt="" /></p>   
   ...........

jQuery

$(document).ready(function(){  
    $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);  
});

if you want to build your own slider, [this answer might help](http://stackoverflow.com/a/12608357/1428241) — Barlas Apaydin, Apr 11 '13 at 20:36

andyb · Accepted Answer · 2013-04-11T21:32:00.110

1

There is a JavaScript error in the Console:

Uncaught ReferenceError: jQuery is not defined

This is breaking the JavaScript functionality on the site. You need to include jQuery library before jQueryUI.

In the source, the includes are currently:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="js/rotate1.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>

Edit: Source still not correct:

<script type="text/javascript" src="js/rotate1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script> 
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

edited Apr 11 '13 at 21:32

answered Apr 11 '13 at 20:36

andyb

43,435
12
121
150

Your comment does not match the source I am looking at, which has `js/rotate1.js`, `1.5.3/jquery-ui.min.js`, `js/jquery.js`, `1.3.2/jquery.min.js` (see edited answer). Worse still, you now have 2 versions of jQuery. This will **not** work. You need to decide on which version of jQuery to use and include that _first_ before any other jQuery dependent plugins. – andyb Apr 11 '13 at 21:31
Ok, I removed the old jQuery and it still doesnt work. Did you just posted an edited answer? Where? Or is it me being confused. – Christian Apr 12 '13 at 00:54
I found it. I was actually missing rotate1.js on the server. Mannn...thanks! – Christian Apr 12 '13 at 02:58

Content Slider Fader in jQuery

1 Answers1