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();
}
Related
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>
I want to show the div of selected HTML link.
For example:
I clicked on the html link Categories the <div id="categories" ... > will be showed and the other div's will hide.
HTML
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div id="quizzes"> //default showed
Quizzes!
</div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
Try this:-
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').hide();
$('#' + $.trim($(this).text()).toLowerCase()).show();
});
Fiddle
OR
$('#col-navigation a').click(function(){
$('#quizzes,#categories,#jump').show()
.not('#' + $.trim($(this).text()).toLowerCase()).hide();
});
Fiddle
$("#col-navigation a").click(function(e) {
var getText = $(this).text().trim().toLowerCase();
$("#"+getText).toggle().siblings().hide();
e.preventDefault();
});
use the above code to make it work.
Working Fiddle : https://jsfiddle.net/z4bprass/1/
You can use css :target, general siblings selector ~
:target {
display: block !important;
}
:target ~ div[id] {
display: none;
}
<div id="col-navigation">
<ul>
<li>
Quizzes
</li>
<li>
Categories
</li>
<li>
Jump
</li>
</ul>
</div>
<div>
<div id="categories" style="display:none">
Categories!
</div>
<div id="jump" style="display:none">
Jump!
</div>
<div id="quizzes">//default showed Quizzes!
</div>
</div>
I can see the hover() is working but it doesn't hide and show the contact_numbers class? What's wrong in my code?
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').remove()
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<li>999</li>
<li>888</li>
</div>
</li>
because of wrong Dom structure in your html
<ul> is missing inside <div class="contact_numbers"> how can a <li> start without <ul>
and in your question you write
hide and show doesn't work with hover()? than why .remove() in your code
if you want to hide your element use .hide() see my code
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log($(this).find('.contact_numbers'))
}, function() {
//$(this).find('.contact_numbers').remove() // this will remove element
$(this).find('.contact_numbers').hide() // this will hide
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>
Your HTML is broken, you are missing <ul> tag. Try this code:
$(function() {
$("#hdCallUs").hover(function() {
$('.contact_numbers').show(); <!-- changed this -->
}, function() {
$('.contact_numbers').hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers" style="display:none">
<ul> <!-- added this -->
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
Seems like you are removing the element on hover out.
$(this).find('.contact_numbers').remove();
Is it expected? To hide element change this to:
$(this).find('.contact_numbers').hide();
I don't understand the structure of your html (li inside a div without ul?) but you can achieve this without javascript and just css like this:
.contact_numbers{
display: none;
}
#hdCallUs:hover .contact_numbers{
display: block;
}
That's because you have invalid html. You have to wrap your second level lis inside ul. li cannot have lis as its children and also, display:none; to your contact_numbers + do not remove it on hover out, instead just hide it. remove removes it permanently from DOM.
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').hide()
console.log('out')
});
});
.contact_numbers{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
You have wrong html markup in your body which is rendered differently as compared to what you expect. Below is the rendered html:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers"></div>
</li>
<li>999</li>
<li>888</li>
</ul>
So clearly the .contact_numbers div doesn't have anything to hide and show and probably this is the reason why you are not getting expected results. Correct your html and then try.
You can check the rendered html in the console in this demo
Demo: http://jsfiddle.net/GCu2D/929/
Make sure you use .hide() and .show() or .toggle() as in this demo:
Demo with correct markup: http://jsfiddle.net/GCu2D/930/
JS:
$(function () {
$("#hdCallUs").hover(function () {
$(this).find('.contact_numbers').show();
console.log('in', $(this).find('.contact_numbers'))
}, function () {
$(this).find('.contact_numbers').hide()
console.log('out', $(this).find('.contact_numbers'))
});
});
HTML:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>
I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?
First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.
$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.
I'm trying to make a simple dropdown menu, this is my code so far:
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JQUERY
jQuery(".activate").hover(function(){
jQuery(this).find('.subs').css("display", "block");
}, function(){
jQuery(this).find('.subs').css("display", "none");
});
When I try it on my site nothing happens, what am I doing wrong?
You currently have no elements with an .activate class because your HTML is messed up. Change:
item 1
To:
<a class="activate">item 1</a>
Once you've fixed that, you're still going to have problems as .subs isn't a descendant of .activate. You'll need to use jQuery's next() method to select the .subs element instead:
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').css("display", "block");
}), function(){
jQuery(this).next('.subs').css("display", "none");
});
try
HTML
<div id="menuBox">
<ul>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
<li>
item 1
<ul class="subs" style="display: none;">
<li>
Sub 1
Sub 2
</li>
</ul>
</li>
</ul>
</div>
JS
jQuery(".activate").hover(function(){
jQuery(this).next('.subs').show();
}, function(){
jQuery(this).next('.subs').hide();
});
DEMO
item 1
Corrected above line as:
<p class="activate" style="cursor:pointer;">item 1</p>