Changing CSS of one element based on another element focus/active state - javascript

I have a simple bootstrap input group inside a form element, like this:
<form>
<div class="input-group mb-3">
<input type="text" class="form-control home-search-input" placeholder="Recipient's username">
<div class="input-group-append">
<button class="btn btn-outline-secondary home-search-btn" type="button" id="button-addon2">Button</button>
</div>
</div>
</form>
I want when I manipulate the input element based on :focus and :active CSS pseudo classes, it changes the input element, but doesn't change the button addon.
Some of my css looks like this:
.home-search-input {
border-right: 0;
background-clip: border-box !important;
background: #e9e9e9;
transition: box-shadow ease-in-out .2s;
}
.home-search-input:focus, .home-search-input:active {
outline: 0px !important;
-webkit-appearance: none;
border-bottom-color: none;
background: #ffffff !important;
box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3),
0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
border-right:none;
border-color: #ced4da;
}
.home-search-btn {
background: #e9e9e9;
font-size: 15px !important;
padding: 6px 12px !important;
/* border-radius: 23.79px 23.79px 23.79px 23.79px; */
color: black;
border: 1px solid #ced4da;
border-left: none;
}
How do I get the .home-search-btn to also apply box shadow and background color changes based on .home-search-input:focus, .home-search-input:active?


You will need to use CSS combinators
Put this in your code:
.home-search-input:focus ~ .input-group-append > button {
box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3), 0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
background-color: red;
}
This (in words) means When input is focused, change button that is in (> sign) .input group that is next to (~ sign) input
This would be your code:
.home-search-input {
border-right: 0;
background-clip: border-box !important;
background: #e9e9e9;
transition: box-shadow ease-in-out .2s;
}
.home-search-input:focus,
.home-search-input:active,
{
background: #ffffff;
box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
}
.home-search-input:focus~.input-group-append>button,
.home-search-input:active~.input-group-append>button {
background: #ffffff;
box-shadow: 0 1px 1px 0 rgba(65, 69, 73, 0.3), 0 1px 3px 1px rgba(65, 69, 73, 0.15);
}
.home-search-btn {
background: #e9e9e9;
font-size: 15px !important;
padding: 6px 12px !important;
/* border-radius: 23.79px 23.79px 23.79px 23.79px; */
color: black;
border: 1px solid #ced4da;
border-left: none;
}
<form>
<input type="text" class="form-control home-search-input" placeholder="Recipient's username">
<div class="input-group-append">
<button class="btn btn-outline-secondary home-search-btn" type="button" id="button-addon2">Button</button>
</div>
</form>


try:
.home-search-input:active + .input-group-append .home-search-btn,
.home-search-input:focus + .input-group-append .home-search-btn {
background: #ffffff !important;
box-shadow: 0 1px 1px 0 rgba(65,69, 73, 0.3),
0 1px 3px 1px rgba(65,69, 73, 0.15) !important;
}

Related

Onclick event on search bar suggestions

I have added a search bar with suggestion elements. On click of search bar all the elements is displayed but onclick event is not working on these list suggestion elements.
Have added click event to these suggestions which is stored in li .I want some actions to be performed onclick of these elements
$(document).on("click", ".search.search-list", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
.search input:focus + .results { display: block }
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li { display: block }
.search .results li:first-child { margin-top: -1px }
.search .results li:first-child:before, .search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before, .search .results li:first-child:hover:after { display: none }
.search .results li:last-child { margin-bottom: -1px }
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span { font-weight: 200 }
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input { line-height: 26px }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results" >
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

You just need to make two changes. I'll explain what I did.
The reason why the click event on search-list was not working is because you have defined it in js as .search.search-list. There should be a space between them, like .search .search-list, as #Aioros suggested.
You have displayed the dropdown using CSS :focus, like when the cursor is inside search input, the dropdown should show. Now when the user clicks on one of the items from the dropdown, the focus shifts away from the search input field, thus making the dropdown invisible again. I have used a small jQuery solution to display the dropdown when the user clicks on search field.
$(".search-input").on("click", function(e) {
$(".results").css({
"display": "block"
});
console.log("HEY");
})
$(".search .search-list").on("click", function(e) {
console.log('clicked')
})
.search {
position: relative;
margin: 0 auto;
width: 300px;
}
.search input {
height: 26px;
width: 100%;
padding: 0 12px 0 25px;
/* background: white url("https://cssdeck.com/uploads/media/items/5/5JuDgOa.png") 8px 6px no-repeat; */
border-width: 1px;
border-style: solid;
border-color: #a8acbc #babdcc #c0c3d2;
border-radius: 13px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-moz-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-ms-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
-o-box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
box-shadow: inset 0 1px #e5e7ed, 0 1px 0 #fcfcfc;
}
.search input:focus {
outline: none;
border-color: #66b1ee;
-webkit-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-moz-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-ms-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
-o-box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
box-shadow: 0 0 2px rgba(85, 168, 236, 0.9);
}
/*.search input:focus + .results { display: block }*/
.search .results {
display: none;
position: absolute;
top: 35px;
left: 0;
right: 0;
z-index: 10;
padding: 0;
margin: 0;
border-width: 1px;
border-style: solid;
border-color: #cbcfe2 #c8cee7 #c4c7d7;
border-radius: 3px;
background-color: #fdfdfd;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fdfdfd), color-stop(100%, #eceef4));
background-image: -webkit-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -moz-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -ms-linear-gradient(top, #fdfdfd, #eceef4);
background-image: -o-linear-gradient(top, #fdfdfd, #eceef4);
background-image: linear-gradient(top, #fdfdfd, #eceef4);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.search .results li {
display: block
}
.search .results li:first-child {
margin-top: -1px
}
.search .results li:first-child:before,
.search .results li:first-child:after {
display: block;
content: '';
width: 0;
height: 0;
position: absolute;
left: 50%;
margin-left: -5px;
border: 5px outset transparent;
}
.search .results li:first-child:before {
border-bottom: 5px solid #c4c7d7;
top: -11px;
}
.search .results li:first-child:after {
border-bottom: 5px solid #fdfdfd;
top: -10px;
}
.search .results li:first-child:hover:before,
.search .results li:first-child:hover:after {
display: none
}
.search .results li:last-child {
margin-bottom: -1px
}
.search .results a {
display: block;
position: relative;
margin: 0 -1px;
padding: 6px 40px 6px 10px;
color: #808394;
font-weight: 500;
text-shadow: 0 1px #fff;
border: 1px solid transparent;
border-radius: 3px;
}
.search .results a span {
font-weight: 200
}
.search .results a:before {
content: '';
width: 18px;
height: 18px;
position: absolute;
top: 50%;
right: 10px;
margin-top: -9px;
/* background: url("https://cssdeck.com/uploads/media/items/7/7BNkBjd.png") 0 0 no-repeat; */
}
.search .results a:hover {
text-decoration: none;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
border-color: #2380dd #2179d5 #1a60aa;
background-color: #338cdf;
/* background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #59aaf4), color-stop(100%, #338cdf));
background-image: -webkit-linear-gradient(top, #59aaf4, #338cdf);
background-image: -moz-linear-gradient(top, #59aaf4, #338cdf);
background-image: -ms-linear-gradient(top, #59aaf4, #338cdf);
background-image: -o-linear-gradient(top, #59aaf4, #338cdf);
background-image: linear-gradient(top, #59aaf4, #338cdf); */
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-ms-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
-o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.08);
}
:-moz-placeholder {
color: #a7aabc;
font-weight: 200;
}
::-webkit-input-placeholder {
color: #a7aabc;
font-weight: 200;
}
.lt-ie9 .search input {
line-height: 26px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="modal fade" id="search-bar" role="dialog">
<div class="modal-dialog search-modal">
<div class="modal-content search-modal">
<div class="modal-body">
<section class="main">
<form class="search">
<input type="text" class="search-input" name="q" placeholder="Search..." />
<ul class="results">
<li class="search-list">Search Result #1<br /><span>Description...</span></li>
<li class="search-list">Search Result #2<br /><span>Description...</span></li>
<li class="search-list">Search Result #3<br /><span>Description...</span></li>
<li class="search-list">Search Result #4</li>
</ul>
</form>
</section>
</div>
</div>
</div>
</div>

INPUT type=file on IE11

I am having trouble with an input of type file on IE11.
IE11 displays the input field as two tab-able pseudo elements (text/button).
I found the class ::-ms-browse which lets me set the button to display: none, but for some reason it is still tab-able.
To reproduce:
Click in text field
Tab into input type file (will only do two tabs in IE11)
The goal is to hide the input field and display a label as a button instead of the input field. For that it would be awkward to have to tab twice for one button.
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required>
<label for="upload-photo" class="fake-file-upload">DURCHSUCHEN</label>

After playing a bit with it I might have an idea :
If you want to be able to prevent the user from tabbing into the input, make the label tabbable and clickable, I would do this :
input[type="file"]::-ms-browse {
display: none;
visibility: hidden;
}
input[type="file"]+label.fake-file-upload {
background: $white;
color: #999;
font-family: "Glober", sans-serif;
font-weight: 600;
font-size: 1.5rem;
padding: 0.75rem 4rem;
letter-spacing: 0.25rem;
cursor: pointer;
display: table;
}
input[type="file"]:focus+label.fake-file-upload {
outline: 2px dotted #444;
outline-offset: 5px;
border-spacing: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<input type="text" ><br><br>
<input type="file" id="upload-photo" name="photo" required tabindex="-1">
<label for="upload-photo" class="fake-file-upload" tabindex="0">DURCHSUCHEN</label>
$('.fake-file-upload').keypress(function (e) {
var key = e.which;
if(key == 13) // the enter key code
{
$('.fake-file-upload').trigger("click");
return false;
}
});
Test case : https://jsfiddle.net/keystfjw/29/

How come that the scrollbar changes when im on Chrome and not on Firefox

So I am playing around with scrollbars and im trying to recreate these (link below), and I just realized that they do only change colors if I am on Chrome but not if I am on Firefox, what causes this and how do I properly deal with this?
I tried looking at other examples aswell but it seems that no matter what example I look at, all of them have no effect on Firefox
https://codepen.io/akinjide/pen/BpggrZ
HTML
- var n = 1
h1 Customize the Browser's Scrollbar with CSS
#wrapper
.scrollbar#style-default
.force-overflow
while n < 12
.scrollbar(id="style-" + n++)
.force-overflow
CSS
.scrollbar {
margin-left: 22px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
margin: auto;
}
#style-1::-webkit-scrollbar,
#style-2::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar,
#style-5::-webkit-scrollbar,
#style-6::-webkit-scrollbar,
#style-7::-webkit-scrollbar,
#style-8::-webkit-scrollbar,
#style-9::-webkit-scrollbar,
#style-10::-webkit-scrollbar,
#style-11::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
/** STYLE 1 */
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/** STYLE 2 */
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
#style-2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/** STYLE 3 */
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
/** STYLE 4 */
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
/** STYLE 5 */
#style-5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/** STYLE 6 */
#style-6::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/** STYLE 7 */
#style-7::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/** STYLE 8 */
#style-8::-webkit-scrollbar-track {
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb {
background-color: #000000;
}
/** STYLE 9 */
#style-9::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/** STYLE 10 */
#style-10::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(left, #96A6BF, #63738C);
box-shadow: inset 0 0 1px 1px #5C6670;
}
#style-10::-webkit-scrollbar-track {
border-radius: 10px;
background: #eee;
box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3)
}
#style-10::-webkit-scrollbar-thumb:hover {
background: linear-gradient(left, #8391A6, #536175);
}
/** STYLE 11 */
#style-11::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0,0,0,0.1);
border: 1px solid #ccc;
}
#style-11::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(left, #fff, #e4e4e4);
border: 1px solid #aaa;
}
#style-11::-webkit-scrollbar-thumb:hover {
background: #fff;
}
#style-11::-webkit-scrollbar-thumb:active {
background: linear-gradient(left, #22ADD4, #1E98BA);
}

I believe Firefox doesn't support custom scrollbar color. There's been a request open for over 17 years to change this.
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
You'll have to use a library such as http://jscrollpane.kelvinluck.com/ (which I've read is a PITA) or http://utatti.github.io/perfect-scrollbar/
Good luck!

What is wrong with this MODAL ?

I work so hard to follow the steps of this MODAL login, but for some reason I'm getting nowhere! Very frustrating.
So this is the webpage that I'm working on. Everything is followed and it's suppose to work.
I will briefly point out the code snippets:
Right on top of the page there's the css styling:
<style type="text/css">
/** modal window styles **/
#lean_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
background: #000;
display: none;
}
#loginmodal {
width: 300px;
padding: 15px 20px;
background: #f3f6fa;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
#loginform { /* no default styles */ }
#loginform label { display: block; font-size: 1.1em; font-weight: bold; color: #7c8291; margin-bottom: 3px; }
.txtfield {
display: block;
width: 100%;
padding: 6px 5px;
margin-bottom: 15px;
font-family: 'Helvetica Neue', Helvetica, Verdana, sans-serif;
color: #7988a3;
font-size: 1.4em;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
background-color: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#edf3f9), to(#fff));
background-image: -webkit-linear-gradient(top, #edf3f9, #fff);
background-image: -moz-linear-gradient(top, #edf3f9, #fff);
background-image: -ms-linear-gradient(top, #edf3f9, #fff);
background-image: -o-linear-gradient(top, #edf3f9, #fff);
background-image: linear-gradient(top, #edf3f9, #fff);
border: 1px solid;
border-color: #abbce8 #c3cae0 #b9c8ef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.4);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.txtfield:focus {
outline: none;
color: #525864;
border-color: #84c0ee;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), 0 0 7px #96c7ec;
}
</style>
I also added to the header section the 2 .js file links that are associated:
<script type="text/javascript" src="http://examscan.us/shulemberger/wp-includes/js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8"
src="http://examscan.us/shulemberger/wp-includes/js/jquery.leanModal.min.js">
</script>
Then, right on top of the webpage I have the link to the MODAL:
<li>Sign in</li>
<li><a class="flatbtn" id="modaltrigger" href="#loginmodal">Sign up</a></li>
And finally, on the bottom of the page I have the modal code:
<div id="loginmodal" style="display:none;">
<h1>User Login</h1>
<form id="loginform" name="loginform" method="post" action="index.html">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="txtfield" tabindex="1">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="txtfield" tabindex="2">
<div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="Log In" tabindex="3"></div>
</form>
</div>

Well,
http://leanmodal.finelysliced.com.au/ -> How To Use -> Step 3: call the function on your modal trigger, as follows. Be sure to set the href attribute of your trigger anchor to match the id of your target element.
$("#trigger_id").leanModal();
...or, if you want more than one modal window on the same page, simply add the 'rel' attribute to your triggers, and call the function by attribute, like so:
$("a[rel*=leanModal]").leanModal();
I don't see this instruction in the provided code.

As previously mentioned, your code doesn't include the call to leanModal(). However, on your page leanModal isn't defined. I would think that one of your scripts (likely a plugin) is causing leanModal to not load properly. I was able to make it work on your page by loading the code for leanModal in the console after all other code had been run. Try including leanModal at the end of your page, and then include the following code:
$('#modaltrigger').leanModal();
Be sure to customize your options parameter for placement, closing, etc.

POST wrong in javascript

I´m making a recover password page and I have to POST some xml information to an specific API.
My complete code is this:
<!DOCTYPE html>
<html>
<head>
<title> - Renew Password</title>
<meta charset="utf-8">
<meta name="viewport" content="width=500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Open+Sans:400,400italic,600,600italic,700,700italic" />
<style>
body {
margin: 0;
padding: 0;
height: 100%;
background: #F2F2F2; <!--url(http://peoplepowerco.com/img/email/bgBlueLg.png)-->
no-repeat;
background-size: 100%;
color: #333;
text-shadow: #fff 0px 1px 0px;
font-family: Helvetica, Arial, sans-serif;
}
#header {
width: 100%;
height: 45px;
background: #1CC0B1 url(http://wisemx.com.mx/img/logo.png) no-repeat;
background-size: 200px 45px;
}
#logo {
width: 0px;
height: 0px;
}
h1 {
color: #1CC0B1;
text-shadow: #000 0px 0px 0px;
}
.container {
width: 500px;
margin: 0px auto;
text-align: center;
}
.box {
background: #E0E0E0;
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9),
to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5;
-o-box-shadow: inset 0px 2px 2px #B2B3B5;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5;
box-shadow: inset 0px 2px 2px #B2B3B5;
-webkit-border-radius: 18px;
-o-border-radius: 18px;
-khtml-border-radius: 18px;
border-radius: 18px;
behavior: url(border-radius.htc);
border: solid 3px #FFFFFF;
}
label {
font-size: 18px;
}
input {
font-size: 18px;
}
input.button-primary {
display: inline-block;
padding: 8px 20px 10px;
text-decoration: none;
font-weight: bold;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
behavior: url(border-radius.htc);
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #333;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-moz-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-o-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
-khtml-box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
box-shadow: inset 0px 1px 0 #fff, #000 1px 1px 5px;
border: none;
font-size: 18px;
font-family: FuturaHv, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}
input.button-primary:hover {
background-color: #026eb2;
background: -webkit-gradient(linear, left top, left bottom, from(#98d7fe),
to(#026eb2));
background: -moz-linear-gradient(top, #98d7fe, #026eb2);
color: #ffffff;
text-shadow: 0px -1px 0px #333333;
}
input.button-primary:active {
background-color: #004b7b;
background: -webkit-gradient(linear, left top, left bottom, from(#026eb2),
to(#004b7b));
background: -moz-linear-gradient(top, #026eb2, #004b7b);
color: #cccccc;
text-shadow: 0px -1px 0px #000000;
}
input.button-primary:disabled {
background-color: #f1f1f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f1f1f2),
to(#acacae));
background: -moz-linear-gradient(top, #f1f1f2, #acacae);
color: #999;
text-shadow: 0px 1px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 1px 0 #fff;
-o-box-shadow: inset 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 1px 0 #fff;
box-shadow: inset 0px 1px 0 #fff;
border: none;
}
</style>
<script>
function submitForm()
{
var res = document.URL.split("=");
res[1] =
"XOXc4PKYCIMOMPYstCFZeCGhaeuYbqZZTvl6PwaOOb6rpu2npNhXT2Vr7Js6J2UX";
var request =
"http://developer.peoplepowerco.com/espapi/rest/user/"+res[1];
var frm = document.forms[0];
var pwdElement = frm.elements["pwd"]
var pwdConfirmElement = frm.elements["pwdConfirm"]
if (pwdElement.value.length < 6)
{
alert('La contraseña debe ser de al menos 6
caracteres de largo');
}
else if (pwdElement.value == pwdConfirmElement.value)
{
var user= "<request><user><password>" + pwdElement.value +
"</password></user></request>";
alert('DENTRO ' + request + ' ' + user);
$.ajax({
url:request,
type:"POST",
dataType:"text/xml",
data: user,
async: false,
success:
function(){
alert("Datos modificados exitosamente");
//window.location.href= "inicio.html";
},
error:
function( data, status, byKey ){
alert("Contraseña no modificada, intente
otra vez");
},
cache:false
});
alert("FUERA!");
var sbmButtom = frm.elements["submitButton"];
sbmButtom.disable=true;
frm.submit();
}
else
{
alert("Las contraseñas no coinciden. Favor de corregirlo e
intentar otra vez.")
}
}
</script>
</head>
<body>
<div id="header"></div>
<div id="logo"></div>
<div class="container">
<br clear="all">
<form name="renewPassword" method="post" action="/espapi/rest/newPassword"
onsubmit="return false">
<input type="hidden" name="key" value="tVzRl9fNE2ZAOt6yDx6frFCbsFQt2gyuKWn3wWkJ-
9oTrmiyprssDMWaEDEXylUk"/>
<h1>Escriba su nueva contraseña</h1>
<div class="box">
<p>
<label for="pwd">Nueva contraseña:</label><br>
<input id="pwd" name="pwd" type="password" value="">
</p>
<p>
<label for="pwdConfirm">Confirmar contraseña:</label><br>
<input id="pwdConfirm" name="pwdConfirm" type="password" value="">
</p>
<br>
</div>
<p>
<input type="button" name="submitButton" onclick="javascript:submitForm()"
value="Cambiar contraseña" class="button-primary">
</p>
</form>
</div>
</body>
</html>
And I don´t know what's wrong because when I write a smaller password or the passwords aren't the same; it showed me the alerts that I want but when everything is fine nothing happen. Could you help me??

$.ajax() is a jQuery feature. You have reference the jQuery library if you want to use that feature.
For example, you can add CDN reference to jQuery or download a copy to your server and reference it.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

Categories

Resources