Want an inline list to fade out on both the right and left
I am prototyping in a new project where I want the calendar to appear as an inline list. Nothing is known yet, but the little tricky part is that I want it to show fewer dates when the window is resized and still has the current date centered on the window.
My code here, just makes the right side disappear (see image) with .content: hidden and ul white-space: nowrap overflow does the magic. But still. Not what I'm looking for. The yellow current drawer should be centered ... pull up hair and facepalm
Javascript is good, but if you have a solution in css it's even nicer. :)
Here's a pen 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;
}
}
}
html is pretty 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>
+3
source to share
1 answer
You can do it 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>
+3
source to share