Tooltip position apperance issue - javascript

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>

Related

How to create text carousel

I want to create an horizontal carousel that has a phrase or several words scrolling end to end of the screen in a loop.
What I've tried is duplicating the phrase in two different divs, to avoid the gap in the animation (otherwise, the phrase goes almost away before it starts from the beginning and looks awful).
The problem (even though I've tried to delay the 2nd animation by half the time of the first one for them not to overlap), depending on the device, the text still overlaps.
How can I create such cacrousel (with or without JS) making sure texts don't overlap? https://tucuerpofit.com/testcarousel/

I've made an example, you could customize it as you want.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
</head>
<body>
<div id="carousel" >
<p>Personal</p>
</div>
<style>
body{
max-width: 100vw;
max-height: 100vh;
background-color: black;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
}
p{
margin: 10rem;
font-size: 2rem;
font-weight: 900;
color: white;
}
#carousel{
position: absolute;
top: 50vh;
left: 0%;
animation: mover 5s infinite;
}
#carousel>*{
display: inline-flex;
}
#carousel::before{
color: white;
content: 'YOUR TEXT';
}
#carousel::after{
color: white;
content: 'YOUR TEXT';
}
#keyframes mover {
0%{
position: absolute;
top: 50vh;
left: 0%;
}
100%{
position: absolute;
top: 50vh;
left: 85%;
}
}
</style>
</body>
</html>

Use Bootstrap carousel, this is much easier and more flexible to work with: here is an example:
Update: The main reason I am telling you to use this, is you have so many ways to design your carousel with all features in Bootstrap, here I just created the simplest one, you can use Left or Right or Click to move to the next slide, also it automatically moves to next slide.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<title>Stack16</title>
</head>
<body>
<h1 class="text-center">Hello, text carousel!</h1>
<div id="textCaro" class="carousel slide mt-1 mb-1" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="1" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="2" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#textCaro" data-bs-slide-to="3" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner mb-3 mt-3">
<div class="carousel-item active" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">This is a long text...............</h4>
</div>
</div>
<div class="carousel-item" >
<div class="card-header">
<h4 class="text-center">Text 1</h4>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#textCaro" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#textCaro" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
The final result:

How to align button with dropdown inline with other link anchor

`I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive
.top-section{
padding-top: 2rem;
}
.btn-search{
background-color: #EEEFEE;
border-radius: 0px !important;
}
.fa-search{
color: #8E8F8F;
}
.form-control{
border-radius: 0px !important;
}
.link-end{
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link{
margin-right: 2rem;
}
#media (max-width:991px) {
.link-end{
padding-top: 2rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 col-12">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<!--Empty Div-->
<div class="col-lg-4 d-md-block d-none"></div>
<!--End of Empty Div-->
<div class="col-lg-4 col-12">
<div class="link-end">
Help
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I want the dropdown menu to be responsible. It only got irresponsible when I align both to inline. I want the drop-down menu to be aligned properly not to the left side of the screen. I want it responsive

To test the grid structure, I removed the styles that added margin and padding to the elements. Then I updated the columns for responsive design; see the reference document for the grid system to be displayed differently in different browser sizes.
.btn-search {
background-color: #EEEFEE;
}
.fa-search {
color: #8E8F8F;
}
.link-end {
text-align: end;
display: flex;
justify-content: end;
align-items: baseline;
}
.first-link {
margin-right: 10px;
}
.customDropdownStyle{
margin-right: 110px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://use.fontawesome.com/f1e10fbba5.js"></script>
<link rel="stylesheet" href="contact.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print-Shop Contact</title>
</head>
<body>
<div class="top-section">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-search" type="button">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4"></div>
<div class="col-lg-4 col-md-4 col-sm-4 col-4">
<div class="link-end">
Help
<div class="dropdown customDropdownStyle">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action </button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
References
Grid system

just update the css of this class .link-end add this line in the css align-items: flex-end;
check the link here of updated code. updated code

Fetch And Pass Value of Each Row In My Sidebar Using Javascript

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.

How to change glyph icon color on hover inside div tag?

I want to show different color to glyph icon on hover.
This is my code:
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
css
.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
When user place the cursor on div tag,Now it's only changing text color.But I want to change text color:white and at the same time glyph icon color:#44c5ff;
.glyphicon:hover it's working when user exactyly place cursor on glyphicon. But not in div tag.
Thanks

<!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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.glyphicon:hover{
color:#44c5ff;
font-size:30px;
}
</style>
</head>
<body>
<div class="container">
<h2>Glyphicon Examples</h2>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
<a href="#">
<span class="glyphicon glyphicon-envelope"></span>
</a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Search icon on a styled button:
<button type="button" class="btn btn-info">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
<a href="#" class="btn btn-success btn-lg">
<span class="glyphicon glyphicon-print"></span> Print
</a>
</p>
</div>
</body>
</html>
Try It Once

.span-hover:hover {
background-color: rgba(0,0,0,0.4);
color:white;
}
.glyphicon
{
font-size: 25px;
color:red;
}
.glyphicon:hover
{
color:#44c5ff;
}
.span-hover:hover .glyphicon{
color:#44c5ff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="col-xs-3 col-lg-3 text-center span-hover" style="height:50px;border-right: 1px solid #fff;" data-target="#myCarousel" data-slide-to="1">
<span class="glyphicon glyphicon-globe"></span>
<span class="hidden-xs"> TRADING</span>
</div>
try this snippet. and you can use this type of hover
.span-hover:hover .glyphicon{
color:#44c5ff;
}

Button not working when sidenav is out

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

Categories

Resources