Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>
Related
I want to delete text "previous" inside li in wordpress theme.
the text to delete
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
I tried with jquery like this :
var $ = jQuery;
$('li.flex-nav-prev').html('');
$('li.flex-nav-prev').html('');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#">Previous</a>
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#">Next</a>
</li>
</ul>
</div>
It's works in snippet but it doesn't work on website.
Thank you so much
To delete just the text of an element try this jquery code:
jQuery('flex-nav-prev > a').contents().filter(function(){
return (this.nodeType == 3);
}).remove();
I am using handlebars to show data. I have a ul that filters the data and populates another ul. The filter ul has a couple of choices that currently output an empty ul. I want the empty ul to show a message that says "There are no sessions yet."
I am trying to use handlebars if helper. The problem I am running into is the message is showing up in all ul, even if it is not empty.
<div class="session-details-inner">
<div class="sidebar left-sidebar left-align">
<ul id="session_filter_15308050681959955093" class="session_filters no-list-style">
<li>
<a class="themelink active" data-filter="All" title="All Tracks">General</a>
</li>
<li>
<a class="themelink" data-filter="Destination Marketers" title="Destination Marketers">Destination Marketers</a>
</li>
<li>
<a class="themelink" data-filter="Exhibitions" title="Exhibitions">Exhibitions</a>
</li>
<li>
<a class="themelink" data-filter="Financials" title="Financials">Financials</a>
</li>
<li>
<a class="themelink" data-filter="Registration" title="Registration">Registration</a>
</li>
<li>
<a class="themelink" data-filter="Technical" title="Technical">Technical</a>
</li>
<li>
<a class="themelink" data-filter="Venues" title="Venues">Venues</a>
</li>
</ul>
</div>
<div class="sidebar right-sidebar left-align">
<ul class="scheduleday_wrapper themeborder no-list-style">
{{#each ./Sessions}}
{{#if TrackDescription.length}}
<li class="themeborder individual-session accordion-panel" data-track="{{TrackDescription}}">
<div class="session_content_wrapper expandable accordion">
<div class="session_content ">
<div class="session_title">
<h6>{{Title}}</h6>
</div>
</div>
</div>
<div class="session_content_extend hide session_content_wrapper panel">
<div class="session_content ">
<div class="session_excerpt">{{SessionDetails}}</div>
<div class="session_title_list">
<span class="ti-bookmark"></span>
<div class="session_title_item">{{TrackDescription}}</div>
</div>
</div>
</div>
</li>
{{else}}
<li class="no-sessions">There are no session yet.</li>
{{/if}}
{{/each}}
</ul>
</div>
<script type='text/javascript'>
$(document).ready(function($) {
$('.accordion').on('click', function() {
$parent_box = $(this).closest('.accordion-panel');
//$parent_box.siblings().find('.panel').slideUp(500);
$parent_box.siblings().find('.icon').removeClass('down');
$parent_box.find('.panel').slideToggle(500);
$parent_box.find('.icon').toggleClass('down');
});
$('ul.scheduleday_wrapper li .session_content_wrapper').on('click', function(ev) {
ev.preventDefault();
jQuery(this).next().toggleClass('hide');
});
$(".session_filters a").click(function(){
jQuery(".session_filters a").removeClass("active");
jQuery(this).addClass("active");
currentSessionType=jQuery(this).attr("data-filter");
jQuery(".individual-session").hide();
jQuery(".individual-session[data-track='"+currentSessionType+"'").show();
individualSession = jQuery('.individual-session');
if(currentSessionType == 'All'){
jQuery(".individual-session").show();
}
});
});
</script>
If you want to check & conditionally render if there are no sessions, shouldn't you do the length check on your Sessions instead of the TrackDescription?
Added this snippet of jQuery to check if all li had a style of display: none. If all li have display: none, show message li else hide message li.
if($('.scheduleday_wrapper').children(':visible').length == 0){
jQuery(".no-sessions").show();
}
else{
jQuery(".no-sessions").hide();
}
When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}
Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)
This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.
I have a list of list items which are display: none by default. I programmatically change a certain number of them to list-items.
I've been trying to use querySelectorAll but when I try:
document.querySelectorAll("#ulname style[display*='list-item']")
it returns an empty array (I know it is at least one).
Ideas on how to modify my selectors or another approach? I would like to know after the fact how many items are displayed.
var liList = document.getElementById("myul").getElementsByTagName("li");
var largo = liList.length
alert(largo);
WHERE "myul" is the id of the list and largo is number of li items
<ul id="myul">
<li>hello</li>
<li>world</li>
</ul>
the alert would be 2
<ul id="myul">
<li>hello</li>
<li>world
<ul>
<li>here we are</li>
<ul>
</li>
</ul>
the alert would be 3
var ul = document.getElementById("myul");
var liNodes = [];
for (var i = 0; i < ul.childNodes.length; i++) {
if (ul.childNodes[i].nodeName == "LI") {
liNodes.push(ul.childNodes[i]);
}
}
totalLis = liNodes.length;
Adding text to your ul tag
var txt = document.createTextNode("gsdgds");
ul.appendChild(txt);
Adding li tag to your ul tag
var txt = "<li>dsgdsgs</li>";
ul.innerHTML(txt);
<!DOCTYPE html>
<html>
<body onload="myFunction()">
<p>Maybe this answer can help. I improvise for this after a few days of testing. This is what I got. Hope it helps you.</p>
<li class="sidenav-item open active">
<a href="#" class="sidenav-link sidenav-toggle" ></i>
<div class="text-white">Hi, There!
<div class="badge badge-primary" id="ul-me"></div></div>
</a>
<ul class="sidenav-menu" id="ul1">
<li class="sidenav-item active">
<a href="#" class="sidenav-link" >
<div class="text-white" >Home</div>
</a>
</li>
<li class="sidenav-item" id="ul2">
<a href="#" class="sidenav-link" >
<div class="text-white" >Blog</div>
</a>
</li>
<li class="sidenav-item" id="ul3">
<a href="#" class="sidenav-link" >
<div class="text-white" >Downloads</div>
</a>
</li>
<li class="sidenav-item" id="ul4">
<a href="#" class="sidenav-link" >
<div class="text-white" >Contact</div>
</a>
</li>
<li class="sidenav-item" id="ul5">
<a href="#" class="sidenav-link" >
<div class="text-white" >About</div>
</a>
</li>
</ul>
</li>
'''
<!-- Count Item (li) in <ul> -->
<script>
function myFunction() {
var mylist = [document.getElementById("ul1"), ("ul2"), ("ul3"), ("ul4"), ("ul5")];
document.getElementById("ul-me").innerHTML = mylist.length;
}
</script>
</body>
</html>
I've got a menu-structure generated by an webapplication. The output is as below, and as you can see below the menu goes three levels deep.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a> <!--If ul#thirdlevel exists, I want this text to be bold.-->
<ul id="thirdLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1/myProduct.aspx">My Product</a>
</li>
</ul>
</li>
</ul>
</li>
<ul>
</li>
</ul>
Most menus will be generated as above, but also the one below (without the third level) is an option.
<ul id="mainMenu" class="nav">
<li>
<a class="firstitem " href="/products.aspx">Products</a>
<ul id="firstLevel">
<li>
<a class="firstitem " href="/products/category-1.aspx">Category 1</a>
<ul id="secondLevel">
<li>
<a class="firstitem " href="/products/category-1/sub-category-1.aspx">Subcategory 1</a>
</li>
</ul>
</li>
<ul>
</li>
</ul>
What I want to achieve is that if there is an third level menu I want the text of hyperlink on the second level to be bold. How can I do this? Preferrably with css, otherwise with javascript/jQuery.
I've made a jsFiddle for you: http://jsfiddle.net/danAR/
jQuery code:
$(function() {
$('ul#secondLevel li').each( function(index, item) {
$(this).find('a').toggleClass('aBold', ($(this).find('ul#thirdLevel').length > 0) );
});
});
CSS:
a.aBold {
font-weight:bold;
}
I can't see any easy way of doing this in CSS as your styling is based on a condition. If you using jQuery you could do along the lines of:
var $third = $('#thirdLevel');
if ($third.length)
{
$third.closest('a').css('font-weight', 'bold');
}