Javascript: Problem "Share button" opens and closes on both comment boxes (jsfiddle)? Please check example on jsfiddle or show snippet view.
When share button is clicked on, it opens the list items on other comment boxes and I don't understand how to add a fix.
https://jsfiddle.net/64t88uze/2
$( "button" ).click(function() {
$( ".share-list" ).toggle();
});
/*share buttons on each post*/
.share{float:left;list-style: none;padding: 0 10px 0 0px;margin: 0px; text-align:center; background-color:white;}
.share li {display: block;position: relative;width:80px}
.share ul {display: none;}
.share a {text-decoration: none;display: block;box-shadow:0px 0px 1px 1px rgba(0, 0, 0, 0.125) inset;text-decoration: none;white-space: nowrap;color:#fff!important; border-radius:5%;}
.share ul li a:hover {text-decoration: none;}
.share li:hover li {float: none;}
.share-list {
position: absolute;
z-index: 2;
}
.COMMENTBOX{height:300px; background-color:#F1F1F1;}
.COMMENTBOX2{height:300px; background-color:#D1D1D1;}
.share-list a :hover{background-color:grey;transition: 0.3s ease}
.share-list a {box-shadow: none;border-radius:0px;}
.fa.fa-facebook,.fa.fa-twitter,.fa.fa-google-plus{font-size:40px; text-align:center; color:#fff;padding:20px; display:block;}
.share button {
padding: 0px;
background-color: inherit;
}
.fa-share-alt {color: #02bf03;padding: 10px;}
.fa.fa-facebook{background-color:#3A5795;}
.fa.fa-twitter{background-color:#26C4F1;}
.fa.fa-google-plus{background-color:#E93F2E; border-bottom-left-radius:5%;border-bottom-right-radius:5%;}
.share h3 {display: inline;padding-right:10px;}
/*end*/
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="COMMENTBOX">
<h1>Comment Box 1</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>
<div class="COMMENTBOX2">
<h1>Comment Box 2</h1>
<div class="share">
<li><button id="shareit"><h3><i class="fa fa-share-alt faa-pulse animated"></i>Share</h3></button>
<ul class="share-list">
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-google-plus"></i></li>
</ul>
</li>
</div>
</DIV>
Use the following code.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
The scope in your code referes to each and every item called .share-list. You have to select the .share-list in the clicked element.
This addition adds hides "share buttons" when user clicks outside them.
$( "button" ).click(function() {
$(this).parents('.share').find('.share-list').toggle();
});
$("html").click(function(event) {
if ($(event.target).closest('.share, .share-list').length === 0) {
$('.share-list').hide();
}
});
Related
I want to make admin navigation. When I click a menu it will be active until I click another menu. When I click another menu that should then be active. In my admin nav, I used the below code but it is not working. All my CSS is working properly, but I can't set the clicked menu as active. How I can fix this problem?
$(function() {
$('li').click(function() {
$('li.active').removeClass('active');
$(this).addClass('active');
});
});
.admin-menu ul {
padding: 0;
margin: 0;
}
.admin-menu ul li {
list-style: none;
transition: .4s;
}
.admin-menu ul li a {
color: #333;
display: block;
padding: 10px 15px;
font-size: 16px;
text-transform: capitalize;
}
.admin-menu ul li:hover, li.active {
background-color: #F8694A !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="admin-nav">
<div class="admin-menu">
<ul>
<li class="active"><i class="fas fa-home"></i> Dashboard</li>
<li><i class="far fa-list-alt"></i> Category</li>
<li><i class="fas fa-book"></i> Books</li>
<li><i class="fas fa-users"></i> Users</li>
<li><i class="fas fa-chalkboard-teacher"></i> E-books</li>
<li><i class="fas fa-cart-arrow-down"></i> Orders</li>
<li><i class="fas fa-layer-group"></i> Others</li>
<li><i class="fas fa-cog"></i> Settings</li>
<li><i class="fas fa-power-off"></i> Logout</li>
</ul>
</div>
</div>
I want to create a menu bar with sub menu using Jquery. There are two item with sub menu. When i click on once i want it slide down and when i click second one then second one need to slide down but first one or all another one need to slide up. I tried following:
HTML
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
CSS
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
Javascript
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
On click make other submenu to slideUp fast or slow and than toggle see below snippet for more info
$(document).ready(function(){
$('.footer-lang .lang a').on('click', function(e) {
$(".lang > ul").slideUp("fast");
$(this).next('ul').slideToggle('slow');
e.preventDefault();
});
});
.footer-lang ul{
display: block;
text-align: center;
}
.footer-lang .lang{
display: inline-block;
}
.footer-lang .lang a{
display: block;
padding: 8px;
color: #000;
}
.footer-lang .lang > ul{
display: none;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div class="footer-lang">
<ul>
<li class="lang">
ENG <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>En</li>
<li>Bn</li>
</ul>
</li>
<li class="lang">
USD <i class="fa fa-caret-down" aria-hidden="true"></i>
<ul>
<li>USD</li>
<li>VND</li>
</ul>
</li>
</ul>
</div>
one method is to add a class signifying open when clicking it and then close that class before opening another item. something like this would use that:
$(document).ready(function() {
$('.footer-lang .lang a').on('click', function(e) {
e.preventDefault();
// close the open
$('.is-open').removeClass('is-open').slideToggle('slow);
// open the closed
$(this).next('ul').slideToggle('slow');
$(this).addClass('is-open');
});
});
I've been stuck on this for hours and hours and became pretty desperate. So I have this angular2 applicaton made for a school project but what I want to do is when i click on the + button this dropdown menu comes down and when i click on it again, or when I click on a link, it closes again. Right now it just stays open all the time and doesn't do anything when I click it
I have tried many different things, from ng2-dropdown to a javascript file that shows or hides the menu. I am out of options and getting really frustrated on this.
this is the html element in the browser before i click the +
this is the html element in the browser after i click the +
I have done the proper imports for the ng2-dropdown module which should make it work. It might be something small and stupid, but I don't see it.
This is my app.component which has the navigation bar as a template. on click i route to other components html's.
#Component({
selector: 'ls-app',
styleUrls: ['./app/css/fonts.css','./app/css/sass.css'],
template: `
<header id="header">
<nav role='navigation' class="main-nav" id="main-nav">
<ul id="main-nav-list">
<div class="navgroup">
<li><a [routerLink]="['/home']"class="navlogo" href="./leagues/home.component.html"><img class="logo" src="./app/img/logo.png" alt="logo"></a></li>
</div>
<div class="navgroup">
<li>
<a [routerLink]="['/play']"class="navtitle" href="./leagues/play.component.html"><img class="imgMainNav" src="./app/img/play.svg" alt="play">Speel</a>
</li>
<li><a [routerLink]="['/stats']"class="navtitle" href="./leagues/stats.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Stats</a></li>
<li><a [routerLink]="['/leagues']"class="navtitle" href="./leagues/join-league.component.html"><img class="imgMainNav" src="./app/img/chart.png" alt="chart">Join League</a></li>
</div>
<div class="navgroup login">
<div class="add-button" dropdown [dropdownToggle]="true">
<div dropdown-open > +</div>
<ul class="dropdown" >
<a [routerLink]="['/account']"href="leagues/account.component.html"><li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li></a>
<a [routerLink]="['/play']"href="leagues/play.component.html"><li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li></a>
<a [routerLink]="['/leagues']"href="leagues/join-league.component.html"><li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li></a>
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</ul>
</div>
<li><a class="navtitle loginnav login-window" onclick="hierkomtdefunctievanjavascriptfile()" ><img class="imgMainNav" src="./app/img/fa-user.png" alt="login">Login/Register</a></li>
</div>
</ul>
</nav>
</header>
And this is my css (actually sass but gets converted when run) for the dropdown class just in case. So when i click on the button the class is .dropdown and when you click it again it should change to .hidden
.dropdown {
position: relative;
top: 25px;
margin: 0 auto;
padding: 5px 0 0 0;
width: 200px;
height: auto;
background: $primary_color1_white;
border: 1px solid $primary_color2_black;
border-radius: 3px;
list-style: none;
&:before {
content: "";
border-width: 1px 0 0 1px;
border-style: solid;
border-color: #A1A4AA;
background: $primary_color1_white;
height: 14px;
width: 14px;
position: absolute;
top: -7px;
transform: translateX(-50%) rotate(45deg);
}
a {
text-decoration: none;
color: $primary_color2_black;
font-size: 1em;
li {
text-align: left;
padding: 10px 15px;
margin: 0;
i {
margin-right: 10px;
}
}
&:hover {
color: #ffffff;
li {
background: linear-gradient(to top right, $primary_color1_white, $melon 30%); } } } }
.hidden{visibility: hidden;}
in your template modify this :
<div class="add-button" dropdown>
<div (click)="toggleDropdown()"> +</div>
<ul class="dropdown" *ngIf="showDropdown">
<a (click)="toggleDropdown()" [routerLink]="['/account']" href="leagues/account.component.html">
<li><i class="fa fa-check-square-o fa-2"></i>Mijn account</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/play']" href="leagues/play.component.html">
<li><i class="fa fa-comments fa-2"></i>Plaats pronostiek</li>
</a>
<a (click)="toggleDropdown()" [routerLink]="['/leagues']" href="leagues/join-league.component.html">
<li><i class="fa fa-clipboard fa-2"></i>Nieuwe competitie</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Shop</li>
</a>
<a (click)="toggleDropdown()" href="">
<li><i class="fa fa-user-plus fa-2"></i>Log out</li>
</a>
</ul>
</div>
and then in your component logic:
showDropdown: boolean = false;
toggleDropdown():void {
this.showDropdown = !this.showDropdown;
}
I have a navigation menu and it has before psuedo if I hover my li element I want to change properties of current li and after than li element
.cruise-turlari .cruise-box .cruise-list-box ul li:after {
content: "";
width: 86%;
display: block;
margin: 0 auto;
height: 1px;
background: #cbcbcb;
}
.cruise-turlari .cruise-box .cruise-list-box ul li a {
display: block;
color: #000;
font-size: 14px;
padding: 7px 33px;
-webkit-transition: all linear 0.4s;
-moz-transition: all linear 0.4s;
transition: all linear 0.4s;
}
.cruise-turlari .cruise-box .cruise-list-box ul li a:hover {
background: #000;
color: #FFF;
}
<div class="cruise-list-box">
<ul>
<li>Vizesiz Yunan Adaları İzmir Hareket <i class="fa fa-chevron-right"></i>
</li>
<li>Vizesiz Yunan Adaları İstanbul Hareket <i class="fa fa-chevron-right"></i>
</li>
<li>Vizesiz Yunan Adaları <i class="fa fa-chevron-right"></i>
</li>
<li>Ege & Adriyatik <i class="fa fa-chevron-right"></i>
</li>
<li>Akdeniz & Adriyatik <i class="fa fa-chevron-right"></i>
</li>
<li>Baltık Başkentleri <i class="fa fa-chevron-right"></i>
</li>
<li>Kuzey Avrupa & Akdeniz <i class="fa fa-chevron-right"></i>
</li>
<li>Fiyordlar <i class="fa fa-chevron-right"></i>
</li>
<li>Akdeniz <i class="fa fa-chevron-right"></i>
</li>
<li>Kanarya Adaları <i class="fa fa-chevron-right"></i>
</li>
</ul>
</div>
and click to real demo
I think this is what you want:
.cruise-turlari .cruise-box .cruise-list-box ul li:hover:before, .cruise-turlari .cruise-box .cruise-list-box ul li:hover + li:before {
height: 1px;
background: transparent;
}
So you use the adjacent sibling selector on the hover too.
you add a special class
.cruise-list-box ul li.special:after {
height: 1px;
opacity: 0;
}
then, using jQuery, add events on mouseover and mouseleave
$('li').mouseover(function(){
$(this).addClass('special');
});
$('li').mouseleave(function(){
$(this).removeClass('special');
});
I made a tree with child elements and for hide and show them on user click, I use the .show('fast') and .hide('fast') jquery functions.
But I noticed that on firefox the transition between the two state are slowing down but on Chrome it works like a charm.
I have the latest version of firefox.
You should also know that I use different libraries into my website such as bootstrap , datatable.js . I tell you because I see that the slowdown is less pronounced on codepen.io that on my site.
this is the codepen.io with my tree
And that's my javascript code :
$('.tree li.parent_li > span').on('click', function(e) {
var child = $(this).parent('li.parent_li').find(' > ul > li');
if (child.is(":visible")) {
child.hide('fast');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
} else {
child.show('fast');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
e.preventDefault();
e.stopPropagation();
});
Thanks.
This was my attempt:
$(function(){
$('.tree li.parent_li > span').on('click', function(e) {
var parent = $(this).closest('li.parent_li');
parent.toggleClass("open");
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab {
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane,
.active {
color: inherit;
}
/*TREE STYLE*/
.tree ul {
list-style: none;
}
.tree .parent_li > span {
cursor: pointer;
}
.tree i {
margin-right: 5px;
}
.parent_li .glyphicon-chevron-down,
.parent_li.open .glyphicon-chevron-right {
display: none;
}
.parent_li.open .glyphicon-chevron-down {
display: inline-block;
}
.parent_li ul {
height: 0;
overflow: hidden;
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
.parent_li.open ul {
height: 60px;
overflow: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i><i class="glyphicon glyphicon-chevron-right"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
This is pure CSS.
I added two classes: .chiled-hide and .chiled-show to the css, and updated your js script:
Here is a link to codepen example
$(function(){
$('.tree li.parent_li > span').on('click', function(e){
var test = $(this).parent('li.parent_li').hasClass('chiled-hide');
if(test)
{
$(this).parent('li.parent_li').removeClass('chiled-hide').addClass('chiled-show');
$(this).find('>i').addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');
}
else
{
$(this).parent('li.parent_li').removeClass('chiled-show').addClass('chiled-hide');
$(this).find('>i').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down');
}
e.preventDefault();
e.stopPropagation();
});
});
.administrationRowTab{
background-color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.tab-pane, .active{
color : inherit;
}
/*TREE STYLE*/
.tree ul{
list-style: none;
}
.tree .parent_li > span { cursor: pointer;}
.tree i {margin-right: 5px;}
.chiled-hide > ul {
display:none;
opacity:0;
transition:opacity 0.5s linear;
}
.chiled-show > ul {
display:block;
opacity:1;
}
<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.9.1/jquery.min.js"></script>
<div class="row m-t-25">
<div class="container">
<div class="row administrationRowTab">
<ul id="tabUl" class="nav nav-tabs">
<li class="active">Test</li>
</ul>
<div class="tab-content">
<div class="tab-pane active m-t-25" id="tabBuildsConfiguration" style="padding:15px;">
<div class="row pad-10">
<div class="tree">
<ul>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 1</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
<li class="parent_li">
<span><i class="glyphicon glyphicon-chevron-down"></i>Parent 2</span>
<ul>
<li><i class="glyphicon glyphicon-file"></i>Child 1</li>
<li><i class="glyphicon glyphicon-file"></i>Child 2</li>
<li><i class="glyphicon glyphicon-file"></i>Child 3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>