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

Generating links within a popover using an array in Rails 4

Within my application, Users have the ability to recommend other Users' profiles seamlessly. The functionality related to models and associations is working perfectly, as I am able to identify which users have recommended the current_user's profi ...

jqueryrubyajaxtwitter-bootstrapruby-on-rails-4

I am attempting to separate this "for" loop in order to generate five distinct DIV elements

Hello there! I am a beginner and I am attempting to create 5 different players by using some code that I found. Here is the code I have been working with: https://codepen.io/katzkode/pen/ZbxYYG My goal is to divide the loop below into 5 separate divs for ...

javascriptjqueryhtmlcss

AngularJS: Utilizing angular-filter for grouping by two columns

I may come across as a bit confusing, so please allow me to clarify. Note: An operational piece of code (POC) has been included with this post. I have an array of objects with 3 properties: name name team team_rank $scope.players = [ {name: & ...

javascriptangularjsangular-filters

JavaScript - The function will not execute any code inside its body

When I try to call my constructor function, it stops at the function definition in the debugger and never reaches the actual function body. Is there a common reason for this issue that I might be missing? Here is an example of the code: myconstructor.js ...

javascript

Eliminate the header top margin in Bootstrap

HTML <div class="container-fluid"> <div class="row"> <div class="page-header header_site"> <h1><font>ABC Company</font></h1> </div> </div> </div> CSS Code: .header_site { b ...

htmlcsstwitter-bootstrap-3

What is the most effective method for serializing SVG data from the client's Document Object Model (DOM

As I delve into the world of creating interactive SVG/AJAX interfaces, I find myself faced with a challenge. Users are constantly manipulating elements on-the-fly and I want to give them the option to export their current view as a PNG image or an SVG docu ...

phpjavascriptajaxpngsvg

Using database entries to generate dynamic routes in express.js without the need for a server restart

I have created a custom Express instance for my KeystoneJS v5 app that serves data stored in a Postgres database with the following model: CREATE TABLE "Link" ( id integer DEFAULT PRIMARY KEY, customer text, slug text ); I've set up dyna ...

javascriptnode.jsexpresskeystonejs

Why is it that the default theme of Material UI lacks any stylization at all?

After experimenting with both Carbon Design for React (@carbon/react) and Material UI (@mui/material) in conjunction with Next.js, I encountered styling issues with the components. While they functioned correctly to some extent, there were noticeable discr ...

cssreactjsnext.jsmaterial-uitailwind-css

Utilize JavaScript to assign a value to a concealed Pardot field

Recently, I've been working on setting a hidden Pardot field within an iframe. Oddly enough, when I manually input the query selector in my Chrome console, I successfully locate the element. However, when running this code snippet (embedded in the &l ...

javascriptsfdcpardot

Where can Vue.js be found?

After dedicating an hour to watching instructional YouTube videos on Vue.js, I am still struggling to grasp the language! In the past, I have worked with Node.js, Jquery, and Mongodb to develop websites... I believe that web applications require multiple ...

javascriptnode.jsvue.jsejs

JavaScript promises do not guarantee the execution of the loop

There was a block of Javascript code that I needed to modify. Initially, the code looked like this: if(!this.top3){ const promises = this.images.map((el, index) => { return this.getData(el.title, index); }); return Promise.all(promise ...

javascriptvue.js

unable to display the responseJson findings

I'm having trouble understanding why this function for an API on National Parks isn't working as expected. As a relatively new programmer, I find that seeking help from others can often shed light on issues I may have missed. Any assistance woul ...

javascriptjquery

Tips for pulling image icons from an array and gradually adding them to div elements

Is there a way to dynamically fetch and display image icons from an array in a series of DIVs? I have an array containing the file paths of images and I want to loop through this array to append each image inside different DIVs. The goal is to insert thes ...

jquery-uijquery

Utilize React to update the state of arrays in functional components

Need help with updating the cars array in my React app. When I click on the Add button, a new object is added to the updatedCars array but the state of cars does not get updated. Even after adding a new object to the array, the initial state remains uncha ...

javascriptreactjsreact-hooks

In Laravel Blade, I am looking to display a Modal popup and dynamically pass data based on the user's ID

When a user clicks on the "View Details" Button, I need to display a popup modal with information specific to that user. The data for each user is stored in the $user variable. I would like to achieve the same functionality as demonstrated on this website ...

javascriptlaravelmodal-dialoglaravel-blade

Finding a potential data breach in Node.js, MongoDB, and Chrome, exposed passwords are

My web app is built using nodejs with mongodb as the database backend, and I am encountering an issue with Chrome browser flagging my login process via passport.js as an exposed password. How can I prevent this warning? Should I implement something like Bc ...

javascriptnode.jsmongodbexpresspassport.js

What is the best way to ensure all my borders are uniform in size?

As I work on a JavaScript project that organizes words into blocks based on their size, I encountered an issue with inconsistent border thickness in certain areas. I'm using spans to contain each word, but I can't figure out how to make the borde ...

javascripthtmlcss

Embed a static label inside an input field that remains constant even while text is inputted, without using a placeholder. Crafted using HTML,

Take a look at the screenshot below - what you see on the left side is my current setup, while on the right side is the desired outcome achieved without any plugins or HTML5 attributes The left side scenario occurs when I have 2 input fields - one with th ...

javascriptjqueryhtmlcss

React Native: Avoiding Infinite Loops in useEffect

I am facing an issue where my app goes into an infinite loop because pointsData is inside the useEffect function. How can I resolve this situation? function useGetPoints() { const [pointsData, setPointsData] = useState<PointTbleType[]>([]); ...

javascriptreactjsreact-nativeredux

Assessing the performance of YUi and BackBone

As I embark on a new project, one of the crucial decisions to make is regarding the architecture. Currently, I am contemplating the selection of front-end components. I plan to utilize HTML5, CSS3, and Javascript for this purpose. When it comes to choos ...

htmlcssframeworksbackbone.jsyui