We Keep Coding

Image rotation in javascript is not working

I am new here and this is my first question for an assignment for class. I am trying to get an image rotation to work in javascript and it is not working for me. Can someone help? I tried console logging and everything is calling fine.
I have this code within another function for when the end user clicks on a button it triggers the rotation
t = setInterval(scrollImages, 50);
function scrollImages() {
var coverBarDiv = document.getElementById("coverBar");
var images = coverBarDiv.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
if (left <= -86) {
left = 532;
}
images[i].style.left = (left - 1) + "px";
}
}
#coverBar {
height: 115px;
left: 182px;
overflow: hidden;
position: absolute;
top: 560px;
width: 440px;
}
#cover img {
position: absolute;
top: 0;
}
<div id="coverBar">
<img src="images/coverMatrix.jpg" width="82" height="115" style="left: 0px;">
<img src="images/coverDeadRingers.jpg" width="82" height="115" style="left: 88px;">
<img src="images/coverDrStrangelove.jpg" width="82" height="115" style="left: 176px;">
<img src="images/coverFuturama.jpg" width="82" height="115" style="left: 264px;">
<img src="images/coverHolyGrail.jpg" width="82" height="115" style="left: 356px;">
<img src="images/coverRaisingArizona.jpg" width="82" height="115" style="left: 444px;">
<img src="images/coverRobotChicken.jpg" width="82" height="115" style="left: 532px;">
</div>

It is all fine! There was just a typo in CSS selector : #cover img should be #coverBar img
t = setInterval(scrollImages, 20);
function scrollImages() {
var coverBarDiv = document.getElementById("coverBar");
var images = coverBarDiv.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
var left = images[i].style.left.substr(0, images[i].style.left.length - 2);
if (left <= -86) {
left = 532;
}
images[i].style.left = (left - 1) + "px";
}
}
#coverBar {
height: 115px;
left: 20px;
overflow: hidden;
position: absolute;
top: 60px;
width: 440px;
}
#coverBar img {
position: absolute;
top: 0;
}
<div id="coverBar">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 0px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 88px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 176px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 264px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 356px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 444px;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRlq8No0dCjQXEsDTge4boAr22X6m8gVWIYSAkMwj6JYqCC9U" width="82" height="115" style="left: 532px;">
</div>

Scroll left and right when hovering on arrows

So I am trying to simply scroll left and right when someone hovers over arrows. I forked another JSFiddle and copied the html/css from my website I'm trying to do this on. Here it is: https://jsfiddle.net/31hf4e0h/
Right now it scrolls all the way to the right when you hover over either arrow, but I want the #before arrow to make it scroll to the left. Is there an easy way to do this? Or a more simple way to achieve this effect generally?
Here is the code:
$(function() {
var $container = $('#object-nav ul'),
scroll = $container.width();
$('#after').hover(function() {
$container.animate({
'scrollLeft': scroll
},{duration: 2000, queue: false});
}, function(){
$container.stop();
});
$('#before').hover(function() {
$container.animate({
'scrollLeft': scroll
},{duration: 2000, queue: false});
}, function(){
$container.stop();
});
});
Thanks!

this is perfect solution for on hover left and right scroll. jsfiddle
function loopNext(){
$('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext);
}
function loopPrev(){
$('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev);
}
function stop(){
$('#sliderWrapper').stop();
}
$('#next').hover(function () {
loopNext();
},function () {
stop();
});
$('#prev').hover(function () {
loopPrev();
},function () {
stop();
});
#sliderWrapper {
left: 40px;
width: calc(100% - 80px);
white-space: nowrap !important;
height: 100%;
position: relative;
background: #999;
overflow-x: hidden;
}
img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#next {
height: 100%;
position: absolute;
right: 0;
background: #555;
z-index: 1;
}
#prev {
height: 100%;
position: absolute;
left: 0;
background: #555;
z-index: 1;
}
#imageSlider {
width: 100%;
height: 150px;
position: relative;
overflow: hidden;
}
#imageSlider img{width:100px; height:100px;}
::-webkit-scrollbar {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="imageSlider">
<div id="prev">
<img src="" width="40px" />
</div>
<div id="next">
<img src="" width="40px" />
</div>
<div id="sliderWrapper">
<img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" />
<img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" /><img src="" height="90px;" />
</div>
</div>

If you want to scroll right, you still have to use 'scrollLeft', but you can scroll to right by specifying the number of pixels.
Try something like this:
$('#before').hover(function() {
$container.animate({
'scrollLeft': -100
},{duration: 2000, queue: false});
}

Masonry places blocks with huge spaces between them

There is a huge problem with masonry: it makes some useless spaces between blocks. I already tried everything, but nothing helps it.I would really apreciate if someone could tell me how to resolve this problem. Check screenshot.Result
UPDATE: I figured out, that the problem starts with first figure "T-Shirts". Somehow, when I delete class width-1 from there everything fits as it's meant to be.
Why is it happening and how can I solve this problem? Any suggestions? I really can't delete that figure, there must be some way to fit it with other blocks. Please help.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 230
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
main
{
height: 630px;
margin-top: 40px;
margin-left: 18%;
width: 1500px;
}
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
.grid-item
{
width: 230px;
height: 180px;
margin-right: 10px;
margin-bottom: 10px;
float: left;
}
.height-1
{
height: 370px;
}
.width-1
{
width: 360px;
}
.width-2
{
width: 470px;
}
.height-2
{
width: 360px;
height: 370px;
}
.width-2 img
{
width: 470px;
height: 180px;
}
<main class="grid">
<figure class="grid-item height-1 width-1">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="grid-item">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item width-2">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="grid-item height-1">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="grid-item">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item width-1">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="grid-item">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="grid-item">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="grid-item">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>

You're missing imagesLoaded.
example:
// init Masonry
var $grid = $('.grid').masonry({
// options...
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});

Manipulate the form of a div content

The below code is a slider that manipulates between two dividers, previous and next. Each divider represents a set of ten images, as you can see in two parallel vertical lines. I'm trying to make each divider 2 parallel horizontal lines (5 images on each line), However it's getting messed up and the 2 dividers are getting connected. Any help please?
HTML:
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JQUERY:
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
src="js/jquery.scrollTo.js"
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
JSFIDDLE: http://jsfiddle.net/2ghovmww/

As I see it you can achieve what you want with display:inline for each horizontal block, but as you have implemented it, the width of your container is smaller than the width of five elements in a row, so they can't be displayed. If you use overflow:hidden you will have two rows but the elements that exceed the width of the container will be hidden. So first you must adjust the width of the container and its parent elements.

jQuery hover fadeIn fadeOut problem

I just got back to html, javascript and jquery and i'm a bit rusty. I've mostly been doing objective-c for a while and getting back to jquery is a little difficult. I'm trying to use the jQuery fadeIn and fadeOut bit but its not working for some reason... Here's the html and js I've been working on :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js">
function showImg(2img) {
$(2img).fadeIn('slow', function() {
// Animation complete
});
}
function hideImg(2img) {
$(2img).fadeOut('slow', function() {
// Animation complete
});
}
</script>
<body>
<table width="1659" height="701" border="0" align="center">
<tr>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img1" src="" width="232" height="232" alt="" onmouseover="showimg(2img1)" onmouseout="hideimg(2img1)" style="position: relative; top: 0; left: 0;"/>
<img id="2img1" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img2" src="" width="232" height="232" alt="" onmouseover="showimg(2img2)" onmouseout="hideimg(2img2)" style="position: relative; top: 0; left: 0;"/>
<img id="2img2" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img3" src="" width="232" height="232" alt="" onmouseover="showimg(2img3)" onmouseout="hideimg(2img3)" style="position: relative; top: 0; left: 0;"/>
<img id="2img3" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img4" src="" width="232" height="232" alt="" onmouseover="showimg(2img4)" onmouseout="hideimg(2img4)" style="position: relative; top: 0; left: 0;"/>
<img id="2img4" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
<th width="325" scope="col"><div style="position: relative; left: 0; top: 0;"><img id="img5" src="" width="232" height="232" alt="" onmouseover="showimg(2img5)" onmouseout="hideimg(2img5)" style="position: relative; top: 0; left: 0;"/>
<img id="2img5" src="" width="32" height="32" alt="" style="position: absolute; top: 100px; left: 150px; visibility:hidden;"/></div></th>
</tr>
</table>
</body>

I think you'd find it better to do this:
$(function() {
$('table > div > img:first').hover(function() {
showImg($(this).next());
}, function() {
hideImg($(this).next());
});
});
This way you wont be replicating the onmouseover and onmouseoout code in your html.
The errors in your code are - No # for the id of the images to fade, although it seems to work in chrome I don't know if it will work as expected in every browser, also the function names don't have the same case.

$(2img) should be $('#2img') and that's it

$(2img) should be $('#'+2img) and invoke the function like showImg("2img2")

DEMO
$('.tb td').each(function(){
$(this).find('img').wrapAll('<div />');
$('.tb td div').css({position:'relative'});
$(this).find('img:eq(1)').css({position:'absolute', left:'0px', top:'0px'}).hide();
});
$('.tb td div').hover(function(){
$(this).find('img:eq(1)').stop().fadeTo(400,1);
},function(){
$(this).find('img:eq(1)').stop().fadeTo(400,0);
});