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

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;
}

Related

open one level deep sub-menu, only, on each click using jquery OR javascript

The issue I am having is:
when I click on "menu2", it is showing me sub-menu and all options of sub-menu.
Expected result:
click on "menu2" should open "sub-menu2" only and NO "sub-menu2" options.
click on ""sub-menu2" should open all it's children.
I see there are some question on related to this one but I did not find any question similar to mine.
If you can suggest a way to do this in pure JS/ES that would be great. Currently I am using jQuery.
$('.container > ul > li').on('click', function(){
$('ul',this).toggle(200);
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>

YOu just need to use your selector a bit different way, and its done, if need something else, pls let me know
$('.container li').on('click', function(e) {
var ckeckChildVisiblity = $(this).find('>ul').is(':visible');
if (!ckeckChildVisiblity) {
$(this).find('>ul').slideDown();
return false;
} else {
$(this).find('>ul').slideUp();
return false;
}
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>

This can be done using toggling immediate children and stop event propagation.
$('.container li').on('click', function(event){
$(this).children("ul").toggle(200)
event.stopPropagation()
})
.menu ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class ="menu">menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li class ="menu">menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

How to hide parent <li> if all the children are hidden in jquery

I am new in Jquery
My Webpage structure is like this
<div id="MenuSection">
<ul>
<li>Master // Main Menu
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction // Main Menu
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report // Main Menu
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
</ul>
</div>
I want that when all the children of any Parent(main menu) are hidden, Parent should also be hidden. Let's say if Report1, Report2, Report3 are hidden then Parent that is "Report" should also be hidden.
How can I achieve this through Jquery ?

One way is to iterate over each main menu li to see if its children are all :visible:
$("#MenuSection>ul>li").each(function() {
if ($(this).find(">ul>li:visible").length == 0) {
$(this).hide();
}
});
there are other ways to do this, such as using .filter or .map, but this should get you what you need.
Given the nested ul's the above uses > to ensure only the directly ul>li children are processed. If you have multiple levels, you might need to change accordingly, eg for the first: #MenuSection li would apply to all lis and the second .find(">ul>li:visible") only looks at direct li children.
$("#MenuSection>ul>li").each(function() {
if ($(this).find("li:visible").length == 0) {
$(this).hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MenuSection">
<ul>
<li>Master
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report
<ul>
<li style='display:none'>Report1</li>
<li style='display:none'>Report2</li>
<li style='display:none'>Report3</li>
</ul>
</li>
</ul>
</div>

JavaScript does it fairly easy. You would need expand on this to execute this check every on the relevant list every time you hide or show a list item.
function isHidden(array) {
for(var i = 0; i < array.length - 1; i++) {
if(array[i+1].style.display != "none") {
return false;
};
};
return true;
};
var children = document.getElementById("report").getElementsByTagName("LI");
if (isHidden(children)) {
document.getElementById("report").style.display = "none";
};

You can use the the .is(':visible')
See the code:
(function($) {
$(document).ready(function() {
var $mainLinks = $('#MenuSection > ul > li');
$.each($mainLinks, function() {
if (!$(this).find('li').is(':visible')) {
$(this).hide();
}
});
});
})(jQuery);
#MenuSection > ul > li:last-child li {
display: none;
}
#MenuSection > ul > li:first-child li:first-child {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="MenuSection">
<ul>
<li>Master // Main Menu
<ul>
<li>Master1</li>
<li>Master2</li>
<li>Master3</li>
</ul>
</li>
<li>Transaction // Main Menu
<ul>
<li>Transaction1</li>
<li>Transaction2</li>
<li>Transaction3</li>
</ul>
</li>
<li>Report // Main Menu
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
</ul>
</div>

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 }

DropDown Menu Display Issue

What I want to do in my website is to have the following code displayed just like its appears but with a timeout for closing the menu when hovering over a menu section (at the bottom is the problematic code).
This is what I achieved without having any troubles (but without the timeout when hovering over the menu sections)
CSS:
.menu
{
list-style:none;
position:relative;
}
ul.menu ul
{
list-style:none;
display:none;
position:absolute; /* To be the position relative to <li> that contains the <ul> */
left:5em; /* So there is no overlaping over <li> */
top:-1em;
}
ul.menu li:hover > ul
{
display:block;
}
HTML:
<ul class="menu">
<li>Equipos
<ul>
<li>Masculinos
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</li>
<li>Femeninos
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</li>
</ul>
</li>
<li>Categorias
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</li>
<li>Torneos
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</li>
<li>Canchas
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</li>
<li>Resultados</li>
<li>Posiciones</li>
<li>Estadisticas</li>
<li>Boletines ATS</li>
<li>Arbitros y Designaciones</li>
</ul>
And the problem:
CSS:
#navigation_horiz {width:820px; clear:both; padding:0 0 0 0; margin:0 auto;}
#navigation_horiz ul {height:50px; display:block;background:blue}
#navigation_horiz ul li {display:block; float:left; width:200px; height:50px; background:#999; margin:0 1px 0 0; position:relative}
#navigation_horiz ul li a.navlink {display:block; width:200px; height:30px; padding: 20px 0 0 0; text-align:center; color:#fff; text-decoration:none}
#navigation_horiz .dropdown {position:absolute; padding:20px; border-bottom-right-radius:10px; border-bottom-left-radius:10px; -moz-border-radius-bottomright:10px; -moz-border-radius-bottomleft:10px}
#navigation_horiz ul li #dropdown_style {background:#ccc; color:#fff}
#navigation_horiz ul li #dropdown_style a {color:red}
HTML:
<div id="navigation_horiz">
<ul>
<li>
Equipos
<div class="dropdown" id="dropdown_style">
Masculinos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Aguilas</li>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios 1</li>
<li>Indios 2</li>
<li>Isotopos</li>
</ul>
</div>
Femeninos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Facdef</li>
<li>Indias</li>
<li>Isotopos</li>
<li>Parque Sur</li>
</ul>
</div>
</div><!-- .dropdown_menu -->
</li>
<li>
Categorias
<div class="dropdown" id="dropdown_style">
<ul>
<li>Primera Masculino</li>
<li>Primera Femenino</li>
<li>Reserva Masculino</li>
<li>Reserva Femenino</li>
<li>Inferiores</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Torneos
<div class="dropdown" id="dropdown_style">
<ul>
<li>Apertura</li>
<li>Anual</li>
<li>Clausura</li>
<li>Torneo de la Independencia</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Canchas
<div class="dropdown" id="dropdown_style">
<ul>
<li>Cef 18</li>
<li>Celtas</li>
<li>Indios</li>
</ul>
</div><!-- .dropdown_menu -->
</li>
<li>
Resultados
</li>
<li>
Posiciones
</li>
<li>
Estadisticas
</li>
<li>
Boletines
</li>
<li>
Arbitros y Designaciones
</li>
</ul>
</div><!-- #navigation_horiz -->
JavaScript:
(function($)
{
$.fn.naviDropDown = function(options)
{
//set up default options
var defaults={
dropDownClass: 'dropdown', //the class name for your drop down
dropDownWidth: 'auto', //the default width of drop down elements
slideDownEasing: 'easeInOutCirc', //easing method for slideDown
slideUpEasing: 'easeInOutCirc', //easing method for slideUp
slideDownDuration: 500, //easing duration for slideDown
slideUpDuration: 1000, //easing duration for slideUp
orientation: 'vertical' //orientation - either 'horizontal' or 'vertical'
};
var opts = $.extend({}, defaults, options);
return this.each(function()
{
var $this = $(this);
$this.find('.'+opts.dropDownClass).css('width', opts.dropDownWidth).css('display', 'none');
var buttonWidth = $this.find('.'+opts.dropDownClass).parent().width() + 'px';
var buttonHeight = $this.find('.'+opts.dropDownClass).parent().height() + 'px';
if(opts.orientation == 'horizontal')
{
$this.find('.'+opts.dropDownClass).css('left', '0px').css('top', buttonHeight);
}
if(opts.orientation == 'vertical')
{
$this.find('.'+opts.dropDownClass).css('left', buttonWidth).css('top', '0px');
}
$this.find('ul').hoverIntent(function() {}, hideDropDown);
$this.find('li').hoverIntent(getDropDown, function() {});
});
var activeNav = null;
function getDropDown()
{
var newActiveNav = $(this);
if (activeNav && activeNav.get(0) !== newActiveNav.get(0))
{
hideDropDown();
}
if (!activeNav)
{
showDropDown(newActiveNav);
}
activeNav = newActiveNav;
}
function showDropDown(newActiveNav)
{ newActiveNav.find('.'+opts.dropDownClass).slideDown({duration:opts.slideDownDuration, easing:opts.slideDownEasing});
}
function hideDropDown()
{
if (activeNav)
{ activeNav.find('.'+opts.dropDownClass).slideUp({duration:opts.slideUpDuration, easing:opts.slideUpEasing});//hides the current dropdown
activeNav = null;
}
}
};
})(jQuery);
$(document).ready(function()
{
$('#navigation_horiz').naviDropDown({dropDownWidth: '300px'});
});
Were am I messing up the code and how could I make it work or how to fix it?

At last I only got closed the threat and they told me a lot of stuff I made wrong by posting but still no help. To many days past through and I managed to help other people and myself with problems we all have and with my tiny easy problem nobody got even interested...
I suggest the community and the administrators of this site to clarify yourselves how to improve this in order to get it working the way it should, otherwise do not be so harsh on the people that post things like I did or change the theme of the website from "Stack Overflow is a question and answer site for professional and enthusiast programmers." to "Stack Overflow is a question and answer site for professional" since you give not even a clue to some easy topics.
Sincerely, Martin
P.S.: I post this to generate self conscience of the real problem of the site in order to improve it, do not mean to get anyone furious.

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