Highslide control button - javascript

I wanted to ask for help with Highslide Gallery. First I had problems with control bar, but I finished it and now I was left with last problem. In my control bar when you move mouse on "Pause" it's inactive and works as "Next" and starting from it every button is like "Next" works as "Move" in other words it's like hyperlinks moved one position to the left.
It would work if only every button starting with "Next" moved 30px to the right, but no matter what I try it doesn't work.
/* Ajax */
.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;
top:85%;
}
.highslide {
outline: none;
text-decoration: none;
}
.highslide img {
border: 2px solid silver;
}
.highslide:hover img {
border-color: gray;
}
.highslide-active-anchor img, .highslide-active-anchor:hover img {
border-color: black;
}
.highslide-image {
border-width: 2px;
border-style: solid;
border-color: white;
background: gray;
}
.highslide-wrapper, .rounded-white {
background: white;
}
.highslide-image-blur {
}
.highslide-caption {
display: none;
border-top: none;
font-size: 1em;
padding: 5px;
background: white;
}
.highslide-heading {
display: none;
font-weight: bold;
margin-bottom: 0.4em;
}
.highslide-dimming {
position: absolute;
background: black;
}
.highslide-loading {
display: block;
color: black;
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
border: 1px solid white;
background-color: white;
padding-left: 22px;
background-image: url(../javascript/images/loader.white.gif);
background-repeat: no-repeat;
background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}
/*background: url(javascript/images/controlbar-white.gif)*/
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
border-radius: 5px;
width: 210px;
height: 36px;
background: url(javascript/images/controlbar-white.gif) 0px -90px no-repeat;
margin: 0px 0px 0px 0px;
}
.highslide-controls ul {
border-radius: 5px;
width: 210px;
position: relative;
left: 0px;
height: 30px;
list-style: none;
margin: 0;
padding: 0;
background: url(javascript/images/controlbar-white.gif) 0px -30px no-repeat;
}
.highslide-controls li {
height: 30px;
width: 30px;
float: left;
padding: 0px 0;
margin:0;
list-style: none;
}
.highslide-controls a {
background-image: url(javascript/images/controlbar-white.gif) 0px -90px no-repeat;
display: block;
float: left;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a.disabled span {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
cursor: pointer;
}
/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0px -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-pause a.disabled{
background-position: -60px -60px !important;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -30px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}
I didn't change anything in Java Script file, only worked with this part of CSS file.
Firefox for line with "Pause" button:
<li style="display: none;" class="highslide-pause"><span>Zatrzymaj</span></li>
When working buttons:
<li class="highslide-next"><span>Następne</span></li>
Sorry for problem and thanks for any help with it.
Sorry, mistake was on my side. I should only change line:
this.btn.pause.style.display = 'none';
and it started displaying "Pause" like it should but only for first open photo :/
After changing all 'none' to ' ' for "Pause" in java script it works.

Related

Custom select (Nice select) with custom scrollbar (mCustomScrollbar)

I'm new here and I'm facing an issue which I can't fix.
I have a custom select using nice select which is working perfectly, then I added mCustomScrollbar which is working fine too, the issue is when I want to use the keyboard only, I first focus using TAB and then pressing the down arrow (or spacebar, enter, up arrow) where it displays the options, once you keep using the arrow to move down the scrollbar is not moving with the cursor showing the rest of the options like if you use the mouse, I would like to find a way of fixing this so that when a user is using the keyboard it can see all the options.
Codepen: https://codepen.io/anon/pen/MPPybJ
HTML
<section class="form-container">
<form action="" method="" class="tn-general" novalidate>
<fieldset>
<div class="row">
<div class="col-md-5">
<div class="form-group form-group-floating-label">
<div class="custom-select">
<select required>
<option value="" disabled selected="selected" hidden>Seleccionar</option>
<option value="1">Soltero</option>
<option value="2">Casado</option>
<option value="3">Divorciado</option>
<option value="4">Viudo</option>
<option value="5">Concubino</option>
<option value="">Casado 1</option>
<option value="">Casado 2</option>
<option value="">Casado 3</option>
<option value="">Casado 4</option>
<option value="">Casado 5</option>
<option value="">Casado 6</option>
<option value="">Casado 7</option>
<option value="">Casado 8</option>
<option value="">Casado 9</option>
<option value="">Casado 10</option>
<option value="">Casado 11</option>
<option value="">Casado 12</option>
<option value="">Casado 13</option>
<option value="">Casado 14</option>
<option value="">Casado 15</option>
<option value="">Casado 16</option>
<option value="">Casado 17</option>
<option value="">Casado 18</option>
<option value="">Casado 19</option>
<option value="">Casado 20</option>
</select>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</section>
CSS
/* Font Size*/
$font-size-small: 0.8em; /*12px*/
$font-size-minismall: 0.813em; /*13px*/
$font-size-normal: 0.9em; /* 14px */
$font-size-main-mininormal: 0.938em; /* 15px */
$font-size-main-normal: 1em; /* 16px */
$font-size-smedium: 1.115em; /* 17px */
$font-size-medium: 1.125em; /* 18px */
$font-size-xmedium: 1.25em; /* 20px */
$font-size-xm-medium: 1.375em; /* 22px */
$font-size-big: 1.5em; /*24px*/
$font-size-xbig: 1.65em; /* 26px */
$font-size-mxlarge: 1.9em; /* 30px */
$font-size-mxxlarge: 2em; /* 32px */
$font-size-mxxxlarge: 2.125em; /* 34px */
$font-size-xlarge: 2.5em; /* 40px */
$font-size-large: 2.75em; /*44px*/
$font-size-xxlarge: 3em; /*48px*/
$font-size-xxxlarge: 50px; /* 50px */
$font-size-ultralarge: 3.75em; /* 60px */
/* Font Type*/
$font-type: "opensans-regular";
$font-type-light: "opensans-light";
$font-type-semibold: "opensans-semibold";
$font-type-bold: "opensans-bold";
$font-type-2: "urwgeometric-regular";
$font-type-2-light: "urwgeometric-light";
$font-type-2-thin: "urwgeometric-thin";
$font-type-2-semibold: "urwgeometric-semibold";
$font-type-2-bold: "urwgeometric-bold";
$color-white: #ffffff;
$color-black: #000000;
/* Gray Color*/
$color-gray: #eeeeee;
$color-gray-1:#C8C8C8;
$color-message-gray: #999fa5;
$color-soft-gray: #aeaeae;
$color-soft-gray-2: #f3f3f3;
$color-soft-gray-3: #c1c1c1;
$color-soft-gray-4: #aaa;
$color-soft-gray-5: #777777;
$color-soft-gray-6: #969696;
$color-soft-gray-7: #f9f9f9;
$color-soft-gray-8: #dddddd;
$color-soft-gray-9: #f0f0f0;
$color-soft-gray-10: #e3e3e3;
$color-dark-gray: #666666;
$color-dark-gray-0: #333333;
$color-dark-gray-2: #434343;
$color-dark-gray-3: #535353;
$color-dark-gray-4: #626262;
$color-dark-gray-5: #d4d4d4;
$color-dark-gray-5: #c9c9c9;
$color-dark-gray-6: #a6a6a6;
$color-dark-gray-7: #555555;
$color-dark-gray-8: #303030;
$color-dark-gray-9:#d8d8d8;
/* Orange Color*/
$color-soft-orange: #f9a885;
$color-super-soft-orange: #FFF8E4;
$color-ui-orange: #ff6600;
$color-ui-orange-2: #ff5a00;
$color-ui-orange-3: #FF6800;
$color-orange: #f56122;
$color-orange-2:#ef5816;
$color-orange-3:#ed5927;
$color-orange-3: #ff7022;
$color-orange-4: #ff5d00;
$color-orange-5: #ef5411;
$color-orange-6:#ff8b1d;
$color-orange-7:#ff8400;
$color-orange-8: #FFA500;
$color-dark-orange: #da480a;
/* Red Color*/
$color-red: #e14421;
$color-red-2: #de0000;
$color-red-3 :#ff6464;
/* Blue Color*/
$color-blue: #3F525F;
$color-dark-blue: #2c4854;
/* Green Color*/
$color-green: #009a63;
$color-green-2: #009900;
$color-green-3: #00d095;
/*Yellow Colors*/
$color-soft-yellow: #fcf8e3;
$color-soft-yellow-2: #fff5d8;
$color-yellow-1: #ffbf00;
$color-yellow-2: #fad054;
/*Gradient Class Colors*/
.tn-gradient-1 {
background-image: linear-gradient(119deg, #ff6600,#ffcb00);
}
.tn-general {
.custom-checkbox {
.custom-control-indicator {
border-radius: 50%;
border: 0.15rem solid $color-soft-gray-3;
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
.custom-control-description {
padding-top: 5px;
padding-left: 10px;
}
.custom-control-input:checked~.custom-control-indicator {
color: white;
background-color: $color-ui-orange;
border-color: $color-ui-orange;
background-size: 10px;
}
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #fff;
}
}
.custom-checkbox-nobg {
.custom-control-indicator {
border-radius: 25%;
border: 0.05rem solid $color-soft-gray;
background-color: white;
width: 1.5rem;
height: 1.5rem;
}
.custom-control-description {
padding-top: 5px;
padding-left: 10px;
}
.custom-control-input:checked ~ .custom-control-indicator {
color: $color-dark-gray;
background-color: white;
border-color: $color-dark-gray;
background-size: 10px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E");
}
.custom-control-input:focus ~ .custom-control-indicator {
box-shadow: 0 0 0 1px #fff, 0 0 0 3px #fff;
}
}
.tn-btn-main {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-orange-3;
border-radius: 50px;
border: 0;
color: white;
font-family: $font-type-semibold;
font-size: $font-size-main-normal;
line-height: 1;
text-align: center;
width: 200px;
height: 42px;
padding: 0;
margin: 20px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
background-color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-msg {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-ui-orange-3;
border-radius: 5px;
border: 0;
color: white;
font-family: $font-type-semibold;
font-size: $font-size-medium;
line-height: 1;
padding: 10px 15px;
margin: 5px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
background-color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-second {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: $color-white;
border: 2px solid $color-ui-orange;
border-radius: 50px;
color: $color-ui-orange;
font-family: $font-type-semibold;
font-size: $font-size-main-normal;
line-height: 1;
width: 200px;
height: 42px;
padding: 0;
text-align: center;
margin: 20px 0;
display: inline-block;
vertical-align: middle;
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
transition-duration: 0.3s;
transition-property: color, background-color;
&.tn-mt-3 {
margin-top: 30px;
}
&:hover {
border: 2px solid $color-orange-7;
background-color: $color-white;
color: $color-orange-7;
}
&:focus {
outline: 0;
}
&.disabled {
opacity: 0.6;
color: $color-dark-gray-7;
cursor: default;
font-family: "opensans-regular";
}
}
.tn-btn-collapse {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: $color-orange-5;
font-size: $font-size-normal;
font-family: $font-type-semibold;
background-color: $color-soft-gray-9;
width: 100%;
border: 0 none;
padding: 0.8rem;
position: relative;
&:before {
outline: 0;
display: inline-block;
content: "";
background: url("../images/buttons/tn-arrow-collapse.png") center center no-repeat;
height: 12px;
width: 12px;
position: relative;
top: 2px;
right: 5px;
}
&:focus {
outline: 0;
box-shadow: none;
}
}
.tn-btn-collapse[aria-expanded="true"] {
&:before {
background: url("../images/buttons/tn-arrow-collapsed.png") no-repeat;
}
}
/* Black Check */
.check-icon {
list-style-type: none;
li {
background: url("../images/icons/check-small-2.png") no-repeat 0 4px;
padding-left: 20px;
margin: 5px 0;
font-family: $font-type;
line-height: 1;
color: $color-dark-gray;
}
}
.tn-form-wrapper {
p {
margin-bottom: 0;
}
}
.tn-form-title {
h1 {
color: $color-dark-gray-8;
font-family: $font-type;
font-weight: bold;
font-size: $font-size-mxxxlarge;
padding-bottom: 15px;
}
}
// Floating labels
.form-group.form-group-floating-label {
position: relative;
&:not(:first-child) {
margin-top: 40px;
}
label {
font-size: 15px;
font-weight: 600;
color: $color-soft-gray-4;
display: block;
}
.form-control {
font-family: 'urwgeometric-regular';
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-dark-gray-0;
width: 100%;
border: 0;
border-bottom: 1px solid #CCC;
border-radius: 0;
padding-top: 0;
padding-left: 0;
outline: 0;
&.invalid {
border-color: $color-red-2;
}
&:focus {
border-color: $color-ui-orange;
}
&:focus + .form-control-placeholder,
&:valid + .form-control-placeholder {
font-size: $font-size-main-normal;
transform: translate3d(0, -100%, 0);
}
&:disabled + .form-control-placeholder {
font-size: $font-size-main-normal;
transform: translate3d(0, -100%, 0);
}
&:disabled + .form-control-placeholder.form-control-placeholder-no-input {
transform: none;
}
&:disabled {
background-color: transparent;
cursor: not-allowed;
border-color: $color-soft-gray-10;
}
}
.form-control-placeholder {
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-soft-gray-4;
position: absolute;
top: 0;
left: 0;
padding-top: 5px;
transition: all 200ms;
cursor: text;
}
.form-invalid-message {
font-size: $font-size-normal;
font-weight: 600;
color: $color-red-2;
max-width: 100%;
margin-top: 4px;
margin-bottom: 0;
position: absolute;
&.position-relative {
position: relative;
}
}
&.form-group-single-inputs {
input {
display: inline-block;
height: 24px;
font-size: $font-size-xbig;
text-align: center;
max-width: 20px;
padding: 0;
margin-top: 17px;
margin-right: 7px;
vertical-align: bottom;
&:valid {
border-color: transparent;
}
&:invalid {
border-color: #CCC;
}
&:focus {
border-color: $color-ui-orange;
}
&.invalid {
border-color: $color-red-2;
}
}
}
// custom select dropdown
select {
display: none;
}
.custom-select {
display: block;
background: transparent;
border: 0;
padding: 6px 0;
position: relative;
.nice-select {
font-family: 'urwgeometric-regular';
font-size: $font-size-xmedium;
font-weight: 600;
color: $color-dark-gray-0;
background: url('../../Content/images/buttons/chevron-down-arrow-light-gray.png') no-repeat right;
background-size: 15px;
border-bottom: 1px solid #CCC;
padding-bottom: 7px;
cursor: pointer;
&:focus {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
&:active,
&:hover,
&.removeFocus {
outline: none;
}
& span.current {
color: $color-soft-gray-4;
}
&.open {
border-color: $color-ui-orange;
.list {
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
}
}
&.invalid {
border-color: $color-red-2;
}
&.disabled {
border-color: $color-soft-gray-10;
pointer-events: none;
& span {
color: $color-soft-gray-10;
}
}
&.optionSelected {
background: url('../../Content/images/buttons/chevron-down-arrow-dark-gray.png') no-repeat right;
background-size: 15px;
& span.current {
color: $color-dark-gray-0;
}
}
// List and options
.list {
max-height: 400px;
font-size: $font-size-medium;
font-weight: 600;
background-color: white;
color: $color-dark-gray-0;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1;
margin-top: 8px;
border: 1px solid #e5e5e5;
border-radius: 6px;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
overflow: hidden;
transition: all .2s cubic-bezier(0.5, 0, 0, 1.25), opacity .15s ease-out;
&:hover .option:not(:hover):not(.selected) {
background-color: transparent;
}
}
.option {
font-weight: bold;
font-size: 18px;
height: 70px;
padding: 0 20px;
display: flex;
align-items: center;
cursor: pointer;
outline: none;
transition: all 0.2s;
&:hover,
&.focus,
&.selected.focus {
background-color: $color-gray;
}
&.selected {
background-color: $color-gray;
}
&.disabled {
display: none;
}
}
}
}
// Input checkbox
.form-input-checkbox {
// Remove the original ones
.styled-checkbox {
position: absolute;
opacity: 0;
// Checbox label
& + label {
display: inline;
position: relative;
padding: 0;
cursor: pointer;
// Add styled chexbox
&:before {
content: '';
display: inline-block;
width: 22px;
height: 22px;
background: white;
vertical-align: text-bottom;
margin-right: 18px;
border: 2px solid $color-dark-gray-0;
border-radius: 4px;
}
}
// Box checked
&:checked + label:before {
content: '';
background: url('../../Content/images/icons/select-checkbox-checked.png') no-repeat right;
background-size: contain;
border: 0;
border-radius: 0;
}
}
}
.custom-radio {
& .custom-control-label {
cursor: pointer;
margin-bottom: 0;
&::before {
content: '';
border-radius: 50%;
display: inline-block;
width: 24px;
height: 24px;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: url('../../Content/images/icons/radio-button-unselected.svg') center center no-repeat;
vertical-align: top;
cursor: pointer;
margin-right: 10px;
}
&::after {
content: '';
display: block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center center;
background-size: 50% 50%;
position: absolute;
top: 0;
}
}
& .custom-control-input:not(:checked):focus ~ .custom-control-label::before {
outline-width: 2px;
outline-style: solid;
outline-color: Highlight;
}
& .custom-control-input:checked ~ .custom-control-label::before {
background: url('../../Content/images/icons/radio-button-selected.svg') center center no-repeat;
}
& .custom-control-input:checked ~ .custom-control-label::after {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
}
}
// input[type="radio"] {
// & + label span {
// display: inline-block;
// width: 24px;
// height: 24px;
// vertical-align: top;
// background: url('../../Content/images/icons/radio-button-unselected.svg') center center no-repeat;
// cursor: pointer;
// margin-right: 10px;
// }
//
// &:checked + label span {
// background: url('../../Content/images/icons/radio-button-selected.svg') center center no-repeat;
// }
// }
}
// General errors
.general-invalid-data {
font-size: 15px;
font-weight: 600;
line-height: 1;
color: $color-red-2;
}
// Remove box-shadow from inputs with type text
input[type="text"] {
box-shadow: none;
}
}
JS
// initialize custom select
$('select').niceSelect();
// add outline only when using TAB
let niceSelect = $('.nice-select');
niceSelect.on('click', function()
{
$(this).addClass('removeFocus');
});
niceSelect.on('blur', function()
{
if($(this).hasClass('removeFocus'))
{
$(this).removeClass('removeFocus');
}
});
// add class when choosing an option
$('.list .option:not(.disabled)').on('click keypress', function()
{
$(this).closest('.nice-select').addClass('optionSelected');
});
// remove mCustomScrollbar tabindex
setTimeout(() => {
$('.mCustomScrollBox').prop('tabindex', '-1');
}, 1000);
$('.nice-select .list').mCustomScrollbar({
theme: 'minimal-dark'
});
Thank you!

I had same task. And I did it like this
script:
$('.jsNiceSelect').niceSelect();
$(document).on('mouseenter', '.nice-select .mCSB_scrollTools', function(event) {
var $dropdown = $(this).parents('.nice-select');
$dropdown.addClass('open_scroll');
});
$(document).on('click.nice_select', function(event) {
if ($(event.target).closest('.nice-select').length === 0) {
$('.nice-select').removeClass('open_scroll');
setTimeout(function() { $('.nice-select').removeClass('open'); }, 50);
}
});
$(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
$('.nice-select').removeClass('open_scroll open');
setTimeout(function() { $('.nice-select').removeClass('open'); }, 50);
});
css:
...
&.open {
here standard styles nice select
}
here add this:
&.open_scroll{
z-index: 4;
&:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.list {
opacity: 1;
pointer-events: auto;
-webkit-transform: scale(1) translateY(0);
-ms-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
}
...

How to make this close?

I made this window for my site but I'm horrible at Javascript and I don't know how I would make the window close when they click "Ok" or "x". Can you add some javascript to make it closeable? Here's my code:
https://jsfiddle.net/3eap0vus/
.test *,
.test *:after,
.test *:before { -moz-box-sizing: content-box !important; -webkit-box-sizing: content-box !important; box-sizing: content-box !important }
.test {
width: 350px;
z-index: 1001;
}
.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons a {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
}
.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
border-color: #13252F;
border-width: 7px;
}
.test .test_Title {
font-size: 16px;
font-weight: bold;
color: #F6F5F5;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #444444;
padding: 12px 15px;
line-height: 1;
vertical-align: middle;
}
.test .test_BodyOuter {
background: #E7EDEF;
}
.test .test_Body {
color: #44484A;
padding: 20px;
border-top-color: #000;
border-bottom-color: #FFF;
}
.test .test_ButtonsOuter {
background: #E7EDEF;
padding: 10px 5px 10px 10px;
}
.test .test_Buttons:before,
.test .test_Buttons:after { content: "\0020"; display: block; height: 0; visibility: hidden; font-size: 0 }
.test .test_Buttons:after { clear: both }
.test .test_Buttons { *zoom: 1 }
.test .test_Buttons a {
font-weight: bold;
color: #FFF;
text-shadow: 1px 0px 2px #222;
padding: 10px 15px;
}
.test .test_Buttons a:hover {
background: #224467;
color: #FFF
}
.test a.test_Close {
position: absolute;
right: 6px;
top: 0px;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 21px;
color: #666
}
.test a.test_Close:hover {
}
.test .test_Title a.test_Close {
color: #E7EDEF;
}
.test .test_Title a.test_Close:hover {
}
.testOverlay {
background: #666;
z-index: 1000;
width: 100%;
height: 100%;
}
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.test .test_Title {
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.test .test_BodyOuter {
border-left-style: solid;
border-right-style: solid;
}
.test .test_NoTitle {
border-top-style: solid;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
.test .test_NoButtons {
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.test .test_Body {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-style: groove;
overflow: auto;
}
.test .test_NoTitle .test_Body {
border-top: none;
}
.test .test_NoButtons .test_Body {
border-bottom: none;
}
.test .test_Icon {
background-repeat: no-repeat;
background-position: 20px 20px;
padding-left: 88px;
min-height: 48px;
_height: 85px;
}
.test .test_Confirmation { background-image: url('https://i.imgsafe.org/b792cc6d45.png') }
.test .test_Error { background-image: url('https://i.imgsafe.org/b78fb8bcdb.png') }
.test .test_Information { background-image: url('https://i.imgsafe.org/b79592c464.png') }
.test .test_Question { background-image: url('https://i.imgsafe.org/b797dc528f.png') }
.test .test_Warning { background-image: url('https://i.imgsafe.org/b79a3e68af.png') }
.test .test_ButtonsOuter {
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.test .test_Buttons a {
white-space: nowrap;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 5px;
min-width: 60px;
float: right;
_width: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #006DCC;
*background-color: #0044CC;
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(to bottom, #0088CC, #0044CC);
background-repeat: repeat-x;
border-color: #0044CC #0044CC #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.test .test_Buttons_Centered .test_Buttons {
display: table;
margin: 0 auto;
text-align: center;
}
.test .test_Buttons_Centered a {
zoom: 1;
*display: inline;
}
<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div><div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;"><h3 class="test_Title">Information×</h3><div class="test_BodyOuter"><div class="test_Body test_Icon test_Information"><div style="padding-top: 14px;"><strong>Test<br></strong></div></div></div><div class="test_ButtonsOuter"><div class="test_Buttons">Ok</div></div></div>

Perhaps it's counter-intuitive, but while in the UI you think of this as a "window" to be "closed", what you have is just a DIV like any other, but with special stylesheet settings to act like a window. So instead of worry about closing it, you just need to hide it when the user clicks the X or whatever.
(If you really want to, you could actually remove the DIV from the page's DOM, but I know of no reason to do that.)
How exactly to do that depends on some things - like jQuery or raw javascript, and does it matter whether the "closed window" would still occupy layout space. (You've shown a lot of css, so apologies but I don't have time just now to dig through it all and fully understand your layout.)
But hopefully it points you in the right direction to know that you need to get the element for the window's DIV ($(".testOverlay") if you're using jQuery) and then apply a style of either display: none or visibility:hidden

I added css
.test{
top:0px !important;
left:0px !important;
}
So that the window can show in properly. You can take this out if needed
see snippet
function close() {
document.getElementsByClassName('test')[0].style.display = "none";
document.getElementsByClassName('testOverlay')[0].style.display = "none";
}
document.getElementsByClassName('test_Close')[0].addEventListener('click', close)
document.getElementsByClassName(test_Button_0 ')[0].addEventListener('
click ',close)
.test *,
.test *:after,
.test *:before {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important
}
.test {
width: 350px;
z-index: 1001;
}
.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons a {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
}
.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
border-color: #13252F;
border-width: 7px;
}
.test .test_Title {
font-size: 16px;
font-weight: bold;
color: #F6F5F5;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #444444;
padding: 12px 15px;
line-height: 1;
vertical-align: middle;
}
.test .test_BodyOuter {
background: #E7EDEF;
}
.test .test_Body {
color: #44484A;
padding: 20px;
border-top-color: #000;
border-bottom-color: #FFF;
}
.test .test_ButtonsOuter {
background: #E7EDEF;
padding: 10px 5px 10px 10px;
}
.test .test_Buttons:before,
.test .test_Buttons:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
font-size: 0
}
.test .test_Buttons:after {
clear: both
}
.test .test_Buttons {
*zoom: 1
}
.test .test_Buttons a {
font-weight: bold;
color: #FFF;
text-shadow: 1px 0px 2px #222;
padding: 10px 15px;
}
.test .test_Buttons a:hover {
background: #224467;
color: #FFF
}
.test a.test_Close {
position: absolute;
right: 6px;
top: 0px;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 21px;
color: #666
}
.test a.test_Close:hover {} .test .test_Title a.test_Close {
color: #E7EDEF;
}
.test .test_Title a.test_Close:hover {} .testOverlay {
background: #666;
z-index: 1000;
width: 100%;
height: 100%;
}
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.test .test_Title {
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.test .test_BodyOuter {
border-left-style: solid;
border-right-style: solid;
}
.test .test_NoTitle {
border-top-style: solid;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
.test .test_NoButtons {
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.test .test_Body {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-style: groove;
overflow: auto;
}
.test .test_NoTitle .test_Body {
border-top: none;
}
.test .test_NoButtons .test_Body {
border-bottom: none;
}
.test .test_Icon {
background-repeat: no-repeat;
background-position: 20px 20px;
padding-left: 88px;
min-height: 48px;
_height: 85px;
}
.test .test_Confirmation {
background-image: url('https://i.imgsafe.org/b792cc6d45.png')
}
.test .test_Error {
background-image: url('https://i.imgsafe.org/b78fb8bcdb.png')
}
.test .test_Information {
background-image: url('https://i.imgsafe.org/b79592c464.png')
}
.test .test_Question {
background-image: url('https://i.imgsafe.org/b797dc528f.png')
}
.test .test_Warning {
background-image: url('https://i.imgsafe.org/b79a3e68af.png')
}
.test .test_ButtonsOuter {
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.test .test_Buttons a {
white-space: nowrap;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 5px;
min-width: 60px;
float: right;
_width: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #006DCC;
*background-color: #0044CC;
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(to bottom, #0088CC, #0044CC);
background-repeat: repeat-x;
border-color: #0044CC #0044CC #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
.test .test_Buttons_Centered .test_Buttons {
display: table;
margin: 0 auto;
text-align: center;
}
.test .test_Buttons_Centered a {
zoom: 1;
*display: inline;
}
.test {
top: 0px !important;
left: 0px !important;
}
<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div>
<div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;">
<h3 class="test_Title">Information×</h3>
<div class="test_BodyOuter">
<div class="test_Body test_Icon test_Information">
<div style="padding-top: 14px;"><strong>Test<br></strong>
</div>
</div>
</div>
<div class="test_ButtonsOuter">
<div class="test_Buttons">Ok
</div>
</div>
</div>
This snippet is much more better
function close() {
console.log('close')
document.getElementsByClassName('test')[0].style.display = "none";
document.getElementsByClassName('testOverlay')[0].style.display = "none";
}
function show() {
document.getElementsByClassName('test')[0].style.display = "block";
document.getElementsByClassName('testOverlay')[0].style.display = "block";
}
document.getElementsByClassName('test_Close')[0].addEventListener('click', close);
document.getElementsByClassName('test_Button_0')[0].addEventListener('click', close)
document.getElementById("press").addEventListener('click', show)
.test *,
.test *:after,
.test *:before {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important
}
.test {
width: 350px;
z-index: 1001;
}
.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons div {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
}
.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
border-color: #13252F;
border-width: 7px;
}
.test .test_Title {
font-size: 16px;
font-weight: bold;
color: #F6F5F5;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #444444;
padding: 12px 15px;
line-height: 1;
vertical-align: middle;
}
.test .test_BodyOuter {
background: #E7EDEF;
}
.test .test_Body {
color: #44484A;
padding: 20px;
border-top-color: #000;
border-bottom-color: #FFF;
}
.test .test_ButtonsOuter {
background: #E7EDEF;
padding: 10px 5px 10px 10px;
}
.test .test_Buttons:before,
.test .test_Buttons:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
font-size: 0
}
.test .test_Buttons:after {
clear: both
}
.test .test_Buttons {
*zoom: 1
}
.test .test_Buttons div {
font-weight: bold;
color: #FFF;
text-shadow: 1px 0px 2px #222;
padding: 10px 15px;
}
.test .test_Buttons div:hover {
background: #224467;
color: #FFF
}
.test div.test_Close {
position: absolute;
right: 6px;
top: 0px;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 21px;
color: #666
}
.test div.test_Close:hover {} .test .test_Title a.test_Close {
color: #E7EDEF;
}
.test .test_Title a.test_Close:hover {} .testOverlay {
background: #666;
z-index: 1000;
width: 100%;
height: 100%;
}
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.test .test_Title {
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.test .test_BodyOuter {
border-left-style: solid;
border-right-style: solid;
}
.test {} .test .test_NoTitle {
border-top-style: solid;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
.test .test_NoButtons {
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.test .test_Body {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-style: groove;
overflow: auto;
}
.test .test_NoTitle .test_Body {
border-top: none;
}
.test .test_NoButtons .test_Body {
border-bottom: none;
}
.test .test_Icon {
background-repeat: no-repeat;
background-position: 20px 20px;
padding-left: 88px;
min-height: 48px;
_height: 85px;
}
.test .test_Confirmation {
background-image: url('https://i.imgsafe.org/b792cc6d45.png')
}
.test .test_Error {
background-image: url('https://i.imgsafe.org/b78fb8bcdb.png')
}
.test .test_Information {
background-image: url('https://i.imgsafe.org/b79592c464.png')
}
.test .test_Question {
background-image: url('https://i.imgsafe.org/b797dc528f.png')
}
.test .test_Warning {
background-image: url('https://i.imgsafe.org/b79a3e68af.png')
}
.test .test_ButtonsOuter {
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.test .test_Buttons div {
white-space: nowrap;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 5px;
min-width: 60px;
float: right;
_width: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #006DCC;
*background-color: #0044CC;
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(to bottom, #0088CC, #0044CC);
background-repeat: repeat-x;
border-color: #0044CC #0044CC #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
.test .test_Buttons_Centered .test_Buttons {
display: table;
margin: 0 auto;
text-align: center;
}
.test .test_Buttons_Centered {
zoom: 1;
*display: inline;
}
.test {
top: 0px !important;
left: 0px !important;
}
.test,
.test_Close {
display: inline-block;
}
.test:hover,
.test_Close:hover {
cursor: pointer
}
.test,
.testOverlay {
display: none;
}
<button id="press">
Press
</button>
<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div>
<div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;">
<h3 class="test_Title">Information<div href="" class="test_Close" style="right: 15px; top: 9.5px;">×</div></h3>
<div class="test_BodyOuter">
<div class="test_Body test_Icon test_Information">
<div style="padding-top: 14px;"><strong>Test<br></strong>
</div>
</div>
</div>
<div class="test_ButtonsOuter">
<div class="test_Buttons">
<div class="test_Button_0">Ok</div>
</div>
</div>
</div>

Talking about pure Javascript, looks like you want something like this..
You can run it:
// Waiting DOM load
window.onload = function() {
// Binding event click to the close button, and defining it's callback
document.querySelector(".test_Close").addEventListener("click", function(e) {
// Prevent the click in <a> to redirect the page to itself or another place
e.preventDefault();
// Closing the overlay
document.querySelector(".testOverlay").style.display = "none";
// Closing the modal
document.querySelector(".test").style.display = "none";
// Check your browser console with F12 or Ctrl + Shift + I
console.info("Modal has been closed!");
});
}
.test *,
.test *:after,
.test *:before {
-moz-box-sizing: content-box !important;
-webkit-box-sizing: content-box !important;
box-sizing: content-box !important
}
.test {
width: 350px;
z-index: 1001;
}
.test,
.test .test_Title,
.test .test_Body,
.test .test_Buttons a {
margin: 0;
padding: 0;
font-family: Helvetica, Tahoma, Arial, sans-serif;
font-size: 14px;
text-align: left;
}
.test .test_Title,
.test .test_BodyOuter,
.test .test_ButtonsOuter {
border-color: #13252F;
border-width: 7px;
}
.test .test_Title {
font-size: 16px;
font-weight: bold;
color: #F6F5F5;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #444444;
padding: 12px 15px;
line-height: 1;
vertical-align: middle;
}
.test .test_BodyOuter {
background: #E7EDEF;
}
.test .test_Body {
color: #44484A;
padding: 20px;
border-top-color: #000;
border-bottom-color: #FFF;
}
.test .test_ButtonsOuter {
background: #E7EDEF;
padding: 10px 5px 10px 10px;
}
.test .test_Buttons:before,
.test .test_Buttons:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden;
font-size: 0
}
.test .test_Buttons:after {
clear: both
}
.test .test_Buttons {
*zoom: 1
}
.test .test_Buttons a {
font-weight: bold;
color: #FFF;
text-shadow: 1px 0px 2px #222;
padding: 10px 15px;
}
.test .test_Buttons a:hover {
background: #224467;
color: #FFF
}
.test a.test_Close {
position: absolute;
right: 6px;
top: 0px;
text-decoration: none;
font-family: arial, sans-serif;
font-weight: bold;
font-size: 21px;
color: #666
}
.test a.test_Close:hover {} .test .test_Title a.test_Close {
color: #E7EDEF;
}
.test .test_Title a.test_Close:hover {} .testOverlay {
background: #666;
z-index: 1000;
width: 100%;
height: 100%;
}
.test {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.test .test_Title {
border-left-style: solid;
border-top-style: solid;
border-right-style: solid;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
.test .test_BodyOuter {
border-left-style: solid;
border-right-style: solid;
}
.test .test_NoTitle {
border-top-style: solid;
-webkit-border-top-left-radius: 10px;
-moz-border-top-left-radius: 10px;
border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-top-right-radius: 10px;
border-top-right-radius: 10px;
}
.test .test_NoButtons {
border-bottom-style: solid;
-webkit-border-bottom-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.test .test_Body {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 2px;
border-bottom-style: groove;
overflow: auto;
}
.test .test_NoTitle .test_Body {
border-top: none;
}
.test .test_NoButtons .test_Body {
border-bottom: none;
}
.test .test_Icon {
background-repeat: no-repeat;
background-position: 20px 20px;
padding-left: 88px;
min-height: 48px;
_height: 85px;
}
.test .test_Confirmation {
background-image: url('https://i.imgsafe.org/b792cc6d45.png')
}
.test .test_Error {
background-image: url('https://i.imgsafe.org/b78fb8bcdb.png')
}
.test .test_Information {
background-image: url('https://i.imgsafe.org/b79592c464.png')
}
.test .test_Question {
background-image: url('https://i.imgsafe.org/b797dc528f.png')
}
.test .test_Warning {
background-image: url('https://i.imgsafe.org/b79a3e68af.png')
}
.test .test_ButtonsOuter {
border-left-style: solid;
border-right-style: solid;
border-bottom-style: solid;
-webkit-border-radius: 0 0 10px 10px;
-moz-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
.test .test_Buttons a {
white-space: nowrap;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
display: inline-block;
margin-right: 5px;
min-width: 60px;
float: right;
_width: 60px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #006DCC;
*background-color: #0044CC;
background-image: -moz-linear-gradient(top, #0088CC, #0044CC);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088CC), to(#0044CC));
background-image: -webkit-linear-gradient(top, #0088CC, #0044CC);
background-image: -o-linear-gradient(top, #0088CC, #0044CC);
background-image: linear-gradient(to bottom, #0088CC, #0044CC);
background-repeat: repeat-x;
border-color: #0044CC #0044CC #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
.test .test_Buttons_Centered .test_Buttons {
display: table;
margin: 0 auto;
text-align: center;
}
.test .test_Buttons_Centered a {
zoom: 1;
*display: inline;
}
.test {
top: 0px !important;
left: 0px !important;
}
<div class="testOverlay" style="position: fixed; left: 0px; top: 0px; opacity: 0.9;"></div>
<div class="test" style="position: fixed; left: 433px; top: 223px; visibility: visible; width: 500px; opacity: 1;">
<!-- Have set void(0), that evaluates the given expression and then returns undefined -->
<h3 class="test_Title">Information×</h3>
<div class="test_BodyOuter">
<div class="test_Body test_Icon test_Information">
<div style="padding-top: 14px;"><strong>Test<br></strong>
</div>
</div>
</div>
<div class="test_ButtonsOuter">
<div class="test_Buttons">Ok
</div>
</div>
</div>
Hope it helps you.

Webpage doesn't adjust to any screen height automatically

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.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Arrow not appears need help of CSS code

I am new here, i need little help from you guys. I tried all the way to sort out this problem but found no way, hope someone can help me out.
here is my website http://www.newwebdemo.com/susan/
if you scroll down to section "What People Are Saying" where testimonials appears.
You will notice that left arrow is not appears but right one appears fine, even left side arrow box have arrow as well, but still not appears, can someone help me find where the issue is coming and why it is not appear.
Here is code section of that
<ul class="flex-direction-nav">
<li>
<a class="flex-prev" href="#"></a>
</li>
<li>
<a class="flex-next" href="#"></a>
</li>
</ul>
and here is css of it
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
.flex-direction-nav a {
width: 42px;
height: 42px;
font-size: 24px;
line-height: 42px;
margin-top: -21px;
border-radius: 5px;
border: 1px solid #e9e9e9;
background: #fff;
color: #b1b1b1;
text-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-direction-nav a.flex-prev {
left: 0 !important;
}
.flex-direction-nav a.flex-next {
right: 0 !important;
left: auto !important;
}
.flex-direction-nav a:before {
position: relative;
font-size: 30px;
font-family: fontello;
margin-top: -1px;
}
.flex-direction-nav a.flex-prev:before {
margin-left: 14px;
content: "î";
z-index:999999;
}
.flex-direction-nav a.flex-next:before {
margin-right: 14px;
content: "îž";
}
.mini .flex-direction-nav a {
border: none;
color: #fff;
background: #ccc;
background: rgba(0,0,0,.2);
}
.mini .flex-direction-nav a:before {
top: 1px;
}
.mini .flex-direction-nav a.flex-prev {
border-radius: 0 5px 5px 0;
}
.mini .flex-direction-nav a.flex-next {
border-radius: 5px 0 0 5px;
}
.mini .flex-direction-nav a:hover {
background: #000;
color: #fff;
border-color: transparent;
}
.flex-control-nav {
width: 100%;
left: 0;
bottom: auto;
}
.flex-control-nav li {
margin: 0 2px;
display: inline-block;
}
.flex-control-nav li a {
width: 7px;
height: 7px;
display: block;
background-color: #b9b9b9;
cursor: pointer;
text-indent: -9999px;
border-radius: 4px;
box-shadow: none !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
opacity: 0 !important;
}
.flex-control-nav li a.flex-active {
background-color: #e54939;
}
.nav-bullets-top .flex-control-nav {
top: -40px;
}
.nav-bullets-bottom .flex-control-nav {
bottom: -70px;
}
flex-prev not showing arrow, however flex-next class is showing fine the arrow
both contain css classes working, not sure what else is causing here....

Do one thing go to the demo of flexslider.right click then click on view page source.after that go into the source of the demo and locate flexslider.css.just copy the css code into your flexslider.css code.then google look for bg_direction_nav.png flexslider.
You'll find two arrow image.download it into your system.then go to flexslider.css and change on line 51:
.flex-direction-nav a {
width: 30px;
height: 30px;
margin: -20px 0 0;
display: block;
background: url(images/bg_direction_nav.png) no-repeat 0 0;
position: absolute; top: 50%; cursor: pointer;
text-indent: -9999px;
opacity: 0;
-webkit-transition: all .3s ease;
}
Change background:url(point to the newly saved image)
Then save everything.refresh page and u'll get the arrows.
If you post useful please log on to www.facebook.com/brightinfoway and like that page. It is a request. Thanks

Categories

Resources