Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post

    Some figcaption help

    So I'm redesigning my website. I'm trying to replicate what I did HERE when you hover over the images. THIS(under the 'my work' tab) is where I'm at right now. Basically just trying to put the same page inside a tab (powered by Twitter Bootstrap).

    Here is my html:
    PHP Code:
    <div class="tabbable container">
        <
    div class="tab-content">
            <
    div class="tab-pane work" id="tab3">
                            <
    p>My Work</p>
                                <
    a href="works/beats/index.html"><figure>
                                    <
    img src="img/works_banners/automoblox.gif" width="100%" alt="Automoblox" />
                                    <
    figcaption class="hidden-phone">In an attempt to try something new, I made a more vertical based design for my Automoblox re-designA single page with constant navigation.</figcaption>
                                </
    figure></a>
                        </
    div>
            </
    div>
    </
    div
    And here is the javascript:
    PHP Code:
    //We are using $(window).load here because we want to wait until the images are loaded 
    $(window).load(function(){
        
    //for each figcaption element...
        
    $('figcaption').each(function(){
            
    //...set the opacity to 0...
            
    $(this).css('opacity'0);
            
    //..set width same as the image, minus the padding...
            
    $(this).css('width', $(this).siblings('img').width()-20);
            
    //...get the parent (the figure) and set it's width same as the image width and height... '
            
    $(this).parent().css('width', $(this).siblings('.work > img').width());
            $(
    this).parent().css('height', $(this).siblings('.work > img').height());
            
    //...set the display to block
            
    $(this).css('display''block');
        });
        
        $(
    'figure').hover(function(){
            
    //when mouse hover over the figure
            //get it's children elements that are figcaptions
            //and show it using fadeTo
            
    $(this).children('figcaption').stop().fadeTo(5000.7);
        },function(){
            
    //when mouse out of the figure
            //use fadeTo to hide the child figcaption
            
    $(this).children('figcaption').stop().fadeTo(5000);
        });
        
    }); 
    Thank you for your help.

    P.S. Anyone know how to get bootstrap tabs to work in IE?

  • #2
    New Coder
    Join Date
    Aug 2012
    Posts
    38
    Thanks
    8
    Thanked 1 Time in 1 Post
    Anybody got any help? Need more info?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •