I am having a problem with jQuery and the interface plugin. When I
simply use jQuery 1.1.3.1 or the latest nightly, things work find. But
when I simply try to add ifx.js from Interface 1.2, I get problems such
as a "double bounce" on .slideUp(). I am guessing this has to with
ifx.js changing .animate(). See http://kliks.faustgertz.com/calendar/
for examples and click on the months to toggle them. Any advice?
The code that seems to be the problem is in the second function passed
to a .toggle().
$('.label, .event', $month).fadeTo('medium', 0.5, function() {
$month.find('.event').slideUp('medium', function() {
$month.removeClass('display');
...
});
});
Text fades to 50% opacity, the .event block slides up, the .display
class that provides a background is removed, and then the contents of
the .event block appear again and slideUp. It is the second coming that
I don't understand.
Thanks in advance,
Faust
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";><!-- InstanceBegin
template="/Templates/_root.dwt" codeOutsideHTMLIsLocked="true" -->
<head>
<?php // include('head.html'); ?>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">@import url(/css/master.css);</style>
<!--[if lte IE 6]>
<link href="/css/ie6.css" media="all" rel="stylesheet" type="text/css" />
<![endif]-->
<style media="print" type="text/css">@import url(/css/print.css);</style>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="/js/jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="/js/interface-1.2/source/ifx.js"
type="text/javascript"></script>
<script type="text/javascript">
/* make more generic and reusable with none hardcoded classes or siblings.
Maybe make a plugin .*/
$(document).ready(function() {
$('.month .event').hide();
/*$('.month .label, .month .event').fadeTo('fast', 0.5);*/
$('.month .label, .month .event').css('opacity', 0.5);
var toggleInProgress = false;
var labelHover = new Object();
labelHover.on = function() {
if(toggleInProgress) {
return;
}
$(this).fadeTo('fast', 1);
};
labelHover.off = function() {
if(toggleInProgress) {
return;
}
$(this).fadeTo('fast', .5);
};
$('.month .label').hover(labelHover.on, labelHover.off);
$('.month .label').toggle(function() {
if(toggleInProgress) {
return;
}
$('.month .event:visible').parent().find('.label').click();
toggleInProgress = true;
var $label = $(this);
$label.unbind('mouseout').unbind('mouseover').fadeTo('fast', 1);
var $month = $label.parent();
$month.addClass('display');
$month.find('.event').slideDown('slow', function(){
$(this).fadeTo('slow', 1);
toggleInProgress = false;
});
}, function() {
if(toggleInProgress) {
return;
}
toggleInProgress = true;
var $label = $(this);
var $month = $label.parent();
$('.label, .event', $month).fadeTo('medium', 0.5, function() {
$month.find('.event').slideUp('medium', function() {
$month.removeClass('display');
$label.hover(labelHover.on, labelHover.off);
toggleInProgress = false;
});
});
});
});
</script>
<!-- InstanceEndEditable -->
</head>
<body>
<div id="body">
<?php // include('masthead.html'); ?>
<div id="branding"><a href="/">Kliks Photography</a></div>
<div id="main-navigation">
<ul>
<li><a href="">About Us</a></li>
<li><a href="">Photography</a></li>
<li><a href="">Rates</a></li>
<li><a href="">Questions</a></li>
<li><a href="">Calendar</a></li>
<li><a href="">Place an Order</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
<div id="content">
<!-- InstanceBeginEditable name="Content" -->
<!--<img alt="" height="20" src="/images/gradient-bar.png" width="1217" />-->
<!-- <img alt="" height="625" src="/images/senior-image-01.jpg"
style="position:absolute;" width="940" />-->
<h1>Calendar</h1>
<div class="month">
<h2 class="label">January ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">February ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">March ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">April ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">May ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">June ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">July ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">August ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">September ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">October ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">November ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<div class="month">
<h2 class="label">December ></h2>
<div class="event">
<p>Capto patria oppeto vulpes iusto tego vereor aliquip. Blandit
consequat pneum wisi lobortis at et abico. Utinam cogo, nisl vulpes validus qui
in distineo.</p>
</div>
</div>
<!-- InstanceEndEditable --> </div>
<?php // include('navigation.html'); ?>
<?php // include('foot.html'); ?>
</div>
<?php // include('tracking.html'); ?>
</body>
<!-- InstanceEnd --></html>
