I am working on an angular js app that consists of a swipeable carousel populated with data taken from a json array (which is held in a js var). However, I have run into an issue; a large amount of white space appears at the bottom of the page. I cannot seem to determine the cause of this extra white space. I have padding and margins set to 0 in the css. When I inspect the element the white space appears to be outside of the html so it seems almost as if its not even being added by a property of one of my elements.
heres my css but there is a full plunk linked at the bottom as well
html, body, #carousel, #carousel ul, #carousel li {
min-height: 100%;
height: 100%;
padding: 0;
margin: 0;
position: relative;
}
#link{
position: absolute;
bottom:20px;
right:20px;
}
#carousel {
background: white;
width: 100%;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-transform-style: preserve-3d;
}
#carousel ul.animate {
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
#carousel ul {
-webkit-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-moz-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-ms-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-o-transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
transform: translate3d(0%, 0, 0) scale3d(1, 1, 1);
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
}
#carousel ul {
position: relative;
}
#carousel li {
float: left;
width:100%; -webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(0, 0, 0);
}
#carousel li h2 {
color: #fff;
font-size: 30px;
text-align: center;
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.2);
}
#carousel li.pane1 {
background: #fff;
}
#carousel li.pane2 {
background: #fff;
}
#carousel li.pane3 {
background: #fff;
}
#carousel li.pane4 {
background: #fff;
}
.january {
background-color:#ffe0b0;
height:8.33%;
}
.february {
background-color:#b0f7ff;
height:8.33%;
}
.march {
background-color:#e0b0ff;
height:8.33%;
}
.april {
background-color:#ffb9b0;
height:8.33%;
}
.may {
background-color:#b0cfff;
height:8.33%;
}
.june {
background-color:#b0ffe0;
height:8.33%;
}
.july {
background-color:#ffb0f7;
height:8.33%;
}
.august {
background-color:#ceffb0;
height:8.33%;
}
.september {
background-color: #ffb0cf;
height:8.33%;
}
.october {
background-color:#bab0ff;
height:8.33%;
}
.november {
background-color:#f6ffb0;
height:8.33%;
}
.december {
background-color: #b0f6ff;
height:8.33%;
}
.day {
font-family: 'Playfair Display Regular', serif;
color:#000;
text-align: center;
}
.titletext {
font-family: 'Playfair Display Bold', serif;
margin-left:20px;
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
display:inline-block;
}
.title {
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-top: 0px;
text-align: initial;
}
.quote {
font-family: 'Playfair Display Italic', serif;
font-style: italic;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.attribution {
font-family: 'Playfair Display Regular', serif;
font-size:10px;
margin-left:25px;
margin-right: 20px;
line-height:1.2em;
}
.textt {
font-family: 'Playfair Display Regular', serif;
font-size:12px;
margin-top:10px;
margin-left:20px;
margin-right: 20px;
line-height:1.2em;
}
.date {
font-family: 'Playfair Display Regular', serif;
margin-left:15px;
padding-top: 10px;
}
#circleJan {
border-radius: 50%;
border: 3px solid #ffe0b0;
background-color:#ffe0b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleFeb {
border-radius: 50%;
border: 3px solid #b0f7ff;
background-color:#b0f7ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMarch {
border-radius: 50%;
border: 3px solid #e0b0ff;
background-color:#e0b0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleApril {
border-radius: 50%;
border: 3px solid #ffb9b0;
background-color:#ffb9b0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleMay {
border-radius: 50%;
border: 3px solid #b0cfff;
background-color:#b0cfff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJune {
border-radius: 50%;
border: 3px solid #b0ffe0;
background-color:#b0ffe0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleJuly {
border-radius: 50%;
border: 3px solid #ffb0f7;
background-color:#ffb0f7;
width: 20px;
height:20px;
margin-left:15px;
}
#circleAug {
border-radius: 50%;
border: 3px solid #ceffb0;
background-color:#ceffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleSept {
border-radius: 50%;
border: 3px solid #ffb0cf;
background-color:#ffb0cf;
width: 20px;
height:20px;
margin-left:15px;
}
#circleOct {
border-radius: 50%;
border: 3px solid #bab0ff;
background-color:#bab0ff;
width: 20px;
height:20px;
margin-left:15px;
}
#circleNov {
border-radius: 50%;
border: 3px solid #f6ffb0;
background-color:#f6ffb0;
width: 20px;
height:20px;
margin-left:15px;
}
#circleDec {
border-radius: 50%;
border: 3px solid #b0f6ff;
background-color:#b0f6ff;
width: 20px;
height:20px;
margin-left:15px;
}
.bg{}
.main{height:100%}
.heading{
font-family: 'Playfair Display Bold', serif;
text-align:center;
margin-top: 10px;
font-size:18px;
}
.stepOne{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwo{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepThree{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFour{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepFive{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSix{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepSeven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEight{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepNine{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTen{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepEleven{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
.stepTwelve{
font-family: 'Playfair Display Bold', serif;
margin-left:50px;
margin-right:15px;
}
plunker
Your #carousel li is currently being set at a height: 100% which is causing the extra space in your first pane.
I would also strongly advise refactoring your CSS to more concise organization since I noticed a lot of repetitive code. The simplest example of this is .stepOne through .stepTwelve which all contain the same styles. Collapse that into one class and apply it across all the elements needed.
If you're referring to the white space after the pane1 element, you can get rid of of it by setting its height and min-height to initial:
#carousel li.pane1 {
height: initial;
min-height: initial;
background: #fff;
}
Plunker
I should mention, in a lot of instances you're using classes when you should be using IDs. If there's only one .january element for example, set it as an ID rather than a class, as classes are meant for grouping multiple elements. The same goes for your pane[x] classes. You should also merge your identical styles, e.g.
#pane2, #pane3, #pane4 {
background: #fff;
}
Or if you simply give them all the same class:
.pane {
background: #fff;
}
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 making a simple website, and now I'm working on the login page. It looks like this (run in full page, otherwise some parts miss):
html, body {
width: 100%;
height: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
background-color: #2196F3;
height:100%;
overflow: hidden;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:-webkit-autofill:valid {
-webkit-box-shadow: 0 0 0 30px #2196F3 inset;
-webkit-text-fill-color: white !important;
}
.msg {
font-size: 15px;
display: inline-block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
background-color: #ffc107;
border-radius: 2px;
color: white;
margin-bottom: 3em;
}
.spacer {
font-size: 15px;
display: block;
text-align: center;
word-wrap: break-word;
width: 90%;
max-width: 300px;
line-height: 28px;
min-height: 28px;
border-radius: 2px;
color: white;
margin-top: 2em;
margin-bottom: 3em;
}
form {
display: block;
position: absolute;
width: 100%;
height: 80%;
left: 0;
margin-top: -100px;
text-align: center;
animation: swipein 0.5s forwards;
}
#keyframes swipein {
from{top:30%;opacity: .8}
to{top:20%;opacity: 1}
}
input, button {
font-family: "Roboto", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
outline: 0;
color: white;
}
.group {
display: inline-block;
position:relative;
margin-bottom: 20px;
}
.group:nth-of-type(1){
margin-top: 15%;
}
input {
font-size:21px;
padding:10px 10px 10px 5px;
display:block;
width:250px;
border:none;
border-bottom:1px solid white;
border-radius: 0;
background-color: transparent;
color: white;
}
input:focus { outline:none; }
label {
color: white;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color: white ;
}
.bar { position:relative; display:block; width:265px; }
.bar:before, .bar:after {
content:'';
height:2px;
width:0;
bottom:1px;
position:absolute;
background:white;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.bar:before {
left:50%;
}
.bar:after {
right:50%;
}
input:focus ~ .bar:before, input:focus ~ .bar:after {
width:50%;
}
li {
list-style-type: none;
padding: 10px;
}
a {
color: white;
padding: 10px;
}
button {
-webkit-appearance: none;
padding: 12px 65px 12px 65px;
background-color: white;
color: #2196F3;
border: none;
border-radius: 2px;
font-size: 18px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
button:hover {
cursor: pointer;
}
#media screen and (min-width: 800px){
logo {
top: 15%;
}
.logo span {
font-size: 2em;
}
.logo h2 {
font-size: 2.7em;
}
.group:nth-of-type(1){
margin-top: 25%;
}
form {
width: 750px;
top: 20%;
left: calc(50% - 375px);
}
input{
width:350px;
}
.bar {
width:365px;
}
}
<title>connerdassen.ddns.net</title>
<script>
function test() {
var button = document.getElementById('button');
button.click();
alert('Click event simulated!');
}
</script>
<body id='body'>
<form id="form" method="POST" action="http://connerdassen.ddns.net/login.php">
<p>
</p><div class="group">
<input id='input' type="text" name="uid" required="">
<span class="bar"></span>
<label>Username</label>
</div><p>
</p><div class="group">
<input id='input' type="password" name="pwd" required="">
<span class="bar"></span>
<label>Password</label>
<li><a href='/signup'>Sign up</a></li>
<button>Log In</button>
</div><br>
</form>
<script>
if((window.location.href).indexOf('?') != -1) {
var afterURL = (window.location.href).substr((window.location.href).indexOf('?') + 1);
var msg = (afterURL.split('msg='))[1];
msg = decodeURIComponent(msg);
}
if(typeof msg !== "undefined" && msg !== "undefined" && msg !== ""){
var form = document.getElementById("form");
var oldForm = form.innerHTML;
form.innerHTML = '<div class="spacer"></div><div class="msg"><span>' + msg + '</span></div>' + oldForm;
}
</script>
</body>
As you see the labels 'Username' and 'Password' are animated up when selecting the input. But when google chrome auto-fills them, the username is automatically animated upwards, but the password label stays, as you can see here. After clicking any key on the keyboard/ mouse, the label is animated up immediately. I want the password to go up immediately. How would I do this?
I'm working on this web page at http://helpir-staging.herokuapp.com. It isn't perfect but it scrolls fine on Safari. In Firefox it only scrolls using the arrow keys (no mouse scroll), and in Chrome I don't get any scroll at all.
There must be something horrifically wrong in my CSS. Any help would be really appreciated.
I'm using bootstrap, bootcards, angularjs and angular-dynamic-layout.
app.scss:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";
$hero-image: "../assets/images/slider.jpg";
#import '../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap';
#import '../bower_components/bootstrap-social/bootstrap-social.scss';
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome';
// App-wide Styles
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// KAREL CSS
$heynay-background: #FAFAFA;
$heynay-peach: #f27949;
$helpir-gray: rgba(255,255,255,0.5);
html, body {
height: 100%;
width: 100%;
// background-color: blue;
}
h1 {
font-size: 2em;
}
p {
font-size: 0.85em;
}
hr {
display: none;
}
body {
font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
}
.alert {
margin: 10px 0px;
}
.margined {
margin: 5px;
}
.navbar-default,
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-text
{
color: #eeeeee;
background-color: transparent;
}
.footer > p,
.footer > p > a,
{
color: #888888;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a.active,
.navbar-default .navbar-nav>li>a:focus ,
.navbar-default .navbar-nav>li>a>p.active ,
.navbar-default .navbar-nav>li>a>p:focus {
border-radius: 3px;
color: #111111;
background-color: $helpir-gray;
}
#profile-button {
margin: 0px;
padding: 12px 5px;
height: 50px;
}
#profile-button:hover,
#profile-button.active {
border-radius: 3px;
color: white;
background-color: $heynay-peach;
}
.navbar-default .navbar-nav>li>a>p {
color: white;
background: none;
margin: 0px;
padding: 0px;
}
.navbar-default .navbar-nav>li>a>p>img {
height: 30px;
width: 30px;
padding: 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: white;
}
.btn-default {
color: #000;
background-color: $heynay-peach;
}
.btn-default {
color: #f00;
background-color: $heynay-peach;
}
.btn-default[disabled] {
background-color: #9B9B9B;
}
.btn-default:hover {
background-color: $heynay-background;
color: white;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 0px solid transparent;
border-radius: 4px;
}
.icon-brand {
color: $heynay-background;
}
.heynay-legal {
text-align: left;
}
.panel-default > .panel-heading {
background: $heynay-background;
}
.panel-title > a,
.panel-title > a {
text-decoration: none;
color: white;
}
.panel-title > a:hover,
.panel-title > a.active {
text-decoration: none;
color: black;
}
[ng-click],
[data-ng-click],
[x-ng-click] {
cursor: pointer;
}
// GLOBAL STYLES
footer {
height: 60px;
text-align: center;
background-color: $heynay-background;
padding-top:20px;
padding-bottom:20px;
font-size: 0.8em;
}
#heynay-logo {
font-size: 25px;
color: #000000;
}
.navbar-toggle {
background-color: $heynay-peach;
border-color: transparent;
}
.desktop-footer {
display : none;
}
.mobile-footer {
display : inline;
}
// not sure if tyhis is used.
.general-section {
text-align: left;
padding: 50px 10px;
min-height: 75%;
font-size: 0.9em;
}
.floating-pane-holder {
display: none;
z-index:1000;
color: white;
background-color: $heynay-peach;
position: fixed;
height: 50px;
width: 90px;
top: 100px;
left: 48%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.floating-pane-content {
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
position: absolute;
}
#media(min-width: 450px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 0.95em;
border-color: transparent;
}
h1 {
font-size: 3em;
}
p {
font-size: 1em;
}
hr {
display: block;
}
}
#media(min-width:1000px) {
.navbar-default,
.navbar-default .navbar-nav>li>a,
.footer > p,
.footer > p > a
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
font-size: 1em;
border-color: transparent;
}
#heynay-logo {
font-size: 35px;
}
}
// TABLES
.desktop-table {
display : none;
}
.mobile-table {
display : inline;
}
// TABLES END
// MODAL BEGIN
.ngdialog.ngdialog-theme-default
.ngdialog-content {
width: 700px;
}
// MODAL END
#media(min-width:750px) {
.navbar {
padding: 20px 0;
background-color: transparent;
-webkit-transition: background .35s ease-in-out,padding .5s ease-in;
-moz-transition: background .35s ease-in-out,padding .5s ease-in;
transition: background .35s ease-in-out,padding .5s ease-in;
border-color: transparent;
}
.desktop-footer {
display : inline;
}
.mobile-footer {
display : none;
}
.top-nav-collapse {
padding: 0;
background-color: $heynay-background;
}
footer {
height: 60px;
font-size: 1em;
bottom:0;
height:2em;
}
.general-section {
padding: 100px 10px;
font-size: 1em;
}
.navbar-default .navbar-nav>li>p {
padding: 15px;
margin: 0px;
border-color: transparent;
}
}
#media(min-width: 900px) {
.desktop-table {
display : inline;
}
.floating-pane-holder {
top: 150px;
left: 10px;
transform: none;
-webkit-transform: none;
}
.mobile-table {
display : none;
}
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
// SPINNER
.spinner {
margin: 100px auto 0;
margin-bottom: 100px;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: $heynay-background;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
// Prevent first frame from flickering when animation starts
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
#-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
#keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
// Component styles are injected through grunt
// injector
#import 'admin/admin.scss';
#import 'main/main.scss';
#import '../components/category-tile/category-tile.scss';
#import '../components/footer/footer.scss';
#import '../components/modal/modal.scss';
#import '../components/oauth-buttons/oauth-buttons.scss';
// endinjector
category-tile.css
// dynamic layout bits...
#media (min-width: 1000px) {
[dynamic-layout] {
width: 1000px;
margin-top: 25px;
}
.dynanamic-layout-col-4 {
width: 250px;
margin-top: 20px;
}
.dynamic-layout-col-8 {
width: 500px;
}
}
#media (min-width: 900px) {
[dynamic-layout]{
width: 900px;
margin-top: 20px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (min-width: 600px) and (max-width: 900px){
[dynamic-layout]{
width: 600px;
margin-top: 8px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 600px;
}
}
#media (max-width: 600px){
[dynamic-layout]{
width: 300px;
margin-top: 6px;
}
.dynamic-layout-col-4{
width : 300px;
}
.dynamic-layout-col-8{
width : 300px;
}
}
.dynamic-layout-item {
padding: 10px;
width: auto;
}
.move-items-animation{
transition-property: left, top;
transition-duration: .25s;
transition-timing-function: ease-in-out;
}
.dynamic-layout-item-parent.ng-enter{
transition: .25s ease-in-out;
opacity:0;
}
.dynamic-layout-item-parent.ng-enter.ng-enter-active{
opacity:1;
}
.dynamic-layout-item-parent.ng-leave{
transition: .5s ease-in-out;
opacity:1;
}
.dynamic-layout-item-parent.ng-leave.ng-leave-active{
opacity:0;
}
[dynamic-layout]{
// float: left;
position: absolute;
// overflow: hidden;
// height: 1000px;
}
.container-fluid{
position: absolute;
left: 50%;
transform: translate(-50%);
height:auto;
}
.title {
// margin-bottom: 50px;
}
main.css
.thing-form {
margin: 20px 0;
}
#banner {
border-bottom: none;
margin-top: -45px;
}
#banner h1 {
font-size: 60px;
line-height: 1;
letter-spacing: -1px;
}
.hero-unit {
background-image: url("#{$hero-image}");
position: relative;
# padding: 30px 15px;
color: #F5F5F5;
# background: #4393B9;
background-size:cover;
background-repeat: no-repeat;
color: #fff;
cursor: default;
padding: 1em 0 0 0;
}
.header-text {
text-align: center;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
cursor: default;
position: relative;
}
.navbar-text {
margin-left: 15px;
}
.privacy-terms {
margin-top: 75px;
}
.support-section {
padding-top: 150px;
text-align: center;
min-height: 85%;
}
#media(min-width: 400px) {
.intro-section {
// background: url("#{$hero-image}") no-repeat 98% 30%;
}
}
#media(min-width: 750px) {
.intro-section {
padding-top: 150px;
}
}
Your script vendor (idk what it is) is breaking it, in chrome under inspect I see this:
body, html {
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
change hidden to visible and it works, at least in chrome. initialize your custom css file after the vendor script and the css property should be fixed.
I have created a small call back popup on the footer
http://bit.ly/1MThJ5w
The problem is when I click the text box it disappeared. I don't know how to stop that. Does anyone has any ideas on how to fix this? Thanks.
It should only close and open when I click- CALL BACK
And also the close and open arrows are not showing as well
My code snippet:
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function() {
if($('.foot').hasClass('slide-up')) {
$('.foot').addClass('slide-down', 1000);
$('.foot').removeClass('slide-up');
} else {
$('.foot').removeClass('slide-down');
$('.foot').addClass('slide-up', 1000);
}
});
});
CSS CODE:
/*Contact Styles
------------------------------------*/
.contact{
width:28%;
float:left;
padding-left:20px;
background:#001832;
color:#FFFFFF;
padding-top:15px;
padding-bottom:12px;
}
.contact h2{
font-size:27px;
font-family:impact;
font-weight:500;
color:#fff;
}
.contact form{
margin-top:6px;
}
.contact label{
font-size:10px;
}
.contact input{
width:210px;
color:#666;
}
.contact a{
text-decoration:none;
text-align: center;
background: none repeat scroll 0% 0% #0060A3;
color: #FFF;
display: inline-block;
padding: 12px 37px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
}
.contact .btn{
text-decoration:none;
text-align: center;
background: #0060A3;
color: #FFF;
display: inline-block;
padding: 10px 20px;
margin-top: 5px;
font-family: arial;
font-weight: 700;
margin-bottom:15px;
font-size:20px;
border-radius:0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*Slider footer*/
.foot {
position:fixed;
width: 300px;
z-index: 10000;
text-align:center;
height: 500px;
font-size:18px;
color: #000;
display: flex;
justify-content: center; /* align horizontal */
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
bottom: -185px;
}
.slide-up
{
bottom: -445px !important;
}
.slide-down
{
bottom: -185px !important;
}
.call_back{
background:#405E51;
padding:10px;
margin-bottom:10px !important;
color:#fff;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
#closer{
background:none;
width:10px;
margin-top: -25px;
margin-right: 15px;
float:right;
}
Your click event is bound to the wrong element. Change it to the "call_back" class instead.
Change this:
$('.foot').click(function() {
// your code
});
To this:
$('.call_back').click(function() {
// your code
});
I have a div set up on my page that has an overlay appear on it when the user hovers over the div. On other websites, for example on here: http://www.elpassion.com have a really nice effect that also eases the background of the div behind. I cannot seem to get this to work as effectively as i have seen and was looking for some support and guidance.
https://jsfiddle.net/Lopcnsuq/
HTML
<div class="portfolio-project">
<div class="portfolio-project-image">
<ul class="portfolio-project-image">
<li>
<div class="portfolio-project-image-one"></div>
<a href="images/flyer_mock_up.jpg" class="html5lightbox" data-width="853" data-height="480" title="">
<div class="portfolio-overlay">
<div class="bt4">Marks & Spencer</div>
<div class="bt5">Summer Fete A5 Flyers</div>
</div>
</a>
</li>
</ul>
</div>
</div>
CSS
.portfolio-project {
width: 32%;
height: 373px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
margin-left:15px;
float:left;
}
.portfolio-project-image{
width: 100%;
height: 373px;
}
.portfolio-project-image-one{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
}
.portfolio-project-image-one:hover{
width: 100%;
height: 373px;
background-image:url(../images/flyer_mock_up.jpg);
background-position:center;
display:block;
}
.portfolio-overlay {
width:100%;
height:100%;
opacity: 0.75;
position:absolute;
background-color:black;
transition: top 0.3s ease-in-out;
display:block;
-webkit-transition: top 0.3s ease-in-out;
transition: top 0.3s ease-in-out;
}
.portfolio-overlay div {
position:relative;
display:inline-block;;
}
ul.portfolio-project-image {
list-style: none;
width:100%
}
ul.portfolio-project-image li {
position: relative;
display: inline-block;
width:100%;
height: 100%;
overflow: hidden;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;
}
li:hover .portfolio-overlay {
top: 0;
display:block;
transition: 2s;
-moz-transition: 2s;
-webkit-transition: 2s;}
.bt4 {
text-align: center;
margin-top: 160px;
font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 14px;
font-weight: 500;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
}
.bt5 {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
}
.bt5 a {
text-align: center;
font: 100 14px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 16px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
text-decoration:none;
}
.bt6 {
text-align: center;
font: 200 12px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 30px;
font-weight: 200;
color:#FFF;
width:100%;
height:10px;
margin-left:auto;
margin-right:auto;
margin-top: 30px;
}
I changed your fiddle a little bit so that your background-image zooms slightly when you hover the image as shown in the elpassion-example.
You can zoom/stretch the background-image of a div on hover with the following css:
.portfolio-project-image:hover {
background-size: 102% 102%;
background-repeat: no-repeat;
background-position: center center;
}
You can find your updated fiddle with an example-background-image at the following link: https://jsfiddle.net/Lopcnsuq/9/