How to use jQuery .hover() in combination with Overflow

Question

Well, i am stucked and can't find the answer myself. Hopefully someone can give me a hint.

I try to fullfill the following requirements:

• There should be a Newsblock within a HTML Page with a fixed width and height.
• In this Newsblock only the title of the news are visible.
• Those news are "collapsed" by default and should "expand" if the Mouse is over it.
• Due the fact that the 'Newsblock' is limited by its height, there should be a Scrollbar visible. But only if the currently expanded news makes it necessary, so the user can Scroll down.
• Newstitle and Newstext should never leave the Newsblock.

so far so good, i was able to fullfill all those demands except the one with the Scrollbar. If i try to reach the Scrollbar out of the currently expanded news it collapses again and the Scrollbar disappears. I understand that my .hover is configured that it always SlideUp if i leave the newsentry and the Scrollbar isn't a part of the newsentry div. But i have no idea what to change to still have an overall Scrollbar for the Newsblock, but won't disappear if i try to 'reach' it.

Ps: A Scrollbar only per Newsentry looks weird. Thats why i want 'bind' the scrollbar to the parent container :S

HTML

    <div id="newsblock">
        <div> // some auto generated div's i have to life with, so the news entries are not 'direct' children of the newsblock.
            <div class="newsentry">
                <div class="newstitle">...</div>
                <div class="newstext">...</div>
            </div>
        ... another 9 'newsentry' divs.
        </div>
    </div>

JS

    $(".newsentry").hover(
        function() {
            $(this).children(".newstext").stop(true,true).slideDown();
        },
        function() {
            $(this).children(".newstext").stop(true,true).slideUp();
        }
    );

CSS

    .newsblock {
        height: 200px;
        overflow-y: auto;
    }

Answer 1

Instead of closing a .newsentry when the cursor goes out of it, a solution can be to close it only when it enters another .newsentry or when it leaves #newsblock . The scrollbar being part of #newsblock , the entry isn't closed anymore when you go on it.

EDIT: Following our discussion about the scroll issue, I added a step callback to the closing animation to make sure that the top of the .newsentry getting opened remains visible when the other entries are getting closed.

Here is a working example:

 var $newsblock = $("#newsblock"); function closeAllNews(slideUpArgs){ return $(".newstext").stop(true).slideUp(slideUpArgs); } function openNews(news, slideDownArgs){ $(news).find(".newstext").stop(true).slideDown(slideDownArgs); } function ensureNewsTopVisible(news){ // Check if the top of the newsentry is visible... var top = $(news).position().top; if(top < 0){ // ...and if not, scroll newsblock accordingly. $newsblock.scrollTop($newsblock.scrollTop() + top); } } $(".newsentry").each(function(){ var $this = $(this); // When the mouse enter a news entry... $this.on("mouseenter", function(){ // ...close all opened entries (normally there is at most one)... closeAllNews({ // (while making sure that the top of this entry remains visible // at each step) step: ensureNewsTopVisible.bind(null, $this) }); // ...open this newsentry. openNews($this); }); }); // When the mouse get out of the newsblock, close all news. $newsblock.on("mouseleave", closeAllNews); 

 .newstitle { font-size: 2em; } .newstext { display: none; } #newsblock { max-height: 150px; overflow: scroll; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="newsblock"> <div> <div class="newsentry"> <div class="newstitle">News 1</div> <div class="newstext"></div> </div> <div class="newsentry"> <div class="newstitle">News 2</div> <div class="newstext"></div> </div> <div class="newsentry"> <div class="newstitle">News 3</div> <div class="newstext"></div> </div> <!-- Etc. --> </div> </div> <!-- Ignore the script below. It is just filling in the news' text. --> <script> $(".newstext").each(function(i, newstext){ $.get("http://baconipsum.com/api/?type=meat-and-filler&format=html&paras=5&num=" + i) .then(function(ipsumHtml){ $(newstext).html(ipsumHtml); }); }); </script> 

Answer 2

Try this:

$(".newsentry, .newsblock").hover( // <-- changed
        function() {
            $(this).children(".newstext").stop(true,true).slideDown();
        },
        function() {
            $(this).children(".newstext").stop(true,true).slideUp();
        }
    );

This makes sure the block stays open when you hover either over the header or the block itself.

Is that what you mean?

Answer 3

It will be a lot better if you use click operation instead of hover to slide down news text block because the user can accidentally hover over any of the news entry in order to reach for the scroll bar. I think you need a accordion like functionality. You can use the below code if you are fine with click instead of hover.

$(".newsentry").click(
        function() {
            $(".newstext").stop(true,true).slideUp();
            $(this).children(".newstext").stop(true,true).slideDown();
        }
    );

Or use the below one to go with hover.

$(".newsentry").hover(
    function() {
        $(".newstext").stop(true,true).slideUp();
        $(this).children(".newstext").stop(true,true).slideDown();
    },
    function(){}
);

This will not close the news text block until you accidentally hover over another news entry.

Answer 4

There would be a joke , if i am wrong .. what i thing just change your css as

/* not .newsblock **/
      #newsblock {
                height: 200px;
                overflow-y: scroll;/* not auto*/
            }