Created
August 11, 2013 21:50
-
-
Save marcusneto/6207008 to your computer and use it in GitHub Desktop.
RespondJS help
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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