Kindly help me with my problem, my scroll effects are not working. I am not able to identify the problem. I am using bootstrap 4. Here's my code.
//SCROLL EFFECT
$(".nav-link").click(function () {
var href = $(this).attr('href');
scrollAmount = 0;
if (href == "#home")
scrollAmount = 0;
else
scrollAmount = $(href).offset().top - 65;
$('html, body').animate({
scrollTop: scrollAmount
}, 1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navbar -->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded fixed-top scrollspy">
<div class="container nav-container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="index.html" title="DECOREA, Inc. Philippines, Supplier of Quality Office Furniture, Artificial Grass and Window Blinds">Decorea</a>
<div class="collapse navbar-collapse" id="main-navbar">
<ul class="navbar-nav ml-auto" data-spy="affix">
<li class="nav-item active">
<a class="nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-services">Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section-contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End of Navbar -->
I appreciate your help. Thank you in advance.
Try with both snippet , i have tried to methods
Try with data();
$(document).ready(function(){
var countTimer = 1000;
$('a').on('click', function(event){
//event.preventDefault();
var currentID = $(this).attr('id');
//console.log(currentID);
var destination = $(this).data('anchor');
//console.log(destination);
var p = $('#' + destination);
var position = p.position();
$('body,html').animate({
scrollTop:position.top
}, countTimer);
});
})
body {
float: left;
width: 100%;
padding-bottom: 20px;
}
.common {
width: 100%;
float: left;
height: 400px;
background: #000;
margin-top: 30px;
}
.allbody {
float: left;
width: 100%;
}
a {
display: inline-block;
padding: 15px;
}
header {
float: left;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
.common h2 {
font-size: 30px;
color: #fff;
text-align: center;
padding-top: 10%;
}
<header>
first page
second page
third page
fourth page
</header>
<div class="allbody">
<div class="common" id="firstDestination" ><h2>First Page</h2></div>
<div class="common" id="secondDestination"><h2>Second Page</h2></div>
<div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
<div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Try with get href method
// click-to-scroll behavior
$("a").click(function (e) {
e.preventDefault();
var section = $(this).attr('href');
$("html, body").animate({
scrollTop: $(section).offset().top
}, 1000, function () {
window.location.hash = section;
});
});
body {
float: left;
width: 100%;
padding-bottom: 0px;
}
.common {
width: 100%;
float: left;
height: 100vh;
display: table;
}
.allbody {
float: left;
width: 100%;
}
a {
display: inline-block;
padding: 15px;
}
header {
float: left;
width: 100%;
position: fixed;
top: 0;
left: 0;
background: #fff;
}
.common h2 {
font-size: 30px;
color: #fff;
text-align: center;
padding-top: 10%;
display: table-cell;
vertical-align: middle;
}
#firstDestination {
background: #000;
}
#secondDestination {
background: #999;
}
#thirdDestination {
background: #ccc;
}
#fourthDestination {
background: #c1c1c1;
}
<header>
first page
<a href="#secondDestination" >second page</a>
third page
fourth page
</header>
<div class="allbody">
<div class="common" id="firstDestination" ><h2>First Page</h2></div>
<div class="common" id="secondDestination"><h2>Second Page</h2></div>
<div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
<div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Related
I'm trying to write some code to cause a transition on load, so I basically have some jquery adding a class, transition-left to a div and some css that says to move left if it has the class transition-left. However, even though the class is being added, the transition isn't happening. I just don't know why that is the case. Here is my code.
$(document).ready(function () {
$("#curtain-left").addClass("transition-left");
});
$(document).ready(function () {
$("#curtain-right").addClass("transition-right");
});
.curtain {
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
/* CSS variables to prevent duplication below */
--piece-width: 100px;
}
.curtain .content {
/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 0;
}
.curtain-panel {
display: flex;
align-items: center;
position: absolute;
width: 50%;
height: 100%;
transition: left, right;
transition-duration: 3s;
}
.curtain-panel.left {
left: 0;
justify-content: end;
}
.curtain-panel.right {
right: 0;
}
.curtain-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #333;
}
.curtain-piece-left {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(100% - var(--piece-width) / 2);
}
.curtain-piece-right {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(var(--piece-width) / -2);
}
.transition-left{
left: -100%;
}
.transition-right{
right: -100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/curtain.css" />
<link rel="stylesheet" href="css/index.css" />
<link href="./css/bootstrap.css" rel="stylesheet">
<link href="./css/index.css" rel="stylesheet">
<link href="./css/starter-template.css" rel="stylesheet">
<!-- Let browser know website is optimized for mobile
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
</head>
<body>
<div class="curtain">
<div class="curtain-panel left">
<img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
</div>
<div class="curtain-panel right">
<img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/>
</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
<a class="navbar-brand" href="#">a</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">b</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">c</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">d</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">e</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Template</h1>
<p class="lead">
Use this document as a template for other pages.<br />
Keep in mind, Bootstrap documentation might be needed to build
components of the other pages.
</p>
</div>
</main>
</div>
</div>
<!-- Bootstrap core JavaScript -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/curtain.js"></script>
<script src="jquery-3.4.1.min.js"></script>
</body>
</html>
You are adding it in the wrong place. Check out my version:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<style>
body{
margin: 0;
padding: 0;
font-size: 14px;
overflow-x: hidden;
}
.curtain {
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: 0;
/* CSS variables to prevent duplication below */
--piece-width: 100px;
}
.curtain .content {
/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 0;
}
.curtain-panel {
display: flex;
align-items: center;
position: absolute;
width: 50%;
height: 100%;
transition: left, right;
transition-duration: 3s;
}
.curtain-panel.left {
left: 0;
justify-content: end;
}
.curtain-panel.right {
right: 0;
}
.curtain-panel::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
background-color: #333;
}
.curtain-piece-left {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(100% - var(--piece-width) / 2);
}
.curtain-piece-right {
width: var(--piece-width);
height: auto;
z-index: 2;
margin: calc(var(--piece-width) / -2);
}
.transition-left{
left: -100% !important;
}
.transition-right{
right: -100% !important;
}
</style>
<div class="curtain">
<div class="curtain-panel left">
<img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
</div>
<div class="curtain-panel right">
<img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/>
</div>
<div class="content">
<nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
<a class="navbar-brand" href="#">a</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">b</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">c</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">d</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">e</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Template</h1>
<p class="lead">
Use this document as a template for other pages.<br />
Keep in mind, Bootstrap documentation might be needed to build
components of the other pages.
</p>
</div>
</main>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$(function(){
$(".curtain-panel.left").addClass("transition-left");
$(".curtain-panel.right").addClass("transition-right");
})
</script>
</body>
</html>
I am new to the Bootstrap framework and I would like to change the color of my navbar when scrolling on the different sections. When the background color of the section is white, the background color of the navbar should change to a red color, but my javascript isn' t working...
Could you please help me? I was unable to find a solution to my problem. Here's my codepen
$(document).ready(function() {
var scroll_start = 0;
var startchange = $('#part1');
var offset = startchange.offset();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$('.navbar-fixed-left').css('background-color', '#f9476c !important;');
} else {
$('.navbar-fixed-left').css('background-color', 'rgba(255,255,255,0.6)');
}
});
});
#part1 {
width: 100%;
height: 100vh;
background-color: white;
}
#part2 {
width: 100%;
height: 100vh;
background-color: #e9b8ac;
}
#part3 {
width: 100%;
height: 100vh;
background-color: white;
}
#part4 {
width: 100%;
height: 100vh;
background-color: #e9b8ac;
}
#spy {
position: fixed;
z-index: 5;
height: 100vh;
}
.op {
background-color: rgba(255, 255, 255, 0.6);
}
.op :hover {
background-color: rgba(255, 255, 255, 1);
}
.navbar-fixed-left .nav-link {
color: black;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div class="d-flex align-items-xl-center" id="spy">
<nav class="navbar navbar-fixed-left">
<ul class="navbar-nav">
<li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
<li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
<li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
<li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
</ul>
</nav>
</div>
<section id="part1">
</section>
<section id="part2">
</section>
<section id="part3">
</section>
<section id="part4">
</section>
</body>
</html>
Your javascript code as-is looks quite convuluted, and could be simplified to a toggleClass() if you added a bit of css. Start by adding a class with a background color for the navbar-nav (I set this to red in my code as the home has a white background), and also add an additional class with the alternate bg color.
I would recommend defining your variables in jquery as jquery variables (with the dollar sign before them) - read more in this other SO question
I added some text to the sections so that you would get the effect on click.
Hope this helps
$(document).ready(function() {
var scroll_start = 0;
var $startchange = $('#part1');
var $offset = $startchange.scrollTop();
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if (scroll_start > $offset) {
$('.navbar-nav').toggleClass('altcolor');
}
});
});
#part1 {
width: 100%;
height: 100vh;
background-color: white;
}
#part2 {
width: 100%;
height: 100vh;
background-color: #e9b8ac;
}
#part3 {
width: 100%;
height: 100vh;
background-color: white;
}
#part4 {
width: 100%;
height: 100vh;
background-color: #e9b8ac;
}
#spy {
position: fixed;
z-index: 5;
height: 100vh;
}
.op {
background-color: rgba(255, 255, 255, 0.6);
}
.op :hover {
background-color: rgba(255, 255, 255, 1);
}
.navbar-nav {
list-style-type: none;
padding-left: 20px;
background-color: #f9476c;
}
.navbar-nav.altcolor {
background-color: rgba(255, 255, 255, 0.6);
}
.navbar-fixed-left .nav-link {
color: black;
text-decoration: none;
padding: 0px 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<html>
<body>
<div class="d-flex align-items-xl-center" id="spy">
<nav class="navbar navbar-fixed-left">
<ul class="navbar-nav">
<li class="nav-item op"><a class="nav-link" href="#part1">Home</a></li>
<li class="nav-item op"><a class="nav-link" href="#part2">About</a> </li>
<li class="nav-item op"><a class="nav-link" href="#part3">Price</a> </li>
<li class="nav-item op"><a class="nav-link" href="#part4">Contact</a> </li>
</ul>
</nav>
</div>
<section id="part1">
</section>
<section id="part2">
<p>
About
</p>
</section>
<section id="part3">
<p>
Price
</p>
</section>
<section id="part4">
<h2>
Contact
</h2>
</section>
</body>
</html>
Desired:
When menu button is clicked and navigation(#mainNav) slides in, check to see if visible. If so, .addClass .is-open to .nav-item. When navigation (#mainNav) is closed, .removeClass .is-open from .nav-item.
Issue:
Class is not being added to .nav-item when navigation is visible(Slides).
HTML
<header>
<!-- Logo and Burger -->
<div class="brand-wrap">
<div class="trigger-wrapper">
<button id="burger">
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
<div class="nav-trigger-line"></div>
</button>
</div>
</div>
<!-- End of Logo and Burger -->
<!-- Navigation -->
<nav id="mainNav" class="navbar main-nav">
<div class="nav-container">
<ul class="nav flex-column">
<li class="nav-item">
<span class="nav-number">01.</span><br>Our Company
</li>
<li class="nav-item">
<span class="nav-number">02.</span><br>Our People
</li>
<li class="nav-item">
<a href="services.html" class="nav-link">
<span class="nav-number">03.</span>
<br>Services</a>
</li>
<li class="nav-item">
<span class="nav-number">04.</span><br>Careers
</li>
<li class="nav-item">
<span class="nav-number">05.</span><br>Contact Us
</li>
</ul>
</div>
</nav>
<!-- End of Navigation -->
</header>
CSS
.brand-wrap {
position: fixed;
top: 20px;
right: 20px;
z-index: 999;
}
#burger {
float: right;
margin: 0;
}
.trigger-wrapper {
position: absolute;
right: 5px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(35, 31, 32, 1);
}
.nav-container {
margin-top: 80px;
}
.nav-link {
color: #fff;
font-size: 1.5em;
font-weight: 800;
padding: .25em 1em;
}
.nav-link:hover {
color: #82bc00;
}
.nav-number {
font-size: .5em;
font-weight: 600;
}
.nav-trigger-line {
height: 3px;
width: 30px;
background-color: #fff;
margin: 6px auto;
}
JS
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle();
});
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
jsfiddle: https://jsfiddle.net/WeebleWobb/auszo29m/2/
You need to send it inside the event handler:
// Menu click function
$('#burger').click(function() {
$('#mainNav').toggle(function () {
// Check if Nav is visible
if ($('#mainNav').is(':visible')) {
$(".nav-container .nav .nav-item").addClass("is-open");
} else {
$(".nav-container .nav .nav-item").removeClass("is-open");
}
});
});
The best thing you can do is, you should put it inside the callback function like above.
Use this jsFiddle instead of Stack Snippet
$(".dropdown li a").dblclick(function(){
//alert('Long pressed');
$(this).parent().toggleClass('selected');
if ($('.dropdown li').hasClass('selected')) {
// alert('1 Item selected');
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('.dropdown-title').addClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').removeClass('hide');
$(this).parent().parent().parent().parent().parent().parent().find('.deleteli').addClass('show');
}
else {
$(this).parent().parent().parent().parent().parent().parent().find('.header').find('span').removeClass('hide');
$('.delete').removeClass('show');
$('.delete').addClass('hide');
// alert('1 Item dis selected');
}
});
$('a#deletelibtn').click(function () {
// body...
// alert('deletelibtn clicked')
$(this).parent().parent().find('.selected').remove();
$(this).parent().find('.dropdown-title').removeClass('hide');
$(this).parent().find('.dropdown-title').addClass('show');
})
/*Dropdown Messages*/
.messages-dropdown{
width: 300px;
}
.messages-dropdown .header{
padding: 15px;
border-bottom: 1px solid #ccc;
}
.messages-dropdown .header small{
float: right;
}
.messages-dropdown .header small a{
font-style: 9px;
margin-left: 5px;
}
.messages-dropdown .footer{
text-align: center;
border-top: 1px solid #ccc;
}
.messages-dropdown .footer a{
padding: 15px;
}
.messages-items{
list-style: none;
padding: 0;
padding-left: 0px;
margin: 0;
}
.messages-items .Mitem {
padding: 10px;
padding-left: 10px;
border-left: 3px solid transparent;
}
.messages-items .Mitem:hover {
background: #f0f0f0;
border-color: #3a3f51;
}
.messages-items .Mitem a {
display: inline-block;
width: 100%;
}
.messages-items .Mitem a:hover {
text-decoration: none;
background: #f0f0f0;
}
.messages-items .Mitem a b{
color: #444;
letter-spacing: 1px;
}
.messages-items .Mitem a small{
color: #999;
letter-spacing: 1px;
}
.messages-items .Mitem img{
float: left;
margin-right: 10px;
border-radius: 100% !important;
padding: 5px;
border: 1px solid #ccc;
width: 40px;
height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="icon icon-li-envelope message-bell"></i>
<span class="badge message-badge">4</span>
</a>
<ul class="dropdown-menu messages-dropdown">
<li class="header">
<span class="dropdown-title">
heading
</span>
<a class="#delete" id="deletelibtn">
delete
</a>
</li>
<div id="message">
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
<li>
<ul class="messages-items">
<li class="Mitem">
<a href="#MessageItem">
content
</a>
</li>
</ul>
</li>
</div>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
When I select the messages the deletelibtn option is enabled and I'm able to delete the messages, but after deleting the messages the deletelibtn button is not hiding and then again if am selecting the messages again the delete option is not showing.
When the deletelibtn option is showing the dropdown-title should be hidden, similarly when the dropdown-title is visible the deletelibtn button should be hidden.
I hope I explained what I need exactly.
I changed several little things which wouldn't affect functionality but are 'best practice'. There were a couple of small targeting issues as well which are what caused the functional problem. The reason it was so hard to debug is because your html was a but jumbled and you reused the same words over and over making it hard to follow the logic. Here is the corrected js.
$('.dropdown-menu li').on('click', function(event){
//The event won't be propagated to the document NODE and
// therefore events delegated to document won't be fired
event.stopPropagation();
});
$("ul.messages-items a").dblclick(function(){
$(this).closest('ul.messages-items').parent().addClass('selected');
var $container = $(this).closest('div.container-fluid')
if ($('li.dropdown').hasClass('open')) {
$container.find('.header').find('.dropdown-title').removeClass('show').addClass('hide');
$container.find('.deleteli').removeClass('hide').addClass('show');
}
else {
$container.find('.header').find('span').removeClass('hide').addClass('show');
$('.delete').removeClass('show').addClass('hide');
}
});
$('a#deletelibtn').click(function () {
var $this = $(this);
$('#message').find('li.selected').remove();
$this.parent().find('.dropdown-title').removeClass('hide').addClass('show');
$this.find('i.deleteli').removeClass('show').addClass('hide');
})
https://jsfiddle.net/xctgo71x/23/
You can add this off-click event to reset the dropdown.
$(document).click(function(e){
//console.log(e);
if(true)
ResetDropdown();
});
function ResetDropdown(){
$('span.dropdown-title').removeClass('hide').addClass('show');
$('i.deleteli').removeClass('show').addClass('hide');
$('#message').find('li.selected').removeClass('selected');
}
It works ok on the jsfiddle but on your actual code you may need to tweak it a little.
https://jsfiddle.net/xctgo71x/29/
I'm using Bootstrap 3 and jQuery 1.9.1 to make a website where profile picture is shown in a <li> tag. I want to show the link of "Update Image" when I'm hovering over the image. So far I've managed to fade the image on hovering but I'm unable to show a link or text on hovering over image. Here are my codes,
JQUERY
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
</li>
</ul>
</div>
</div>
I've searched other sources but none of them works since it'll bug my own css styles. How can I show a link at the middle of the image on hovering? Need this help badly! Thanks.
Hope, if you want to do it without Jquery - even though if you want to manage it using jquery, it can also be done.. not a big issue
.img-profile {
margin-top: 10px;
width: 200px;
/* if image is bigger it will adjust according to parent width */
height: 250px;
display: inline-block;
}
.img-wrap {
display: inline-block;
position: relative;
}
.img-wrap:hover .img-profile {
opacity: 0.5;
}
.img-wrap .hover-div {
display: none;
position: absolute;
text-align: center;
top: 50%;
left: 0;
right: 0;
margin-top: -10px;
z-index: 10;
/* width of image container */
}
.img-wrap:hover .hover-div {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="img-wrap">
<img class="img-responsive img-rounded img-profile center-block" src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="profile_pic" />
<div class="hover-div">Update Image
</div>
</li>
</ul>
</div>
</div>
Yoy should try this. that is exactly you want.
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
$(this).closest("li").find("a").show();
},
function () {
$(this).fadeTo(200, 1);
$(this).closest("li").find("a").hide();
});
})
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="https://i.stack.imgur.com/TwJmm.gif?s=328&g=1" alt="profile_pic" />Link that you want
</li>
</ul>
</div>
</div>
you can achieve all that using css alone.
html
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="myimage.png" alt="profile_pic" />
<p class="text">change profile picture</p>
</li>
</ul>
css
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
opacity: 1.0;
filter:alpha(opacity=100);
}
.text {
display: none;
}
img-profile:hover {
opacity: 0.45;
filter:alpha(opacity=45);
}
img-profile:hover + .text {
display: block;
}
check this fiddle
HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<img class="img-responsive img-rounded img-profile" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Colossoma_macropomum_01.jpg/800px-Colossoma_macropomum_01.jpg" alt="profile_pic" />
Update Image
</li>
</ul>
</div>
</div>
CSS
.img-profile {
margin-top: 10px;
width: 200px;
height: 250px;
}
#side-menu li a{
display:none;
}
#side-menu li:hover a#update{
display:block;
}
JS
$(function () {
$(".img-profile").hover(
function () {
$(this).fadeTo(200, 0.45);
},
function () {
$(this).fadeTo(200, 1);
});
});