Link and hover not working in jumbotron - javascript

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

Related

How to merge the start and end of a css keyframe animation in order to create a smooth start and end

I have an animation that is linked below in the form of a fiddle. When you click the rectangle, it expands to fill the page.
The way I set it up causes it to trigger a close animation from the maximum size.
I want to make it so that if the user clicks it in the middle of the animation, it will trigger the close animation at that size.
Fiddle : [https://jsfiddle.net/48cvzaej/8/][1]
(sorry the CSS is a bit of a mess)
The only thought I have as to solving the problem is to store the value in js, then onClick, making the "from" position the last saved power.
Thanks for the help.
function soothingMessage()
{
if(page.style.animationName != "newPage")
{
page.style.animationName = "newPage";
}
else if(page.style.animationName == "newPage")
{
page.style.animationName = "newPageReverse";
}
}
:root
{
--background-color: blue;
}
#page
{
margin: auto;
width: 50px;
height: 35px;
padding: 10px;
text-align: center;
border-radius: 10px;
background-color:aquamarine;
font-family: 'Roboto', sans-serif;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
animation-direction: reverse;
}
/* #page:hover
{
animation: subtleBoxChange 0.2s;
animation-fill-mode:forwards;
} */
#page
{
animation: null 1s forwards;
animation-fill-mode: forwards;
}
#text
{
text-align: center;
font-family: 'Roboto', sans-serif;
}
#keyframes null
{
}
#keyframes newPage
{
from{width: 50px;
height: 35px;
padding: 10px;
margin: auto;
border-radius: 10px; }
to{width: 100%;
height: 100vh;
padding: 0px;
margin: auto;
border-radius: 0px;}
}
#keyframes newPageReverse
{
to{width: 50px;
height: 35px;
padding: 10px;
margin: auto;
border-radius: 10px; }
from{width: 100%;
height: 100vh;
padding: 0px;
margin: auto;
border-radius: 0px;}
}
#keyframes subtleBoxChange
{
from {background-color:rgb(128, 255, 212);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 50px;
height: 35px;}
to{background-color:rgb(128, 255, 212);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
width: 60px;
height: 45px;}
}
#keyframes subtleBoxChangeReverse
{
from {background-color:rgb(128, 255, 212);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
width: 60px;
height: 45px;}
to{background-color:rgb(128, 255, 212);
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
width: 50px;
height: 35px;}
}
<!DOCTYPE>
<html>
<div id = card>
<head>
<title>test</title>
</head>
<p id="page" onclick="soothingMessage()">
</p>
<p id="text">
</p>
</div>

How to display on/off value for the power button in console?

I have written the code for neumorphism power button and it is working perfectly fine but I'm not able to figure out how to display the status in the console using javascript, i.e., if the power button is on or off.
HTML code:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>
CSS Code:
body{
background-color: black;
padding: 0;
margin:0;
}
input[type="checkbox"]{
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5);;
position: absolute;
transform: translate(-70%,-70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none ;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after{
font-family:FontAwesome;
content:'\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked{
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5),
10px 10px 15px rgba(0, 0, 0, 0.5),
inset -10px -10px 15px rgba(0, 0, 0, 0.5),
inset 10px 10px 15px rgba(0, 0, 0, 0.5) ;
}
input[type="checkbox"]:checked::after{
color: green;
}

Add a change event listener to the power button, then check whether it is checked with the checked property:
document.querySelector('input').addEventListener('change', function() {
console.log(`Power button is${this.checked ? "" : " not"} checked`);
})
body {
background-color: black;
padding: 0;
margin: 0;
}
input[type="checkbox"] {
height: 150px;
width: 150px;
-webkit-appearance: none;
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5);
;
position: absolute;
transform: translate(-70%, -70%);
top: 20%;
left: 80%;
border-radius: 50%;
border: 8px solid black;
outline: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
input[type="checkbox"]::after {
font-family: FontAwesome;
content: '\f011';
color: grey;
font-size: 70px;
}
input[type="checkbox"]:checked {
box-shadow: -10px -10px 15px rgba(0, 0, 0, 0.5), 10px 10px 15px rgba(0, 0, 0, 0.5), inset -10px -10px 15px rgba(0, 0, 0, 0.5), inset 10px 10px 15px rgba(0, 0, 0, 0.5);
}
input[type="checkbox"]:checked::after {
color: green;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<input type="checkbox">
</body>

Instead of posting answer I will try to guide you:
Think how will the state change - only when your input is changing. Initially it will be off.
On document load, attach an event handler for onchange on the input. Display the value using : event.target.checked . Here event is your change event.

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>

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.

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