Develop Reference

Button not displaying properly in firefox

So I've got this button, and it looks just fine in Chrome, but load it in Firefox and it's TOTALLY different. I've tried adding prefixes and it doesn't seem to change anything.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>
It is meant to display as it does in Chrome.
Any advice would be appreciated - if I find anything new I'll make an edit.
Cheers all.

You just need to add the -moz-appearance: initial; for Firefox.
var checkbox = document.getElementById("cb4");
checkbox.indeterminate = true;
body
{
font-family:arial;
}
.flipswitch
{
position: relative;
background: white;
width: 120px;
height: 40px;
-webkit-appearance: initial;
-moz-appearance: initial;
border-radius: 3px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
outline:none;
font-size: 14px;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
cursor:pointer;
border:1px solid #ddd;
}
.flipswitch:indeterminate:after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:not(:indeterminate):after
{
position:absolute;
top:5%;
display:block;
line-height:32px;
width:45%;
height:90%;
box-sizing:border-box;
text-align:center;
transition: all 0.3s ease-in 0s;
color:black;
border:#888 1px solid;
border-radius:3px;
}
.flipswitch:indeterminate:after
{
left:30%;
content:"???";
background:grey;
}
.flipswitch:not(:indeterminate):after
{
left:2%;
content: "OFF";
background:#f00;
}
.flipswitch:not(:indeterminate):checked:after
{
left:53%;
content: "ON";
background:#0f0;
}
<!--Marketing Emails -->
<div class="form-row">
<h4>Do you wish to receive Marketing Emails</h4>
<p>Emails reminding you to keep your account updated, and to continue your job search with redacted</p>
<div>
<input type="checkbox" id="cb4" class="flipswitch" name="marketing"/>
<span></span>
</div>
</div>

dynamic divs not displaying in express js

Goodday all,
Please i am still getting a hang of node and express js.
I created dynamic div in html using javascript (in my public folder) and it works fine. i try to change the location of the javascript to make it more accessible by placing it in a route folder when i want to retrieve data from mongodb.
I render it and the dynamic divs don't show anymore.
I am guessing it has to do with the placement but i don't know where to start.
please can somebody help me with this logic
where the issue is, is with the javascript function multidivs(); which works fine outside express.
Thank you
i placed multidivs() this way below
<form action="/routes/top100" method="POST" >
<div id="bodydiv">
<div id="leftdiv" >
<script type="text/javascript"> ***multidivs();*** </script>
</div>
</div>
</form>
for some reason it works well with netbeans IDE
below are the codes
HTML
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<script src="bower_components/jquery/dist/jquery.js"> </script>
<script src="bower_components/jquery-ui/jquery-ui.js"></script>
<script src="/routes/top100.js" type="text/javascript"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<div id="wrapper">
<div id="container">
<nav>
<div class="logodiv">logo </div>
charts
news
music
<a href=""><img height="20" src='/images/fblogo.png' alt="" class=''
width="20"/></a>
<a href=""><img height="20" src='/images/Instagram.png'
alt="" class='' width="20"/></a>
<a href=""><img height="20" src='/images/twitter.png'
alt="" class='' width="20"/></a>
<a href=""><img src='/images/search.png' alt=""
class='searchicon'/></a><!--
-->
<div class="menudiv"> <a href=""> <img
src='/images/menu.png' alt="" class='icons'/> </a>
</div>
</nav>
<form action="/routes/top100" method="POST" >
<div id="bodydiv"> <div id="leftdiv" > <script
type="text/javascript" >multidivs();</script></div>
<!--<script type="text/javascript" > multidivs();
</script>-->
<div id="rightdiv">
<div class="topdiv"><div class="innertop"> Top100
news</div> </div>
<div class="bottomdiv"><div class="innerbottom">
Highlights</div> </div>
</div></div>
</form>
</div>
</div>
</body>
</html>
the css
*
{
margin: 0px;
}
#admin
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 30px;
}
#login
{
margin-top: 100px;
font-family:"Times New Roman";
font-size: 14px;
font-weight: bold;
margin-left: 400px;
line-height: 20px;
}
body
{
background-color: white;
font-family: "Intro-Inline";
}
/*wrapper for the main container*/
#wrapper
{
margin: auto;
}
/*all divs under this container to be maintained in aspect*/
#container
{
position:absolute;
margin:0px auto;
}
/*wrapper for navigation divs and <a>*/
.wrapper1
{
width:780px;
height:55px;
margin-left: 15vh;
margin-top:30px;
text-align: left;
display: inline-block;
border-width: 4px;
border-style: solid;
border-color: orange;
position: static;
}
/*div for charts news music*/
.div1
{
width:380px;
height:50px;
font-size: 25px;
font-weight: lighter;
color: white;
float:left;
padding:0px 10px 0px 10px;
text-align: left;
border-width: 4px;
border-style: solid;
border-color: red;
}
/*div for facebook twitter instagram and search*/
.searchdiv
{
width:140px;
height:50px;
float:left;
white-space: nowrap;
display:inline-block;
border-style: solid;
border-color:yellow;
border-width:4px;
}
.menudiv
{
float:right;
padding-right: 50px;
margin-left: 30px;
}
.searchboxdiv
{
width:120px;
height:40px;
white-space:nowrap;
font-size:0px;
display:inline-block;
align-items: center;
float:left ;
padding:0px 30px 0px 0px;
border-width: 4px;
border-style: solid;
border-color: chartreuse;
}
.searchicon
{
width:20px;
margin:0 auto;
padding:0px;
}
/*div for menu*/
.divmenu
{
width:50px;
height:50px;
float:left;
margin-left: 0vh;
border-width: 4px;
border-style: solid;
border-color: green;
}
/*navigation*/
nav
{
position:fixed;
width:100%;
height:120px;
background-color: black;
text-align: right;
vertical-align: middle;
color:white;
z-index: 99;
}
nav a
{
color: white;
font-size: 18px;
text-decoration: none;
margin-left: 30px;
line-height: 150px;
}
/*div for logo*/
.logodiv
{
float:left;
color:white;
width: 80px;
margin-top:5vh;
margin-bottom:2vh;
font-weight: bolder;
font-size: 50px;
z-index:10;
position: fixed; /*newly added*/
left: 30vh; /*newly added*/
vertical-align: middle;
}
/*css for the icons on nav*/
.icons
{
width:20px;
height:20px;
}
/*css for the body*/
#bodydiv
{
margin:0 auto;
padding:0px;
}
#leftdiv
{
margin-top:30vh;
margin-left:30vh;
width:60vh;
height:75vh;
float:left;
}
#rightdiv
{
margin-top: 30vh;
float:right;
margin-left: 130vh;
position: fixed;
width:40vh;
height:75vh;
}
.topdiv
{
width:35vh;
height:35vh;
text-align: center;
vertical-align: middle;
background-color: gray;
float: right;
min-width: 25%;
}
.bottomdiv
{
line-height: 100px;
text-align: center;
width:35vh;
height:30vh;
margin-top:5vh;
background-color: black;
float: right;
min-width: 25%;
}
/*div to multiply*/
.innerdiv
{
align-content: center;
align-self: center;
width:80vh;
height:20vh;
background-color: gray;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innertop
{
z-index: 99;
position: fixed;
width:34.5vh;
height:5vh;
background-color: black;
color: white;
font-stretch: extra-expanded;
font-size:25px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-color: black;
}
.innerbottom
{
z-index: 99;
position: fixed;
width:35vh;
height:5vh;
background-color:gray;
color: white;
font-stretch: extra-expanded;
font-size:28px;
line-height: 30px;
}
/*div working for contents of music*/
.contentdiv
{
width:20vh;
height:15vh;
margin-top:2vh;
display:inline-block;
float:left;
margin-left:1vh;
}
.arrowdiv
{
width:8vh;
height:19.8vh;
margin:0vh;
line-height: 2vh;
background-color:#131212;
display:inline-block;
float:left;
}
.ccontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
display:inline-block;
float:left;
}
.rcontentdiv
{
width:20vh;
height:15vh;
line-height: 2vh;
margin-top:2vh;
margin-left: 1vh;
background-color: beige;
text-align: center;
float:right;
display:inline-block;
float:left;
}
.hoverdiv
{
width:3vh;
height:5vh;
background-color: beige;
border-width: 2px;
border-style: solid;
border-color: red;
float:left;
}
.imgdiv
{
margin-top: 50px;
margin-left: 10px;
width:20px;
height:20px;
}
.leftsub
{
width:60px;
height:10px;
float: left;
border-width: 2px;
border-style: solid;
border-color: green;
}
#popup
{
}
.popup
{
width:135px;
height:40px;
float: right;
text-align: center;
display: inline-block;
vertical-align: middle;
margin-right: 50px;
line-height: 50%;
}
.col1
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-right:1px solid white;
}
.col2
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
}
.col3
{
width:35px;
height:40px;
text-align: center;
display: inline-block;
background-color: black;
color:white;
border-left: 1px solid white;
}
.img
{
max-width:180px;
}
the javascript code
/*define function for multidivs*/
var popup = document.createElement('div'); //div
popup.className ="popup";
var innercol =["col1","col2","col3","col4"];
for (j=0;j<3;j++){
var colone = document.createElement('div'); //div
var imgcol = document.getElementById("col4");
var colimg=document.createElement('img');
colimg.className= "col4";
colimg.src="images/blackarrow.png";
colone.className=innercol[j];
popup.appendChild(colone);
}
popup.appendChild(colimg);
function multidivs(){
var columnnames=
["arrowdiv","contentdiv","ccontentdiv","rcontentdiv"];//styles for innerdiv
var columnids=["arrow", "content", "ccontent", "rcontent"];
for(x=0; x<100;x++) {
var row= document.createElement('div');
row.className = "innerdiv";
for(i=0; i<4; i++){
var columndiv = document.createElement('div'); //div
columndiv.className =columnnames[i];
columndiv.id=columnids[i];
//attach arrow image
if(columndiv.className=== columnnames[0]){
attachImage(columndiv);
}
row.appendChild(columndiv);
}
document.getElementById('leftdiv').appendChild(row);
}
}
//attach arrow image onload and thn on mouseover and mouseout
function attachImage(columndiv){
var img =document.createElement('img');
img.className= "imgdiv";
img.src="images/orangearrow.png";
columndiv.appendChild(img);
domouseover(); /*this will change the arrow directions and also add popup*/
domouseout();/*take out popup*/
//onmouseover changes the arrow
function domouseover(){
columndiv.addEventListener("mouseover", function(){
img.src="images/whitearrow.png";
columndiv.appendChild(img);
columndiv.appendChild(popup);
}); }
function domouseout(){
columndiv.addEventListener("mouseout", function(){
img.src="images/orangearrow.png";
columndiv.removeChild(popup);
}); }
}

Get id of a visible Div, failed in all methods

am trying to get the visible Div id of my first spinning wheel , Always am getting the value as 0. I want the exact id of visible part. Any help would be appreciated
$("div.slot").not(":hidden").prop("id");
Used above code, But am getting the result.
//note parseInt
//note stop
var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
addpersonSlots($("#slots_a .wrapper"));
moveSlots($("#slots_a .wrapper"),'a');
addSituationSlots($("#slots_b .wrapper"));
moveSlots($("#slots_b .wrapper"));
}
$(document).ready(
function(){
addpersonSlots($("#slots_a .wrapper"));
addSituationSlots($("#slots_b .wrapper"));
}
);
function addpersonSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*person.length);
jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");
}
}
function addSituationSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*situation.length);
jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");
}
}
function moveSlots(jqo){
var time = 1000;
time += Math.round(Math.random()*1000);
jqo.stop(true,true);
var marginTop = parseInt(jqo.css("margin-top"), 10)
marginTop -= (7 * 100)
jqo.animate(
{"margin-top":marginTop+"px"},
{'duration' : time, 'easing' : "linear"}).promise().done(function ()
{
alert($("div.slot").not(":hidden").prop("id"));
});
}
.first-step-div{
background:#dddddd;
margin:0 auto;
text-align:center;
padding:80px 0px;
position:relative;
}
#back_link{
position: absolute;
left: 34px;
bottom: 28px;
}
.problem-count{
height:45px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#e7e8e9;
}
.problem-count span{
position: relative;
top: 4px;
font-size:25px;
font-weight:700;
}
.label-text{
font-size:20px;
color:#444;
font-weight:600;
}
.earned-dibbs{
font-size:40px;
font-weight:600;
}
.problem-count.active{
height:50px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#fff !important;
}
.sticky-notes{
padding:30px;
}
.round-1{
background:#fff;
margin:0 auto;
text-align:center;
border-radius:15px;
width:320px;
padding:50px 0px;
}
.problem-text{
background: #fff;
border-radius: 10px;
overflow: auto;
width: 376px;
font-size: 16px;
text-align: left;
padding: 15px;
color:#58585a;
min-height: 172px;
max-height:172px;
}
.problem-user-icon{
height:25px;
width:25px;
background:#18b1a0;
margin-bottom:10px;
}
.round-label{
font-size:30px;
color:#f05f9d;
font-weight:700;
}
.round-label-text{
font-size:24px;
color:#18b1a0;
cursor:pointer;
}
.count-knowls div{
display:inline;
}
.knowls-num, .dibbs-num{
font-size:25px;
font-weight:700;
}
.spin-title{
font-size:20px;
padding:8px 15px;
text-align:center;
background:#ddd;
border-radius:10px;
font-weight:700;
width:268px;
position: relative;
top: 8px;
}
.title-border{
border:5px dotted #999;
}
.page-header{
margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px;
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}
#slots_a {
position: relative;
background: #fff;
padding: 20px;
width: 170px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_b {
position: relative;
background: #fff;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_c {
position: relative;
background: #18b1a0;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
font-size:32px;
}
.slots .wrapper{
margin-top:6px;
width:100px;
}
.slots .slot{
width:100px;
height:117px;
text-align:center;
}
.spin-person{
font-size:16px;
}
.nob-img{
position: absolute;
top: 18px;
right: -26px;
}
.spin{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin:hover{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.pink{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink:hover{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink-button{
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.step-one, .step-two{
background:#e1e65d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#e1e65d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-three{
background:#f05e9d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#f05e9d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-four{
background:#54cbec !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#54cbec !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.glyphicon-triangle-bottom{
position:relative;
top:4px;
}
.gif-title{
color:#f074a9;
font-size:18px;
font-weight:600;
text-align:center;
margin-top:10px;
}
.col-centered{
float: none;
margin: 0 auto;
}
.gif-box{
text-decoration:none;
cursor:pointer;
}
.gif-box:hover{
text-decoration:none;
cursor:pointer;
}
.orange-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.btn-container{
margin:18px 0px;
}
.draw-steps{
border:2px dashed #666;
border-radius:10px;
margin-bottom:30px;
}
.step-num{
color:#666;
font-size:50px;
font-weight:600;
position:relative;
top:10px;
}
.idea-steps-label{
font-size:18px;
text-align:left;
}
.draw-title{
color:#54cbec;
font-size:20px;
text-align:left;
font-weight:600;
margin-bottom:10px;
}
a:hover{
text-decoration:none !important;
}
.btn.grey {
background: grey none repeat scroll 0 0;
border-color: grey;
color: #fff;
cursor:not-allowed !important;
pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
left: -10px;
}
#back_link .glyphicon{
font-size:48px !important;
color:#818285 !important;
}
#back_link .glyphicon:hover{
color:#2abbb5 !important;
}
#media screen and (max-width: 600px){
#back_link {
position:absolute;
bottom:5px;
left:5px;
}
#back_link .glyphicon{
font-size:35px !important;
}
.step-one, .step-two, .step-three, .step-four{
font-size:18px;
}
}
.sticky {
margin: 0;
padding: 8px 10px;
width:205px;
height:200px;
font-size: 1.4em;
border:1px #E8Ds47 solid;
background:#f2f4ce;
box-shadow: 3px 3px 5px #666;
-moz-box-shadow: 3px 3px 5px #666;
-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
text-align: center;
}
.sticky textarea {
width:184px;
height:180px;
background:#f2f4ce;
border-bottom:none !important;
}
.sticky ol {
margin: 12px;
}
.r-index{
z-index: 0;
}
.a-index{
z-index: 99;
}
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
}
/*time container*/
button[data-setter] {
outline: none;
background: transparent;
border: none;
font-family: 'Roboto';
font-weight: 300;
font-size: 18px;
width: 25px;
height: 30px;
color: #F7958E;
cursor: pointer;
}
button[data-setter]:hover { opacity: 0.5; }
.time-container {
position: relative;
top: 130px;
width: 300px;
margin: 0 auto;
text-align: center;
}
.setters {
position: absolute;
left: 85px;
top: 75px;
}
.minutes-set {
float: left;
margin-right: 28px;
}
.seconds-set { float: right; }
.controlls {
position: absolute;
left: 37%;
top: 52px;
text-align: center;
}
.display-remain-time {
font-weight: 700;
font-size: 32px;
color: #fff;
}
#pause {
outline: none;
background: transparent;
border: none;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.play::before {
display: block;
content: "";
position: absolute;
top: 8px;
left: 16px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 22px solid #F7958E;
}
.pause::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 15px;
height: 30px;
background-color: transparent;
border-radius: 1px;
border: 5px solid #F7958E;
border-top: none;
border-bottom: none;
}
#pause:hover { opacity: 0.8; }
.e-c-base {
fill: none;
stroke: #fff;
stroke-width: 4px
}
.e-c-progress {
fill: none;
stroke: #18b1a0;
stroke-width: 10px;
transition: stroke-dashoffset 0.7s;
-webkit-transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
fill: #FFF;
stroke: #F7958E;
stroke-width: 2px;
}
#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
background:#f2f4ce;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
height:215px;
width:22%;
display:inline-block;
margin-right:2%;
margin-bottom:10px;
position:relative;
cursor:pointer;
}
.sticky-note-div img{
position: absolute;
right: 5px;
top: 5px;
}
.sticky-note-div:last-child{
margin-right:0px;
}
#media only screen and (max-width: 768px) {
.nob-img {
position: absolute;
top: 41px;
right: -26px;
}
#slots_a {
width:160px;
margin-right:15px;
}
#slots_b {
width:205px;
margin-right:15px;
}
#slots_c {
width:205px;
margin-right:0px;
}
.time-container {
position: relative;
top: 35px;
}
}
#media only screen and (max-width: 540px) {
.nob-img {
position: absolute;
top: 262px;
right: -22px;
}
#slots_a, #slots_b, #slots_c {
width:210px;
margin-right:0px;
margin-bottom:10px;
}
.problem-text{
visibility:hidden;
}
}
.card{
background:#fff;
margin-bottom:40px;
}
.card .tab-content{
max-width:100% !important;
font-size:18px !important;
min-height: 300px;
max-height:514px;
overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots" id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" ></div>
</div>
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>

Please check out the added function intersectRect, which tests if two bounding boxes intersect, and the function to get the visible slots getVisibleSlot.
I also modified the logic of your go function, to define the promise handler there because I needed a scope variable.
I added in the comments the logic I thought out.
//note parseInt
//note stop
function intersectRect(r1, r2) {
return !(r2.left > r1.right ||
r2.right < r1.left ||
r2.top > r1.bottom ||
r2.bottom < r1.top);
}
function getVisibleSlot($parent) {
var boundingRect = $parent.get(0).getBoundingClientRect();
$found = null;
/** last one to pass te test is the one.
this is because the element above the visible one will have a tiny portion
visible.
but the .each parses from "top to bottom" so the last match is the right one,
because the element under the "visible" element will not test as visible.
**/
$parent.find('div.slot').each(function(index, element) {
// get the bounding boxes.
var newRect = element.getBoundingClientRect();
// check for overlap(if it's visible)
if(intersectRect(boundingRect, newRect)) {
$found = $(element);
}
});
return $found;
}
var person = ['Mom','Dad','Friend','Teacher'];
var situation = ['Driving','Walking','chatting','Watching'];
var clicks = true;
var spinCount = 0;
var lifeCount = 4;
function go(){
var run = 0;
var done = function ()
{
/**
only run when the second wheel is done spinning.
defined here so we can make use of a scoped variable run to count the number
of completed animations.
Needed to define here, because they use a random time to spin.
*/
if(run >= 1) {
var $person = getVisibleSlot($('#slots_a'));
var $situation = getVisibleSlot($('#slots_b'));
console.log($person.text(),'is',$situation.text());
}
else {
run++;
}
};
addpersonSlots($("#slots_a .wrapper"));
moveSlots($("#slots_a .wrapper"),done);
addSituationSlots($("#slots_b .wrapper"));
moveSlots($("#slots_b .wrapper"),done);
}
$(document).ready(
function(){
addpersonSlots($("#slots_a .wrapper"));
addSituationSlots($("#slots_b .wrapper"));
}
);
function addpersonSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*person.length);
jqo.append("<div class='slot' id="+i+">"+person[ctr]+"</div>");
}
}
function addSituationSlots(jqo){
for(var i = 0; i < 15; i++){
var ctr = Math.floor(Math.random()*situation.length);
jqo.append("<div class='slot' id="+i+">"+situation[ctr]+"</div>");
}
}
function moveSlots(jqo, complete){
var time = 1000;
time += Math.round(Math.random()*1000);
jqo.stop(true,true);
var marginTop = parseInt(jqo.css("margin-top"), 10)
marginTop -= (7 * 100)
jqo.animate(
{"margin-top":marginTop+"px"},
{'duration' : time, 'easing' : "linear"}).promise().done(complete);
}
.first-step-div{
background:#dddddd;
margin:0 auto;
text-align:center;
padding:80px 0px;
position:relative;
}
#back_link{
position: absolute;
left: 34px;
bottom: 28px;
}
.problem-count{
height:45px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#e7e8e9;
}
.problem-count span{
position: relative;
top: 4px;
font-size:25px;
font-weight:700;
}
.label-text{
font-size:20px;
color:#444;
font-weight:600;
}
.earned-dibbs{
font-size:40px;
font-weight:600;
}
.problem-count.active{
height:50px;
width:50px;
border-radius:10px;
margin-bottom:10px;
background:#fff !important;
}
.sticky-notes{
padding:30px;
}
.round-1{
background:#fff;
margin:0 auto;
text-align:center;
border-radius:15px;
width:320px;
padding:50px 0px;
}
.problem-text{
background: #fff;
border-radius: 10px;
overflow: auto;
width: 376px;
font-size: 16px;
text-align: left;
padding: 15px;
color:#58585a;
min-height: 172px;
max-height:172px;
}
.problem-user-icon{
height:25px;
width:25px;
background:#18b1a0;
margin-bottom:10px;
}
.round-label{
font-size:30px;
color:#f05f9d;
font-weight:700;
}
.round-label-text{
font-size:24px;
color:#18b1a0;
cursor:pointer;
}
.count-knowls div{
display:inline;
}
.knowls-num, .dibbs-num{
font-size:25px;
font-weight:700;
}
.spin-title{
font-size:20px;
padding:8px 15px;
text-align:center;
background:#ddd;
border-radius:10px;
font-weight:700;
width:268px;
position: relative;
top: 8px;
}
.title-border{
border:5px dotted #999;
}
.page-header{
margin:0px;
}
#rcorners_parent {
position: relative;
background: #ddd;
padding: 20px;
border-radius: 15px 50px 50px 15px / 8% 80% 80% 8%;
overflow: hidden;
padding: 42px 0px 32px 0px;
}
#rcorners_parent::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #bdbec0;
border-radius: 100%;
}
#slots_a {
position: relative;
background: #fff;
padding: 20px;
width: 170px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_a::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_b {
position: relative;
background: #fff;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
margin-right:15px;
}
#slots_b::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
margin-right:15px;
}
#slots_c {
position: relative;
background: #18b1a0;
padding: 20px;
width: 225px;
height: 100px;
border-radius: 10px 50px 50px 10px / 8% 80% 80% 8%;
overflow: hidden;
display:inline-block;
}
#slots_c::after {
content: "";
position: absolute;
top: 10%;
left: -15px;
width: 25px;
height: 80%;
background-color: #109582;
border-radius: 100%;
display:inline-block;
}
.slot {
font-size:32px;
}
.slots .wrapper{
margin-top:6px;
width:100px;
}
.slots .slot{
width:100px;
height:117px;
text-align:center;
}
.spin-person{
font-size:16px;
}
.nob-img{
position: absolute;
top: 18px;
right: -26px;
}
.spin{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin:hover{
background:#18b1a0 !important;
border:1px solid #18b1a0 !important;
color:#fff !important;
font-weight:600 !important;
}
.spin-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.pink{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink:hover{
background:#f05f9d;
border:1px solid #f05f9d;
color:#fff;
font-weight:600;
}
.pink-button{
padding: 10px 11px;
border-radius: 14px;
font-weight: 600;
font-size: 16px;
}
.step-one, .step-two{
background:#e1e65d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#e1e65d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-three{
background:#f05e9d !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#f05e9d !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.step-four{
background:#54cbec !important;
border-radius:25px;
font-size:20px;
color:#fff;
border-color:#54cbec !important;
font-weight:600;
padding:10px 15px;
cursor:pointer;
}
.glyphicon-triangle-bottom{
position:relative;
top:4px;
}
.gif-title{
color:#f074a9;
font-size:18px;
font-weight:600;
text-align:center;
margin-top:10px;
}
.col-centered{
float: none;
margin: 0 auto;
}
.gif-box{
text-decoration:none;
cursor:pointer;
}
.gif-box:hover{
text-decoration:none;
cursor:pointer;
}
.orange-button{
padding:10px 34px;
border-radius:14px;
font-weight:600;
font-size:20px;
}
.btn-container{
margin:18px 0px;
}
.draw-steps{
border:2px dashed #666;
border-radius:10px;
margin-bottom:30px;
}
.step-num{
color:#666;
font-size:50px;
font-weight:600;
position:relative;
top:10px;
}
.idea-steps-label{
font-size:18px;
text-align:left;
}
.draw-title{
color:#54cbec;
font-size:20px;
text-align:left;
font-weight:600;
margin-bottom:10px;
}
a:hover{
text-decoration:none !important;
}
.btn.grey {
background: grey none repeat scroll 0 0;
border-color: grey;
color: #fff;
cursor:not-allowed !important;
pointer-events:auto !important;
}
.glyphicon-circle-arrow-left{
left: -10px;
}
#back_link .glyphicon{
font-size:48px !important;
color:#818285 !important;
}
#back_link .glyphicon:hover{
color:#2abbb5 !important;
}
#media screen and (max-width: 600px){
#back_link {
position:absolute;
bottom:5px;
left:5px;
}
#back_link .glyphicon{
font-size:35px !important;
}
.step-one, .step-two, .step-three, .step-four{
font-size:18px;
}
}
.sticky {
margin: 0;
padding: 8px 10px;
width:205px;
height:200px;
font-size: 1.4em;
border:1px #E8Ds47 solid;
background:#f2f4ce;
box-shadow: 3px 3px 5px #666;
-moz-box-shadow: 3px 3px 5px #666;
-webkit-box-shadow: 3px 3px 5px #666;
}
.sticky p {
text-align: center;
}
.sticky textarea {
width:184px;
height:180px;
background:#f2f4ce;
border-bottom:none !important;
}
.sticky ol {
margin: 12px;
}
.r-index{
z-index: 0;
}
.a-index{
z-index: 99;
}
.sticky-container {
position: relative;
}
.sticky {
position: absolute;
}
/*time container*/
button[data-setter] {
outline: none;
background: transparent;
border: none;
font-family: 'Roboto';
font-weight: 300;
font-size: 18px;
width: 25px;
height: 30px;
color: #F7958E;
cursor: pointer;
}
button[data-setter]:hover { opacity: 0.5; }
.time-container {
position: relative;
top: 130px;
width: 300px;
margin: 0 auto;
text-align: center;
}
.setters {
position: absolute;
left: 85px;
top: 75px;
}
.minutes-set {
float: left;
margin-right: 28px;
}
.seconds-set { float: right; }
.controlls {
position: absolute;
left: 37%;
top: 52px;
text-align: center;
}
.display-remain-time {
font-weight: 700;
font-size: 32px;
color: #fff;
}
#pause {
outline: none;
background: transparent;
border: none;
margin-top: 10px;
width: 50px;
height: 50px;
position: relative;
}
.play::before {
display: block;
content: "";
position: absolute;
top: 8px;
left: 16px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 22px solid #F7958E;
}
.pause::after {
content: "";
position: absolute;
top: 8px;
left: 12px;
width: 15px;
height: 30px;
background-color: transparent;
border-radius: 1px;
border: 5px solid #F7958E;
border-top: none;
border-bottom: none;
}
#pause:hover { opacity: 0.8; }
.e-c-base {
fill: none;
stroke: #fff;
stroke-width: 4px
}
.e-c-progress {
fill: none;
stroke: #18b1a0;
stroke-width: 10px;
transition: stroke-dashoffset 0.7s;
-webkit-transition: stroke-dashoffset 0.7s;
}
.e-c-pointer {
fill: #FFF;
stroke: #F7958E;
stroke-width: 2px;
}
#e-pointer { transition: transform 0.7s; -webkit-transition: -webkit-transform: 0.7s; }
.sticky-note-div{
background:#f2f4ce;
box-shadow: 5px 5px 5px #666;
-moz-box-shadow: 5px 5px 5px #666;
-webkit-box-shadow: 5px 5px 5px #666;
height:215px;
width:22%;
display:inline-block;
margin-right:2%;
margin-bottom:10px;
position:relative;
cursor:pointer;
}
.sticky-note-div img{
position: absolute;
right: 5px;
top: 5px;
}
.sticky-note-div:last-child{
margin-right:0px;
}
#media only screen and (max-width: 768px) {
.nob-img {
position: absolute;
top: 41px;
right: -26px;
}
#slots_a {
width:160px;
margin-right:15px;
}
#slots_b {
width:205px;
margin-right:15px;
}
#slots_c {
width:205px;
margin-right:0px;
}
.time-container {
position: relative;
top: 35px;
}
}
#media only screen and (max-width: 540px) {
.nob-img {
position: absolute;
top: 262px;
right: -22px;
}
#slots_a, #slots_b, #slots_c {
width:210px;
margin-right:0px;
margin-bottom:10px;
}
.problem-text{
visibility:hidden;
}
}
.card{
background:#fff;
margin-bottom:40px;
}
.card .tab-content{
max-width:100% !important;
font-size:18px !important;
min-height: 300px;
max-height:514px;
overflow: auto;
}
.card .nav-tabs { border-bottom: 2px solid #DDD; }
.card .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.card .nav-tabs > li > a { border: none; color: #ffffff;background: #58585a; font-size:16px;font-weight:600;}
.card .nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #58585a !important; background: #fff; }
.card .nav-tabs > li > a::after { content: ""; background: #58585a; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; -webkit-transition: all 250ms ease 0s; transform: scale(0);-webkit-transform: scale(0); }
.card .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1);-webkit-transform: scale(1); }
.card .tab-nav > li > a::after { background: #58585a none repeat scroll 0% 0%; color: #fff; }
.card .tab-pane { padding: 15px 0; }
.card .tab-content{padding:20px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
<div id="rcorners_parent">
<div class="slots" id="slots_a">
<div class="wrapper" ></div>
</div>
<div class="slots" id="slots_b">
<div class="wrapper" ></div>
</div>
<div id="spin_btn_div">
<div class="btn-container" style="margin-bottom:0px;">
<button id="proceed_btn" style="display:none;font-size:20px;" class="btn pink pink-button shooter-btn" onClick="go();">Proceed</button>
<button id="spin_btn" style="margin-left:10px;margin-right:10px;" class="btn spin spin-button shooter-btn" onClick="go();">Spin</button>
</div>
</div></div>
</div>

Use :visible Selector
Reference https://api.jquery.com/visible-selector/
$( "div:visible" ).click(function() {
console.log($( this ));
});

CSS positioning seems not to be loaded on iOS

I'm creating a responsive website but it seems to me the CSS is not loading the positioning of divs on iOS.
How it looked like without JS on iPhone 5s:
So, what I tryed is to find a way around the CSS by javascript and jquery allthough this seems to work, it still doesn't so it's job properly. And the lenth of my code would be enormous if i would declare evere iOS device in new js code like this:
/* Begin iPhone 5 portrait */
if (blockwidth == 67.375) {
$('input[type="date"]').css("width", "53px");
$('input[type="time"]').css("width", "53px");
$('input[type="date"]').css("height", "42px");
$('input[type="time"]').css("height", "42px");
$('input[type="text"]').css("height", "42px");
$('input[type="text"]').css("width", "93%");
$('input[type="button"]').css("height", "50px");
$('#nav_top').css("height", "170px");
$('#nav_logout').css("marginTop", "5px");
$('#nav_account').css("marginTop", "5px");
} else {}
/* Einde iPhone 5 portrait */
The total CSS (also in JSFiddle):
#charset "utf-8";
/* CSS Document */
/* CSS RESET */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
::-webkit-scrollbar {
width : 5px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 5px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 5px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 5px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
/* OWN CODE CSS */
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
}
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('../img/page-loader.gif') 50% 50% no-repeat #95c11f;
background-size: 75px 75px;
}
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
background-color:#95c11f;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
-webkit-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 5px 0px 15px 0px rgba(50, 50, 50, 0.75);
}
#aside_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_account{
margin-left:10px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5);
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
#aside_bottom{
width:100%;
height:50px;
position:fixed;
bottom:-10px;
}
#aside_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
.left{
float:left;
}
header{
display:none;
width:100%;
height:70px;
background-color:#95c11f;
-webkit-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 15px 0px rgba(50, 50, 50, 0.75);
}
#menu_placement{
height:300px;
margin-left:20px;
margin-top:120px;
margin-right:20px;
}
nav{
display:none;
position: fixed;
top:60px;
left:0px;
width:100%;
height:auto;
z-index:500;
}
.men_button{
height:50px;
width:auto;
display:block;
text-align:left;
color: #288328;
font-weight:400;
margin:0 auto;
color:white;
float:left;
}
.men_button a{
text-decoration:none;
color:white;
}
.icon_menubutton{
width:40px;
margin-top:5px;
display:inline-block;
float:left;
}
.menu_content{
display:inline-block;
height:30px;
width:100px;
margin-left:10px;
line-height:50px;
float:left;
}
form{
height: 110px;
}
input{
display:block;
height:50px;
border:none;
border-radius:5px;
text-align:center;
}
input[type='text']{
width:100%;
margin-bottom:5px;
margin-top:10px;
background-image:url(../img/icon_search.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='date']{
display:inline-block;
float:left;
margin:0;
margin-bottom:5px;
background-image:url(../img/icon_date.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='time']{
display:inline-block;
float:left;
margin-left:5px;
margin-bottom:5px;
background-image:url(../img/icon_time.png);
background-position:right;
background-repeat:no-repeat;
}
input[type='text'], input[type='date'], input[type='time'] {
background-color:#e3f4ae;
color:#95c11f;
-webkit-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-moz-box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
box-shadow: inset 0px 2px 8px 0px rgba(50, 50, 50, 0.25);
-webkit-appearance: none;
}
input[type='button']{
display:inline-block;
float:right;
margin-left:5px;
margin-bottom:0px;
-webkit-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.5);
background-color: #288328;
color:white;
font-size:18px;
}
#aside_form{margin-top:20px;}
#nav_form{
margin-left:20px;
margin-top:10px;
margin-bottom:5px;
}
#small_logo{
width:100px;
height:auto;
margin-left:20px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
header #small_logo{
width:60px;
position: fixed;
top:0px;
left:0px;
z-index:500;
height:auto;
margin-left:10px;
margin-right:10px;
padding: 0;
border: 0;
float:left;
-webkit-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
-moz-box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
box-shadow: 0px 2px 10px 0px rgba(50, 50, 50, 0.50);
}
#menu_opener{
width:40px;
margin-top:15px;
margin-right:15px;
height:auto;
float:right;
}
#logo{
width:100%;
height:auto;
padding: 0;
border: 0;
}
header #logo{
width:auto;
height:40px;
margin-top:12.5px;
margin-left:85px;
padding: 0;
border: 0;
}
#media screen and (max-width: 360px), screen and (max-device-width: 360px) {
header #logo{
width:auto;
height:35px;
margin-top:15px;
padding: 0;
border: 0;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
font-size:11px;
}
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
z-index:500;
}
.block{
margin: 0px;
width:calc(100% / 3);
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
.blockfooter{
height:100px;
width:100%;
background-color:rgba(255, 255, 255, 0.75);
margin-bottom:25px;
}
.tagblock{
height:50px;
width:100%;
}
.tagline{
height:50px;
margin:0;
padding:0;
padding-left:15px;
float:left;
line-height:50px;
font-size:19px;
}
.amounttag{
height:50px;
width:50px;
background-color:#95c11f;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:30px;
}
.pricetag{
height:50px;
width:50px;
background-color:#288328;
margin:0;
padding:0;
float:right;
color:white;
line-height:50px;
text-align:center;
font-size:14px;
font-weight:bold;
}
.allergictag{
height:50px;
margin:0;
padding:0;
float:left;
}
.icontag{
width:170px;
height:30px;
padding:10px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.icons{
width:30px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}
.stretch {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
.datetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:35px;
text-align:center;
font-weight:normal;
font-size:14px;
}
.timetag{
height:25px;
width:100px;
background-color:#f39200;
margin:0;
padding:0;
float:right;
color:white;
line-height:15px;
text-align:center;
font-weight:bold;
}
/* EIND BLOCKSTYLE */
/* Kuler:
Olijfgroen: #95c11f
Donkergroen: #288328
Limoengroen: #e3f4ae
Oranje: #f39200
Wit: white
Zwart: black
Grijs: lightgrey
*/
#media screen and (max-width: 1220px), screen and (max-device-width: 1220px) {
/* BEGIN NAVIGATIE */
aside{
margin: 0px;
height:100%;
width: 25%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
header, nav{display:none;}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin: 0px;
height:100%;
width: 75%;
background-color:black;
float:right;
}
.block{
margin: 0px;
width:50%;
background-image: url(../img/bg.png);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
display:inline-block;
float:left;
font-weight:normal;
}
/* EIND BLOCKSTYLE */
}
#media screen and (max-width: 900px), screen and (max-device-width: 900px) {
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
z-index:0;
}
#nav_top{
width:100%;
height:auto;
background-color:#95c11f;
-webkit-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
box-shadow: 0px 20px 25px 0px rgba(50, 50, 50, 0.5);
}
#menu_nav_placement{
margin-left:20px;
height:50px;
margin-bottom:5px;
}
.men_button{
height:50px;
display:inline-block;
text-align:left;
font-weight:400;
text-align:center;
margin-bottom:5px;
float:inherit;
}
.icon_menubutton{
width:40px;
margin-top:5px;
float:left;
}
.menu_content{
height:50px;
width:auto;
margin-left:10px;
line-height:50px;
}
.left{
float:left;
}
.right{
float:right;
}
#nav_logout{
margin-left:20px;
background-color:#288328;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_account{
margin-right:20px;
background-color:#f39200;
color:white;
display:inline-block;
height:40px;
line-height:40px;
text-align:center;
-webkit-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-moz-box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
box-shadow: 0px 10px 25px 0px rgba(50, 50, 50, 0.5), inset 0px 23px 15px -13px rgba(50, 50, 50, 0.25);
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#nav_bottom{
width:100%;
height:50px;
margin-top:-5px;
}
#nav_bottom a{
text-decoration:none;
color:white;
text-align:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
height:100%;
width: 100%;
float:right;
margin-top:70px;
}
.block{
margin: 0px;
height:200px;
width:50%;
background-color:rgba(255,0,4,1.00);
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
#media screen and (max-width: 600px), screen and (max-device-width: 600px) {
::-webkit-scrollbar {
width : 0px;
opacity: 0.2;
}
::-webkit-scrollbar:hover {
width : 0px;
opacity: 0.6;
}
::-webkit-scrollbar-track {
background-color: black;
}
::-webkit-scrollbar-thumb {
background-color : #288328;
}
::-moz-scrollbar {
width : 0px;
-moz-opacity:0.2;
}
::-moz-scrollbar:hover {
width : 0px;
-moz-opacity:0.6;
}
::-moz-scrollbar-track {
background-color : black;
}
::-moz-scrollbar-thumb {
background-color : #288328;
}
/* BEGIN NAVIGATIE */
aside{
display:none;
}
header{
margin: 0px;
width: 100%;
display:inline-block;
float:left;
overflow:hidden;
position:fixed;
top:0;
left:0;
}
input[type='date']{
background-position:center;
}
input[type='time']{
background-position:center;
}
/* EIND NAVIGATIE */
/* BEGIN BLOCKSTYLE */
#blocks{
margin-top:70px;
height:100%;
width: 100%;
float:right;
}
.block{
margin: 0px;
height:200px;
width:100%;
background-color:black;
display:inline-block;
float:left;
}
/* EIND BLOCKSTYLE */
}
Here's the total code sample:
https://jsfiddle.net/LLgsqyfc/
The normal #media query and the # media query for aspect ratio's of devices didn't work either.

vertical to horizontal navigation

I have a problem to convert this below navigation bar from vertical to horizontal.
http://codepen.io/anon/pen/bdpRjx
Who could help me to take a look on my code. Here is my CSS but the effect and size are chaotic.
*{
box-sizing: border-box;
}
body{
height:100%;
background-color: #444;
}
h1{
font-size:1em;
text-align:center;
color: #eee;
letter-spacing:1px;
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.nav-container{
width:100%;
margin-top:10px;
box-shadow: 0 2px 2px 2px black;
transition: all 0.3s linear;
}
.nav{
list-style-type:none;
margin:0;
padding:0;
}
li{
height:50px;
width: 300px;
position:relative;
background: linear-gradient(#292929, #242424);
display: inline;
}
ul{
float:left;
width: 100%;
}
a {
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
text-decoration:none;
display:inline;
height:100%;
width:300px;
line-height:50px;
color:#bbb;
text-transform: uppercase;
font-weight: bold;
border-left:5px solid transparent;
letter-spacing:1px;
transition: all 0.3s linear;
}
.active a{
color: #B93632;
border-left:5px solid #B93632;
background-color: #1B1B1B;
outline:0;
width: 200px;
}
li:not(.active):hover a{
color: #eee;
border-left: 5px solid #FCFCFC;
background-color: #1B1B1B;
}
span[class ^= "icon"]{
position:absolute;
left:20px;
font-size: 1.5em;
transition: all 0.3s linear;
}
Thank you very much for any suggestion.
Regards
Ryan

Apologies in advance if this is in no way what you meant, but I think all you want to do, basically, is set the list item display to inline-block. Something like this:
.nav-container li {
box-shadow: 0 2px 2px 2px black;
display: inline-block;
width: 300px;
}
You'd need to remove the box shadow and width from .nav-container and put it here instead.
You're obviously going to see a lot of issues on smaller screens if that's all you do, but maybe that gets you started?