Ways to integrate jQuery's .hover() with Overflow

Question

Ways to integrate jQuery's .hover() with Overflow

I've hit a roadblock and can't seem to find the solution on my own. Hopefully, someone out there can provide me with a hint.

I am trying to meet the following requirements:

There should be a Newsblock within an HTML Page with a fixed width and height.
Within this Newsblock, only the titles of the news should be visible.
These news items should start off as "collapsed" by default and expand when the mouse is hovered over them.
Since the 'Newsblock' has a limited height, a scrollbar should appear if the expanded news exceeds the block's height, allowing users to scroll down.
The Newstitle and Newstext should always remain within the Newsblock.

So far, I have been able to fulfill all of these requirements except for the one regarding the Scrollbar. Whenever I try to access the Scrollbar while hovering over the currently expanded news, it collapses again and the Scrollbar disappears. It seems that my .hover function is set up to SlideUp whenever I leave the newsentry, causing the Scrollbar to vanish since it is not part of the newsentry div. I'm unsure about what changes I need to make in order to maintain an overall Scrollbar for the Newsblock without it disappearing when trying to reach it.

P.s.: Having a separate Scrollbar per Newsentry would look odd. That's why I want to somehow 'bind' the scrollbar to the parent container :S

HTML

    <div id="newsblock">
        <div> // There are some auto-generated divs that I have to work with, so the news entries are not direct children of the news block.
            <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;
    }

javascript jquery html css

Answer 1

Answer №1

One way to handle the closing of a .newsentry is to implement a solution where it closes only when entering another .newsentry or leaving #newsblock. By considering the scrollbar as part of #newsblock, the entry will not close anymore when hovering over it.

UPDATE: After discussing the scroll problem, I incorporated a step callback into the closing animation to ensure that the top of the opened .newsentry remains visible while other entries are being closed.

Below is a functional demonstration:

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

One way to handle the closing of a .newsentry is to implement a solution where it closes only when entering another .newsentry or leaving #newsblock. By considering the scrollbar as part of #newsblock, the entry will not close anymore when hovering over it.

UPDATE: After discussing the scroll problem, I incorporated a step callback into the closing animation to ensure that the top of the opened .newsentry remains visible while other entries are being closed.

Below is a functional demonstration:

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 3

Answer №2

Give this a try:

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

This code ensures that the block remains open when hovering over either the header or the block itself.

Does that match what you're looking for?

Answer 4

Give this a try:

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

This code ensures that the block remains open when hovering over either the header or the block itself.

Does that match what you're looking for?

Answer 5

Answer №3

Imagine this scenario: There's a joke, and if I happen to be incorrect... all you need to do is adjust your CSS like so:

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

Answer 6

Imagine this scenario: There's a joke, and if I happen to be incorrect... all you need to do is adjust your CSS like so:

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

Answer 7

Answer №4

Using click operations instead of hover to slide down news text blocks can greatly improve user experience. When hovering, users may accidentally trigger the scroll bar instead of viewing the news content. Implementing an accordion-like functionality could be a solution. Here is a sample code for achieving this using click events:

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

Alternatively, you can stick with hover by using the following code:

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

This approach ensures that the news text block remains open until the user hovers over another news entry.

Answer 8

Using click operations instead of hover to slide down news text blocks can greatly improve user experience. When hovering, users may accidentally trigger the scroll bar instead of viewing the news content. Implementing an accordion-like functionality could be a solution. Here is a sample code for achieving this using click events:

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

Alternatively, you can stick with hover by using the following code:

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

This approach ensures that the news text block remains open until the user hovers over another news entry.

Ways to integrate jQuery's .hover() with Overflow

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is it possible to arrange buttons next to each other?

Trouble encountered in aligning two DIVs in a horizontal position

Tips for placing text alongside a logo while maintaining navigation links on the right side

Having difficulty determining the file type of a user-uploaded file on the front-end

Merge the inverse property and inverse class selector with the current selector for enhanced specificity

Is it possible to retrieve a (escaped) HTML attribute from an XML node using XPath?

Leverage jquery-ui for enhanced functionality in portal version 8

Difficulties involving AJAX requests in Firefox and Internet Explorer

ng-if not functioning properly in Internet Explorer 8

Error message: "Encountered 'Cannot Get' error while building Angular

Using a for loop in JavaScript to dynamically display TextBoxFor(model=> model[i].prop) in an MVC application

When using Multer for file upload, the req.body returns as an empty object while req.file is undefined

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

How can we capture the current row's value for later retrieval?

Loading dynamic images in HTML using Javascript and Django templates

Bootstrap 4.3 is not designed with a mobile-first approach in mind

What could be the reason for the failure of @babel/preset-react automatic transformation with Webpack?

Generating an Array of objects through the use of the each method

Different CSS values can be applied for specific versions of Internet Explorer by using conditional comments

Why isn't my heading showing up as expected in my document?