Search code examples
csspositioning

thumbnails scroller title fade position

In my thumbnail scroller I have a : <span id="tt" style="display:none;"></span> which is driven by a jquery fade in/fade out script and I want to position it outside of the thumbnails container. the css for the span tag is : span#tt { position:absolute; left:0; top:0; }

You can check the thumbnail scroller here

Solution

  • If I understand you well, these will do the job.

    #tt {
    position:absolute;
    left:0;
    top: 0;
    margin-top:-20px; /*added*/
}
.jThumbnailScroller{
    position:relative;
    width:800px;
    height:260px; /*changed 255px set it if you change #tt margin-top value*/
    margin:0; 
    padding:0;
    overflow:hidden
}
.jThumbnailScroller#tS1{
    position:relative;
    width:100%;
    margin-top:100px;
    padding-top:20px
}

    Also edited your tip script. It was blinking If you move faster over images, because your script trying to fadein it before it finishes fadeout.

    jQuery(document).ready(function(){    

var link = jQuery('.jTscroller a');

link.each(function(){
    $(this).mouseenter(function(){
        var imgtitle = $(this).find('img').data('title');
        $('#tt').html(imgtitle);
        $('#tt').fadeIn('slow');

        $(this).mouseleave(function()
        {
            $('#tt').hide();
        });
    });
});
});

    Here's jsfiddle http://jsfiddle.net/dsu9a/7/

    Don forget to remove these codes. This was for correcting img links with actual ones in fiddle.

    jQuery(document).ready(function(){
   var img = jQuery('.jTscroller a img');
    img.each(function(){
        var url = $(this).attr('src');
        $(this).attr('src','http://outboxvision.com/test/'+url)
    });
});

    Correct your html like this.

    <body>
    <div id="tt"></div>
<!-- rest of the code -->