How do I pass a value to my sidebar using Javascript when I fetch data from my database? Currently, I could pass data, but only the first row in my database table.
I just want to view details into my sidebar when I click the button to go somewhere before it does some action. But unfortunately, the first card only works then the second one does not.
The following code is available at: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_details.php
And the database is located here: https://github.com/Ailyn09/AJAX-Fetch/blob/master/sidebar_query.sql
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!--Font-awesome 4.7.0-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Flickity-->
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<!--Fontello-->
<link href="web/css/fontello.css" rel="stylesheet">
</head>
<body id="body">
<nav class="navbar navbar-toggleable-md navbar-light fixed-top bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Test</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'index.html'">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'category.php'">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'businesstype.html'">Business Types</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'instructions.html'">How To Order</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="window.location.href = 'contacts.html'">Contact Us</a>
</li>
</ul>
</div>
<ul class="navbar-side" id="navbarSide" style="padding: 20px;">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12" align="right">
<a class="hamburger is-closed" data-toggle="offcanvas"><i class="icon_set_1_icon-77"></i></a>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_desc">
<form>
<img id="images1" src="" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<input type='text' id='field1'/>
<input type='text' id='field2'/>
<div id="field3"></div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Book Now
</p>
</form>
</div>
<div class="col-lg-12 col-md-12 col-sm-12" id="item_review">
<form>
<img src="images/web/empty_img.gif" class="thumbnail" width="100%" height="100%">
<h3>This is item 1</h3>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleTextarea">Review</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<p>
<i class="fa fa-heart-o"></i>
</i>
Submit
</p>
</form>
<hr>
</div>
</div>
</ul>
<div class="overlay"></div>
</nav>
<div class="container marketing">
<h1>The Main page</h1>
<div class="row">
<?php
$conn = new mysqli('localhost', 'root', '1234', 'test');
if ($conn->connect_error) {
die("Connection error: " . $conn->connect_error);
}
$result = $conn->query("SELECT * FROM items");
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {?>
<div class="col-lg-3 col-sm-6 division-card">
<div class="card" style="position: relative;">
<img class="card-img-top" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15c3874090b%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15c3874090b%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22118.01666641235352%22%20y%3D%2297.5%22%3E318x180%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" alt="Card image cap">
<h4 class="card-title no-margin" style="position: absolute; right: 0; bottom:0; top:150px;">TEST</h4>
<div class="card-block" align="left">
<h4 class="card-title no-margin">Card title</h4>
<p class="no-margin">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
</p>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<input class="form-control" type='text' id='fielda' value="<?php echo $row['name'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldb' value="<?php echo $row['price'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldc' value="<?php echo $row['temdesc'] ; ?>"/> <br/>
<input class="form-control" type='text' id='fieldd' value="<?php echo $row['imagename'] ; ?>"/> <br/>
<i class="fa fa-heart-o"></i>
<i class="icon_set_1_icon-93"></i>
<a href="#" class="btn btn-outline-primary" id="navbarSideButton" >Go Somewhere</a>
</div>
</div>
</div>
<?php } } else { } ?>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#footer").load("footer.html");
$('[data-toggle="offcanvas"]').click(function() {
$('#wrapper').toggleClass('toggled');
});
});
$(document).ready(function() {
$('#navbarSideButton').on('click', function() {
$('#navbarSide').addClass('reveal');
$('.overlay').show();
document.body.style.overflow = 'hidden';
$('#field1').val($('#fielda').val());
$('#field2').val($('#fieldb').val());
$("#field3").html($("#fieldc").val());
var path = "images/web/";
var data = $("#fieldd").val();
var imgEl = document.getElementById("images1");
imgEl.src= path.concat(data);
});
$('.is-closed').on('click', function() {
$('#navbarSide').removeClass('reveal');
$('.overlay').hide();
document.body.style.overflow = 'scroll';
});
});
function switchVisible() {
if (document.getElementById('item_desc')) {
if (document.getElementById('item_desc').style.display == 'none') {
document.getElementById('item_desc').style.display = 'block';
document.getElementById('item_review').style.display = 'none';
} else {
document.getElementById('item_desc').style.display = 'none';
document.getElementById('item_review').style.display = 'block';
}
}
}
</script>
</body>
</html>
<style type="text/css">
.navbar-side {
height: 100%;
position: fixed;
top: 0;
right: 0;
padding: 0;
list-style: none;
border-left: 2px solid #ccc;
background-color: #f7f7f9;
overflow-y: scroll;
z-index: 1000;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.navbar-side-item {
padding: 1.5rem 0;
margin: 0;
border-bottom: 2px solid #ccc;
height: 5rem;
}
.side-link {
padding-left: 2rem;
}
.reveal {
-webkit-transform: translateX(0%);
-ms-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
.overlay {
position: fixed;
display: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #ccc;
opacity: 0.6;
z-index: 990;
}
.is-closed{
cursor: pointer;
}
#item_review{
display: none;
}
/*-------------------------------*/
/* Media Breakpoints Area */
/*-------------------------------*/
#media (min-width: 544px) {
.navbar-side {
width: 100%;
}
.container.marketing {
margin-top: 90px;
}
}
#media (min-width: 768px) {
.navbar-side {
width: 50%;
}
.container.marketing {
margin-top: 80px;
}
}
#media (min-width: 992px) {
.navbar-side {
width: 40%;
}
.container.marketing {
margin-top: 70px;
}
}
#media (min-width: 1200px) {
.navbar-side {
width: 25%;
}
.container.marketing {
margin-top: 60px;
}
}
</style>
Check this line:
$('#navbarSideButton')
here you are using # i.e. ID's selector which works for unique selection. So it works for the first selector only, this is the default behavior of # selector. Instead of that use . i.e. class selectors that works for multiple selection.
Related
I made a song and a lyric searching page. The first time search is working well but while I click in the search button the previous result remains and also search results also shown on the page.
Now I want to disappear the result while searching for another song or lyric.
And also I want to make the search the result same style but I don't get results as I wanted.
const text = document.getElementById('text');
const search = document.getElementById('search');
const result = document.getElementById('result');
// api url
const api= 'https://api.lyrics.ovh';
// song lyrics
function getLyrics (artist, title) {
let url = `${api}/v1/${artist}/${title}`
fetch(url)
.then(res => res.json())
.then(singerLyrics => {
const lyrics = singerLyrics.lyrics;
const getLyric = document.getElementById('getLyric');
getLyric.innerHTML = `<h2 class="text-success mb-4">${artist} - ${title}</h2>
<pre class="lyric text-white">${lyrics}</pre>`;
});
result.innerHTML= '';
}
// search by song or artist
function searchSongs(term){
fetch(`${api}/suggest/${term}`)
.then(res => res.json())
.then (showData);
};
// search result
function showData (data) {
result.innerHTML = `<div class="single-result row align-items-center my-3 p-3">
<div class="col-md-9"> ${data.data.map(song => `<h3 class="lyrics-name">${song.title}</h3>
<p class="author lead">${song.type} by <span>${song.artist.name}</span></p>
</div>
<div class="col-md-3 text-md-right text-center">
<button onclick="getLyrics('${song.artist.name}','${song.title}')" class="btn btn-success">Get Lyrics</button>
</div>
</div>`)};
`;
};
//event listeners
search.addEventListener('click', function searchResult (){
const inputText = text.value.trim();
if (!inputText){
alert('this is not a song or artist')
}else {
searchSongs(inputText);
}
});
body{
background-color: #13141b;
color: #ffffff;
background-image: url(images/bg-image.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
}
.form-control{
background-color:rgba(255, 255, 255, 0.2);
padding: 22px;
border: none;
border-radius: 25px;
}
.btn{
border-radius: 1.5rem;
padding: 9px 20px;
}
.btn-privious{
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.navbar-toggler {
border: none;
}
.search-box{
position: relative;
}
.search-btn {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
.single-result{
background: rgba(255, 255, 255, 0.2);
border-radius: 15px;
}
<!doctype html>
<html lang="en">
<head>
<title>Hard Rock Solution - Song Lyric App</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Custom css -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<nav class="navbar navbar-dark my-3">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Hard Rock Solution">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation">
<img src="images/toggler-icon.svg" alt="">
</button>
<div class="collapse navbar-collapse" id="collapsibleNavId">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdownId">
<a class="dropdown-item" href="#">Action 1</a>
<a class="dropdown-item" href="#">Action 2</a>
</div>
</li>
</ul>
</div>
</nav>
<main class="content-area">
<div class="search-bar col-md-6 mx-auto">
<h1 class="text-center">Lyrics Search</h1>
<div class="search-box my-5">
<input id="text" type="text" class="form-control" placeholder="Enter your artist song name">
<button id="search" class="btn btn-success search-btn">Search</button>
</div>
</div>
<!-- === Simple results === -->
<div class="d-flex justify-content-center">
<div id="result" class="">
</div>
<!-- Single Lyrics -->
<div id="getLyric" id="artistTitle" class="single-lyrics text-center">
</div>
</div>
</main>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom Script Here -->
<script src ="javascrpt.js"> </script>
</body>
</html>
try to use autocomplete="off" like
<input type="text" name="foo" autocomplete="off" />
Every time, search is clicked, the lyrics container should be emtpied:
document.querySelector("#getLyric").childNodes.forEach(el => el.remove())
to fix the issue, add this to your script:
document.querySelector("#search").addEventListener('click', function () {
document.querySelector("#getLyric").innerHTML = '';
})
I am learning web development from a course on Udemy and I ran into a problem. I cannot seem to get the footer to behave the way I want it. The thing is that when there is more data, the footer starts overlapping on it, as I have put the position:relative for it in CSS. But if I remove that, if the page is not completely filled (e.g. Login page), the footer does not stay at the bottom of the page, instead jumps up to the lowest parts of the Login form.
I am seeking advice/help on how to make the footer stick to the bottom of the page and for it to stay there and get pushed in case the page fills up with data and reaches the edges of the footer.
Note: I am using EJS for this and have header and footer partials.
The Login form HTML:
<% include ./partials/header %>
<div class="row">
<div class="col-md-12">
<form class="form-signin" action="/login" method="POST">
<h1 class="mb-3 text-center">Please sign in</h1>
<label for="inputUsername" class="sr-only">Username</label>
<input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
required>
<div class="mb-3">
Forgot password?
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<div class="form-signin">
Go back
</div>
</div>
</div>
<% include ./partials/footer %>
The header:
<!DOCTYPE html>
<html>
<head>
<title>Yelp Camp</title>
<meta name="viewwport" content="width-device-width, initial-scale-1">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
<a class="navbar-brand" href="/">YelpCamp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
<a class="nav-link" href="/campgrounds">Home</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<% if(!currentUser){ %>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
<a class="nav-link" href="/register">Sign Up</a>
</li>
<% } else { %>
<li class="nav-item">
<a class="nav-link" href="#">Signed in as
<%= currentUser.username %></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
<% } %>
</ul>
</div>
</nav>
<div>
<% if (error && error.length > 0) { %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
<% if (success && success.length > 0) { %>
<div class="alert alert-success" role="alert">
<%= success %>
</div>
<% } %>
</div>
<div class="container">
<div class="page-content">
The footer:
</div> <!-- /.page-content -->
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
© YelpCamp 2018 | Home
</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
</body>
</html>
The relevant CSS:
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.page-content {
min-height: 100% !important;
padding: 0 0 -60px !important;
position: relative;
}
footer .footer-push{
height: 60px !important;
position: absolute !important;
clear: both;
}
.container .text-muted{
margin: 20px 0 0;
}
I have tried a good dozen different attempts for sticky-footers, but none of them worked so far. The main problems were:
The page with almost no data (e.g. Login page) had the footer below the bounds of the screen (scroll needed to see it) or right after the login form (not at the bottom of the page where I would like to have it);
The page with enough data to fill the page had the footer overlapping the data in the middle of the page (even before scrolling).
Current problems:
The footer in the login page is not staying at the bottom of the page
Even though the footer's height is set to 60px, it just shrinks to around 19 (zoomed out view)
Codepen link for the Login Page example of the code. (Note: The problem is visible only in Full view)
I would be really grateful if anyone could assist me in finding a solution to this problem.
Thank you.
You aren't defining that the footer must be hugging the bottom of the screen. Try adding this.
.footer {
bottom: 0;
}
If you run into an issue with the other content now being covered by the footer, just add some margin/padding at the bottom of the last div that is of equal height to the footer.
Use position:fixed to define the sticky position and set bottom:0 to define the location where you want it to be.
Try this
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="text"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.page-content {
min-height: 100% !important;
padding: 0 0 -60px !important;
position: relative;
}
footer .footer-push{
height: 60px !important;
position: absolute !important;
clear: both;
}
.container .text-muted{
margin: 20px 0 0;
}
footer {position: fixed; bottom:0; text-align:center; width:100%; background:#fff;}
<div class="row">
<div class="col-md-12">
<form class="form-signin" action="/login" method="POST">
<h1 class="mb-3 text-center">Please sign in</h1>
<label for="inputUsername" class="sr-only">Username</label>
<input type="text" id="inputUsername" class="form-control" name="username" placeholder="Username" required
autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" name="password" placeholder="Password"
required>
<div class="mb-3">
Forgot password?
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
<div class="form-signin">
Go back
</div>
</div>
</div>
<!DOCTYPE html>
<html>
<head>
<title>Yelp Camp</title>
<meta name="viewwport" content="width-device-width, initial-scale-1">
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.2.1/united/bootstrap.min.css" rel="stylesheet"
integrity="sha384-udHIRBY7G8ZUr7aO8wRn7wD4bsGGRLR5orCz1FV93MZ7232xhAdjDYEvqeZLx45b" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.css">
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-2">
<a class="navbar-brand" href="/">YelpCamp</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item <%= typeof page !== 'undefined' && page === 'campgrounds' ? 'active' : '' %>">
<a class="nav-link" href="/campgrounds">Home</a>
</li>
</ul>
<ul class="navbar-nav navbar-right">
<% if(!currentUser){ %>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
<a class="nav-link" href="/login">Login</a>
</li>
<li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
<a class="nav-link" href="/register">Sign Up</a>
</li>
<% } else { %>
<li class="nav-item">
<a class="nav-link" href="#">Signed in as
<%= currentUser.username %></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
<% } %>
</ul>
</div>
</nav>
<div>
<% if (error && error.length > 0) { %>
<div class="alert alert-danger" role="alert">
<%= error %>
</div>
<% } %>
<% if (success && success.length > 0) { %>
<div class="alert alert-success" role="alert">
<%= success %>
</div>
<% } %>
</div>
<div class="container">
<div class="page-content">
</div> <!-- /.page-content -->
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">
© YelpCamp 2018 | Home
</p>
</div>
</footer>
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<!-- Bootstrap JS CDN -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
crossorigin="anonymous"></script>
</body>
</html>
I have Used Bootstrap here....My popover tootip position is not correct. As I want it to appear in the extreme right corner with the Glyphicon but it still appears at the left Position.
So, what I Tried earlier :
1) I just changed the CSS and tried to align the popover on the right but it did not work.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title : 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close" , function(){
$(this).parents(".popover").popover('hide');
});
.form-control {width:120px;}
.popover {
max-width:300px; }
#contact_query.btn.btn-primary
{
background-color:#74a5d0;
}
#call_icon.glyphicon.glyphicon-earphone {
position: fixed;
top: 8px;
right: 16px;
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary
{
font-size:13px;
}
#query-pos
{
font-size:13px;
}
#email-pos
{
font-size:13px;
}
#ph_1,#ph_2
{
font-size:13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a data-placement="right" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12" ><div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12" ><div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary" ><span class="glyphicon glyphicon-earphone"></span></a></div></div>
</div><hr>
<div class="row">
<div class="col-xs-12"><p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p></p></div></div>
<div ><hr><p><b>Or you can</b><br/><p id="email-pos">E-mail us # example#example.com</p></p></div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
Add position: fixed on the anchor that opens the popup instead of the icon. Because popover is trying the align the popover relative to the anchor that opens it. And the position of the anchor is still at left as its not position: fixed to the right.
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
Also changed the data-placement to left, as there is no space on right.
$("[data-toggle=popover]").popover({
html: "true",
container: 'body',
title: 'Contact Us ×',
content: function() {
return $('#popover-content').html();
}
});
$(document).on("click", ".popover .close", function() {
$(this).parents(".popover").popover('hide');
});
.form-control {
width: 120px;
}
.popover {
max-width: 300px;
}
#contact_query.btn.btn-primary {
background-color: #74a5d0;
}
.phone_icon {
position: fixed;
top: 8px;
right: 16px;
}
#call_icon.glyphicon.glyphicon-earphone {
font-size: 30px;
}
#media (max-width: 767px) {
#contact_query.btn.btn-primary {
font-size: 13px;
}
#query-pos {
font-size: 13px;
}
#email-pos {
font-size: 13px;
}
#ph_1,
#ph_2 {
font-size: 13px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<div class="container">
<ul class="list-unstyled">
<li><a class="phone_icon" data-placement="left" data-toggle="popover" data-title="" data-container="body" type="button" data-html="true" href="#contact" id="login_try"><span id="call_icon" class="glyphicon glyphicon-earphone"></span></a></li>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<div>123123121231 <a id="ph_1" href="tel:+9112313313123" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div><br/></div>
<div class="col-xs-12">
<div>1231231223 <a id="ph_2" href="tel:+91121312312" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-earphone"></span></a></div>
</div>
</div>
<hr>
<div class="row">
<div class="col-xs-12">
<p><b>Unable to Contact us? </b><br/>
<p id="query-pos"><a id="contact_query" href="#" class="btn btn-primary">Send your Query</a> and our team will get back to you at the earliest.</p>
</p>
</div>
</div>
<div>
<hr>
<p><b>Or you can</b><br/>
<p id="email-pos">E-mail us # example#example.com</p>
</p>
</div>
</div>
</form>
</div>
</ul>
</div>
</body>
</html>
I have an issue with my bootstrap show password eye icon, only appearing half of it I have tried everything that I can think of, including the following:
Removing other CSS/SCSS scripts
Altering the append input class.
Here's My issue demo here ill add relevant code only also below:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
What really does work? only if i add the exact bootstrap code css does the eye work, but that also makes the rest of my sites css get screwed up! Demo of what I mean:
<style type="text/scss">
#import url(http://fonts.googleapis.com/css?family=Lobster);
#page {
margin: 0 15px;
padding-top: 30px;
width: 25vw;
}
label {
font-size: 0.875em;
width: 25vw;
}
// Error Messages - front end validation
.form-group.error {
label.error {
margin-top: 5px;
color: #ee4141;
}
}
// Pod
// --------------------------------------------------
// Password Creation Info Box
// --------------------------------------------------
#password-info {
margin: 20px 0;
overflow: hidden;
text-shadow: 0 1px 0 #fff;
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 10px 10px 10px 50px;
margin-bottom: 1px;
background: #f4f4f4;
font-size: 12px;
transition: 250ms ease;
position: relative;
.icon-container {
display: inline;
width: 50px;
background: lighten(#428bca, 20%);
position: absolute;
top: 0;
bottom: 0;
left: 0;
text-align: center;
.fa {
color: white;
padding-top: 10px;
position: relative;
top: 2px;
}
}
.tip {
color: #5ca6d5;
text-decoration: underline;
}
&.valid {
.icon-container {
background-color: #18c36b;
}
color: darken(#18c36b, 10%);
}
span.invalid {
color: #ff642e;
}
}
}
}
</style>
<script type="text/javascript" src="https://antimalwareprogram.co/LoginSys/browser-scss.min.js"></script>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<!--<link href="/sb/css/sb-admin.css" rel="stylesheet">-->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://antimalwareprogram.co/sb/vendor/jquery/jquery.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/popper/popper.min.js"></script>
<script src="https://antimalwareprogram.co/sb/vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="/sb/vendor/jquery-easing/jquery.easing.min.js"></script>
<div class="input-append input-group"><input id="password" class="form-control" type="password" value="123" placeholder="password" style="display: block;"><input type="text" class="form-control" placeholder="password" style="display: none;"><span tabindex="100" title="Click here show/hide password" class="add-on input-group-addon" style="cursor: pointer;"><i class="glyphicon icon-eye-open glyphicon-eye-open"></i></span></div>
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="form-group">
</div>
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account <br> <p>Already a member? Login</p>
</div>
<div class="card-body">
<form>
<div class="form-group">
<input type="text" name="username" id="username" class="form-control input-lg" placeholder="User Name" value="" tabindex="1">
<div class="form-group">
<input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address" value="" tabindex="2">
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
<form class="validate-password" method="post" action="#">
<fieldset class="fieldset-password">
<!--<div id="alert-invalid-password" class="alert alert-danger hide">Please enter a valid password</div>
<p>All checkmarks must turn green in order to proceed</p>-->
<div id="password-info">
<ul>
<li id="length" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 6 characters
</li>
<li id="capital" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 uppercase letter
</li>
<li id="lowercase" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
At least 1 lowercase letter
</li>
<li id="number" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 number</span>
</li>
<li id="special" class="invalid clearfix">
<span class="icon-container">
<i class="fa fa-check" aria-hidden="true"></i>
</span>
<span> At least 1 symbol</span>
</li>
</ul>
</div>
</div>
</div>
<div class="col-xs-7 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="passwordConfirm" id="passwordConfirm" class="form-control input-lg" placeholder="Confirm Password" tabindex="4">
</div>
</div>
</div>
<style>
#submit , #login {
display:inline-block;
/**other codes**/
}
</style>
<div class="row" id="submits">
<input type="submit" name="submit" id="submit" value="Register" class="btn btn-primary btn-block btn-lg" tabindex="5">
</div>
</div>
</form>
</div></center>
<script type="text/javascript">
$("#password").password('toggle');
</script>
Relevent code:
Password Input Field
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100" data-toggle="password">
</div>
</div>
</div>
Bootstrap CDN CSS I use:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-
eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-
warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-
plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-
gift:before{content:"\e102"}.glyphicon-
leaf:before{content:"\e103"}.glyphicon-
fire:before{content:"\e104"}.glyphicon-eye-
open:before{content:"\e105"}.glyphicon-eye-
close:before{content:"\e106"}.glyphicon-warning-
sign:before{content:"\e107"}.glyphicon-
plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
Demo Of just The one input:
<style>
leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-
sign:before{content:"\e101"}.glyphicon-gift:before{content:"\e102"}.glyphicon-leaf:before{content:"\e103"}.glyphicon-fire:before{content:"\e104"}.glyphicon-eye-open:before{content:"\e105"}.glyphicon-eye-close:before{content:"\e106"}.glyphicon-warning-sign:before{content:"\e107"}.glyphicon-plane:before{content:"\e108"}.glyphicon-calendar:before{con
</style>
<link href="https://antimalwareprogram.co/sb/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://antimalwareprogram.co/sb/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.0.3/bootstrap-show-password.min.js"></script>
<body class="bg-dark">
<center><div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-body">
<form>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" tabindex="100"
data-toggle="password">
JSFiddle With Just Input field
Note: It works only when a ad blocker is enabled but only shows a emoji then!
Another Note: With Font Awesome, it doesnt show anything with ad blocker, but without it is still half an eye!
The bootstrap css that you are including is different to the JS that you are including. Use the official CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Also, make sure you close all your tags. Unclosed tags can do strange things to the layout.
Here is a working fiddle: https://jsfiddle.net/sveynh3z/
Apologies for being late to the party but I see that some of the snippets here don't appear to be working correctly so here's my one. Should it be of any use.
If you're getting an error viewing the snippet (using Chrome), please use the JSFiddle.
var timeoutId = 0;
$('#check').on('mousedown', function() {
$('#eye').removeClass( "glyphicon glyphicon-eye-close" );
$('#eye').addClass( "glyphicon glyphicon-eye-open" );
$('#password').attr('type', 'text');
timeoutId = setTimeout(1000);
}).on('mouseup mouseleave', function() {
$('#password').attr('type', 'password');
$('#eye').removeClass( "glyphicon glyphicon-eye-open" );
$('#eye').addClass( "glyphicon glyphicon-eye-close" );
clearTimeout(timeoutId);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-6">
<h3>Show Password Example:</h3>
<div class="input-group">
<input type="password" id="password" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="check"><span id="eye" class="glyphicon glyphicon-eye-close" aria-hidden="true"></span></button>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
</div>
I'm working on a login page on my site button for some reason the submit button isn't clickable when the sidenav is out (I'm using the materialize framework).
I have modified my sidenav a bit so that the overlay is removed when it is out and it doesn't close when clicked outside it.
$('.button-collapse').sideNav({
menuWidth: 260,
edge: 'left',
closeOnClick: true
}
);
//Unbind sidenav click to close
$(function(){
$(".drag-target").unbind('click');
$("#sidenav-overlay").unbind('click');
});
html,body {
height: 100%;
background-color:
}
header, main, footer, header{
padding-left: 0 auto;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
.rotate90 {
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.text1 {
color: #212121;
}
.text2 {
color: #757575;
}
nav.top-nav {
background-color: #303F9F;
}
.title-text {
font-family: Roboto;
font-weight: bold;
}
a.bold, .bold {
font-family: Roboto;
font-weight: bold;
}
a.light, .light {
font-family: Roboto;
font-weight: normal;
}
#sidenav-overlay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<header>
<nav class="top-nav">
<div class="container">
<i class="material-icons">menu</i>
<div class="navbar-wrapper">
Icy Fire
</div>
</div>
</nav>
<ul id="slide-out" class="side-nav">
<h4 class="title-text center-align">Navigation</h4>
<div class="divider"></div>
<li>Account</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
<div class="collapsible-body">
Index
</div>
</li>
</ul>
</ul>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<h2 class="indigo-text">Login</h2>
<div class="divider"></div>
<form class="col s12" action="login.php" method="POST">
<div class="input-field">
<input id="username" type="text" class="validate" name="username" required>
<label for="username">Username</label>
</div>
<div class="input-field">
<input id="password" type="password" class="validate" name="password" required>
<label for="password">Password</label>
</div>
<div class="input-field">
<input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
<label for="indeterminate-checkbox">Remember me</label>
</div>
<button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</form>
<h5 class="indigo-text"><?php getMsg(); ?></h5>
</div>
</div>
</div>
</main>
<footer>
</footer>
</body>
Here it is on my website: link
You have a <div class="drag-target"> that's revealed along with the menu. This is overlaying your entire form. You can see for yourself by right clicking over top of the submit button and clicking Inspect Element in the dropdown menu.
it is because of your drag target is drag-target right is 0 which blocks your button which is position to right
remove the css attribute
right: 0;
in your drag-target element