Indication of selected list item using jquery - javascript

I need to indicate a selected list item. I need a small line under each list item when it is being selected. I tried:
<div id="types">
<ul>
<li>
item 1
<div class="active"></div>
</li>
<li>
item 2
<div></div>
</li>
<li>
item 2
<div "></div>
</li>
<li>
item 2
<div ></div>
</li>
</ul>
</div>
In css:
.active{
background-color: #5299bd !important;
height: 7px;
}
In jquery:
var classHighlight= 'active';
var $thumb = $('#types ul li > a').click(function(e){
e.preventDefault();
$thumb.removeClass(classHighlight);
$(this).addClass(classHighlight);
});
Its getting highlighted on the anchor tags like, item 1 Item 2 etc.. But i need a small border like indicator/highlight, under the anchor tags, item 1, item 2..
Like this,
Please help me doing this.. Thanks


Try this code instead
$('#types ul li > a').click(function(e){
$("#types div").removeClass('active');
$(this).parent().find('div').addClass('active');
});
personally I think you should add a "dummy"-class, a white line, so the list-items doesnt "jump".
Edit : As Frits van Campen comments, target <li> instead :
style :
#types ul li {
border: 1px solid #fff;
}
#types ul li.active {
border: 1px dotted #5299bd;
}
markup :
<div id="types">
<ul>
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 2
</li>
<li>
item 2
</li>
</ul>
script
$('#types ul li > a').click(function(e){
$("#types li").removeClass('active');
$(this).parent().addClass('active');
});
results imho in a more "professional" look


$(this).addClass(classHighlight);
$(this).css('border-bottom', '8px solid cyan');

Related

Mirror add class to ul li in jquery

I have tested this code. but there have some error. i am also attachment with JPG file what my need exactly please suggestion me.
$('.list ul li a').click(function() {
$('.list li a').removeClass("ad");
$(this).addClass("ad");
});
.ad{background-color:green;color:#fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>

Okay, you must create a link between A children and B children, you can set a data attribute for example data-id then find the equals with:
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
$('.list ul li a').click(function() {
var dataId = $(this).attr('data-id');
$('.list ul li a').removeClass('ad');
$('.list li a[data-id="'+dataId+'"]').addClass('ad');
});
.ad {
background-color: green;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<h4>A</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
<div class="list">
<h4>B</h4>
<ul>
<li> list 1 </li>
<li> list 2 </li>
<li> list 3 </li>
</ul>
</div>
Update: on your website, use something like this:
setInterval(function() {
$('.btn-nav-main').each(function() {
if ($(this).hasClass('active')) {
var dataSlide = $(this).attr('data-slide');
$('.btn-nav-main').removeClass('gg');
$('.btn-nav-main data-slide["' + dataSlide + '"]').addClass('gg');
}
});
}, 1000);

Having Issue on Wrapping li list in a Div indepenedntly

I am trying to wrap each li in a div .new which works fine when the li doesn't have any children <ul><li></li></ul>.
but when it is in following format
<li>XRP 1
<ul>
<li>Company Maintenance</li>
<li>Employees
<ul>
<li>Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>XRP 2</li>
<li>XRP 3</li>
It wraps lis in new in the hierarchy several times
$( "li" ).wrap( "<div class='new'></div>" );
.new {
border:1px solid #ccc;
margin:5px;
}
is there any way that I can add open and closing tag before each item?

If this is what you want to do (I'm not sure):
<ul>
<div><li></li></div>
</ul>
This is not valid HTML.
Explanation here: Is this HTML structure valid? UL > DIV > { LI, LI } , DIV > { LI, LI } , DIV > { LI, LI }

How can I remove all text after the last <li> of every <ul>?

I have a menu with their submenus too. After the page loads.. The website generates random texts after every end of submenus..
This is the current markup that is generated from firebug:
<nav class="shopMenuHover">
<div id="bx_incl_area_5_1">
<ul>
<li><a href="#" >First Menu</a>
<div class="" style=""><h2>First Sub Menu</h2>
<ul>
<li>
Sub Menu > Sub Menu
</li>
<li>Sub Menu > Sub Menu 90797</li>
</ul>
</div>
</li>
<li class="firstLevel hasSubmenu instrumentarium-en-fresen">
Second Menu
<div><h2><a href="">Second Menu</h2>
<ul>
<li><font><font>Sub Menu > Sub Menu</li>
<li>Sub Menu > Sub Menu 896346</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
Problem: The texts 90797 and 896346 are texts generated randomly by the website. How can I remove these texts after every last li > a inside every ul?
This is the current jquery i used to select only the text inside a tag:
<script type="text/javascript">
$(document).ready(function() {
$(".shopMenuHover ul li:last-child > a").css( "border", "2px solid red");
});
</script>
Output: Remove all texts after a tag of every last li-last-child..
Please Help Me...

You can select all the nodes, including the textnodes, with contents(), then use filter() to get just the textnodes outside the anchors, and remove them
$(".shopMenuHover ul li:last-child").contents().filter(function() {
return this.nodeType === 3;
}).remove();
FIDDLE

Here is a way to do this with CSS using the visibility property :
DEMO
.shopMenuHover ul li:last-child{
visibility:hidden;
}
.shopMenuHover ul li:last-child > *{
visibility:visible;
}
note : use the * selector so it works even if the <li> contains something else than a link.

Another option would be to set the html of the li to just the a.
$(".shopMenuHover ul li:last-child").each(function(){
var $this = $(this);
$this.html($this.children("a"));
});
http://jsfiddle.net/ujrp151h/1/
This would also clear anything else within the element other than the a, not just text nodes.

How to select a group with its parents & child in Jquery multiselect

Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child,
So if i select a group all the parent & child in the group should have be moved with the group,So help me....
Here is my example code
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var me = jQuery || $.noConflict();
me(document).ready(function() {
if((me('ul li ul li ul li').children().length) == 0 ) {
me('ul li ul li ul li').addClass("list");
}
me('ul li ul li').click(function() {
me('ul li ul li').removeClass("list_state");
if((me(this).children().length) > 0 ) {
me(this).addClass("list_state");
me('.list_state').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
}
});
me('li.list').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
});
</script>
<ul>
<li id="level-0">India
<ul>
<li id="level-0-3">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1">United Kingdom
<ul>
<li id="london">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option
I have attached an example screenshot below..

Check this fiddle
In the above fiddle only the text within clicked li and its successor li's will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par" to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}

highlight currently selected link in css menu bar

I have a page with this URL: http://localhost:8000/progress/c/?l=1&c=1
And the below content to work as a simple css menu bar.
<div class="menu_div">
<ul>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>
CSS styling is
.menu_div ul
{
padding:6px;
margin:0px;
font-size:12px;
list-style:none;
text-indent:15px;
}
.menu_div ul li
{
line-height:28px;
border-bottom:1px solid #000;
}
.menu_div ul li a
{
text-decoration:none;
font-color:#3A332D;
display:block;
}
.menu_div ul li a:hover
{
background:blue;
}
.menu_div ul li#active
{
background:blue;
}
When I hover over the links the background color changes but the currently selected menu link is not highlighted in blue.
I'm using django framework.

Try this jQuery code, it will add the class automatically
$(function(){
var url = window.location.href;
$("#menu a").each(function() {
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});

In your CSS you have a class with the id 'active', this should probably be a class like this:
.menu_div ul li.active
{
background:blue;
}
Further, I wouldn't recommend trying to match the 'active' or better formulated 'current' page using javascript client side.
Instead your script on the server should recognize the current page and add a class to the related menu item so it would look like this:
<li class="active"> l1c1 </li>

Replace your id #active to class .active - that is more right way:
.menu_div ul li.active
{
background:blue;
}
and add this class to active element in your list:
<div class="menu_div">
<ul>
<li class="active"> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
<li> l1c1 </li>
</ul>
</div>

.menu_div ul li#active
It says the active link needs an id of active. I see no id, hence why it is not blue.
If you want the link to be active, you are going to have to set the item to be active, the browser will not do it for you.

Just
css
.menu_div ul li.active{background:blue}
html
<div class="menu_div">
<ul>
<li id="page1"> l1c1 </li>
<li id="page2"> l1c1 </li>
<li id="page3"> l1c1 </li>
<li id="page4"> l1c1 </li>
</ul>
</div>
script
#In every page just put this script and change the id
<script>$("#page1").addClass('active');</script>

Categories

Resources