I need to add the class 'active' to links depending on it matching the current URL. I made that work using this answer but i need to make it work also for dropdown links. This is the markup I'm using:
var full_path = location.href.split("#")[0];
$("#nav a").each(function() {
var $this = $(this);
if ($this.prop("href").split("#")[0] == full_path) {
$this.addClass("active");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="nav" class="ui large secondary inverted pointing menu">
<a class="toc item">
<i class="sidebar icon"></i>
</a>
Home
Server information
<div class="ui pointing dropdown link item">
<span class="text">Community</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="forum.php">Forum</a>
<a class="item" href="market.php">Item Market</a>
<a class="item" href="gallery.php">Gallery</a>
<a class="item" href="support.php">Support</a>
<a class="item" href="helpdesk.php">Helpdesk</a>
<a class="item" href="houses.php">Houses</a>
<a class="item" href="deaths.php">Deaths</a>
<a class="item" href="killers.php">Killers</a>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Shop</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="buypoints.php">Buy points</a>
<a class="item" href="shop.php">Shop offers</a>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Guilds<?php if ($config['guildwar_enabled'] === true) { ?> & Wars<?php } ?></span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="guilds.php">Guilds</a>
<?php if ($config[ 'guildwar_enabled']===t rue) { ?>
<a class="item" href="guildwar.php">Guild Wars</a>
<?php } ?>
</div>
</div>
<div class="ui pointing dropdown link item">
<span class="text">Library</span>
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="downloads.php">Downloads</a>
<a class="item" href="changelog.php">Changelog</a>
</div>
</div>
<div class="right item">
<a id="loginButton" class="ui blue inverted button">
<?php if (user_logged_in()===t rue) { echo 'Account'; } else { echo 'Log in';}?>
</a>
<div class="ui fluid transition login popup">
<?php if (user_logged_in()===t rue) { include 'layout/widgets/loggedin.php'; } else { include 'layout/widgets/login.php'; } ?>
</div>
<?php if (user_logged_in()===f alse) { echo '<a class="ui green inverted button" href="register.php">Register</a>'; } ?>
</div>
</div>
As you can see, dropdowns are using <span> tags, and they are showing the text of the dropdown. Is there a way to put the "name" of the link into that span when it's active ?
Related
I have tied in situation where i want to add an active class on click of anchor tag which is nested in ul li and automatically on left siblings active class removed out.
Similarly in below i have another div in which 4 div are present. Means when 1st anchor tag is clicked then in below 1st div become active & vice versa for others. I have tried a code below but it add active class to all anchor tags. I beginner in jquery.
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group>a").click(function(e) {
e.preventDefault();
$(this).siblings('a.active').removeClass("active");
$(this).addClass("active");
var index = $(this).index();
console.log('index = ', index);
if (index == 3) {
// console.log('index is 3');
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
$('.map-control-cover').hide()
$('.checkout-control-cover').show();
} else {
// console.log('i am here');
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
$('.map-control-cover').show()
$('.checkout-control-cover').hide();
}
});
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container">
<div class="bhoechie-tab-menu">
<div class="list-group">
<ul class="tab-manu">
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center active">
<span class="glyphicon glyphicon-map-marker"></span>
<br>Location
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center">
<span class="glyphicon glyphicon-pencil"></span>
<br>Labels
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center">
<span class="glyphicon glyphicon-edit"></span>
<br>Customize
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center ">
<span class="glyphicon glyphicon-shopping-cart"></span>
<br>Cart
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab">
<div class="bhoechie-tab-content active">
<!-- content 1-->
</div>
<div class="bhoechie-tab-content">
<!-- content 2-->
</div>
<div class="bhoechie-tab-content">
<!-- content 3-->
</div>
<div class="bhoechie-tab-content">
<!-- content 4-->
</div>
</div>
I have debug in console but it show same index no on all anchor tag.
Since the anchors are inside list items, you need to get the index of the parent, not the anchor, and also process the siblings of the parent.
And your selector for the anchors is not correct. The anchors are not direct children of div.list-group.
$(document).ready(function() {
$("div.bhoechie-tab-menu>div.list-group a").click(function(e) {
e.preventDefault();
var li = $(this).parent();
li.siblings().find('a.active').removeClass("active");
$(this).addClass("active");
var index = li.index();
if (index == 3) {
// console.log('index is 3');
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
$('.map-control-cover').hide()
$('.checkout-control-cover').show();
} else {
// console.log('i am here');
$("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active");
$("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active");
$('.map-control-cover').show()
$('.checkout-control-cover').hide();
}
});
});
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12 col-md-12 col-sm-12 bhoechie-tab-container">
<div class="bhoechie-tab-menu">
<div class="list-group">
<ul class="tab-manu">
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center active">
<span class="glyphicon glyphicon-map-marker"></span>
<br>Location
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center">
<span class="glyphicon glyphicon-pencil"></span>
<br>Labels
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center">
<span class="glyphicon glyphicon-edit"></span>
<br>Customize
</a>
</li>
<li class="col-lg-3 col-md-3 col-sm-3 col-xs-3 no-space">
<a href="#" class="list-group-item text-center ">
<span class="glyphicon glyphicon-shopping-cart"></span>
<br>Cart
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 bhoechie-tab">
<div class="bhoechie-tab-content active">
<!-- content 1-->
</div>
<div class="bhoechie-tab-content">
<!-- content 2-->
</div>
<div class="bhoechie-tab-content">
<!-- content 3-->
</div>
<div class="bhoechie-tab-content">
<!-- content 4-->
</div>
</div>
Since your anchor tags are not siblings, but wrapped around li tag you are not getting the desired result.
So, you can either restructure you code to make them siblings, or you can refer to the target's parent with $(this).parent(), and then use .find('.active') to find any elements with active class and keep on using your same code.
In my html, there are 2 tabs once you click on a tab the other tab is hidden, while the one that is clicked on is shown, It's a normal javascript tab interface.
I have a gallery plugin, it shows the gallery of the image in the first div, but it doesn't work for the image in the second div, even after i have hidden the image in the first div and it works based on the id as light gallery, Please why doesn't it show the gallery of the second image and how can i solve this issue
This is my html
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.11/js/lightgallery-all.min.js"></script>
<li id="tabs1" onclick="showStuff(this)" class="active pic-list"><a href="#all" > All (35)</a></li>
<li id="tabs2" onclick="showStuff(this)" class="pic-list"></i></li>
<div id="tabs-1" class="tabContent" style="display: block;">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
<div id="tabs-2" class="tabContent">
<div class="row" id="lightgallery">
#if(isset($images))
#foreach ($images as $image)
<div class="col-md-3 col" style="margin-bottom: 15px" data-src="{{$image->filename}}">
<div class="img-con" id="{{$image->id}}">
<a href="">
<img class="mb-2 uploaded-photos" src="{{$image->filename}}" alt="">
</a>
<div class="img-select">
<div class="new gvs-title">
<span style="color: #333333;">{{$image->description}}080808008080 <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i> <br/></span>
</div>
</div>
</div>
</div>
#endforeach
#endif
</div>
</div>
This is my jquery code
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
I solved this by basically calling two light gallery functions and changing the id of the 2 divs i.e lightgallery and lightgallery1
$(document).ready(function(){
$('#lightgallery').lightGallery();
$('#lightgallery1').lightGallery();
});
I am working with semantic ui and got stuck with Notification menu implementation in menu bar.
I am able to setup the popup with a list but i am getting small list item squeezed vertically , i need them to be horizontally relaxed .
Below is the html i am working with .
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom transition ">
<div class="ui link celled selection list">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
<a class="item" href="profile.php">Profile</a>
<a class="item" href="logout.php">Logout</a>
</div>
</div>
Javascript:
$('.teal.label')
.popup({
on: 'click'
});
JS Fiddle :
https://jsfiddle.net/jfk4wkb1/2/
I have tried putting up the things on JS Fiddle , but In there popup is not coming up even , but on my local environment popup is ok but it is vertically squeezed.
Like this: Fiddle link
You did not add jquery in your fiddle external resource . Also i add some padding and width to looks good .
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
HTML:
<div class="ui fixed stackable menu">
<a class="item" href="index.php"> <img src="logo.png" class="image"></a>
<a class="item">My Project</a>
<div class="right menu">
<div class="item">
<i class="bell outline icon"></i>
<div class="ui teal circular mini label">4</div>
<div class="ui wide notification popup bottom right transition ">
<div class="ui link celled selection list" style ="padding: 20px;width: 300px;">
<div class='item'>
<div class='content'>
<a class='header'>Millan kumar</a>
<span class='time'>2 hrs ago</span>
<div class='description'>Commented on <a><b>Your Post </b></a> with <a><b>Following content</b></a></div>
<div class='extra'>Thanks you for your support</div>
</div>
</div>
</div>
</div>
</div>
JS:
$('.teal.label')
.popup({
on: 'click'
});
I'm new with Sematic UI and jQuery, and I want to show a pop-up when I click on button "Browse1", not on "Browse2" or "Browse3.
But the pop-up also shows when I click anywhere on my menu. How can I restrict the pop-up, so it only displays when clicking on "Browse1"?
Why doesn't the following work?
$(".ui.menu").find("a:first").popup({on: 'click'});
Here's my code:
$(".ui.menu").popup({on: 'click'});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
You need to use the Semantic UI way of assigning a popup to the menu element (in your case the first item). Check this script below I wrote for you.
$('.ui.menu .item:first-child').popup({
popup : $('.ui.popup'),
on : 'click'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/semantic.min.js"></script>
<div class="ui menu">
<a class="browse item">
Browse1 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse2 <i class="dropdown icon"></i>
</a>
<a class="browse item">
Browse3 <i class="dropdown icon"></i>
</a>
</div>
<div class="ui fluid popup bottom left transition hidden">
<div class="ui four column relaxed equal height divided grid">
<div class="column">
<h4 class="ui header">Fabrics</h4>
<div class="ui link list">
<a class="item">Cashmere</a>
<a class="item">Linen</a>
<a class="item">Cotton</a>
<a class="item">Viscose</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Size</h4>
<div class="ui link list">
<a class="item">Small</a>
<a class="item">Medium</a>
<a class="item">Large</a>
<a class="item">Plus Sizes</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Colored</h4>
<div class="ui link list">
<a class="item">Neutrals</a>
<a class="item">Brights</a>
<a class="item">Pastels</a>
</div>
</div>
<div class="column">
<h4 class="ui header">Types</h4>
<div class="ui link list">
<a class="item">Knitwear</a>
<a class="item">Outerwear</a>
<a class="item">Pants</a>
<a class="item">Shoes</a>
</div>
</div>
</div>
</div>
I've made a profile page on which user's posts are displayed, user can perform function delete or edit post.But,
when i click on edit post on any of my post ,only content of first post is fetched in the modal.
my js code:
$('.dropdown-menu').find('.edit').on('click', function(e) {
e.preventDefault();
var postbody = $('#fetch').find('p').text();
$('#post-body').val(postbody);
$('#edit-modal').modal();
});
my view code:
#foreach($posts as $post) #if(Auth::user()== $post->user)
<div class="panel panel-default">
<div class="panel-heading">
<div class="row">
<section class="col-md-2 col-xs-2">
<img id="imagesize2" src="images/g.jpg" class="img-circle" data- action="zoom" />
</section>
<section class="col-md-5 col-xs-offset-1 col-xs-5">
<a id="alink13" href=""><h5 id="alink14">{{$post->user->firstname}}</h5> </a>
<p>on {{$post->created_at}}</p>
</section>
<section class="col-md-offset-3 col-md-2 col-xs-4 col-lg-offset-1">
<div class="btn-group">
<button id="btnclr4" type="button" class="btn btn-default dropdown- toggle" data-toggle="dropdown" aria-expanded="false"><span class="glyphicon glyphicon-chevron-down"></span>
</button>
#if(Auth::user()==$post->user)
<ul id="remove" class="dropdown-menu" role="menu">
<a id="remove2" href="{{route('post.delete',['post_id' => $post->id])}}">
<li role="presentation">Remove This Post</li>
</a>
<a href="" class="edit">
<li role="presentation">Edit This Post</li>
</a>
</ul>
#endif
</section>
</div>
</div>
<div class="panel-content">
<div class="row" id="fetch">
<section class="col-md-12">
<p>{{$post->body}}</p>
</section>
</div>
</div>