We Keep Coding

How to move several images to one position, then back to their original positions

I'm trying to build a card matching game for a class I'm in, and I'm having a lot of trouble moving the cards around as I'd like them to. The images are set up in a grid. I'd like them to all move to the center, shuffle a few times, then go back to their original positions. I'm able to get them to go to the center and shuffle, but when I tell them to return to their spots, they travel about 5 times further and overshoot their original spaces. What am I doing wrong?
My images are arranged:
<div class="row">
<div class="container"><img id="1"></div>
<div class="container"><img id="2"></div>
<div class="container"><img id="3"></div>
<div class="container"><img id="4"></div>
</div>
<div class="row">
<div class="container"><img id="5"></div>
<div class="container"><img id="6"></div>
<div class="middle"></div>
<div class="container"><img id="7"></div>
<div class="container"><img id="8"></div>
</div>
<div class="row">
<div class="container"><img id="9"></div>
<div class="container"><img id="10"></div>
<div class="container"><img id="11"></div>
<div class="container"><img id="12"></div>
</div>
The image sources are set later through js. The pertinent css is like this:
img{
height:100%;
width:auto;
transform:rotate(90deg);
position:relative;
}
.container{
height:150px;
width:180px;
margin:0 2em;
}
.row{
display: flex;
justify-content: center;
margin: 5em 0 0 0;
And the jquery that's supposed to move them around is this:
$('img').each(function(index){
positions[index]=$(this).offset()
})
middle=$('.middle').offset()
$('img').each(function(index){
left=middle.left-positions[index].left-75
top=middle.top-positions[index].top
$(this).animate({
left: left,
top: top
},600)
})
for(i=0;i<5;++i){
$('img').each(function(index){
if(index<6){
$(this).animate({
left:'-=150',
},150).animate({
left:'+=150'
},150)
}
else{
$(this).animate({
left:'+=150',
},150).animate({
left:'-=150'
},150)
}
})
}
var delay=0
$('img').each(function(index){
left=middle.left-positions[index].left-75
top=middle.top-positions[index].top
$(this).delay(delay).animate({
left: left*-1,
top: top*-1
},600)
delay+=100
})
If I multiply the top and left variables on the return by like -.15 instead of -1 I can get them back to close to their original positions, but as I run the game multiple times the differences add up and get out of control. Sorry for the long code wall, thanks for any help.

CSS transparent colour overlay fade not working on iOS

I have made a grid of images and when you hover over them a semi-transparent overlay fades in and out and some text appears
I wanted this to work similarly on mobile devices, only instead of it fading in when you hover, it fades in when you tap
I have managed to get this working on android but not on mobiles.
I will show my code and a few examples of solutions I have tried. I have tried so many but I am rather new to javascript (I have some functioning javascript working on my site though!) and nothing is working on iOS devices.
Js fiddle:
https://jsfiddle.net/49h450g9/
I am using bootstrap and less. My grid HTML code:
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image1.jpg">
<div class="overlay purple2">
<br>
<h3>image 1</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-3 col-xs-3"><div class="image-wrap">
<img src="assets/images/image2.jpg">
<div class="overlay blue">
<h3>image 2</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-4 col-xs-4"><div class="image-wrap">
<img src="assets/images/image4.jpg">
<div class="overlay purple1">
<h3>image 3</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 col-xs-7"><div class="image-wrap">
<img src="assets/images/image5.jpg">
<div class="overlay blue">
<h3>image 5</h3>
<hr>
<p><strong>description</p>
<br>
View Website
</div>
</div>
</div>
<div class="col-sm-5 col-xs-5"><div class="image-wrap">
<img src="assets/images/image6.jpg">
<div class="overlay purple2">
<h3>Image 6</h3>
<hr>
<p>description</p>
<br>
View Website
</div>
</a>
</div>
</div>
</div>
</div>
CSS:
.image-wrap {
display: inline-block;
position: relative;
}
.overlay {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
color:white;
opacity: 0;
transition:opacity .5s ease-out;
text-align: center;
hr {
border: 1px solid #fff;
width: 10%;
}
}
.image-wrap:hover .overlay {
opacity: 1;
}
.red {
background: rgba(102,67,154,0.7);
}
.blue {
background: rgba(23,56,179,0.7);
}
.purple1 {
background: rgba(140,23,179,0.7);
}
.purple2 {
background: rgba(71,13,142,0.7);
}
Solutions I have tried include:
adding
onclick=""
to the image wrap div element
2 adding the JS line to my js file:
$('body').bind('touchstart', function() {});
Adding the following js to my js file:
2 adding the JS line to my js file:
$(document).ready(function(){
$(".overlay").hover(function(){
//On Hover - Works on ios
$("p").hide();
}, function(){
//Hover Off - Hover off doesn't seem to work on iOS
$("p").show();
})
});
However, on iOS none of my solutions are working, when I tap no text or semi-transparent overlay fades in
I have been working on this for nearly a week and have looked at many questions on here but I cannot find a solution that works for me
Any help would be massively appreciated :)
Thanks!

use :active pseudo class instead of :hover. In touch mobile devices, once an hover is triggered, it will not get removed once you take your finger off. It need you to tap on somewhere else on the screen.
similarly in jquery you can use mousedown() and mouseup() for the same purpose. on mousedown() you may show the overlay and mouseup() you may hide it.

slick slider on transition keep structure

I am using the slick slider and trying to create a certain design for the actual slider. What I basically need is a structure similar to this:
div div
div div
div
I've been able to get this design working hover when in sliding/transition through it automatically goes to this design
div div div div div
Where it goes back to the original design. I would like to know if its possible to keep the top design as it goes transition. Below is my current CSS, HTML and jQuery.
HTML:
<div class="loop">
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
CSS:
.active:first-child {
margin-top: 10px; }
.test, .slick-active:nth-child(1), .slick-active:nth-child(5) {
margin-top: 10px; }
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4) {
margin-top: 40px; }
.center-test, .slick-active:nth-child(3) {
margin-top: 70px; }
JavaScript:
$(document).ready(function () {
var loop = $(".loop");
loop.slick({
slidesToShow: 5,
sliderPerRow: 1,
swipeToSlide: true
});
loop.on('afterChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
loop.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
loop.find(".slick-active ").removeClass("test");
loop.find(".slick-active ").removeClass("test-2");
loop.find(".slick-active ").removeClass("center-test");
});
loop.find(".slick-active").removeClass("test");
loop.find(".slick-active").first().addClass("test");
loop.find(".slick-active").last().addClass("test");
loop.find(".slick-active").eq(1).addClass("test-2");
loop.find(".slick-active").eq(3).addClass("test-2");
loop.find(".slick-active").eq(2).addClass("center-test");
});
I'm guessing instead of margin there should be some sort of offset, where once the code is sliding each div is being calculated. Here is the documentation for slick slider:
http://kenwheeler.github.io/slick/
EDIT
I've also added in this css rather than adding a margin to the divs.
.test, .slick-active:nth-child(1), .slick-active:nth-child(5){
top:10px;
position:relative;
}
.test-2, .slick-active:nth-child(2), .slick-active:nth-child(4){
top:40px;
position:relative;
}
.center-test, .slick-active:nth-child(3){
top:70px;
position:relative;
}
.slick-track{
height:100px;
}
So far what I have observed is that it adds the class for the structure change after the slide has finished the transition, hence the 'afterChange' in the JS. But would it be possible to get the structure to be applied when the transition is also in place.

The obvious problem here is the infinite looping.
Maybe someone will manage to figure that out one day but for now if you are willing to give that up this should do the trick.
It will work with any number of slides.
$(document).ready(function () {
var $loop = $(".loop");
$loop.slick({
slidesToShow: 5,
sliderPerRow: 1,
swipeToSlide: true,
speed: 500,
infinite: false
});
});
.slick-track{
height:100px;
}
.loop .product {
background: #ccc;
outline: 1px solid black;
transition: transform .5s; /* same duration as in js */
transform: translateY(0);
}
.loop .product.slick-current + .product {
transform: translateY(30px);
}
.loop .product.slick-current + .product + .product {
transform: translateY(50px);
}
.loop .product.slick-current + .product + .product + .product {
transform: translateY(30px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.min.js"></script>
<div class="loop">
<div class="product"> Your ContentA </div>
<div class="product"> Your ContentB </div>
<div class="product"> Your ContentC </div>
<div class="product"> Your Content1 </div>
<div class="product"> Your Content2 </div>
<div class="product"> Your Content3 </div>
<div class="product"> Your Content4 </div>
<div class="product"> Your Content5 </div>
<div class="product"> Your Content6 </div>
<div class="product"> Your Content7 </div>
</div>

I am not sure but i think:
slick slider adds and removes elements as you slide or swipe, so the nth-child selector you used won't work well.
try using class name instead nth selector, like:
.test, .slick-active:frstchild{
top:10px;
position:relative;
}
<div class="loop">
<div class="product frstchild"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product frstchild"> Your Content </div>
<div class="product"> Your Content </div>
<div class="product"> Your Content </div>
</div>
or you can use define cycle size in nth-child selector accordingly, like:
.test, .slick-active:frstchild(3n+1){}

Try this:
.product:nth-child(5n+1),
.product:nth-child(5n+5)
{
top:10px;
position:relative;
}
.product:nth-child(5n+2),
.product:nth-child(5n+4)
{
top:40px;
position:relative;
}
.product:nth-child(5n+3)
{
top:70px;
position:relative;
}
Slick slider adds elements (slick-cloned), thats why you had problem with styling them. Now you don't need all this javascript magic ;)
Here is nice explanation of nth-child.
Watch out using nth-child because it not always works as you might think. For example:
<style>
.product:nth-child(1){background:red;}
.product:nth-child(2){background:blue;}
</style>
<div class="loop">
<div class="promo"> Some promo </div>
<div class="product"> Your Content1 </div>
<div class="product"> Your Content2 </div>
</div>
What will be backgrounds of those elements?

Muliple hidden fullscreen divs?

I'm working on my portfolio website, but can't solve the following problem.
The website is basically just pictures, if you click on one,
a semi-transparent fullscreen div opens with information (more pics and some text).
If you click again the div will close.
jQuery for hiding and showing:
<script>
$(function()
{
$('.masonryImage').click(function()
{
$('.hiddenDiv').show();
$("body").css("overflow", "hidden");
});
$('.hiddenDiv').click(function()
{
$('.hiddenDiv').hide();
$("body").css("overflow", "auto");
});
});
</script
HTML:
<div class="masonryImage">
<img src="images/pic1.jpg" alt="">
</div>
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="images/pic2.jpg" alt="">
</div>
</div>
So far it works with one picture, but when I'm adding another,
the new hidden text will overlay the first one, same with the pictures.
Is it because I'm using the same class ("masonryImage")?
Or isn't my Javascript removing the divs properly?
Many thanks.
Edit: CSS might be usefull:
.hiddenDiv {
position:fixed;
top:0;
left:0;
background:rgba(255,255,255,0.8);
z-index:900;
width:100%;
height:100%;
display:none;
overflow: scroll;
}
.masonryImage {
margin: 20px 20px 20px;
display: inline-block;
cursor: pointer;
}

here is how I modified your code :
DEMO
HTML
<div class="masonryImage">
<img src="..." alt="">
<div class="hiddenDiv">
<div class="text">
<p>Lorem ipsum...</p>
</div>
<div class="pics">
<img src="..." alt="">
</div>
</div>
</div>
I put the hiddenDiv inside the masonryImage so every masonryImage will have a custom hiddenDiv to show/hide.
JQUERY
$('.masonryImage').click(function()
{
if ($(this).find('.hiddenDiv').toggle().is(":visible")) {
//alert('hiddenDiv is visible !');
$("body").css("overflow", "hidden");
}
else {
//alert('hiddenDiv is hidden !');
$("body").css("overflow", "auto");
}
});
You can just use .toogle() to show/hide the div. $(this) refers to the clicked masonryImage and .find('.hiddenDiv') to its child (you can also use .children('.hiddenDiv') ).
Then you can test if the clicked div is hidden or visible with .is(":visible"), to apply your body custom css :)
Hope I helped you.

Trouble with Javascript mouseover

I've been trying to make a div inside a container div visible when the mouse is moved over the container div. Currently the div that needs to be made visible has property display set as none. I've tried repeatedly to make this work with javascript to no avail. could someone help me out please? The code is included below.
HTML
<html>
<!--Header Files-->
<head>
<!--Icon for tabbed browsers-->
<link rel="shortcut icon" href="images/favicon.ico" type="image/png"/>
<!--Including the CSS file that gives all the appearance attributes to the page-->
<link type="text/css" rel="stylesheet" href="css/talentdatabase.css"/>
<!--Including the JavaScript file to give interaction with the web objects-->
<script src="js/talentdatabase.js" type="text/javascript" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<!--Title of the page-->
</head>
<!--Body-->
<body>
<!--Top Banner-->
<div class="button">
</div>
<div class="head">
<a href="index.html"><div class="logo">
<image src= "" height="60px" width="320px"/>
</div></a>
<div class="contact">
</div>
</div>
<div class="bar">
<a href="talentdatabase.html"><div class="one">
<h3>Talent Database</h3>
</div></a>
<a href="facilities.html"><div class="two">
<h3>Facilities</h3>
</div></a>
<a href="print.html"><div class="three">
<h3>Print Campaigns</h3>
</div></a>
<a href="tv.html"><div class="four">
<h3>TV Campaigns</h3>
</div></a>
<a href="contact.html"><div class="five">
<h3>Contact Us</h3>
</div></a>
</div>
<div class="container">
<div class="column1">
<div class="pic1"><image src= "images/talentdatabase/back/man.png" height="100%" width="100%"/></div>
<div class="caption">Male&nbsp</div>
<div class="popcontain1">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
<div class="gutter1">
</div>
<div class="column2">
<div class="pic2"><image src= "images/talentdatabase/back/woman.png" height="100%" width="100%"/></div>
<div class="caption">Children&nbsp</div>
<div class="popcontain2">
<div class="bpop1">&nbsp Boy</div>
<div class="bpop2">G &nbsp i &nbsp r &nbsp l &nbsp </div>
</div>
</div>
<div class="gutter2">
</div>
<div class="column3">
<div class="pic3"><image src= "images/talentdatabase/back/child.png" height="100%" width="100%"/></div>
<div class="caption">Female&nbsp</div>
<div class="popcontain3">
<div class="apop1">&nbsp Fresh Talent</div>
<div class="apop2">Mature Models&nbsp </div>
<div class="apop3">&nbsp Active Models</div>
</div>
</div>
</div>
<div class="bottombar">
<a href="index.html"><div class="one">
<h3>Home</h3>
</div></a>
<div class="bottomleft">
<h3></h3>
</div>
</div>
</body>
</html>
What I've been trying to do is make popcontain1 turn visible when column1 is mouseover-ed.
The css is:
.container{
position:absolute;
width:80%;
height:75%;
top:20%;
left:10%;
}
.column1{
visibility:visible;
font-family:deconeuelight;
position:absolute;
width:32%;
height:100%;
padding:0px;
color:white;
}
.popcontain1{
display:none;
}
.apop1{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(247, 121, 0);
background: rgba(247, 121, 0, .6);
width:100%;
top:60%;
}
.apop2{
position:absolute;
text-align:right;
font-size:1.5em;
background: rgb(255, 241, 35);
background: rgba(255, 241, 35, .4);
width:100%;
top:70%;
}
.apop3{
position:absolute;
text-align:left;
font-size:1.5em;
background: rgb(50, 205, 50);
background: rgba(50, 205, 50, .6);
width:100%;
top:80%;
}
For this I've been using the following code in the javscript file:
$(document).ready(function() {
$(".column1").hover(function () {
$(".popcontain1").toggle();
})
})
EDIT:
Am I including all the right libraries? I'm using the google hosted jquery library.

First thing you are trying to display a div with class pop contain which is not present there.
So why its not displaying.
Second thing you are using toggle inside hover first argument function, so next time if you will hover the column it will hide popcontain1 div.
Looking your code it seems you want to apply hover on each column and display popcontain inside it.
So why not make it generic. Add a common class on every column div say 'column' and on popcontain div say'popcontain';
Now this will work for all div.
If you want to show it on mouse over and hide on mouse out.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").toggle();
},function(){
$(this).find(".popcontain").toggle();
})
})
If you want to permanently show it on first hover.
$(document).ready(function() {
$(".column").hover(function () {
$(this).find(".popcontain").show();
})
})
However you don't need to use jquery if you just want to show hide the inner popcontain.
Following css will help you to achieve what you want.
.popcontain{
display:none;
}
.column:hover .popcontain{
display:block;
}
Edit for your first comment
If you are trying it on local put http: in the link you have included jquery. change this link
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
If you are not putting http: it is searching jquery file on local file system instead of web.

Since you have multiple use an CSS attribute selector to find the element whose class starts with popcontain with:
$("[class^=column]").hover(function () {
$("[class^=popcontain]").toggle();
})