Related
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 ));
});
I am working on left sidebar on my HTML page. My left sidebar has few texts which if we click then they should drop down and show few other texts:
Here is my jsfiddle: https://jsfiddle.net/g2ahx6nq/40/
I have these below texts:
OUR DNA
PROGRAMS
RESEARCH
STORIES
So If I click any of the above texts on my left side bar it should drop down and show other texts belonging to them. Technically it should be like this image: https://s3.postimg.org/gbxn8hkf7/home1.png
As you can see in the left sidebar (in the above image), expanded versions of each of the above texts. I have to match the color and font as it is. Below is my HTML code for left bar navigation but somehow my click is not working at all and also not able to match the font and size as well. I am also missing the drop down arrow as well.
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
And this is my CSS:
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
}
ul.dropdown-content {
position: absolute;
display: none;
}
What is wrorng I am doing by which my click is not working? And how can we match the font, color as well?
Updated
Try this fiddle https://jsfiddle.net/jgf90mh9/18/
$(document).ready(function(){
$(".dropdown a").click(function(){
$(this).closest('.dropdown').find('.dropdown-content').slideToggle(200);
$(this).closest('.dropdown').siblings('.dropdown').find('.dropdown-content').slideUp(200);
});
});
Try giving the nav ul selector in the css a position and z-index, the 'top' element and img are on top of the list so you are not actualy clicking the list items.
css:
nav ul {
z-index:10;
position:absolute;
list-style-type:none;
margin:0;
padding:0;
}
I haven't fixed the style problems with the list though ;)
Update: also try to add this
nav{
height:auto;
}
and change this position to relative
ul.dropdown-content {
position: relative; //was absolute
display: none;
}
Edit: additional changes made
.dropdown-content li a{
font-size:11px;
}
*{
box-sizing:border-box; //using this on all elements, element size wont change when you set borders. giving a 2px border to a 150px div, the div will remain 150px. Same goes for paddings.
}
nav ul li {
display:inline-block;
position:relative;
width:100%; //makes sure the hover effect is the same width with all Li's
}
nav ul li a{
display:flex;
justify-content:space-between; //spreads the li's text and arrow, arrows on 1 line
}
#leftBar {
background-color: #030303;
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 150px; //gives more space for the arrow next to text.
}
Because of z-index: 2 you've set in #clipimgA1 make your image overlap #leftBar div. You can not interact with #leftBar now since it is underneath of #clipimgA1 although you still can see it due to opacity: 0.5 you have set in #clipimgA1. I commented z-index: 2; opacity: 0.5 in #clipimgA1 and it now works as expected
$(document).ready(function(){
$(".dropdown").click(function(e){
e.preventDefault();
var $this = $(this).children(".dropdown-content");
$(".dropdown-content:visible").not($this).slideToggle(200); //Close submenu already opened
$this.slideToggle(200); //Open the new submenu
});
});
* {
margin: 0px;
}
body {
margin: 0px;
overflow-x: hidden;
}
p,
span,
h1,
h2,
h3,
h4,
h5,
h6,
td,
div,
ul,
li {
margin: 0px;
padding: 0px;
text-decoration: none;
list-style: none;
}
.login {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0 10px;
font-size: 13px;
}
.signup {
position: relative;
top: -50px;
z-index: 9999;
color: white;
text-decoration: none;
padding: 0;
font-size: 13px;
}
.above {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
position: relative;
z-index: 9999;
top: -60px;
padding: 0 5px;
}
.fa {
color: white;
margin: 5px;
}
img {
/* Set max width to be 100% of the containing element */
max-width: 100%;
max-height: 100%;
}
body .company-bio p {
font-family: 'agenda';
margin-bottom: 20px;
letter-spacing: .18em;
font-family: 'agenda';
font-weight: 400;
color: rgb(254, 254, 255);
}
div.company-bio {}
body .company-bio {
position: relative;
top: -42px;
padding-top: 40px;
margin-left: 131px;
/*Added Just now */
padding-bottom: 40px;
max-width: 100%;
background: url("https://s30.postimg.org/l04wudgs1/grey-bar.png");
padding-left: 140px;
padding-right: 155px;
font-size: 20px;
font-family: "Adelle PE";
}
.top h1 {
color: #f86d2c;
font-style: italic;
font-size: 37px;
}
.top p {
color: white !important;
background-color: black;
}
.mission-statements .programs {
position: relative;
top: 60px;
width: 300px;
border-style: solid;
border-width: 4px;
text-align: center;
font-size: 19px;
border-color: #EF7440;
padding: 25px;
margin: 25px;
margin-left: auto;
margin-right: auto;
text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.16);
font-family: "adelle regular";
color: rgb(40, 40, 41);
line-height: 1.979;
}
.top h4 {
font-size: 25px;
font-family: "ITC Avant Garde Gothic";
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.792;
text-align: left;
-moz-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-webkit-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
-ms-transform: matrix( 1.65479981820633, 0, 0, 1.66565153423699, 0, 0);
position: absolute;
left: 684.247px;
top: 280.77px;
}
.top h2 {
position: absolute;
top: 320px;
left: 450px;
letter-spacing: .3em;
font-size: 22px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
color: rgb(255, 255, 255);
text-transform: uppercase;
line-height: 1.6;
text-align: center;
text-shadow: 0px 3px 6.37px rgba(40, 40, 41, 0.004);
}
body .northmanwild .title {
/* background-image:url(assets/img/Uploads/insta-pics.png); */
width: 100%;
padding-bottom: 40px;
padding-top: 40px;
text-align: center;
font-size: 37px;
margin-top: 0px !important;
margin-bottom: 0px !important;
font-family: "Adelle PE";
color: rgb(255, 255, 255);
font-weight: bold;
font-style: italic;
line-height: 1.979;
text-align: center;
/*text-shadow: 1.5px 2.598px 7.65px rgba(40, 40, 41, 0.5);
opacity: 100%;
fill: 57%;
*/
}
div.leftBar-bottom {
background-image: url("https://s17.postimg.org/yvv4w2gmn/nav-background.png");
float: left;
}
div.northmanwild {
margin-top: -2px;
width: 90.1%;
float: right;
opacity: 0.8;
margin-bottom: -7px;
}
body .footer {
width: 90.3%;
float: right;
color: rgb(40, 40, 41);
padding-top: 30px;
padding-bottom: 20px;
font-weight: normal;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/footer-bg.png);
}
/*FIGURE OUT PROBLEM WITH MISSION STATEMENTS*/
body .mission-statements {
margin-left: 131px;
padding-bottom: 130px;
padding-left: 45px;
padding-right: 45px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(assets/img/Uploads/bg-trees.png);
}
body .mission-statements .why {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 40px;
padding-left: 40px;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .how {
padding-top: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding-bottom: 10px;
padding-right: 40px;
}
body .mission-statements .what {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 40px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
left: -40px;
top: 30px;
}
body .mission-statements .why pre {
padding-left: 40px;
}
body .mission-statements .how {
margin-top: 0px !important;
padding-right: 0px;
margin-bottom: 0px !important;
}
/*.top .imgB1
{
position: relative;
top: -225px;
}
*/
.top {
position: relative;
top: 0;
left: 0;
margin-bottom: -7px;
}
.imgA1 {
position: relative;
top: 0;
left: 0;
}
.clippedmain {
position: absolute;
top: 0;
left: 0;
}
#clippedImg {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
#clipimgA1 {
/*Chrome,Safari*/
-webkit-clip-path: polygon(1px 100%, 131px 100%, 130px 0px, 0px 0px);
position: absolute;
top: 0;
left: 0;
/*z-index: 2;
opacity: 0.5;*/
}
/*Firefox*/
clip-path: url("#clipPolygon");
/* iOS support inline encoded svg file*/
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTI1LDI1MCBMNzAsMjUwIDcxLDI4NSAyNjAsMjg1IDI2MSwyNTAgMTYwLDI1MCAxNjAsMTE1IDIyNSwxMTUgMjI1LDkwIDE2MCw5MCAxNjAsNzAgMjUsNzAgeiIvPgogIDwvY2xpcFBhdGg+CiAgPHBhdGggaWQ9InN2Z01hc2siIGQ9Ik0yNSwyNTAgTDcwLDI1MCA3MSwyODUgMjYwLDI4NSAyNjEsMjUwIDE2MCwyNTAgMTYwLDExNSAyMjUsMTE1IDIyNSw5MCAxNjAsOTAgMTYwLDcwIDI1LDcwIHoiICAvPgo8L3N2Zz4=) no-repeat;
}
.imgB1 {
position: absolute;
top: -65px;
left: 70px;
}
.footer .footer-section1 {
float: left;
width: 33%;
}
.footer .footer-section2 .block-title {
position: relative;
width: 338px;
left: -140px;
font-size: 16px !important;
font-family: "AvantGarde";
color: rgb(40, 40, 41);
/* font-style: italic; */
letter-spacing: 4px;
border-bottom: 2px solid #000000;
}
.footer .footer-section2 .block-content {
font-style: italic;
line-height: 1.52;
top: 18px;
left: 52px;
position: relative;
}
.footer .footer-section3 .block-content {
position: relative;
line-height: 1.52;
left: 12px;
letter-spacing: 4px;
top: 15px;
font-style: italic;
}
.footer .footer-section3 .block-title {
border-bottom: 2px solid #000000;
width: 60%;
left: 14px;
position: relative;
}
.footer .footer-section1 .block-content {
position: relative;
line-height: 1.52;
top: 67px;
left: 125px;
font-style: italic;
}
.footer .footer-section2 {
position: relative;
left: -89px;
}
.footer .footer-section2 {
float: left;
width: 33%;
}
.footer .footer-section3 {
float: left;
width: 33%;
}
.scroll-down {
opacity: 1;
-webkit-transition: all .5s ease-in 3s;
transition: all .5s ease-in 3s;
}
.scroll-down {
position: absolute;
bottom: 28px;
left: 55%;
margin-left: -16px;
display: block;
width: 32px;
height: 32px;
background-size: 14px auto;
border-radius: 50%;
z-index: 2;
-webkit-animation: bounce 2s infinite 2s;
animation: bounce 2s infinite 2s;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.scroll-down:before {
position: absolute;
top: calc(50% - 8px);
left: calc(50% - 6px);
transform: rotate(-45deg);
display: block;
width: 12px;
height: 12px;
content: "";
border: 2px solid white;
border-width: 0px 0 2px 2px;
}
section.ok {
position: relative;
top: 2000px;
}
.copy-rights {
font-size: 16px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
position: relative;
top: 48px;
display: block;
font-size: 12px;
text-align: center;
color: rgb(40, 40, 41);
font-style: italic;
-moz-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-webkit-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
-ms-transform: matrix( 0.99963252426166, 0, 0, 0.99882633931212, 0, 0);
font-style: normal;
}
#leftBar {
/*background-color: #030303;*/
box-shadow: 2.996px 0.157px 7.65px 1.35px rgba(40, 40, 41, 0.25);
border-right: solid #EF7440;
border-right-width: 4px;
top: 0px;
bottom: 0px;
left: 0px;
height: 2278px;
position: absolute;
width: 131px;
/*Commented today */
/* opacity: 0.5; */
}
/*
#holder {
width: 700px;
margin-left: 263px;
padding-left: 50px;
margin-top: 10px;
height: 100%;
float: right;
position: fixed;
}
*/
#font-face {
font-family: BEBAS;
src: url("http://webdesigncove.com/fonts/BEBAS___.ttf")
}
h1.logo {
font-size: 26px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
text-transform: uppercase;
line-height: 1.2em;
letter-spacing: -3px;
color: white;
text-align: center;
padding-top: 10px;
}
h1.postTitle {
font-family: BEBAS, Helvetica, Verdana, Sans-Serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: normal;
letter-spacing: .28em;
line-height: 1.45em;
}
#navigation {
padding: 0;
margin: 0;
text-align: center;
position: relative;
z-index: 3;
}
#navigation li {
list-style-type: none;
margin-bottom: 5px;
}
#navigation a:link {
font-family: "ITC Avant Garde Gothic";
font-size: 15px;
font-style: normal;
}
#navigation a:visited {
color: rgb(255, 255, 255);
}
#navigation a:hover {
color: #FE5B1F;
}
.copy-right-text {
font: Bold 12px 'Open Sans';
color: #ffffff;
padding-top: 10px;
text-align: center;
}
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
position:relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
cursor: pointer;
padding: 10px 20px;
display: block;
width: 80px;
}
nav ul li a:hover {
background: #00648C;
cursor: pointer;
}
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<img id="clipimgA1" class="clippedmain" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png" alt="img">
<img class="imgA1" src="https://s28.postimg.org/tkwg9tmdp/homepage-image-1.png">
</div>
<div id="leftBar">
<br />
<svg id="clippedImg" width="0" height="0">
<clipPath id="clipPolygon">
<polygon points="1 100%,131 100%,130 0,0 0">
</polygon>
</clipPath>
</svg>
<nav>
<ul>
<li class="dropdown">
OUR DNA
<ul class="dropdown-content">
<li><i>RISK</i></li>
</ul>
</li>
<li class="dropdown">
PROGRAMS
<ul class="dropdown-content">
<li><i>PROFESSIONAL</i></li>
<li><i>ADVENTURE SPORT</i></li>
<li><i>ENTERTAINMENT</i></li>
<li><i>COLLEGIATE</i></li>
<li><i>INDIVIDUAL</i></li>
<li><i>COMMERCIAL</i></li>
</ul>
</li>
<li class="dropdown">
RESEARCH
<ul class="dropdown-content">
<li><i>CORPORATE SURVEY</i></li>
<li><i>INDIVIDUAL SURVEY</i></li>
</ul>
</li>
<li class="dropdown">
STORIES
</li>
</ul>
</nav>
</div>
<ul class="above">
<li><i class="fa fa-facebook-square"></i></li>
<li><i class="fa fa-twitter-square"></i></li>
<li><i class="fa fa-instagram"></i></li>
</ul>
<a class="login" href="#">Log In |</a>
<a class="signup" href="#">Sign Up</a>
<div class="leftBar-bottom">
</div>
<!-- End Side bar div-->
<div class="company-bio">
<p align="center" style="font-family: Adelle PE">Hello World </p>
<p align="center" style="font-family: Adelle PE">Nice Text! </p>
<p align="center">Hello David</p>
</div>
Updated: I've commented position: absolute from
ul.dropdown-content {
/*position: absolute;*/
display: none;
}
and it instantly achieves some effects you wanted
My slide show is almost finished, but for some reason i don't get it fixed to center my nav bullets. This is my script now (w/o the JS):
<style>
h3.slidetext {
position: absolute;
font-family: 'Open Sans', Arial;
font-size: 14pt;
font-weight: 300;
letter-spacing: 5px;
top: 100px;
left: 0;
width: auto;
color: #ffffff;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
#slideshow {position: relative; width: 960px; height: 300px; padding: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.4);}
#slideshow div {position: absolute; top: 10px ; left: 10px; right: 10px; bottom: 10px;}
#slideshow a {display: block; width: 960px; height: 300px; }
#slideshow a:hover{background-position: center bottom;}
#slideshownav {background-color: #000; padding-top: 8px; padding-bottom: 20px;}
#slideshownav a.navselected{color:#eb910c;}
span.markup {margin: 10px 10px 0 0; width: 20px; height: 20px; border: solid 3px; #000; border-radius: 50%;}
#slideshownav a {color: #d6d6d6; text-decoration: none; height: 200px;}
#slideshownav a:hover {cursor:pointer;}
</style>
<div id="slideshow">
<div><h3 class="slidetext">Some text</h3></div>
<div><h3 class="slidetext">Some text</h3></div>
</div>
<div id="slideshownav">
<a id="nav0" class="navselected"><span class="markup"></span></a>
<a id="nav1"><span class="markup"></span></a>
</div>
I tried: Margin: 0 auto; text-align: center; display: (inline-)block
It all doesn't work and I just don't see it anymore lol.
You can use text-align to center the elements inside #slideshownav:
CSS
#slideshownav {
background-color: #000;
padding-top: 8px;
padding-bottom: 20px;
text-align: center;
}
DEMO HERE
OR
You can center just the #slideshownav using transform:
CSS
#slideshownav {
position: relative;
background-color: #000;
padding-top: 8px;
padding-bottom: 20px;
text-align: center;
display: inline-block;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
DEMO HERE
I had an issue with the blank space below the footer. I've managed to solve this by adding a jQuery sticky footer as the CSS methods doesn't work for me.
However, I do have a problem with main content of the webpage. If I adjust .bg-photo's height, it will affect how low or high the footer's placement will go.
Any content within .bg-photo will not affect the footer's placement at all.
I'm thinking it could be my HTML or CSS that's doing this sort of issue. Although, I'm not sure.
What I want is that the page automatically adjust to any screen's height and the user doesn't have to scroll down to view just the footer.
Here's the webpage:
http://planet.nu/dev/test/index.html
Here's the jsFiddle:
https://jsfiddle.net/mqfrnjaa/
And the codes if you need to view them right away.
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $(".footer");
positionFooter();
function positionFooter() {
footerHeight = $footer.height();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
if ( ($(document.body).height()+footerHeight) < $(window).height()) {
$footer.css({
position: "absolute"
}).animate({
top: footerTop
})
} else {
$footer.css({
position: "static"
})
}
}
$(window)
.scroll(positionFooter)
.resize(positionFooter)
});
html, body {
height: 100%;
}
*{
margin: 0;
}
body {
background: #fff;
min-height: 600px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #393c3d;
line-height: 22px;
}
#fw_header {
margin: 0 auto;
position: relative;
width: 980px;
}
#fw_header ul {
list-style-type: none;
}
.forums #fw_header {
margin-bottom: 0;
}
#fw_header ul {
padding-left: 12px;
padding-top: 6px;
}
#fw_header li {
float: left;
padding: 0 3px;
}
#fw_header li a {
padding: 0 8px;
}
#fw_header li a:hover {
border-bottom: 5px solid #829AC6;
text-decoration: none;
}
#fw_header li a.active {
border-bottom: 5px solid #4E6CA3;
}
#fw_header ul.submenu li a.active,
#fw_header ul.subsubmenu li a.active {
border-bottom: 5px solid #829AC6;
}
#fw_header ul.submenu,
#fw_header ul.subsubmenu {
margin-top: 1em;
padding-top: 0;
}
#fw_header ul.submenu_usage {
padding-left: 32px;
}
#fw_header ul.submenu_plugins {
padding-left: 20px;
}
#fw_header ul.submenu_development {
padding-left: 23px;
}
#fw_header ul.submenu_extras {
padding-left: 14px;
}
#fw_header ul.submenu_testing {
padding-left: 480px;
}
#fw_header ul.submenu_styling {
padding-left: 80px;
}
#fw_header ul.subsubmenu {
padding-left: 120px;
}
#fw_header ul.submenu li,
#fw_header ul.subsubmenu li {
font-size: 80%;
}
#fw_header {
font-size: 16px;
}
#fw_header a {
color: #4E6CA3 !important;
}
#fw_header h1 {
border-bottom: medium none;
color: black;
font-size: 2em;
line-height: 1.45em;
margin-top: 32px;
vertical-align: middle;
}
#fw_header h1 img {
margin-top: -5px;
vertical-align: middle;
}
#fw_header h1 a {
color: black !important;
}
#fw_header h1 a:hover {
text-decoration: none;
}
#header_options {
position: absolute;
right: 150px;
top: -32px;
width: 495px;
}
#header_options .option {
float: left;
padding: 12px 0;
text-align: center;
width: 165px;
}
#header_options a:hover {
text-decoration: none;
}
#header_options .option:hover {
background-color: #F5F7FA;
}
#header_options div.option img {
margin-right: 7px;
vertical-align: middle;
}
#header_options .option table {
margin: 0 auto;
}
#header_options .option table td {} #header_options #options_search {
padding: 7px 0;
width: 495px;
}
#header_options #options_download {} #options_search input[type="text"] {
height: 20px;
width: 350px;
}
#header_download {
background: url("../images/dl_button_220.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 0;
text-align: center;
top: -8px;
width: 220px;
}
#header_donate {
background: url("../images/donate_button.jpg") no-repeat scroll left top transparent;
font-size: 0.9em;
height: 36px;
padding-top: 13px;
position: absolute;
right: 220px;
text-align: center;
top: -8px;
width: 220px;
}
#header_download a,
#header_donate a {
color: white;
}
#header_download a:hover,
#header_donate a:hover {
text-decoration: none;
}
#dontate_wrapper {
background-color: #FCFCFC;
border: 1px dotted #A5A5A5;
color: #555555;
font-size: 0.8em;
margin: 0 0 1.5em;
padding: 5px;
text-align: center;
}
#header_advert {
background-color: white;
height: 200px;
overflow: visible;
position: absolute;
right: 0;
top: -32px;
width: 150px;
}
body .adpacks {} body .one .bsa_it_ad {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #999999;
margin: 0;
text-align: left;
}
body .one .bsa_it_ad:hover {
background-color: #F5F7FA;
color: black;
}
body .one .bsa_it_ad .bsa_it_i {
display: block;
float: none;
font-size: 11px !important;
margin: 0;
padding: 0;
text-align: center;
}
body .one .bsa_it_ad .bsa_it_d {
font-size: 11px !important;
}
body .one .bsa_it_ad .bsa_it_i img {
border: medium none;
padding: 0;
}
body .one .bsa_it_ad .bsa_it_t {
padding: 6px 0 0;
}
body .one .bsa_it_p {
display: none;
}
.one .bsa_it_ad {
color: #F5F7FA;
padding: 4px 0 0 !important;
}
body #bsap_aplink,
body #bsap_aplink:hover {
display: block;
font-size: 10px;
left: 104px;
position: absolute;
text-decoration: none;
top: 45px;
transform: rotate(90deg);
width: 100px;
}
.css_small {
font-size: 75%;
line-height: 1.45em;
}
.css_vsmall {
font-size: 65%;
line-height: 1.45em;
}
#dt_example #container {
margin: 64px auto 30px !important;
}
.header {
width: 100%;
background: rgba(255, 255, 255, 0.6);
color: #034e7c;
text-align: center;
padding: 20px 0;
height: 115px;
// filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D73000', endColorstr='#FFFFFF',GradientType=0 ); /* IE6-9 */
}
.header img.logo {
height: 105px;
}
.header ul.breadcrumb li a {
font-family: 'Open Sans';
font-size: 23px;
color: #4a4a4a
}
.header ul.log-in {
list-style-type: none;
display: inline;
float: right;
margin-top: 55px;
margin-right: 40px;
}
.header ul li {
display: inline;
color: red;
margin-right: 35px;
}
.header ul.log-in li,
.header ul.log-in li a {
display: inline;
font-size: 19px;
color: red;
text-decoration: none
}
.header .dateButton,
.dateButton {
width: 300px;
height: 45px;
background: #e63308;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e63308), color-stop(100%, #db3304));
background: -webkit-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -o-linear-gradient(top, #e63308 0%, #db3304 100%);
background: -ms-linear-gradient(top, #e63308 0%, #db3304 100%);
background: linear-gradient(to bottom, #e63308 0%, #db3304 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#e63308', endColorstr='#db3304', GradientType=0);
float: right;
-webkit-border-radius: 2px;
border-radius: 2px;
margin-right: 70px;
text-align: center;
cursor: pointer;
margin-top: -8px;
}
.header .dateButton a,
.dateButton a {
height: 30px;
vertical-align: middle;
line-height: 45px;
font-weight: bold;
color: #f0f0f0;
font-size: 23px;
}
.header .dateButton img,
.dateButton img {
padding-right: 5px
}
.footer {
width: 100%;
background: #FFF;
text-align: center;
height: 40px;
}
.footer p {
color: #4a4a4a;
font-family: 'Open Sans', sans-serif;
padding: 30px 0;
}
.footer p a {
color: #9fcf64;
}
.navigation {
min-width: 1300px;
width: 100%;
border-top: solid 1px #d6d6d6;
border-bottom: solid 1px #d6d6d6;
height: 60px;
background: linear-gradient(to bottom, #f5f5f5 0%, #ececec 10%, #ededed 100%);
}
.navigation ul.breadcrumb {
padding: 0px;
margin: 0;
margin-left: 50px;
margin-top: 15px;
margin-right: 0px;
width: 1000px;
}
.navigation ul li {
list-style-type: none;
}
.navigation ul li a {
color: #4a4a4a;
text-decoration: none;
font-weight: bold;
font-size: 23px;
float: left;
margin-right: 10px;
}
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 3px 0 3px 5.2px;
border-color: transparent transparent transparent #4a4a4a;
float: left;
margin-top: 8px;
margin-right: 10px;
}
.top-section {
height: 100px;
}
body * {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #393c3d;
line-height: 22px;
}
.bg-photo{
background:url(http://planet.nu/dev/test/images/bg.jpg);
background-size: cover;
height: 75%;
text-align: center;
}
.bg-photo:before{
content: '';
display: inline-block;
vertical-align: middle;
margin-right: -0.25em;
}
.loginText{
font-size: 16px;
}
#createCampaignButton {
transition-property: background-color, color;
transition-duration: 1s;
transition-timing-function: ease-out;
font-size: 18px;
/* font-weight: bold; */
color: #fff;
background: #8bbd3a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
table{
margin-bottom: 20px;
background: rgba(255, 255, 255, 0.9);
}
h1{
color: #4a4a4a;
font-size: 48px;
}
table th{
color: #666666;
padding-top: 10px;
text-align: left;
padding-left: 15px;
}
table td {
padding-left: 15px;
}
table td input{
padding-left: 5px;
height: 30px;
font-size: 22px;
margin-bottom: 20px;
width: 100%;
}
tbody{
width: 95%;
display: table;
}
<div class="header">
<div class="top-section">
<img class="logo" src="http://planet.nu/dev/test/images/littleforest_logo.jpg">
</div>
</div>
<div class="bg-photo col-md-12 col-xs-12">
<div class="col-md-6 col-sm-9">
<h1 style="font-size: 35px; text-align:center; color:#FFF;margin:20px 0 0 0">
Welcome to LFi
</h1>
<p style="text-align:center; color: #FFF; font-size: 20px; padding: 28px 0 0 0;">Insight that drives web success</p>
<br>
<form method="post" action="/crawler/LoginServlet">
<table style="width: 40%; padding: 20px 30px; display: inline-block; vertical-align: middle; margin: 30px 0 0 0; background: rgba(255,255,255, 0.9);">
<tbody>
<tr>
<th>
User Name
</th>
</tr>
<tr>
<td>
<input type="text" name="username" class="textInput loginText" placeholder="User Name">
</td>
</tr>
<tr>
<th>
Password
</th>
</tr>
<tr>
<td>
<input type="password" name="password" value="" class="textInput loginText" placeholder="Password">
</td>
</tr>
</tbody>
</table>
<div>
<p class="submit">
<input type="submit" name="commit" class="button" id="createCampaignButton" value="Log in" style="width:260px; display: inline-block; vertical-align: middle; margin: 20px 0 0 0;">
</p>
</div>
</form>
</div>
</div>
<div class="footer col-md-12 col-xs-12">
<p>
Powered by Little Forest a tool that encourages continuous improvement towards web success.
</p>
</div>
What can come in handy in situation like this is css property vh.
Depends on which browsers you have to support, but to adjust to height of view port you can do height: 100vh or vmin.
More details on browser support: http://caniuse.com/#feat=viewport-units
You could achieve sticky-footer without any plugins. Here i did "sticky footer and header" only with css. One can add up more content under the form and get assured that the page stretches right down while content stays above the footer - here.
/**sticky-footer layout**/
body {
min-height: 500px;
}
.header,
#main,
.footer {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.header {
height:120px !important;
overflow:hidden;
background:#ffffff !important;
position:relative;
z-index: 10;
padding:0 !important;
opacity:0.9;
}
.footer {
height:100px !important;
background:#ffffff !important;
overflow:hidden;
opacity:0.9;
padding:0 !important;
}
#main {
min-height:100%;
margin:-120px 0 -100px;
height:auto !important;
}
#main:after,
#main:before {
content:"";
display:block !important;
margin:0;
}
#main:before {
height:120px;
}
#main:after {
height:100px;
}
However, you might not like the fact that your bg container .bg-photo#main lays underneath header and footer (which i made opaque on purpose to demonstrate, how the blocks are positioned), thus cutting bits of your leaves background.
You would instinctively wish to transfer the background to an inner immediate div inside the main section. I've sketched this eventuality as well, however since it's uses vh units,
min-height: calc( 100vh - 220px);
it might not work in all browsers, so beware, i also used calc to subtract the header and the footer. I hope it'll work reliably for you.
I´ve trying to implement this simple slideshow: http://codepen.io/rafaelcastrocouto/pen/doZNMo
But im not having sucess and i dont know what the problem is, the only thing that shows up is the last image of the slideshow, i added the path to the js file, checked if the name are correct, but stil no luck.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>
I believe your jquery wasn't included. Here is the same code with jquery included and the slideshow working.
var seconds = 2; //time beetwen auto slide
var delay = 8; //time to restart auto slide
var slider = $('#slider');
var images = $('#slider .images');
var controls = $('<div>').addClass('controls');
slider.after(controls);
var width = images.width();
var slideClick = function() {
var b = $(this);
$('.controls div').removeClass('current');
b.addClass('current');
var index = b.index();
images.css('left', -1 * index * width);
};
$('#slider .images img').each(function(i) {
var img = $(this);
img.css('left', i * width);
var button = $('<div>');
controls.append(button);
if (i == 0) {
button.addClass('current')
}
button.click(function() {
clearInterval(autoSlideInterval);
slideClick.apply(this);
setTimeout(function() {
setInterval(autoSlide, seconds * 1000);
}, delay * 1000);
});
});
var autoSlide = function() {
var next = $('.controls .current').next();
if (next.length) {
slideClick.apply(next);
} else {
var first = $('.controls div').first();
slideClick.apply(first);
}
};
var autoSlideInterval = setInterval(autoSlide, seconds * 1000);
html,
body { height: 100%; }
body {
margin: 0;
font-family: 'Open Sans', Helvetica, sans-serif;
min-width: 900px;
}
.header {
background-image: url("img/fundo1.jpg");
background-color: rgb(21, 21, 21);
color: white;
height: 100%;
min-height: 650px;
position: relative;
}
.header .logo {
width: 230px;
height: 60px;
margin: 20px 8px 8px 6%;
}
.header .menu {
position: absolute;
top: 55px; right: 25px;
}
.header .menu a {
margin: 0 4px;
font-size: 15px;
color: white;
text-decoration: none;
padding: 6px 20px;
}
.header .menu a:hover,
.header .menu a.current {
color: rgb(204, 66, 63);
}
.header .move {
color: white;
width: 40%;
margin: 0;
padding: 10px;
}
.header .move .center {
margin: 260px auto 0;
width: 360px;
}
.header .move h1 {
font-weight: 400;
font-size: 38px;
margin: 6px 0;
}
.header .move p {
font-weight: 300;
font-size: 20px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.header .mail1 {
background-image: url("img/email.png");
background-size: contain;
background-position: 100% 100%;
background-repeat: no-repeat;
width: 560px; height: 560px;
position: absolute;
bottom: 0; right: 0;
}
.header .mail1 form {
position: absolute;
width: 240px;
bottom: 220px; right: 155px;
}
.header .mail1 h1 {
font-weight: 300;
text-align: center;
color: rgb(203, 41, 37);
}
.header .mail1 input {
box-sizing: border-box;
width: 100%;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin-bottom: 12px;
}
.header .mail1 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.header .mail1 input:focus {
outline: 0;
}
.header .mail1 a {
display: block;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px;
font-size: 14px;
}
.header .mail1 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 {
box-shadow: 10px 6px 15px grey;
background-color: white;
background-image: url("img/barra.png");
background-position: 12% 0%;
height: 90px;
text-align: right;
}
.mail2.fixed {
position: fixed;
display:block;
top: 0; left: 0;
width: 100%;
min-width: 800px;
height: 90px;
z-index: 1;
}
.mail2 form {
display: inline-block;
margin: 30px 0;
padding: 0 10px;
width: 600px;
}
.mail2 h1 {
font-weight: 300;
color: rgb(203, 41, 37);
display: inline;
vertical-align: middle;
font-size: 28px;
}
.mail2 input {
box-sizing: border-box;
width: 220px;
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 8px;
border: 1px solid rgb(219, 219, 218);
border-radius: 6px;
margin: 0 6px;
}
.mail2 input:hover {
border: 1px solid rgb(189, 189, 188);
}
.mail2 input:focus {
outline: 0;
}
.mail2 a {
display: inline;
color: white;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
text-align: center;
padding: 8px 4%;
font-size: 14px;
}
.mail2 a:hover {
background-color: rgb(224, 86, 83);
}
.mail2 .top {
padding: 8px 6px;
background-color: rgb(51, 51, 51);
}
.mail2 .top:hover {
background-color: rgb(71, 71, 71);
}
#slider {
border: 2px solid #ddd;
margin: 1em auto;
width: 350px;
height: 250px;
overflow: hidden;
}
#slider .images {
position: relative;
transition: left 0.5s;
left: 0;
}
#slider .images img {
position: absolute;
}
.controls {
width: 350px;
margin: 0 auto;
display: flex;
justify-content: center;
}
.controls div {
width: 16px;
height: 16px;
margin: 0 8px;
background: tomato;
border-radius: 50%;
}
.controls .current {
background: firebrick;
}
.barra2 {
background-image: url('img/barra2.png');
background-size: cover;
padding-bottom: 21.6%;
}
.mobile {
background-image: url("img/fundo3.jpg");
background-size: cover;
background-color: rgb(171, 171, 171);
color: white;
padding-bottom: 44.4%;
position: relative;
}
.mobile .invisi {
position: absolute;
width: 13%;
height: 10%;
bottom: 14%;
border-radius: 8px;
}
.mobile .invisi:hover {
background: white;
opacity: 0.2;
}
.mobile .appstore {
right: 26.5%;
}
.mobile .googleplay {
right: 11.5%;
}
.contact {
background-image: url("img/fundo2es.jpg");
background-size: cover;
background-color: rgb(21, 21, 21);
background-repeat: no-repeat;
height:100%;
color:white;
}
.contact .textocon {
text-align: right;
padding: 55px 75px 0 0;
}
.contact .textocon div {
display: inline-block;
width: 290px
}
.contact .textocon h1 {
font-weight: 400;
font-size: 42px;
margin: 6px 0;
}
.contact .textocon p {
font-weight: 300;
font-size: 19px;
border-top: 2px solid white;
margin: 6px 0;
padding-top: 6px;
}
.contact .col1 {
display: inline-block;
vertical-align: top;
width: 410px;
padding: 10px 6px 10px 60px;
}
.contact .col1 h1 {
font-weight: 300;
font-size: 25px;
margin: 4px 0;
}
.contact .col1 input {
width: 380px;
height: 20px;
}
.contact .col1 input,
.contact .col2 textarea {
font-family: 'Open Sans', Helvetica, sans-serif;
padding: 14px;
font-size: 13px;
color: white;
background-color: transparent;
border: 1px solid rgb(172, 161, 160);
margin: 6px 0;
}
.contact .col1 input:focus,
.contact .col2 textarea:focus {
outline: 0;
border: 1px solid white;
}
.contact .col2 {
display: inline-block;
width: calc(100% - 560px);
padding: 52px 10px 10px 0;
text-align: right;
}
.contact .col2 textarea {
text-align: left;
width: 100%;
box-sizing: border-box;
height: 112px;
}
.contact .col2 a {
display: inline-block;
color: white;
font-weight: bold;
text-decoration: none;
background-color: rgb(204, 66, 63);
border-radius: 6px;
padding: 12px 60px;
font-size: 20px;
}
.contact .col2 a:hover {
background-color: rgb(224, 86, 83);
}
.contact .info {
padding: 10px 60px;
display: flex;
justify-content: space-between;
}
.contact .info h1 {
font-weight: 300;
font-size: 25px;
}
.contact .info p {
font-size: 12px;
line-height: 12px;
}
.contact .info a {
text-decoration: none;
color: white;
}
.contact .info a:hover {
color: #ddd;
}
.contact .info img {
width: 32px;
margin: 6px;
}
.contact .info img:hover {
opacity: 0.8;
}
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/prefixfree.min.js"></script>
<script src="js/fixedbar.js"></script>
<meta charset="utf-8">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="js/slider.js"></script>
<title> Layout </title>
</head>
<body>
<div class="header" id="top">
<img class="logo" src="img/logo.png">
<div class="menu">
Home
Product Tour
Pricing
Try
Vision
</div>
<div class="move">
<div class="center">
<h1>Move work forward!</h1>
<p>Optential keeps your team organized, connected, and focused on results.</p>
</div>
</div>
<div class="mail1">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
</form>
</div>
</div>
<div class="mail2">
<form>
<h1>Try Now!</h1>
<input type="text" placeholder="Your Email here...">
Get started for free
<a class="top" href="#top">Top</a>
</form>
</div>
<div id="slider">
<div class="images">
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250" alt="Image-1" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FFCC47&txtclr=ffffff&txt=Image-2&w=350&h=250" alt="Image-2" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-3&w=350&h=250" alt="Image-3" />
<img src="https://placeholdit.imgix.net/~text?txtsize=63&bg=4763FF&txtclr=ffffff&txt=Image-4&w=350&h=250" alt="Image-4" />
</div>
</div>
<div class="barra2"></div>
<div class="mobile">
</div>
<div class="contact">
<div class="textocon">
<div>
<h1>Optential</h1>
<p>A new management system<br>for a new management paradigm!</p>
</div>
</div>
<form>
<div class="col1">
<h1>Contact us!</h1>
<input type="text" name="nome" size="50" placeholder="Name"/>
<input type="text" name="email" size="50" placeholder="Email"/>
<input type="text" name="subjet" size="50" placeholder="Subject"/>
</div>
<div class="col2">
<textarea name="message" rows="5" cols="70" placeholder="Message..."></textarea>
Send
</div>
</form>
<div class="info">
<div>
<h1>Mail Us !</h1>
<p>Rua Andrade Corvo, 242</p>
<p>sala 206</p>
<p>4700-204 Braga</p>
<p>Portugal</p>
</div>
<div>
<h1>Call Us !</h1>
<p>+351 987654323</p>
<p>+351 987654323</p>
<p>+351 987654323</p>
</div>
<div>
<h1>Email Us! </h1>
<p>code#angel.com</p>
<p>code_hr#angel.com</p>
<p>code_support#angel.com</p>
</div>
<div>
<h1>Join Us! </h1>
<img src="img/facebook.png">
<img src="img/gplus.png">
<img src="img/twitter.png">
<img src="img/instag.png">
</div>
</div>
</div>
</body>
</html>