Use JavaScript to stick all elements to the top of a container, while maintaining their original horizontal positions

Question

Use JavaScript to stick all elements to the top of a container, while maintaining their original horizontal positions

Within a fixed width container, I have multiple square <li> elements organized in rows inside a ul. Once these elements reach the edge of the container, they drop to a new row below (think of it as building a brick wall with these <li> elements).

I am seeking a solution to anchor all of these elements to the top of the container so that they form only a single row positioned side by side. The challenge is that using position: absolute; top:0; causes them to lose their horizontal alignment.

Is there a way to achieve this using Javascript, where the elements remain horizontally aligned while being pinned to the top of the container? It's acceptable for them to overlap and stack on top of each other in this scenario.

jquery css

Answer 1

Answer №1

To achieve the desired layout, you must allow elements to flow naturally and then modify their appearance using position:absolute, top:0, and

left:(add the corresponding offsetLeft value for each element)

.

update: illustration

var container = document.getElementById('hover-days');
var items = container.getElementsByTagName('li');
var leftValues = [];

// capture offsetLeft values
for(var i = 0; i < items.length; ++i) {
    leftValues[i] = items[i].offsetLeft;
}

// apply new styles
for(var i = 0; i < items.length; ++i) {
    var item = items[i];
    item.style.left = leftValues[i] + 'px';
    item.style.top = '0px';
    item.style.position = 'absolute';
}

Answer 2

To achieve the desired layout, you must allow elements to flow naturally and then modify their appearance using position:absolute, top:0, and

left:(add the corresponding offsetLeft value for each element)

.

update: illustration

var container = document.getElementById('hover-days');
var items = container.getElementsByTagName('li');
var leftValues = [];

// capture offsetLeft values
for(var i = 0; i < items.length; ++i) {
    leftValues[i] = items[i].offsetLeft;
}

// apply new styles
for(var i = 0; i < items.length; ++i) {
    var item = items[i];
    item.style.left = leftValues[i] + 'px';
    item.style.top = '0px';
    item.style.position = 'absolute';
}

Answer 3

Answer №2

If you're familiar with CSS3 selectors, the :nth-child() pseudo selector can be a useful tool (especially if you have a fixed width list where the number of lis in each row remains consistent).

ul { width: 150px; height: 150px; position: relative; }

li { width: 50px; height: 50px; position: absolute; top: 0; left: 0; }

li:nth-child(3n-1) { left: 50px; }

li:nth-child(3n) { left: 100px; }

Check out the jsFiddle Demo here.

If you require a jQuery solution, I've crafted a handy little function for you:

$('li').css('left', function (index) {
    var $me=$(this),
        myWidth=$me.width(),
        myLeft=(index % 3)*myWidth;
    return myLeft;
});

This code assumes that your li's are already styled with position: absolute; top: 0;, and the parent ul has a style of position: relative, with all dimensions set using CSS.

Take a look at the second jsFiddle Demo here.

Based on your feedback, remember to use #hover-days ul li as the jQuery selector instead of just li.

Answer 4

If you're familiar with CSS3 selectors, the :nth-child() pseudo selector can be a useful tool (especially if you have a fixed width list where the number of lis in each row remains consistent).

ul { width: 150px; height: 150px; position: relative; }

li { width: 50px; height: 50px; position: absolute; top: 0; left: 0; }

li:nth-child(3n-1) { left: 50px; }

li:nth-child(3n) { left: 100px; }

Check out the jsFiddle Demo here.

If you require a jQuery solution, I've crafted a handy little function for you:

$('li').css('left', function (index) {
    var $me=$(this),
        myWidth=$me.width(),
        myLeft=(index % 3)*myWidth;
    return myLeft;
});

This code assumes that your li's are already styled with position: absolute; top: 0;, and the parent ul has a style of position: relative, with all dimensions set using CSS.

Take a look at the second jsFiddle Demo here.

Based on your feedback, remember to use #hover-days ul li as the jQuery selector instead of just li.

Use JavaScript to stick all elements to the top of a container, while maintaining their original horizontal positions

Answer №1

Answer №2

Similar questions

Implementing Cross-Origin Resource Sharing (CORS) with Django

Attempting to modify the animation speed of a fadeOut queue in jQuery from "slow" to the digit "3000" is proving unsuccessful

My div remains stationary despite keyframes

Add a css class to a <div> that is created by an <ng-template> inside the <ngx-datatable-column> element

What is the best method to insert a value into a Set<UserRelative> using jquery.ajax?

The Ajax data is appearing in the console, however, it is not being recognized as a valid PHP value

What is the best way to center align an element while having another element situated directly below it?

Switch from Index.html to Index.html#section1

Creating a CSS grid with uniform row heights, each adjusting independently

What is the best way to eliminate the blue highlight on a button after it has been pressed and the original border has been

Click on the image to resize the div accordingly

Is there a way to create two proportional columns using HTML/CSS, with the left column sticking to the user's view as they scroll?

What could be causing the input submit in my form to be unresponsive when clicked?

How can I align all the columns in every row to the left except for the first one?

Changing the element to "position: absolute" prevents it from stretching to the full width

Utilize JWPlayer to direct users to a designated URL

Place the logo in the top right corner of the div

Contrasting hierarchy of text-decoration and text-shadow in Firefox compared to Chrome

Error: The function $(...).offset(...) is not defined

Scrolling seamlessly on websites with a single page