-
Notifications
You must be signed in to change notification settings - Fork 282
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is there a way to have a div fill the whole row? #563
Labels
Comments
This demo has different sized elements https://codepen.io/Vestride/details/ZVWmMX as well as some of the other demos. |
Hi Vestride,
I did look at the demo and the Golden Gate Bridge image takes up two column
spaces but I don't see how it's being achieved. I have images that have to
load so I wait for a single image to finish loading and then I get the
dimensions and apply it to all my other images. I tried setting the width
and height manually for the "title" divs but it didn't do anything. The
following is how I am currently setting up my grid (without any additional
code for titles). Any pointers on how to get a title div to take up the
whole width would be awesome.
const grid = document.querySelector('.card-grid');
const Shuffle = window.Shuffle;
var s; // shuffle instance
var imgLoad = imagesLoaded( grid );
imgLoad.on('progress', oneImageLoaded);
function oneImageLoaded(instance, image) {
var result = image.isLoaded ? 'loaded' : 'broken';
// console.log( 'image is ' + result + ' for ' +
image.img.src, image.img.width, image.img.height );
if(result == 'loaded') {
initCardSizes(image.img);
initShuffle();
imgLoad.off('progress', oneImageLoaded); // end event
listener
}
}
function initCardSizes(card) {
// var card = grid.querySelector('a img');
var width = Math.floor(card.width);
var height = Math.floor(card.height);
var items = grid.querySelectorAll('a');
for (var i=0; i<items.length; i++) {
items[i].style.width = width + 'px';
items[i].style.height = height + 'px';
}
}
function initShuffle() {
s = new Shuffle(grid, {
itemSelector: 'a',
isCentered: true
});
}
…On Fri, Mar 1, 2024 at 7:11 PM Glen Cheney ***@***.***> wrote:
This demo has different sized elements
https://codepen.io/Vestride/details/ZVWmMX as well as some of the other
demos.
—
Reply to this email directly, view it on GitHub
<#563 (comment)>,
or unsubscribe
<https:/notifications/unsubscribe-auth/A2PPB6PAXGM5JMI6UXQKO4TYWEKMHAVCNFSM6AAAAABD7BN55OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZUGEYTMOBQGY>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
All my images are the same size (like a grid) but I have "titles" that I'd like to have it fill the row width. The title currently takes up the same space as my other images (so only 1/5 of the row). Is there a way to make a grid item take over a whole row instead of a single column width?
I do want the titles to be just another grid item because when filtering or sorting, I'll be hiding them. Is there an easy way to have particular grid items fill the whole row? Any help would be awesome!
I love Shuffle. It's so cool to see all the cards move around but if I can't solve this I'll probably have to remove it from my web app.
The text was updated successfully, but these errors were encountered: