XardasLord XardasLord - 1 year ago 56
HTML Question

Container width + margin-left does not show all images while sliding

I have the following HTML code:



$(document).ready(function() {

calculate_width();

$('#moveleft').click(function() {
var loga = $('#marki #loga');

if ($('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()) {
loga.animate({
'margin-left': "-=100px"
});
}
});
$('#moveright').click(function() {
var loga = $('#marki #loga');

if (parseInt(loga.css('margin-left')) < 0) {
loga.animate({
'margin-left': "+=100px"
});
}
});
});

function calculate_width() {
var szerokosc = 0;

$('#loga a img').each(function() {
szerokosc += $(this).outerWidth(true);
});
$('#marki #loga').width(szerokosc);
}

#marki .container {
height: 50px;
overflow: hidden;
white-space: nowrap;
position: relative;
}

#marki #loga {
font-size: 0px;
}

#marki a {
display: inline-block;
margin: 0 30px 0 0;
line-height: 50px;
text-decoration: none;
}

#marki a:last-of-type {
margin: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="marki">
<div class="container">
<div id="loga">
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
<a href="">
<img src="http://via.placeholder.com/200x200">
</a>
</div>
</div>
</div>
<div style="padding:20px;">
<button id="moveright" style="float:left;"><<</button>
<button id="moveleft" style="float:right;">>></button>
</div>





As you can see, when I click
>>
button
$('#marki #loga')
gets 'margin-left' property to
-+ 100px
.

But I want to achieve, that I can scroll until the last image. But the calculation:
$('#marki .container').width() + Math.abs(parseInt(loga.css('margin-left'))) < loga.width()

is false when there are three images left to show.

What I'm calculating wrong? The list of images is getting dynamically, so I can't use the const width of images.

Answer Source

Actually, you want to stop scrolling when the loga div's right side has reached the container right side. Here is a concrete example of what you want to achieve

In terms of maths, this condition is that the absolute value of the margin-left property + the container width is equal to the loga div, which is exactly what you have done, so this is not the problem here.

The issue is that your loga div have a 3400px width, and you have 17 <a> blocks with 225px width each. But 17 * 225 = 3825, which is why you have those missing blocks when the code reach 3400px. There is 425px missing. Just remove the fixed width of the loga div should do the trick

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download