Develop Reference

different CSS behavior in Firefox vs Chrome - slider example

My first question on Stackoverflow :) I have this situation. I build a slider trying to get with js the value and displaying in a box. Additionally I want to hide the slider thumb and replace it with my icon.. in Chrome is all nice and good but the in Firefox the original thumb of the slider is still rendered and displayed.
Any I dean what I'm doing wrong in CSS? Thanks in advance!
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function () {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>
Chrome:
Firefox:

Make background and border disappear with -moz-range-thumb pseudo selector.
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
It looks broken in the snippet, but I think it would work in your code.
let slider = document.getElementById("slider_qt");
let selector = document.getElementById("selector");
let SelectValue = document.getElementById("SelectValue");
SelectValue.innerHTML = slider.value;
slider_qt.oninput = function() {
SelectValue.innerHTML = this.value;
selector.style.left = this.value + "%";
};
.container_quality_tools {
width: 100%;
margin-top: 20%;
}
.slider_text {
font-size: 10px;
margin-bottom: 1%;
margin-left: 20px;
}
#slider_qt {
-webkit-appearance: none;
width: 100%;
margin-left: 3%;
margin-right: 0%;
height: 7px;
outline: none;
border-radius: 3px;
}
#slider_qt::-webkit-slider-thumb {
-webkit-appearance: none;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#slider_qt::-moz-range-thumb {
background-color: #fff;
border: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 3;
position: relative;
}
#selector {
position: absolute;
left: 85%;
margin-top: -10%;
}
.SelectorBtn {
height: 14px;
width: 14px;
background-image: url("../media/slider-icon-14.jpg");
background-size: cover;
background-position: center;
border-radius: 50%;
bottom: 0;
}
#SelectValue {
width: 20px;
height: 20px;
position: absolute;
top: -25px;
left: -2px;
background: #feb360;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 8px;
font-weight: bold;
}
#SelectValue::after {
content: "";
border-top: 12px solid #feb360;
border-left: 10px solid #f1f0f0;
border-right: 10px solid #f1f1f1;
position: absolute;
bottom: -4px;
left: 0;
z-index: -1;
}
<div class="row no-gutters">
<div class="col-6">
<div class="container_quality_tools">
<p class="slider_text">Quality Tools</p>
<input type="range" min="1" max="100" value="90" id="slider_qt">
<div id="selector">
<div class="SelectorBtn"></div>
<div id="SelectValue"></div>
</div>
</div>
</div>
</div>

``` in the end I was able to solve it like this! Thx all for support! ``
#slider_qt::-moz-range-thumb {
-webkit-appearance: none;
background: transparent;
border-color: transparent;
color: transparent;
width: 20px;
height: 20px;
cursor: pointer;
}

Preview an Image by the side before uploading

I want to be able to preview my images before upload like this and I have been doing research online and looking at past questions which is kind of related to mine, But each time I try to copy the JS code and do some modifications it doesn't really work for me. Probably, because I'm still trying to learn JavaScript and J query Any one with suggestions on methods of achieving this?
Here are my HTML and CSS
var count = 0;
function handleFileSelect(evt) {
var $fileUpload = $("input#Photofile[type='file']");
count = count + parseInt($fileUpload.get(0).files.length);
if (parseInt($fileUpload.get(0).files.length) > 4 || count > 3) {
alert("You can only upload a maximum of 3 photos");
count = count - parseInt($fileUpload.get(0).files.length);
evt.preventDefault();
evt.stopPropagation();
return false;
}
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb mrm mts" src="', e.target.result, '" title="', escape(theFile.name), '"/><span class="remove_img_preview"></span>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
reader.readAsDataURL(f);
}
}
$('#Photofile').change(function(evt) {
handleFileSelect(evt);
});
$('#list').on('click', '.remove_img_preview', function() {
$(this).parent('span').remove();
//this is not working...
var i = array.indexOf($(this));
if (i != -1) {
array.splice(i, 1);
}
// tried this too:
//$(this).parent('span').splice( 1, 1 );
count--;
});
form .post-image-collection {
margin: -20px 0px 0px -20px;
overflow: hidden;
}
form .post-image {
position: relative;
float: left;
height: 152px;
width: 170px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.mrm {
margin-right: 20px;
}
.mts {
margin-top: 10px;
}
form .post-image img {
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
vertical-align: top;
border-radius: 3px;
overflow: hidden;
}
form .post-image .icon-camera {
display: none;
}
form .post-image input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
form .post-image.empty {
position: relative;
float: left;
height: 130px;
width: 130px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
vertical-align: top;
}
form .post-image.empty .icon-camera {
display: block;
height: 30px;
line-height: 30px;
left: 40%;
position: absolute;
text-align: center;
top: 50%;
width: 30px;
cursor: inherit;
margin: -15px 0px 0px -15px;
}
form .post-image.empty .icon-camera img {
height: 60px;
width: 60px;
}
form .post-image.empty input {
cursor: pointer;
}
form .post-image p,
.file_container-orange p {
margin: 10px 0;
margin: 1rem 0;
text-align: center;
font-family: "OpenSansSemiBold", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
#list {
float: left;
}
.thumb {
height: 130px;
width: 130px;
margin-right: 20px;
margin-top: 10px;
}
.remove_img_preview {
position: relative;
top: -46px;
right: 40px;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
background: white;
border-radius: 0px 0px 0px 3px;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="row row-images">
<label for="image">Images*</label>
<div class="column image_container">
<div class="post-image-collection">
<label id="list"></label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera"><img src="https://cdn.onlinewebfonts.com/svg/img_134042.png"></span>
<p class="uppercase">Photo</p>
</label>
</div>
</div>
</form>

on reference of This link which it is assumed to be a duplicate of
$(function(){
$("#Photofile").change(function() {
if (this.files && this.files[0]){
var reader = new FileReader();
reader.onload = function(e) {
$('#imageDisplay,#imageDisplay1,#imageDisplay2').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
}
});
});
form .post-image-collection {
margin: -20px 0px 0px -20px;
overflow: hidden;
}
form .post-image {
position: relative;
float: left;
height: 152px;
width: 170px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
.mrm {
margin-right: 20px;
}
.mts {
margin-top: 10px;
}
form .post-image img {
max-width: 80px;
max-height: 80px;
width: auto;
height: auto;
vertical-align: top;
border-radius: 3px;
overflow: hidden;
}
form .post-image .icon-camera {
display: none;
}
form .post-image input {
position: absolute;
z-index: 2;
opacity: 0;
width: 100%;
height: 100%;
}
form .post-image.empty {
position: relative;
float: left;
height: 130px;
width: 130px;
background: #f2f2f2;
border: 1px dashed #ccc;
padding: 0;
border-radius: 4px;
text-align: center;
cursor: pointer;
vertical-align: top;
margin-top:50px;
}
form .post-image.empty .icon-camera {
display: block;
height: 30px;
line-height: 30px;
left: 40%;
position: absolute;
text-align: center;
top: 50%;
width: 30px;
cursor: inherit;
margin: -15px 0px 0px -15px;
}
form .post-image.empty .icon-camera img {
height: 60px;
width: 60px;
}
form .post-image.empty input {
cursor: pointer;
}
form .post-image p,
.file_container-orange p {
margin: 10px 0;
margin: 1rem 0;
text-align: center;
font-family: "OpenSansSemiBold", sans-serif;
}
.uppercase {
text-transform: uppercase;
}
#list {
float: left;
}
.thumb {
height: 130px;
width: 130px;
margin-right: 20px;
margin-top: 10px;
}
.remove_img_preview {
position: relative;
top: -46px;
right: 40px;
font-size: 20px;
line-height: 1;
padding: 4px 6px;
background: white;
border-radius: 0px 0px 0px 3px;
text-align: center;
cursor: pointer;
}
.remove_img_preview:before {
content: "×";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<img id="imageDisplay" alt="uploaded Image"/>
<img id="imageDisplay1" alt="uploaded Image"/>
<img id="imageDisplay2" alt="uploaded Image"/>
<div class="row row-images">
<label for="image">Images*</label>
<div class="column image_container">
<div class="post-image-collection">
<label id="list"></label>
<label class="post-image post-image-placeholder mrm mts empty">
<input type="file" id="Photofile" name="images[]" required="required" multiple />
<span class="icon-camera">
<img src="https://cdn.onlinewebfonts.com/svg/img_134042.png">
</span>
<p class="uppercase">Photo</p>
</label>
</div>
</div>
</form>

Automatically next step by step tab after the work progress bar was complete

There are 3 step by step tabs. After opening the second tab, the progress bar is activated. Necessary to do, after the progress bar must reached the end, tab must automatically transferred to the third tab (the last one). How could this be realized? I would be very grateful for the corrected code. I do not understand js.
$('#myBtn').on('click', function() {
$('#myModal')
.show(0)
.find('.modal-bodies > .modal-body')
.eq(0)
.addClass('is-showing');
});
$('.close').on('click', function() {
$('#myModal')
.hide(0)
.find('.modal-bodies > .modal-body')
.removeClass('is-showing');
});
$('#myModal .button').on('click', function() {
var parent = $(this).parents('.modal-body');
if( parent.is(':last-child') ) {
return false;
}
parent
.removeClass('is-showing')
.next('.modal-body')
.addClass('is-showing');
});
function start(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
bar.value = al;
al++;
var sim = setTimeout("start(" + al + ")", 100);
if (al == 100) {
bar.value = 100;
clearTimeout(sim);
}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.modal-content{
}
.st-btn{
font-size: 50px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.close{
padding: 5px 40px;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff;
color: #000;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-top: 20px;
margin-right: 10px;
}
.button{
padding: 5px 40px;
border-radius: 5px;
background: #019CDE;
color: #fff;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.text-center{
text-align: center;
}
.modal-wrap{
}
.modal-bodies{
position: relative;
}
.modal-body{
color: #fff;
background-color: #000;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
display: none;
}
.modal-body.is-showing{
display: block;
}
.text-confirm{
font-size: 25px;
text-align: center;
padding-bottom: 15px;
}
.description-confirm{
font-size: 15px;
}
.accept-confirm{
height: 50px;
width: 300px;
margin-left: 10px;
background-color: #fff;
border-radius: 10px;
}
.accept-text{
padding-top: 5px;
color: #000;
}
#loading{
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #ff6a00;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.loading-text{
color: #fff;
}
.loading-modal{
text-align: center;
padding-top: 80px;
}
.loading-circle{
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
margin: auto;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 250px;
height: 20px;
}
<html lang="en-En">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Test</title>
</head>
<body>
<button id="myBtn" class="st-btn">Start</button>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-wrap">
<div class="modal-bodies">
<div class="modal-body modal-body-step-1 is-showing">
<div class="text-confirm">Confirm<br><a class="description-confirm">Please confirm.</a></div>
<form>
<div class="text-center">
<button class="close">Cancel</button>
<div class="button" onclick='start(0)'>Confirm</div>
</div>
</form>
</div>
<div class="modal-body modal-body-step-2">
<div class="loading-modal">
<div class="loading-circle" id="loading"></div>
<div class="loading-text" id="finalMessage">Proccessing request...</div>
<progress class="progress-bar" id="progressBar" value="0" max="100"></progress>
</div>
</div>
<div class="modal-body modal-body-step-3">
<div class="text-center">
<button>Verify Now</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="js/modal.js"></script>
</body>
</html>

I took the script from this - https://jsfiddle.net/32rL6gxk/ and modified somewhat to your needs. Hope this helps..
<div id="sampleModal" class="modal" tabindex="-1" role="dialog" aria-labelledby="myTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true" class="visible-xs">×</span>
</button>
<h4 class="modal-title" id="myTitle">Modal Title</h4>
</div>
<div class="modal-body">
<div id="step1"> <span>Do something for Step 1</span>
<div class="text-confirm">Confirm<br><a class="description-confirm">Please confirm.</a></div>
<form>
<div class="text-center">
<button class="close">Cancel</button>
<div class="button" id="btnEndStep1">Confirm</div>
</div>
</form>
<button id="btnEndStep1" style="visibility: hidden;">NEXT STEP</button>
</div>
<div id="step2" class="hideMe"> <span>Now select something for Step 2</span>
<div class="loading-circle" id="loading"></div>
<div class="loading-text" id="finalMessage">Processing request...</div>
<progress class="progress-bar" id="progressBar" value="0" max="100"></progress>
<button id="btnEndStep2" style="visibility:hidden;">NEXT STEP</button>
</div>
<div id="step3" class="hideMe"> <span>Finally, type something for Step 3</span>
<button id="btnEndStep3">Verify</button>
</div>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<button id="showModal" data-toggle="modal" data-target="#sampleModal">Open The Modal</button>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.st-btn{
font-size: 50px;
}
.modal{
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.close{
padding: 5px 40px;
border-radius: 5px;
border: 1px solid #ddd;
background: #fff;
color: #000;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-top: 20px;
margin-right: 10px;
}
.button{
padding: 5px 40px;
border-radius: 5px;
background: #019CDE;
color: #fff;
letter-spacing: 1px;
display: inline-block;
cursor: pointer;
margin-left: 10px;
}
.text-center{
text-align: center;
}
.text-confirm{
font-size: 25px;
text-align: center;
padding-bottom: 15px;
}
.description-confirm{
font-size: 15px;
}
.accept-confirm{
height: 50px;
width: 300px;
margin-left: 10px;
background-color: #fff;
border-radius: 10px;
}
.accept-text{
padding-top: 5px;
color: #000;
}
#loading{
width: 50px;
height: 50px;
border: 5px solid #ccc;
border-top-color: #ff6a00;
border-radius: 100%;
animation: round 2s linear infinite;
}
#keyframes round{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.loading-text{
color: #fff;
}
.loading-modal{
text-align: center;
padding-top: 80px;
}
.loading-circle{
position: absolute;
left: 0;
right: 0;
top: 50px;
bottom: 0;
margin: auto;
}
progress[value] {
-webkit-appearance: none;
appearance: none;
width: 250px;
height: 20px;
}
.hideMe {
display: none;
}
#sampleModal{
z-index: 9999
}
</style>
<script>
$("#btnEndStep1").click(function () {
$("#step1").addClass('hideMe');
$("#step2").removeClass('hideMe');
start(0);
});
$("#btnEndStep2").click(function () {
$("#step2").addClass('hideMe');
$("#step3").removeClass('hideMe');
});
$("#btnEndStep3").click(function () {
// Whatever your final validation and form submission requires
$("#sampleModal").modal("hide");
});
function start(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
bar.value = al;
al++;
var sim = setTimeout("start(" + al + ")", 100);
if (al === 100) {
bar.value = 100;
clearTimeout(sim);
console.log("end");
$( "#btnEndStep2" ).click();
}
}
</script>

How to set z-indexes of relative, absolute and parent, child mix divs?

DISPLAY SCENARIO
I have two container divs. First is left sided and second is right sided on the page. Container divs contains round buttons.
I am trying to use another div as bridge #bridge to connect left and right round buttons.
MY REQUIREMENT
The bridge div should be front of container div but behind the round buttons.
Please give me some solution.
Waiting your help.
function set_positions()
{
var speed_down_top = $('#bomb').offset().top;
document.getElementById('bridge').style.top = (speed_down_top)+"px";
}
set_positions();
#leftBtns, #rightBtns {
color: white;
background-color: rgba(0, 0, 0, 0.17);
margin-top: 15px;
margin-bottom: 15px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: solid rgba(0,0,0,0.12);
border-width: 1px;
z-index: 0;
}
.my_icon_bomb {
}
.my_icon {
width: 40px;
height: 40px;
overflow: hidden;
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
padding: 10px;
}
.round_btns {
border: 1px solid;
border-radius: 30px;
background-color: rgba(0,0,0,0.35);
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
z-index: 2;
}
#bridge {
position: absolute;
float: left;
width: 92%;
height: 60px;
color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: solid rgba(0,0,0,0.7);
background-color: rgba(255,0,0,0.15);
border-width: 1px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="leftBtns" style="float:left;">
<div id="bomb" class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>
<div id="rightBtns" style="float:right;">
<div class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>
<div id="bridge">
</div>

Just set position: relative; to round_btns, check updated snippet below
function set_positions()
{
var speed_down_top = $('#bomb').offset().top;
document.getElementById('bridge').style.top = (speed_down_top)+"px";
}
set_positions();
#leftBtns, #rightBtns {
color: white;
background-color: rgba(0, 0, 0, 0.17);
margin-top: 15px;
margin-bottom: 15px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: solid rgba(0,0,0,0.12);
border-width: 1px;
z-index: 0;
}
.my_icon_bomb {
}
.my_icon {
width: 40px;
height: 40px;
overflow: hidden;
background-repeat: no-repeat;
display: block;
text-indent: -99999px;
padding: 10px;
}
.round_btns {
border: 1px solid;
border-radius: 30px;
background-color: red;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
z-index: 2;
position: relative;
}
#bridge {
position: absolute;
float: left;
width: 92%;
height: 60px;
color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: solid rgba(0,0,0,0.7);
background-color: rgba(255,0,0,0.15);
border-width: 1px;
left: 0;
right: 0;
margin: auto;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="leftBtns" style="float:left;">
<div id="bomb" class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>
<div id="rightBtns" style="float:right;">
<div class="round_btns my_icon my_icon_bomb" title="Round Button"></div>
<div class="round_btns my_icon my_icon my_icon_play btn_start_pause" title="Round Button"></div>
</div>
<div id="bridge">
</div>

You just need to give z-index = -1 to #bridge
just like below code
#bridge {
position: absolute;
float: left;
width: 92%;
height: 60px;
color: white;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
border: solid rgba(0,0,0,0.7);
background-color: rgba(255,0,0,0.15);
border-width: 1px;
left: 0;
right: 0;
margin: auto;
z-index: -1;
}
It might works for you

Click on the same element but need different variables/value?

I'm trying to do a calculator and every time I click on different div with the same class, I'd like to be able to get different values too. For example,
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
I wanna do the same but getting different value so I can set it as var b.
Right now, I'm getting the same value showing up twice. Any idea?
My working Jsfiddle
Also, right now, whenever I click on number 1, it didn't convert to a number for some reason. Other numbers are fine though.
Updated.
Is there anyone smart enough to help me out with this?! I don't want to do array first off. Second off, I know why it shows double the number. I'd like it to stop at the first click, save that value to var a. Then second click will show new value and save it to var b.
Here's one that doesn't need to do array.
https://github.com/meherchandan/Calculator/blob/master/calculator.js

Forget my previous answer. The problem is that you have two identical functions. Delete the first one.
Here: http://jsfiddle.net/y4jxvxub/9/
Example:
$(document).ready(function () {
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
a = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1"><span>1</span>
</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>

Working as a normal calculator:
http://jsfiddle.net/y4jxvxub/45/
$(document).ready(function () {
var number=0, buffer="", result=0, operator="";
$('.numbers').click(function () {
$('#result').text($('#result').text() + $(this).text());
buffer = buffer + $(this).text();
});
$('.operators').click(function () {
number = parseFloat(buffer);
buffer = "";
switch (operator) {
case '+':
number = result + number;
break;
case '-':
number = result - number;
break;
case 'x':
number = result * number;
break;
case '÷':
number = result / number;
break;
}
operator = $(this).text();
result = number;
$('#result').text($('#result').text() + operator);
if ($(this).text()=='=') {
buffer = result;
$('#result').text(result);
}
});
$('#clear').click(function () {
number=0, buffer="", result=0, operator="";
$('#result').text("");
});
});

working code without array, I tweaked your code a bit, since <span class="append"></span> is not necessary.
http://jsfiddle.net/y4jxvxub/15/

My little tweak, this is only good for simple math operations ... you need to spend more time for complex case like: 1 + 3 + 3 ....
Hope this helps!
$(document).ready(function () {
$.screen = $('#result');
var a,c;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
b = +$('.append').text();
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
operator='+';
a = parseInt(b);
$.screen.text('');
break;
case '-':
operator='-';
a = parseInt(b);
$.screen.text('');
break;
case 'x':
operator='*';
a = parseInt(b);
$.screen.text('');
break;
case '÷':
operator='/';
a = parseInt(b);
$.screen.text('');
break;
case '=':
c= parseInt(b);
$.screen.text('');
if(operator=='+'){
$.screen.text(a+c);
}else if(operator=='-'){
$.screen.text(a-c);
}else if(operator=='*'){
$.screen.text(a*c);
}else if(operator=='/'){
$.screen.text(a/c);
}
}
});
$('#clear').click(function () {
$('#result').empty();
});
});
.head {
height: 125px;
width: 130px;
background: #9e532a;
border-radius: 100%;
margin: 20px auto;
position: relative;
border: 5px solid #63341a;
}
.eyes {
height: 20px;
width: 13px;
background: black;
border-radius: 100%;
display: inline-block;
position: absolute;
top: 40px;
}
.ears {
height: 40px;
width: 40px;
background: #9e532a;
border-radius: 100%;
border: 10px solid #63341a;
top: -10px;
z-index: -1;
position: absolute;
display: inline-block;
}
.left_ear {
left: -20px;
}
.left_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear:after {
content:"";
height: 20px;
width: 20px;
background: white;
position: absolute;
border-radius: 100%;
left: 10px;
top: 10px;
}
.right_ear {
right: -20px;
}
.right_eye {
right: 30px
}
.left_eye {
left: 30px;
}
.nose {
height: 20px;
width: 30px;
background: #63341a;
position: absolute;
top: 70px;
left: 49px;
border-radius: 60%;
}
.nose_bridge {
height: 15px;
width: 3px;
background: black;
position: absolute;
top: 20px;
left: 13px;
}
.mouth {
width: 60px;
height: 10px;
position: absolute;
top: 90px;
left: 33px;
border-bottom: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
border-radius: 0 0 50px 50px;
}
.body {
height: 450px;
width: 300px;
background: #63341a;
position: absolute;
top: 120px;
left: -85px;
z-index: -1;
}
.head:before {
content:"";
width: 400px;
height: 40px;
background: #63341a;
position: absolute;
top: 100px;
z-index:-1;
border-radius: 100%;
left: -130px;
}
.body:after {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
right: 0;
border-radius: 0 0 30px 30px;
}
.body:before {
content:"";
height: 50px;
width: 60px;
background: #63341a;
position: absolute;
bottom: -50px;
left: 0;
border-radius: 0 0 30px 30px;
}
#result {
height: 50px;
width: 248px;
background: white;
position: absolute;
top: 30px;
left: 25px;
box-shadow: 1px 1px 10px 1px black;
line-height: 50px;
font-size: 30px;
}
#calculator {
width: 248px;
position: absolute;
top: 100px;
left: 24px;
border-left: 1px solid black;
border-top: 1px solid black;
}
.numbers {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.numbers:hover {
background: #DDD2BE;
}
.operators {
background: #F27B17;
width: 61px;
height: 62px;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.operators:hover {
background: orange;
}
/*#split {
width: 61px;
height: 62px;
background: #D8D6D6;
border-right: 1px solid black;
border-bottom: 1px solid black;
float: left;
text-align: center;
font-size: 30px;
line-height: 62px;
}
.append {
float: right;
}*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<body>
<div id="container">
<div class="head">
<div class="left_ear ears"></div>
<div class="right_ear ears"></div>
<div class="left_eye eyes"></div>
<div class="right_eye eyes"></div>
<div class="nose">
<div class="nose_bridge"></div>
</div>
<div class="mouth"></div>
<div class="body">
<div id="result"></div>
<div id="calculator">
<div class="numbers" id="n1">1</div>
<div class="numbers" id="n2">2</div>
<div class="numbers" id="n3">3</div>
<div class="operators" id="add">+</div>
<div class="numbers" id="n4">4</div>
<div class="numbers" id="n5">5</div>
<div class="numbers" id="n6">6</div>
<div class="operators" id="minus">-</div>
<div class="numbers" id="n7">7</div>
<div class="numbers" id="n8">8</div>
<div class="numbers" id="n9">9</div>
<div class="operators" id="multiply">x</div>
<div class="numbers" style="width: 123px" id="n0">0</div>
<div class="numbers split">.</div>
<div class="operators" id="divide">÷</div>
<div class="numbers" style="width:185px" id="clear">CLEAR</div>
<div class="operators equal">=</div>
</div>
</div>
</div>
</div>
</body>

Try this. http://jsfiddle.net/y4jxvxub/11/
$(document).ready(function () {
var a ;
var b ;
var result;
$('.numbers').click(function () {
$('#result').append('<span class ="append">' + $(this).text() + '</span>');
if(a==undefined){
a = parseInt($(this).text());
} else {
b = parseInt($(this).text());
}
});
$('.operators').click(function () {
switch ($(this).text()) {
case '+':
result = a + b;
break;
case '-':
result = a - b;
break;
case 'x':
result = a * b;
break;
case '÷':
result = a / b;
break;
case '=':
$('.append').remove();
$('#result').append('<span class="append">' + result + '</span>');
}
});
$('#clear').click(function () {
$('.append').remove();
});
});
You can try this a small change in your code. You have to select the 2 single digit numbers first and then the operator and then "=".