javascriptjquerydetectionviewportbullseye

Jquery Bullseye viewport detection integration


I would like to use Jquery Bullseye to show a div when scrolled down. My HTML is

<div class="a preview"></div>
<div class="b preview"></div>
<div>
    <div class="a-content content">
        <p>some content (1)</p>
    </div>
    <div class="b-content content">
        <p>some content (2)</p>
    </div>
</div>

And my Javascript (for the Bullseye script)

$(window).load(function(){
$(function() {

$('.a').bind('viewportenter', function(e) {
$(".content-1 div").hide('blind', { direction: "up" });
$(".a-content").siblings().hide('blind', { direction: "up" });
$(".a-content").show('blind', { direction: "up" });
}).bullseye();

}); });


Solution

  • I have to add the if 'e.type ...' so it works. My Javascript looks like this now:

    $(window).load(function(){
     $(function () {
    
    
    $('.functions')
    .bind('enterviewport', function (e) {
                if (e.type == 'enterviewport')
                   $(".b-content").toggle('blind', { direction: "up" });
            })
    .bullseye()
               .addClass('outline');
    
        }); });
    

    But how do I insert the options for Bullseye? For example I want to change the value of extendHeight to 50px. How do I do that?