Want inline list to disappear both right and left

I'm prototyping on a new project where I want a calendar to be shown like an inline list. No biggie so far, but the little tricky part is that I want it to show less dates when the window resizes and still have the current date centered in the window..

My code down here, just makes the right hand side disappear (see image) with the .content's overflow: hidden and ul's white-space: nowrap doing the magic. But still. Not what I'm looking for. The yellow current box should be centered... draging my hair and execute a facepalm

Javascript is nice but if you've got a solution in css, it's even nicer. :)

Here's an pen to it too.. http://codepen.io/PatJarl/pen/eLJyr

.m-racecards {

    .content {

        padding: 5%; 
        max-width: 80%;
        margin: 0 auto;      
        overflow: hidden; 
        text-align: center; 

        ul {
            white-space: nowrap; 

            li {
                font-size: 25px; 
                display: inline-table;
                padding: 10px; 
            }
        }

        .current {
            background: $proto-yellow; 
        }
    } 
}

The html is quite straight forward...

<div class="m-racecards">
 <div class="content">
    <ul>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li class="current">18</li>
      <li>19</li>
      <li>and so on.... </li>
  </ul>
</div>

Problem courtesy of: PatrikJarl

Solution

You can make it happen with a little jQuery like this :)

$('.current').each(function() {
  var leftCur = $(this).position().left,
    ulwrapHalfWidth = $('.ulwrap').width() / 2,
    elHalfWidth = $(this).outerWidth() / 2;


  $(this).parent().css({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  });

});

$('.ulwrap ul').on('click', 'li', function() {
  $('.ulwrap ul li').removeClass('current');

  $(this).addClass('current');

  var leftCur = $(this).position().left,
    ulwrapHalfWidth = $('.ulwrap').width() / 2,
    elHalfWidth = $(this).outerWidth() / 2;


  $(this).parent().animate({
    left: (ulwrapHalfWidth - leftCur - elHalfWidth)
  }, 300);
});
.content {
    background: red;
    position: relative;
    padding: 5%;
    max-width: 50%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}
.ulwrap {
    overflow: hidden;
    width: 100%;
}
ul {
    white-space: nowrap;
    position: relative;
}
li {
    font-size: 25px;
    display: inline-table;
    padding: 10px;
    cursor: pointer;
}
.current {
    background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="m-racecards">
  <div class="content">
    <div class="ulwrap">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li class="current">18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>and so on....</li>
      </ul>
    </div>
  </div>
</div>

Solution courtesy of: Bojan Petkovski

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow .

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章