What is the method for moving one div above or below another div using the scroll bar?

Here's the scenario I'm facing:

I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the button is at the top of the page, the settings should display beneath it. Conversely, if the button is at the bottom of the page, the settings should open above it.

Furthermore, if a user selects an option at the bottom of the page and then scrolls up towards the top, the settings should follow under the button rather than staying on top. I'm unsure about the best approach to achieve this functionality and would appreciate any advice you can provide.

javascriptjquerycss

Answer №1

http://jsfiddle.net/573zJ/

Examine the alignment of the element in relation to the middle of the viewport, and reposition it either at the beginning or end in reference to its container, as illustrated below:

<div class="container">
    <div class="element-set">
        <div class="normal">content</div>
        <div class="flipper">flipper</div>
    </div>

    ... varying amount of .element-set

    <div class="element-set">
        <div class="normal">content</div>
        <div class="flipper">flipper</div>
    </div>
</div>

and

$(window).scroll(function () {
    flippers();
});

function flippers() {
    var midpoint = $(window).height() / 2;
    $('.flipper').each( function () {

        var $flipper = $(this);
        var $parent = $flipper.parent();
        var top = $parent.position().top - $(window).scrollTop();

        if ( top > midpoint ) {
            $flipper.prependTo( $parent );
        } else {
            $flipper.appendTo( $parent );
        }
    });
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Step-by-step guide on displaying a fresh page within a JavaScript code

I've been working with XHTML, JSF, and JavaScript to develop a form that validates user input in selected fields when a button is clicked. The goal is to redirect the user to a different page called homepage.xhtml after successful validation. However, ...

javascripthtmljsfxhtml

What could be the reason for a jQuery script failing to execute when included in a PHP include statement from a different PHP page?

I'm currently working with javascript and php to manage cookies across different pages. On one page, I have a script that sets a value in a cookie variable and I want to retrieve that value on another page. Let's say the first page is named page1 ...

javascriptphpjqueryhtml

Error: DataTables cannot read the property 'length' of an undefined value during an ajax request

I am encountering an issue while using DataTables with an AJAX endpoint. When I initialize the datatable on my site, I consistently receive an error message stating "Cannot read property 'length' of undefined". I have attempted to troubleshoot th ...

javascriptajaxdatatables

Activate a side navigation bar in AdminLTE-3

I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...

phphtmlcssadminlte

Having trouble accessing the value of an object within a nested array object

Looking for a way to extract the object value from a nested array object using JavaScript? If the sourcecountry matches the country in the object, it should return the corresponding payment service. Here is what I have attempted: function getValue(source ...

javascriptarraysobject

Image is overlaid by Dropdown Menu

Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...

htmlcss

The Silent Disregard for CSS Files in React Rendered Pages

I'm currently working on a React application that I created using create-react-app. In my index.html file, I have linked it to my CSS file like this: <link rel="stylesheet" href="../src/site.css"></link> The content of the site.css file ...

cssreactjs

Disappearance of Dom Css following implementation of jQuery Pagination in Wordpress widget

After developing a Wordpress widget for showcasing portfolios, I have successfully integrated features such as pagination, filter categories, and customizable post count per page. Everything works seamlessly with a custom PHP pagination system that I have ...

jqueryajaxwordpresspagination

Dealing with useEffect being invoked twice within strictMode for processes that should only execute once

React's useEffect function is being called twice in strict mode, causing issues that need to be addressed. Specifically, how can we ensure that certain effects are only run once? This dilemma has arisen in a next.js environment, where it is essential ...

javascriptreactjstypescriptnext.js

Leveraging JavaScript for setting an ASP.net Dropdownlist

I have made several attempts to set the dropdownlist without success. Despite observing the selectedIndex changing appropriately in developer tools, and noticing the selected option node change from false to true, the dropdownlist still displays the first ...

c#javascriptjqueryasp.netzurb-foundation

Combining DataTables with Moment.js: Calculate total time by adding durations

I am utilizing DataTables to track the amount of time each person spends fundraising and then showcasing their percentage of the funds raised for a camp. My goal is to add up the durations using moment (some durations may exceed 24 hours), calculate the f ...

jquerydatatablesmomentjs

Title with lower border shorter than width

Looking to achieve an underline effect with a bottom border that is narrower than the width of the h2 title. Though I typically avoid uploading images, here is one to provide further clarification of my question: ...

htmlcsscss-shapes

Establishing a pair of separate static directories within Nest

I am looking to utilize Nest in order to host two static applications. Essentially, I have a folder structure like this: /public /admin /main Within my Nest application, I currently have the following setup: app.useStaticAssets(join(__dirn ...

javascriptnode.jstypescriptexpressnestjs

Is there a way to dynamically adjust the overflow-y property based on the height?

Trying to make the overflow-y-visible property visible if the height is too small, otherwise using overflow-y-hidden with tailwind CSS and React. Struggling to achieve this as I can't use sm, md, etc. for height like I can for width. Could someone pl ...

cssreactjstailwind-css

Adding an item to a JSON array in Angular

I'm having trouble adding a new item to the roleList JSON array. I've tried using push/concat, but it doesn't seem to update the roleList array. Any suggestions on how to resolve this? // The javascript : function RoleListCtrl($scope) { ...

javascriptjsonangularjs

challenges with incorporating data using ajax and jquery

Hey there, I have a set of products displayed in a repeater on my website and I'm looking to add them to the shopping basket. Below is the button code snippet; <asp:Button ID="sepeteEkle" runat="server" Text="EklEPanpa" class="sepetat" data-id=& ...

jqueryasp.netajaxweb-services

How can I dismiss a pop-up window for adding a new record in a jQuery jTable after it has been saved in an MVC application

I have integrated the jTable plugin from jQuery into my CRUD application. The issue I am facing is that when I click on Add New Record, a confirmation dialog pops up but after entering the details and clicking Save, the dialog does not close. However, the ...

jqueryasp.net-mvcjtable

Building a personalized Directive in Angular: A step-by-step guide

I attempted to implement a sample pagination feature by creating a directive like the following (I am not sure if it is correct): (function() { app.directive("myPagination", function() { return { restrict: 'E', templateUrl: & ...

javascriptangularjspagination

sticky header on pinned tables in a React data grid

I have combined 3 tables together, with the middle table containing a minimum of 15 columns. This setup allows users to horizontally scroll through the additional columns conveniently. However, I am facing a challenge in implementing a sticky header featu ...

javascriptcssreactjstypescriptsticky

Issue with Ajax when attempting to load new content into a div after submitting a form

After implementing the code below to submit a form and use ajax to load the action page into a div on the same page, I am encountering an issue where clicking submit results in a duplicate copy of the form appearing again. <script src="//ajax.googleapi ...

jqueryhtmlajax