Home/ Questions/Q 7985549
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:35:18+00:00

Using jQuery the jquery plugin along with the easing plugin. I have a series

  • 0

Using jQuery the jquery plugin along with the easing plugin.

I have a series of anchors, in a list which are all fixed heights and widths. Within each div is another I’ve called ‘content’, this is positioned absolute and slides into view, from the bottom, when the mouse enters the containing div. When the mouse leaves the containing div, the ‘content’ div slides back out of view.

I had this working, using a combination of top and bottom values but this doesn’t work cross-browser (only works correctly in firefox from what I can tell). The code for this is below (html, css and javascript):

<!doctype html>

<head>

    <style>

        .index {
            float: left;
            margin: 0 0 30px 0;
            margin-left: 0;
            padding: 0;
            position: relative;
            }
        .index li {
            border: 2px solid #f3f3f3;
            float: left;
            list-style: none;
            font-family:"Helvetica";
            font-size:14px;
            font-weight:normal;
            margin: 0 10px 10px 0;
            padding: 1px;
            position: relative;
            }
        .index li a {
            float: left;
            height: 126px;
            overflow: hidden;
            position: relative;
            width: 224px;
            }
        .index li img {
            display: block;
            }
        .index li .content {
            background: #f7f7f7;
            bottom: auto;
            display: block;
            margin: 0;
            padding: 10px 0 3px;
            position: absolute;
            top: 132px;
            width: 224px;
            }
        .index li a:hover .content {
            bottom: 0;
            top: auto;
            }
        .index .content h3 {
            background: url(../img/content/arw-sma.png) no-repeat 0 -100px;
            color: #666;
            margin: 0 10px 1px;
            padding-left: 20px;
            }   
        .index .content p {
            color: #999;
            display: block;
            float: left;
            font-size: 12px;
            margin: 0 10px 2px;
            padding: 0;
            }

    </style>

    <script src="js//jquery-1.6.2.min.js"></script>
    <script src="js/jquery.easing.js"></script>

    <script type="text/javascript">
        $(function(){
        $('.index .content').css( {'top':'132px', 'bottom':'auto'});
        $('.index li a').hover(
                function(){
                    $(this).find('img').animate({'opacity': '.7'}, 200);        
                    $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
                }, 
                function(){
                    $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                    $(this).find('.content').animate({'top':'132px'}, 150);
                }       
            );
        });
    </script>

</head>

<body>

    <ul class="index panel">
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
        <li>
            <a href="#" title="TITLE TEXT.">
                <img src="thumb-1.jpg" alt="ALT TEXT." />
                <div class="content">
                    <h3>Title Here</h3>
                    <p>Other content goes here</p>
                </div>
            </a>
        </li>
    </ul>

</body>

Different browsers don’t like using both top and bottom values. So ideally, I’m guessing I need to just use ‘top’. The problem is, I don’t know how tall the ‘content div’ will be, so I can’t set an explicit value, as if its taller, it will chop off some of the content.

Since I know the anchor will be 126 pixels in height. I’ve been trying to use .height() to detect the height of the ‘content div’. Then subtract this value from 126 – which would leave me with the value I need to set ‘top’ to be, to position it within the div.

Does this sound plausible and am I making sense? Hopefully this isn’t to long winded, just trying to be as detailed as I can.

Hope someone can help and I love forward to you replies!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    demo jsBin

    • Use SPAN instead of DIV (DIV are block level elements, and AFAIK it won’t validate your document.)

    • You can just set an initial bottom value like -132…-150 …or whatever you prefer for your .content

      .index li .content {
    background: #f7f7f7;
    bottom: -132px;
    display: block;
    margin: 0;
    padding: 10px 0 3px;
    position: absolute;
    top: 132px;
    width: 224px;
}

    jQ:

       $(function(){
    $('.panel li a').hover(
            function(){
                $(this).find('img').animate({'opacity': '.7'}, 200);        
                $(this).find('.content').animate({'bottom':'0'}, 150).css({'top':'auto'});      
            }, 
            function(){
                $(this).find('img').animate({'opacity': '1.0'}, 200);                   
                $(this).find('.content').animate({'bottom':'-132px'}, 150);
            }       
        );
    });

    THe other solution I would use is to: at DOM ready, calculate each content height ( var outerH = $(this).outerHeight(true) ) and set that value as a data-height for each element. ($(this).data('height', outerH);). Than you can animate on hover the exact N of px that is stored in that element data-height.

    • 0