February 14, 2013 at 9:17 pm #42743
To start off, take a look at my current article blocks: http://chrisburton.me/dev
I can’t figure out the ajax issue so I was wondering if I could do something like this:
The container of the article blocks have a hidden overflow while the article blocks are inline-block. The problem with this is, if I set a width to the container, the blocks would not be inline anymore. They would drop underneath each other instead of hidden off the page. Does this make sense?February 14, 2013 at 9:55 pm #124658
While putting together a pen with a solution that I thought for sure would work, I learned that you can’t use `white-space: no-wrap;` on block elements.February 14, 2013 at 10:01 pm #124659
Unfortunately using jQuery to help us out. There *must* be a pure CSS way that I’m missing, but this can be your fallback!February 14, 2013 at 10:33 pm #124668
@thedoc Damn. I hope there is a CSS solution as well. Maybe absolute positioning? The only issue I see with your version is that if I increase the width of the blocks, they wrap underneath each other. The reason this can’t happen is because I will be using a jQuery click function to slide in the next set of blocks. Much like what I’m doing with ajax in the above link.February 14, 2013 at 11:13 pm #124671February 14, 2013 at 11:49 pm #124675February 15, 2013 at 12:30 am #124680February 15, 2013 at 12:38 am #124683
@yeeyang If you look above at the image, I want an infinite row of content blocks that has a container of overflow hidden (so it only shows a set of 3 at a time). Then, with an on click function using jQuery, slide in the next 3 blocks. Make sense?
Take a look here: http://chrisburton.me/dev. Click on the arrows. That is what I’m trying to accomplish without ajax since I can’t figure out a bug.February 15, 2013 at 1:27 am #124687
Okay @chrisburton, checkout my pen now.
I removed the `position: relative` from your `.container` and added a `div.wrapper` around everything and set that up as a `position: relative` to establish a positioning context. Then kept the `position: absolute` on your `.inner-container`, which should snap to it’s closest parent positioning context, which is now `.wrapper`.
Used a bit of jquery to figure out the width and set that up for the style of `.inner-container` and got your buttons hooked up to animate…
you’ll want to tweak it and clean it up but I think that’s what you’re looking for.February 15, 2013 at 1:30 am #124688
Then again… i think you wanted your content to stay hidden … doh!
If you’re open to a jquery plugin, my recommendation for your usage would be [http://caroufredsel.dev7studios.com/](http://caroufredsel.dev7studios.com/ “http://caroufredsel.dev7studios.com/”)
Lots of customizations and will do pretty much anything you want to feed it.February 15, 2013 at 1:43 am #124689February 15, 2013 at 5:57 am #124715February 15, 2013 at 6:06 am #124717
@chrisburton It seems like a no brainer to me. Do not reinvent the wheel. If you are looking for a carousel, just use a carousel.February 15, 2013 at 6:12 am #124719
@hugogiraudel Initially I wanted to use Ajax but ran into a minor problem that I personally couldn’t solve. Oh and couldn’t recall the name of the carousel functionality until @yeeyang pointed it out.
I’m running into one small problem with the carousel. When sliding to the previous items (right arrow), it will load back in the beginning article (see after getting to article 1, it shows 7 and 6 after it). I’d rather it just show the last article (1) and then have to click the left arrow to get back to the beginning. Any ideas?February 15, 2013 at 7:07 am #124723
You must be logged in to reply to this topic.