CODEWITHSUNDEEP
javascriptjqueryhtmlcss
The_Holy_One
The_Holy_One

Reputation: 331

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

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:

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.

P.s.: 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;
    }

Upvotes: 3

Views: 93

Answers (4)

Quentin Roy
Quentin Roy

Reputation: 7887

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>

Upvotes: 1

Rahul Singh
Rahul Singh

Reputation: 892

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.

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 1958

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*/
            }

Upvotes: 0

StudioTime
StudioTime

Reputation: 23979

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?

Upvotes: 0

Related Questions