What is wrong with this MODAL ? - javascript

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.

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>

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

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;
}

Link and hover not working in jumbotron

I am using bootstrap framework and what i am trying to achive is putting a background image over gradient with the following code:
jumbotron{
position: relative;
padding: 60px 30px;
margin-bottom: 30px;
color: #FFF;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
background: linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}
.jumbotron:after{
content: "";
display: block;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background: url('css/bs-docs-masthead-pattern.png') repeat scroll center center transparent;
opacity: 0.4;
}
The problem i am facing is that when i use the position: absolute property in jumbotron:after all the link and hover (but i get an image over gradient) property ceases to exist. And when I don't use it, i don't get an image (but the link and hover property works).
Is there any way to get both the things at the same time w/o messing up the layout?

Instead of making an overlay with :after pseudo element, try to set up two gradients on jumbotron itself:
.jumbotron {
position: relative;
padding: 60px 30px;
margin-bottom: 30px;
color: #FFF;
text-align: center;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.075);
background:
url('css/bs-docs-masthead-pattern.png') repeat scroll center center,
linear-gradient(45deg, #020031 0%, #6D3353 100%) repeat scroll 0% 0% transparent;
box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.2) inset, 0px -3px 7px rgba(0, 0, 0, 0.2) inset;
}
Demo: http://plnkr.co/edit/Z64z6U28fff8jDEB3xgn?p=preview

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>

Javascript with Twitter's typeahead.js ruining my form's layout

So I have a script that uses the typeahead to pull up data from my database:
<script type="text/javascript">
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
})
.keydown(function(e) {
if (e.keyCode === 13) {
$("form").trigger('submit');
}
});
});
</script>
This is what my form looks like without the script
And this is what it looks like with the script:
This is the html on the page (using bootstrap 3):
<div class="jumbotron">
<div class="container">
<h1 align="center">Search</h1>
<div class="row">
<div class="col-lg-12">
<form id="search_form" align="center" action="/search/" class="form-inline" method ="get" role="form">
<input id="navPersonSearch" class="input form-control" type="text" name="q"
placeholder="Search for Actor/Actress"
autocomplete="off" >
</form>
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
I'm not sure why the script is messing with my form's layout.

After some research, it looks like this is a known issue with Bootstrap 3: https://github.com/twitter/typeahead.js/issues/378
People have made some fixes to it, but the fixes aren't completely universal, you'd have to tweak the properties yourself to actually get it to work properly. The fix that I'm starting off with is this: http://jsfiddle.net/ragulka/Dy9au/1/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin: 0;
width: 100%;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
border-color: #66afe9;
outline: 0;
-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);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .twitter-typeahead .tt-query:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.twitter-typeahead .tt-hint {
color: #a1a1a1;
z-index: 1;
border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
}
.twitter-typeahead .input-sm.tt-query,
.twitter-typeahead .hint-sm.tt-hint {
border-radius: 3px;
}
.twitter-typeahead .input-lg.tt-query,
.twitter-typeahead .hint-lg.tt-hint {
border-radius: 6px;
}
.input-group .twitter-typeahead:first-child .tt-query,
.input-group .twitter-typeahead:first-child .tt-hint {
border-radius: 4px 0 0 4px !important;
}
.input-group .twitter-typeahead:last-child .tt-query,
.input-group .twitter-typeahead:last-child .tt-hint {
border-radius: 0 4px 4px 0 !important;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-radius: 3px 0 0 3px !important;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-radius: 0 3px 3px 0 !important;
}
.input-sm.tt-query,
.hint-sm.tt-hint,
.input-group.input-group-sm .tt-query,
.input-group.input-group-sm .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-radius: 6px 0 0 6px !important;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-radius: 0 6px 6px 0 !important;
}
.input-lg.tt-query,
.hint-lg.tt-hint,
.input-group.input-group-lg .tt-query,
.input-group.input-group-lg .tt-hint {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.tt-dropdown-menu {
width: 100%;
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}

Categories

Resources