We Keep Coding

How to get animate between elements moving using javascript?

When click CLICK HERE div id photo will set css to top: 300px; left: -400px; transform: rotate(-60deg) how can i add animate into this process ?
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

You can simply add transition:
<script type="text/javascript">
function swipeLike() {
var photo = document.getElementById("photo");
photo.style.top = "300px";
photo.style.transition = "0.4s";
photo.style.left = "-400px";
photo.style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

It depends on which type of animation you want. You can use css3 transition property to animate things.
W3Schools Transition property

Easiest is to define a class with the elements that need to be animated. See below, hope this helps.
function swipeLike() {
document.getElementById("photo").classList.add("anim");
}
#photo {
transition: all 3s;
}
.anim {
top: 300px;
left: -400px;
transform: rotate(-60deg);
}
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>

<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div style="transition:all 1s linear;" id="photo">
MOVING
</div>
</div>

Background image div clickable

I have a div with a background image. How can i make the div (the background image) clickable? I want to unhide an other div when clicked on the div (image). Onclick code: onclick="javascript:unhide('kazen')"
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "none") {
kazen.style.display="block";
} else {
kazen.style.display="none";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background-color: #cc9;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
}
.fh5co-grid {
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW_Shop_02-29.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3>Kaas</h3>
<h4>in ons aanbod hebben we verse en harde kazen - binnenkort meer hierover</h4>
</div>
</a>
</div>
</div>
<div id="kazen" >
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/Melkerhei_Dag2-16-4.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
</div>
</a>
</div>
</div>
</div>

You can have a look at the fiddle I created if this is what you want.
$(document).ready(function() {
$("div.fh5co-grid").click(function() {
$("div.next").css("display", "block");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(http://placehold.it/350x150);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div style="background-color: #000; display:none" class="next">Next div</div>

From what you're describing, this seems pretty close. The background image isn't clickable, it's the div itself. And this could be done with jQuery, yes, but it's trivial enough that pure javascript is pretty easy here. Clicking in the red-boxed area will display the div with the id kazen, and clicking in either kazen or the red-boxed area again will hide it.
Note, there was a weird glitch to my solution. I changed the display if/else to check if it's currently displayed and hide it, rather than if it's currently hidden to display it. That was causing a strange effect of re-hiding the kazan div on the first click.
Within stackoverflow, you'll need an absolute url to display an image. If you aren't seeing your image here, that may be why.
var clickit = document.getElementsByClassName("fh5co-grid")[0];
var kazen = document.getElementById("kazen");
clickit.addEventListener("click", function(){
if (kazen.style.display === "block") {
kazen.style.display="none";
} else {
kazen.style.display="block";
}
});
kazen.addEventListener("click", function(){
this.style.display="none";
});
#kazen {
background: url("https://static.pexels.com/photos/6832/waterfall-beauty-lets-explore-lets-get-lost.jpg");
background-size: 100%;
display: none;
width: 100px;
height: 100px;
position: absolute;
top: 15px;
left: 15px;
color: #fff;
}
.fh5co-grid {
border: 1px dotted red;
}
<div class="col-md-4 col-sm-6 ">
<div class="fh5co-grid" style="background-image: url(images/PREVIEW.jpg);">
<a class="image-popup text-center">
<div class="prod-title ">
<h3>cheese</h3>
<h4>tekst</h4>
</div>
</a>
</div>
</div>
<div id="kazen">
Click me to hide!
</div>

Selenium WebDriver w/Java. trouble selecting items in a pop up window

SwitchWindow, Frame, Alert, everything I can think of and after lots of searching. Nothing has worked so far.
When I click on an "edit" button, a new window pops up with a text box, special character selection, save and exit buttons. All I want to do is enter text in the box but for some reason webdriver can not find the element.
Here's some HTML. The
textarea name="specHeading"
is what I'm trying to edit.
<script src="/js/componentlist.js" type="text/javascript">
<script src="/js/mrinformation.js" type="text/javascript">
<script src="/js/jquery.resources.js" type="text/javascript">
<script src="/js/validateresources.js" type="text/javascript">
<div class="ckmodal-next" style="top: 9px; left: 1281.5px;"></div>
<div class="ckmodal-prev" style="top: 9px; left: 261.5px;"></div>
<div class="ckmodal-close" style="top: -225px; left: 1239px;"></div>
<div class="ckmodal-background" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background-color: rgb(51, 51, 51); opacity: 0.8; z-index: 10000000;"></div>
<div class="modal-container" style="opacity: 1; position: fixed; top: -212.5px; left: 321.5px; display: block; z-index: 10000001;">
<form class="form">
<div class="row">
<div class="col24">
<div class="box box-gray">
<h2>
<div class="content">
<fieldset class="full">
<div class="form-field full">
<label>Heading:</label>
<textarea name="specHeading"></textarea>
</div>
<div class="form-field full">
<div class="form-field bottom full">
</fieldset>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
It looks like there's no windows to switch to, and it's not an iframe, nor an alert. Here's what I think is the JavaScript from the modal.
<script src="/js/productheaders.js" type="text/javascript">
;(function($){
var $currentEditHeader = null;
function setupForm(e) {
var $this = $(this),
value = $this.siblings('span').html();
$currentEditHeader = $this.parents('.product-header');
$('#edit-header').ckmodal({
onShow: function(){
$('textarea[name=specHeading]').val(value.replace(/<br\s*[\/]?>/g, '\n')).focus();
}
});
}
function saveHeader(e) {
var $this = $(this),
value = $('textarea[name=specHeading]').last().val();
if ( value == '' ) {
var defaultValue = $currentEditHeader.attr('data-default-value');
$currentEditHeader.children('span').text(defaultValue);
$currentEditHeader.addClass('default');
} else {
$currentEditHeader.children('span').html(value.replace(/<[^>]*>?/g, '').replace(/\n/g, '<br>'));
$currentEditHeader.removeClass('default');
}

The "popup" might be not a separate window/frame/alert, but part of your main page, which is just made visible.
You can treat it as such. Hard to tell with just this excerpt.
You might have to wait for it to be visible if there is some kind of animation involved.
Additionally, there are some issues inserting text in those text fields. The following worked for us in such cases:
Call textFieldElement.clear()
Then call textFieldElement.sendKeys()

Apply colored circle on top of the clicked image

I have a page that when loaded displays this:
The HTML for this is as follows (the below is built within a foreach statement in the view as I'm using MVC 5)
<div class="boxTop"></div>
<div id="panel1" class="box">
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img data-name="blackcherry" alt="cherries.png" data-id="1" src="/Content/Images/FlavourLab/cherries.png">
</div>
<div class="col-md-6 col-xs-6">
<img data-name="coconut" alt="coconut" data-id="2" src="/Content/Images/FlavourLab/coconut.png">
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
<div class="row col-xs-12 margin0" style="margin-left:-8%">
<div class="col-md-6 col-xs-6">
<img data-name="mango" alt="mango" data-id="3" src="/Content/Images/FlavourLab/mango.png">
</div>
<div class="col-md-6 col-xs-6">
<img data-name="strawberries" alt="strawberries" data-id="4" src="/Content/Images/FlavourLab/strawberries.png">
</div>
</div>
<div class="clearfix"></div>
<div class="marginBottom10 visible-xs-block"></div>
</div>
<div class="boxBtm"></div>
What I'm trying to do is when one of those images are clicked I need to place the following css circle on top of it to show its been selected the CSS for the circle is like this
#circle1 {
background: none repeat scroll 0 0 green;
height: 80px;
width: 80px;
opacity: 0.4;
}
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
}
Which gets rendered like this:
<div class="circle" id="circle"></div>
My current jQuery is like this:
$("#panel1 row img").click(function () {
var id = $(this).attr("data-id").val();
alert(id);
});
2 Things:
The jQuery does not fire, I'm unsure why. Can someone explain this?
How would I add the above CSS Circle to the clicked image?

This #panel1 row img is a wrong selector, change it to #panel1 .row img - note class name selector .row
Change your click handler to do this $(this).toggleClass("circle");
.circle class shall look like:
.circle {
border-radius: 50%;
border: 2px solid red;
overflow: visible;
}

Try something like this (the "row" class missed the dot in the selector)
$("#panel1 .row img").click(function () {
$(this).addClass('circle');
});

How to hide div when it's already open?

I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?

You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>

Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})