I'm having a bit of trouble with these two great plugins and wonder if
they just don't want to work together. Separately I don't have any
problems and Firebug reports no trouble on my test page.
However, with both enabled, Expander works, somewhat, and ClueTip not
at all. By somewhat I mean that the read more link opens the expander
but there's no visible Close link and this is true if I explicitly set
userCollapseText in the options or not.
Here is the relevant code excerpt, unfortunately this page is
currently not on the 'net:
<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.js"></script>
<script type="text/javascript" src="jquery.livequery.min.js"></script>
<script type="text/javascript" src="jquery.expander.js"></script>
<script type="text/javascript" src="ui.tabs.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript" src="jquery.cluetip.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#sections > ul").tabs({ fx: { opacity: "toggle" }});
$("#gsOverview ul#gsoTabs").tabs();
$("#qsGuideList").corner("4px");
$.cluetip.setup({insertionElement: '#content_wrap'});
$('area.ui_areas').cluetip({cluetipClass: 'jtip', positionBy:
'mouse', arrows: true, splitTitle: '|', width: 200, fx: {open:
'fadeIn'}});
$("#content_wrap_li").expander({expandText: 'Visual tour of the UI',
userCollapseText: 'CLOSE', slicePoint: 25});
});
//]]>
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />
...
<li id="content_wrap_li">
<a href="#" class="read-more">Visual tour of the UI</a>
<div id="content_wrap" class="details">
<h1>UI Visual Tour</h1>
<img src="../SMF2/mkt_images/visual-tour-ui.jpg" alt="User
Interface
Visual Tour" usemap="#uitour_map" /> <map id="uitour_map"
name="uitour_map">
<area class="ui_areas" shape="rect"
coords="278,525,650,602"
href="#the-guide" alt="" title="UI Visual Tour|The Guide" />
<area class="ui_areas" shape="rect"
coords="764,525,880,602"
href="#get-help" alt="" title="UI Visual Tour|Get Help" />
<area class="ui_areas" shape="rect"
coords="2,90,145,445"
href="#the-explorer" alt="" title="The Explorer|This tree provides
access to the objects you build.| |In almost all cases you can
right click on an object for fast access to the actions available for
it.| |The type of objects are specific to the active section of
the application." />
<area class="ui_areas" shape="rect"
coords="172,186,380,448"
href="#main-canvas" alt="" title="Main Canvas|This space is where
you'll do most of the work.| |The specific contents change in
each section of the application." />
<area class="ui_areas" shape="rect"
coords="140,50,650,75"
href="#navigation-tabs" alt="" title="Navigation Tabs|Use these tabs
to move between the major sections of the application." />
<area class="ui_areas" shape="rect"
coords="678,36,827,58"
href="#quick-search" alt="" title="Quick Search|Find a specific object
in your account." />
<area class="ui_areas" shape="rect"
coords="758,36,850,51"
href="#login-block" alt="" title="Login/Logout|Sign in and out of the
application." />
<area class="ui_areas" shape="rect"
coords="134,495,247,567"
href="#more-information" alt="" title="UI Visual Tour|More Information
List" />
<area class="ui_areas" shape="rect"
coords="165,99,471,121"
href="#object-tabs" alt="" title="Object Navigation Tabs|Use these
tabs to move between the different aspects of the active object." />
<area class="ui_areas" shape="rect"
coords="168,125,400,155"
href="#object-toolbar" alt="" title="Object Toolbar|Direct access to
the most important actions which can be taken on the active object." /
>
</map>
</div>
</li>
