Grow your CSS skills. Land your dream job.

Custom jQuery Content Slider

  • # February 16, 2013 at 10:10 am

    @CrocoDillon I tried implementing it live but it’s not working for some reason.

    http://chrisburton.me/dev

    All right, sounds good.

    # February 16, 2013 at 10:17 am

    Seems to be a problem with setting multiple id’s on the `#ajax` div, there can be only one id for each element.

    I changed my mind, add http://www.crocodillon.com instead of my css-tricks profile, if that’s cool with you :) I do plan to have content soon anyway.

    # February 16, 2013 at 10:20 am

    @CrocoDillon Ha, nice catch. Everything works like a charm. Thanks again.

    Not a problem for the attribution. Updated.

    # February 16, 2013 at 10:21 am

    You’re welcome :) and thnx!

    # February 17, 2013 at 1:29 pm

    @CrocoDillon Sorry to bother you again, is there any way to stop the blocks from shifting when resizing the browser?

    Click the right arrow once until you get to the numbers 4, 3 and 2. Now, resize the browser and you will see 4 leaves the area while 1 slips in.

    site: http://chrisburton.me/dev

    JS file: http://chrisburton.me/dev/assets/js/functions.js

    # February 17, 2013 at 4:34 pm

    I’m playing with the idea of using % as positioning and it seems to fix that problem, but it adds another. How to know what % to use? `left: -100%;` translates to 985px, if I’d figure out where this number comes from I could write the code to calculate the exact % to use, instead of what I’m doing here http://codepen.io/CrocoDillon/pen/xmBuA , using multiples of -100%.

    # February 17, 2013 at 7:56 pm

    @CrocoDillon Perhaps all three widths (320px * 3 = 960) and a margin of the arrow (320px * 3 + 25px = 985px)? Although, I’m not seeing anything rendering 985px. I wonder if wrapping it in another div might help.

    Update: I don’t want to jump the gun here but using percentages rather than pixels is working when I hard code it into Web Inspector.

    # February 18, 2013 at 2:44 am

    For me it doesn’t, if I use -100% on #ajax then there is a border visible that shouldn’t be visible. Maybe just go with that for now and remove the border for nth-child(3n) again? Or hardcode the 985px in JS (which sucks), I’ve updated my pen for that. Still an unwanted border though on the 2nd page.

    # February 18, 2013 at 4:33 am

    Darn. It doesn’t work either. When the browser is resized and you click the arrow, it doesn’t calculate correctly.

    # February 18, 2013 at 5:19 am

    I’m puzzled, let me think about that for a while. Go with the first solution for now? Seems to be the best solution as long as users don’t resize after scrolling…

    # February 18, 2013 at 5:55 am

    @Crocodillon Yeah, I figured that was the best option for now. Take your time, much appreciated for the help.

    # February 18, 2013 at 7:30 pm

    At least I found out where the 985px comes from. jQuery’s `.position().left` gets the position relative to first positioned ancestor (in this case `.page-wrap`) “Oops” :P That element has 25px padding. So the slider started at 25px relative to that element. Sliding it 100% (or 1010px) to the left made it 985px. At least this isn’t a concern anymore, since we aren’t setting or getting the `#ajax` position using that jQuery function. Using the function on the articles worked because `#ajax` is their positioned ancestor.

    So multiples of -100% should work, except it doesn’t because the total width of 3 articles is (or should be) 100%, adding borders makes it go over 100%. Using `box-sizing: border-box;` fixes that. Updated pen: http://codepen.io/CrocoDillon/pen/xmBuA

    Can probably cleanup the javascript alot now, a lot vars that aren’t needed anymore. (Edit: done)

    # February 18, 2013 at 7:51 pm

    @Crocodillon That’s actually weird because I was applying `box-sizing: border-box;` if you take a look at my reset: http://chrisburton.me/dev/assets/styles/reset.css

    But it seems to work on localhost perfectly so maybe it was because I didn’t declare it in CodePen?

    # February 18, 2013 at 8:09 pm

    I don’t know, I only tested on CodePen, but yeah that’s weird. Maybe what you had were just rounding errors? I did put a few extra decimals to `.article { width: 33.3333%; }`, and any additional rounding errors get masked with

    .articles .article:nth-child(3n), .articles .article:last-child {
    border-right: none;
    }

    # February 18, 2013 at 8:17 pm

    @CrocoDillon Gotcha. Well, from what I can tell it does work now. Any minor issues I can fix with media queries, I think. Thanks again for taking the time to help me out with this!

Viewing 15 posts - 31 through 45 (of 45 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".