We Keep Coding

How to centre <img> which has a z index?

I am having trouble centering an image, at the moment, it stays to the left. The concept is that when I click the image, the larger version of the image pops us.
HTML:
<div class="photoposition" style="cursor:pointer" onclick="showImage('imagesinsurgent/in21.jpg');">
<img src="imagesinsurgent/in21.jpg" class="scaledownlandscape"/>
<p class="photogalleryp"></p>
</div>
<div id="largeImgPanel" onclick="hideMe(this);">
<img id="largeImg" style="height: 100%; margin: 0; padding: 0;" />
</div>
CSS:
.photoposition{
width: 250px;
height: 250px;
margin-left: 53px;
float: left;
position: relative;
}
.scaledownlandscape{
width: 250px;
object-fit: scale-down;
display: block;
margin: 0 auto;
}
.divspan{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
#largeImgPanel {
visibility: hidden;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 500px;
height: 400px;
background-color: rgba(100,100,100, 0.5);
margin-top: 141px;
}
Javascript:
function showImage(imgName) {
document.getElementById('largeImg').src = imgName;
showLargeImagePanel();
unselectAll();
}
function showLargeImagePanel() {
document.getElementById('largeImgPanel').style.visibility = 'visible';
}
function unselectAll() {
if(document.selection) document.selection.empty();
if(window.getSelection) window.getSelection().removeAllRanges();
}
function hideMe(obj) {
obj.style.visibility = 'hidden';
}

Give #largeImgPanel 100% width and center align the content
#largeImgPanel {
visibility: hidden;
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: 500px;
height: 400px;
background-color: rgba(100,100,100, 0.5);
margin-top: 141px;
text-align: center;
}
DEMO

Get out of function, and make the function work again

I have some images, and I want them to scale and change position when clicked (this part is working).
Then I want them to scale down and move back to their original position when clicked again (works), if I click the "close" button (partly works – "close" button is not fading on first click), or if I click anywhere on the screen (don't know how).
The main problem is that when the clicked image is back in its original position, none of the images are clickable, so I can't make the function work more than once.
Any help would be appreciated!
jQuery:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});
CSS:
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
Html:
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="items/image1.png">
<img class="bar" src="items/image2.png">
<img class="foobar" src="items/image3.png">
<img class="barfoo" src="items/image4.png">
</section>

You can do something like
$(document).ready(function() {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
itemImages.click(function() {
if ($(this).hasClass('blur')) {
return;
}
if ($(this).hasClass('scaled')) {
reset();
return;
}
$(this).addClass("scaled");
itemImages.not(this).addClass("blur");
$(this).removeClass("blur");
$('.close').fadeIn('slow');
});
$('.close').click(reset);
function reset() {
itemImages.removeClass("scaled blur");
$('.close').fadeOut('fast');
}
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height: 86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

you are supposed to re-bind the click event, not to use on:
$(document).ready(function(){
var itemImages = $('.foo, .bar, .foobar, .barfoo');
var setClick = function(){
$(itemImages).click(function(){
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click',itemClicked);
});
}
$('.close').click(function(){
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
setClick();
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
}
});

The problem is, that $().on(); does not work like this: $(itemImages).on('click');. I guess, you try to reverse the $(itemImages).off('click'); statement. You need to pass the event handler that shall get attached to the on function or use the click function again. So the easiest way is to define the event handler in a separate function and attach it again:
$(document).ready(function () {
var itemImages = $('.foo, .bar, .foobar, .barfoo');
$(itemImages).click(itemImages_click);
$('.close').click(function () {
$(itemImages).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).on('click');
$(this).fadeOut('fast');
});
function itemClicked() {
$(this).removeClass("scaled");
$(itemImages).removeClass("blur");
$(itemImages).click(itemImages_click);
}
function itemImages_click(e) {
$(this).addClass("scaled");
$(itemImages).addClass("blur");
$(this).removeClass("blur");
$(itemImages).off('click');
$('.close').fadeIn('slow');
$(this).on('click', itemClicked);
};
});
.blur {
-webkit-filter: blur(5px);
transition: .5s -webkit-filter linear;
}
.scaled {
-webkit-transform: scale(2.2);
left: 1300px;
top: 500px;
z-index: 3;
}
.close {
width: 86px;
height:86px;
background: url(../images/icons.png) top left;
position: absolute;
right: 40px;
top: 40px;
display: none;
}
#items img {
position: absolute;
transition: all .2s ease-out;
}
.foo {
left: 94px;
top: 133px;
width: 275px;
height: auto;
}
.bar {
left: 537px;
top: 63px;
width: 317px;
height: auto;
}
.foobar {
left: 958px;
top: 86px;
width: 432px;
height: auto;
}
.barfoo {
left: 1556px;
top: 77px;
width: 270px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="items" class="fullscreen">
<div class="close"></div>
<img class="foo" src="http://smartbuildings.unh.edu/wp-content/uploads/2015/06/Winter-Tiger-Wild-Cat-Images1-1024x576.jpg">
<img class="bar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Oct2015/ultrapacks-sb10069585o-002.jpg">
<img class="foobar" src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Hero/US/Sept2015/hero-celeb-witherspoon-471371572.jpg">
<img class="barfoo" src="http://www.thinkstockphotos.com/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg">
</section>

What is wrong with my javascript onclick and onmouseover?

I want to make a simple quiz. I have this code, but the Javascript part doesn't work. CSS is okay, but when it comes to onclick and onmouseover nothing happens. Here is my code:
<html>
<head>
<style>
body {
background: url(bild.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
.a {
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -500px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.b {
position: absolute;
top: 50%;
left: 50%;
margin-top: -130px;
margin-left: -20px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.c {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -500px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
.d {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -20px;
width: 400px;
height: 50px;
font-size: 30;
color: black;
}
</style>
<title>Moseso.de Quiz</title>
</head>
<body>
<script>
function overa() {
document.getElementById("a").style.background="green";
}
function overb() {
document.getElementById("b").style.background="green";
}
function overc() {
document.getElementById("c").style.background="green";
}
function overd() {
document.getElementById("d").style.background="green";
}
function outa() {
document.getElementById("a").style.background="white";
}
function outb() {
document.getElementById("b").style.background="white";
}
function outc() {
document.getElementById("c").style.background="white";
}
function outd() {
document.getElementById("d").style.background="white";
}
function true() {
alert("Richtig!");
}
function false() {
alert("Falsch");
}
</script>
<button class="a" id="a" onmouseover="overa();" onmouseout="outa();" onclick"true();">Antwort A</>
<button class="b" id="b" onmouseover="overb();" onmouseout="outb();" onclick"false();">Antwort B</>
<button class="c" id="c" onmouseover="overc();" onmouseout="outc();" onclick"false();">Antwort C</>
<button class="d" id="d" onmouseover="overd();" onmouseout="outd();" onclick"false();">Antwort D</>
<script>
window.onload = function() {
document.getElementById("a").style.background="#E6E6E6";
document.getElementById("b").style.background="#E6E6E6";
document.getElementById("c").style.background="#E6E6E6";
document.getElementById("d").style.background="#E6E6E6";
}
</script>
</body>
</html>
It would be very nice if someone could answer my question because I tried many times. The script is German BTW :)

You can't use keywords such as true or false for function names. To fix this error, change the true or false method names to something else.
Each button is missing a proper </button> closing tag. Replace the </> with </button>
Also, you are missing the assignment operator for the onclick attribute. Make sure an = appears after onclick and before the string assignment.

jQuery animate() expanding DIV

I am not an expert in jQuery (and to be honest, I am taking my first steps).
I have the example below, and what I am trying to do is choose the direction of the expansion of my div. I am using animate() and expanding the width and height.
At the moment it is expanding to the right, but I want it to change it, so it would expand to the left. The only way I could make the div expand to the left, is to add float: right; in the CSS of #map element.
I want it to know if there is another way to get to this, without changing the float of #map.
jsFiddle.
Snippet:
$(document).ready(function () {
$('#expand').click(function (expandir) {
this.value = 'collapse';
if ($(this).data('name') === 'show') {
$('#map').animate({ width: '600', height: '400' });
$('#inside').animate({ width: '600', height: '336' });
$('#expand').animate({ top: '370' });
$(this).data('name', 'hide');
} else {
this.value = 'expand';
$('#map').animate({ width: '300', height: '250' });
$('#inside').animate({ width: '300', height: '169' });
$('#expand').animate({ top: '220' });
$(this).data('name', 'show');
}
});
});
html, body {
width: 100%;
height: 100%;
}
#map {
z-index: 1;
position: relative;
width: 300px;
height: 250px;
border: 1px solid;
}
#expand {
z-index: 4;
position: absolute;
top: 220px;
left: 10px;
width: 70px;
height: 25px;
}
#inside {
z-index: 2;
position: absolute;
top: 40px;
right: 0;
background-color: #000000;
width: 300px;
height: 169px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#close {
position: absolute;
margin-top: 0;
margin-left: 0;
background-color: #34FF56;
width: 100px;
height: 50px;
background-size: 220px 170px;
background-position: 0px 0px;
background-repeat: no-repeat;
}
#btn {
z-index: 3;
position: relative;
float: left;
margin: 2px;
background-color: #FF9834;
width: 70px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map">
<input type="button" data-name="show" value="expand" id="expand" />
<div id="inside"></div>
<div id="btn"></div>
</div>

You can change the positioning inside #map to absolute and add right:??%.The percentage works off the 100% in body tag. Hope this helps for what you need :}
#map {
z-index: 1;
position: absolute;
width: 300px;
height: 250px;
border: 1px solid;
right: 50%;
}

Random fade-in and fade-out

I need each of the sparkles below to fade in and fade out randomly, not all at once though. 1-2 at a time is ok. Also, I do not want the "Pack" image to fade. I do not want the sparkles to fade in/out due to a function like on hover. I also need them all of them to disappear after 5 seconds. Please help, I have tried everything, can't figure it out.. I'm new to web development and javascript.
Here is a fiddle I found, I would like it to be similar to this, I tried editing the code. I'm very confused right now.
http:// jsfiddle(dot)net/maniator/rcts4/ - Fiddle (I couldn't upload more than 2 links, please take out the space after http:// and replace the "(dot)" with . to view the Fiddle.
http://pastebin.com/DkDjU0qS - HTML
http://pastebin.com/Zr1vjafn - CSS

HTML
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Pack -->
<img id="pack" src="http://cloud.attackofthefanboy.com/wp-content/uploads/2013/07/fifa14pack.png">
<!-- Sparkles-->
<div id="sparkles">
<img id="sparkle1" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle2" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle3" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle4" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle5" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle6" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle7" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
<img id="sparkle8" src="http://www.clker.com/cliparts/w/L/F/v/7/8/sparkle-md.png">
</div>
<script>
// Define a random integer function
function random(n) {
return Math.floor(Math.random() * n);
}
// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#sparkles img');
var n = images.length;
var current = random(n);
images.hide();
images.eq(current).show();
// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval(function () {
images.eq(current).fadeOut(transition_time, function () {
current = random(n);
images.eq(current).fadeIn(transition_time);
});
}, 2 * transition_time + waiting_time);
</script>
</body>
</html>
CSS
html, body {
width: 100%;
height: 100%;
background-color: white;
}
#pack {
position: absolute;
top: 50%;
left: 50%;
height: 300px;
width: 200px;
margin-top: -100px;
margin-left: -100px;
}
#sparkle1 {
position: absolute;
top: -8%;
left: 50%;
height: 140px;
width: 150px;
}
#sparkle2 {
position: absolute;
top: 90%;
left: 57%;
height: 180px;
width: 155px;
}
#sparkle3 {
position: absolute;
top: 94%;
left: 29%;
height: 140px;
width: 115px;
}
#sparkle4 {
position: absolute;
top: 25%;
left: 86%;
height: 150px;
width: 123px;
}
#sparkle5 {
position: absolute;
top: 20%;
right: 83%;
height: 145px;
width: 118px;
}
#sparkle6 {
position: absolute;
top: 79%;
right: 82%;
height: 150px;
width: 120px;
}
#sparkle7 {
position: absolute;
top: 52%;
right: 85%;
height: 150px;
width: 130px;
}
#sparkle8 {
position: absolute;
top: 50%;
left: 85%;
height: 180px;
width: 160px;
}
#sparkles {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px;
margin-left: -250px;
}
Here is the updated JSFiddle
Hope this helps.