jQuery / Title attribute - Show/update when is in the viewport

Question

I would use the title attribute as a caption in a gallery. The caption will be in a fixed position on the page. I can't update dynamically the content of the title attribute in the div showing various caption one at a time.

html markup

<!-- fist slide -->  
<div class="section" id="gallery-start">
    <div class="content">
        <img src="img/1.jpg" title="Caption text 1">
    </div>
</div>

...

<!-- caption -->     
<div class="caption-display"></div>

js script

$('.caption-display').each(function(i) {
    $(this).html($('.gallery-element').eq(i).attr('title'));
});

example

Jsfiddle

Provide whole code - do you have some slideshow? How projects are changed? There is no sense, btw, to iterate through one element $('.caption-display').each - do, actually nothing, it is first and only element on page with that class... — sinisake, Aug 31 '15 at 11:35
js is a placeholder, to understand what I should do. I should write one that allows me to have dynamically the new title, this correlated to the image in the viewport — Pietro Spagnolo, Aug 31 '15 at 11:47
With the scroll page, each image is in a div that fills the entire page — Pietro Spagnolo, Aug 31 '15 at 11:59
Please take a look at [this answer](http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433) — EhsanT, Aug 31 '15 at 12:15
I used a similar solution. But it seems not to work. Thanks! — Pietro Spagnolo, Aug 31 '15 at 12:43

score 0 · Answer 1 · answered Aug 31 '15 at 12:50

I hope it will be useful, I solved in this way.

html

<!-- caption -->
<div class="caption-box">
    <p class="caption-description">
        Caption text 1
    </p>
</div>

css

.caption-description
{
    display: none;
}

.caption-display
{ 
    position: fixed;
    bottom: 10px;
    left: 10px;
}

js

$(window).load(function () {
    var window_center = $(window).height();
    var threshold = 0;
    $(window).on("scroll resize", function () {
        scroll = $(window).scrollTop();

        $('.section').each(function () {
            var post_center = $(this).height()/2 + $(this).offset().top;
            if (post_center + threshold < window_center + scroll ||
                post_center - threshold < window_center + scroll){
                if (!$(this).hasClass('active')){
                    $('.section').removeClass('active');
                    $(this).addClass('active');
                    $('.caption-display').hide();
                    var newDescr = $(this).find('.caption-description');
                    $('.caption-display').html(newDescr.html());    
                    $('.caption-display').fadeIn('slow');
                }
            }
        });
    });

    $(document).ready(function () {
        $(window).trigger('scroll'); // init the value
    });
});

jQuery / Title attribute - Show/update when is in the viewport

1 Answers1