Maintaining an element's vertical position in relation to the screen with jQuery

Question

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional.

My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle.

My challenge is maintaining the vertical positioning of the element that triggered the toggle, so users can easily keep track of the panel they want to see in expanded mode.

Unfortunately, I haven't been able to figure out how to make the scroll position of lower panels move up when the expand button is clicked.

$('button').click(function () {
    var id = $(this).closest('div').attr('id');
    var target = $('#' + id);
    $('html,body').animate({
        scrollTop: target.offset().top
    }, 1000);

    $('.fa-compress').toggle();
    $('.fa-expand').toggle();
    $('.row > div').toggleClass('col-xs-6').toggleClass('col-xs-12');
});

You can view my progress on JS Fiddle

**UPDATE

For clarity, users will initially see the compressed view (2 column layout), and if they choose to view a specific panel, they can click the expand button. I want the expand animation to happen without affecting the vertical positioning of the triggered panel. This is what I mean by keeping vertical positioning intact.

jquery css

Answer 1

Answer №1

It's a bit unclear what you're looking for, but I'll give it a shot.

$('button').click(function(){
    // Put your code here first

    var container = $(this).closest('panel');

    // Calculate the distance to the top of the viewable screen
    var viewableOffset = $(container).offset().top - $(window).scrollTop(); 

   // Fix the panel at the current position when clicked       
   $(container).css('position', 'fixed');
   $(container).css('top', viewableOffset + 'px');

}

Edit: Apologies for not mentioning how to maintain the left-position, but you should be able to work it out from here :)

Edit 1

I think I understand now. If you want the panel to remain in place on the screen as it expands to full width without scrolling: You'll need to move (append) the element in the dom.

The concept involves calculating the number of preceding elements, then appending the selected panel after half that number, rounded down to the closest even number.

For example, if you expand panel 5:

Number of siblings before #5 is 4

4 / 2 = 2

Placing 5 after #2 in expanded view will keep #5 at its original height in the small view.

If you save the original position of #5 and revert it back when minimizing, everything should return to its initial state.

Answer 2

It's a bit unclear what you're looking for, but I'll give it a shot.

$('button').click(function(){
    // Put your code here first

    var container = $(this).closest('panel');

    // Calculate the distance to the top of the viewable screen
    var viewableOffset = $(container).offset().top - $(window).scrollTop(); 

   // Fix the panel at the current position when clicked       
   $(container).css('position', 'fixed');
   $(container).css('top', viewableOffset + 'px');

}

Edit: Apologies for not mentioning how to maintain the left-position, but you should be able to work it out from here :)

Edit 1

I think I understand now. If you want the panel to remain in place on the screen as it expands to full width without scrolling: You'll need to move (append) the element in the dom.

The concept involves calculating the number of preceding elements, then appending the selected panel after half that number, rounded down to the closest even number.

For example, if you expand panel 5:

Number of siblings before #5 is 4

4 / 2 = 2

Placing 5 after #2 in expanded view will keep #5 at its original height in the small view.

If you save the original position of #5 and revert it back when minimizing, everything should return to its initial state.

Answer 3

Answer №2

Here is a suggestion to improve your code:

When a 'button' is clicked, find the closest '.panel' element and calculate its index within all '.panel' elements. 
Then, determine the total height by multiplying the single height of the target with its index.

Animate the scrolling of the 'html' element to the total height over a duration of 500 milliseconds.

Toggle the visibility of two font awesome icons ('fa-compress' and 'fa-expand') and toggle the classes of all direct children of '.row'.

<a href="http://jsfiddle.net/dekkard/puye3ode/2/" rel="nofollow">View the example on JSFiddle</a>

Answer 4

Here is a suggestion to improve your code:

When a 'button' is clicked, find the closest '.panel' element and calculate its index within all '.panel' elements. 
Then, determine the total height by multiplying the single height of the target with its index.

Animate the scrolling of the 'html' element to the total height over a duration of 500 milliseconds.

Toggle the visibility of two font awesome icons ('fa-compress' and 'fa-expand') and toggle the classes of all direct children of '.row'.

<a href="http://jsfiddle.net/dekkard/puye3ode/2/" rel="nofollow">View the example on JSFiddle</a>

Maintaining an element's vertical position in relation to the screen with jQuery

Answer №1

Edit 1

Answer №2

Similar questions

The hovering of the mouse over a dropdown menu causes a division on the page to shift

Display tab content by clicking on a link from an external source

Vertically arrange the table for better visibility

The not:first-child selector targets all elements except for the first one in the sequence

Tips for maintaining DataTables filters after navigating Back/Forward or refreshing the page

What is the best way to switch the CSS style of a button that has been mapped

Set a click listener on a button within Ext.window.MessageBox

Is the JQuery UI Loaded Event Triggered?

Methods for generating arrays using jquery and modifying session data

Is there a way to incorporate a responsive side menu using JQuery or CSS3 that can shift the entire page layout?

Add a div element only if there is a background image present

Manipulating anchor links with jQuery by adding and removing classes

Incorporating jQuery ajax requests into divs seamlessly to avoid any page disruptions

Bringing elements into perfect harmony in Angular

Dynamic scrolling text for overflowing text display

Populate the dropdown menu with data from a JSON file

Exploring the functionality differences between mouse wheel tilt and scroll in JavaScript with scrollTop

No modifications to the CSS can be made within the "alterations" section of the Console drawer in Chrome

Implement a jQuery slider that pauses on hovering

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?