Skip to content

Instantly share code, notes, and snippets.

@marcusneto
Created August 11, 2013 21:50
Show Gist options
  • Save marcusneto/6207008 to your computer and use it in GitHub Desktop.
Save marcusneto/6207008 to your computer and use it in GitHub Desktop.
RespondJS help
<script src="assets/js/jrespond.js" type="text/javascript"></script>
<script type="text/javascript">
// call jRespond and add breakpoints
var jRes = jRespond([
{
label: 'handheld',
enter: 0,
exit: 600
},{
label: 'other',
enter: 601,
exit: 10000
}
]);
// usage
var outputStr = document.getElementById('output');
jRes.addFunc({
breakpoint: 'other',
enter: function() {
console.log('>>> run this for the DESKTOP breakpoint <<<');
outputStr.innerHTML = 'Current breakpoint: desktop';
},
exit: function() {
console.log('<<< destroy this when exiting the DESKTOP breakpoint >>>');
}
});
</script>
<script>
if( $(window).width() > 590)
{
$(function () {
$('.bubbleInfo').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 100;
var hideDelayTimer = null;
// tracker
var beingShown = false;
var shown = false;
var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);
// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// don't trigger the animation again if we're being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;
// reset position of popup box
popup.css({
top: -60,
left: 0,
width: 400,
display: 'block' // brings the popup back in to view
})
// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn't do the job)
popup.css('display', 'none');
});
}, hideDelay);
});
});
});
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment