Develop Reference

If handlebars list is empty, show a message

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

Want to hide menu by clicking outside the menu element

I want to hide my menu by clicking on any part of the web, rather than the menu button here is de js:
mobile_nav.click(function(){
if (desktop_nav.hasClass("js-opened")) {
desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
$(this).removeClass("active");
}
else {
desktop_nav.slideDown("slow", "easeOutQuart").addClass("js-opened");
$(this).addClass("active");
// Fix for responsive menu
if ($(".main-nav").hasClass("not-top")){
$(window).scrollTo(".main-nav", "slow");
}
}
});
and the HTML
<div class="inner-nav desktop-nav">
<ul class="clearlist scroll-nav local-scroll">
<li class="active">Home</li>
<li>Who we help</li>
<li>
Services <i class="fa fa-angle-down"></i>
<!-- Sub -->
<ul class="mn-sub to-left" style="background: white !important;">
<li>
Recovery Coaching
</li>
<li>
Coaching and Support for Loved Ones
</li>
<li>
Family and Couples Coaching
</li>
<li>
Interventions
</li>
<li>
LIFE COACHING IN RECOVERY
</li>
<li>
Separation and Divorce Coaching
</li>
<li>
Therapy
</li>
</ul>
<!-- End Sub -->
</li>
<li>About us</li>
<li>WORK WITH US</li>
<li>FAQ</li>
<li>Blog</li>
</ul>
</div>
I wanted a simple code that I can put in that js, because I tried to put in the head tag in the index but its not working, any ideas? I have the CSS too but I think its not relevant at this point, the site is:
http://www.familyaddictionspecialist.com/test/

Is this what you want?
var thatMenu = $('.thatMenu');
$(document).mouseup(function (e) {
if (!thatMenu.is(e.target) && thatMenu.has(e.target).length === 0) {
thatMenu.hide();
}
});

untested but looking at your code, this could work.
the idea is that there is an event handler on the body of the page that when it fires, it checks to make sure you haven't clicked on any child of js-opened, and closes the element with class js-opened.
$(document).ready(function(){
$("body").click(function(event) {
if ($(event.target).parents('div').hasClass("js-opened") === false){
console.log('closed menu');
$('.js-opened').slideUp("slow", "easeOutExpo").removeClass("js-opened");
}
});
});

var $menu = $('.main-nav');
$('mobile_nav').click(function () {
$menu.toggle();
});
$(document).mouseup(function (e) {
if (!$menu.is(e.target) // if the target of the click isn't the container...
&& $menu.has(e.target).length === 0) // ... nor a descendant of the container
{
desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
$(this).removeClass("active");
}
});

Show the content based on link click. And hide previously selected

I want to show the content based on link click. and hide the content which was previously selected.
Any way to do it?
Note : I dont want to change the markup.
Here is jsFiddle
html:
<ul class="nav nav-stacked" id="nav-stacked">
<li class="active"><i class="fa fa-dashboard fa-fw"></i>Dashboard
</li>
<li id="vollist-container" class="menu open"><i class="fa fa-sort-alpha-asc fa-fw"></i>Volumes<i class="caret"></i>
<ul id="vol-list" class="submenu">
<li> <a href="javascript:void(0);" onclick="show_content('vol1', this)">
<span>vol1</span>
</a>
</li>
<li> <a href="javascript:void(0);" onclick="show_content('vol2', this)">
<span>vol2</span>
</a>
</li>
</ul>
</li>
</ul>
<div id="content">
<div id="dashboard" class='show'>dashboard</div>
<div id="volumes">
<div id="vol1" class="hide">vol 1</div>
<div id="vol2" class="hide">vol 2</div>
</div>
</div>
jQuery:
function show_content(id, element) {
var children = $("#content").children();
children.filter(function () {
return $(this).css('display') == 'block';
}).hide();
$("#" + id).parent().css('display') == 'none' ? $("#" + id).parent().show() : null;
$("#" + id).toggleClass('hide');
}

This function does what you need:
function show_content(id, element) {
$('#content > div').hide();
$('#' + id).show();
}
Notes:
You do not need the .show and .hide CSS classes
You still need to hide all the content divs on page load either via CSS or via jQuery.
The element parameter is not necessary.
jQuery offers more elegant ways to solve this problem, but the function above should answer your question.

<script>
function showSomething()
{
$("#div1").hide();
$("#div2").show();
</script>
Around your div:
<a href="Javascript:showSomething();">
<div></div>
</a>

When User Open One DropDown Close Other DropDowns

I Want When User Click On One DropDown All Other open DropDown Get Closed . I looked for answer in google but that is not working for my dropdown i know it's simple but i am unable to this pls help me !!
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu" >
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
And jquery i am using in this :
<script>
$(document).ready(function(){
$(".hh_main").on('click' , '.hh_sf' , function(event){
event.preventDefault();
if($(this).next().hasClass('hh_inner')) {
$(this).next().slideToggle();
}
});
});
</script>

Try this:
HTML:
<div class="hh_drop_down">
<ul class="hh_main">
<li class="hh_main_menu">
Chemicals
<ul class="hh_inner expanded">
<li>Additives / Boosters</li>
<li>Anti-Allergen</li>
<li>Concrete</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Equipment</a>
<ul class="hh_inner expanded">
<li>Deodorization</li>
<li>Duct Cleaning Equipment</li>
<li>Hard Surface</li>
</ul>
</li>
<li class="hh_main_menu">
<a class="hh_sf" href="#">Accessories</a>
<ul class="hh_inner expanded">
<li>Bonnets/Pads</li>
<li>Brush/Rake/Sponge</li>
<li>Carpet Rakes</li>
</ul>
</li>
</ul>
</div>
JQuery:
<script>
$(document).ready(function () {
$(".hh_sf").next().addClass("collapsed").slideUp();
$(".hh_main").on('click', '.hh_sf', function (event) {
event.preventDefault();
var currentClass = $(this).next().prop('class');
if (currentClass == "hh_inner expanded") {
$(this).next().removeClass("expanded");
$(this).next().addClass("collapsed");
$(this).next().slideUp();
} else {
$(".expanded").slideUp().addClass("collapsed").removeClass("expanded");
$(this).next().removeClass("collapsed");
$(this).next().addClass("expanded");
$(this).next().slideDown();
}
});
});
</script>
JsFiddle

I opened dropmenu with show and hide and made event on li you can use different way
try this :
JQuery :
$(".hh_main_menu").click(
function(){
$(this).next(".hh_inner").toggle();
if($(this).siblings(".hh_main_menu").children(".hh_inner").css("display")=="block")
{
$(this).siblings(".hh_main_menu").children(".hh_inner").hide();
}
} );

jQuery: disable click during animation

So I am making a little quiz, with a I want to disable the click for everything inside #qWrap while the animation is operating, thus preventing spamming clicks.
I tried to use .is(':animated') but to no effect. Any ideas?
HTML:
<div id="qWrap">
<ul id="qBox">
<!--Q1-->
<li id="q1" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>What are italics?</h3>
</li>
<li>
<a href="#q2" class="mums">
<h3>Slanted cut of a type</h3>
</a>
</li>
<li>
<a href="#q2" class="such">
<h3>A group of italian-designed typefaces</h3>
</a>
</li>
<li>
<a href="#q2" class="usch">
<h3>An other word for the !-sign</h3>
</a>
</li>
</ul>
</li>
<!--Q2-->
<li id="q2" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>Who designed Comic Sans?</h3>
</li>
<li>
<a href="#q3" class="usch">
<h3>Mathew Carter</h3>
</a>
</li>
<li>
<a href="#q3" class="usch">
<h3>David Carson</h3>
</a>
</li>
<li>
<a href="#q3" class="mums">
<h3>Vincent Connare</h3>
</a>
</li>
</ul>
</li>
<!--Q3-->
<li id="q3" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>What does Helvetica mean?</h3>
</li>
<li>
<a href="#q4" class="usch">
<h3>From Austria</h3>
</a>
</li>
<li>
<a href="#q4" class="usch">
<h3>From Germany</h3>
</a>
</li>
<li>
<a href="#q4" class="mums">
<h3>From Switzerland</h3>
</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
JS:
$('.qAnswers li a').bind('click', function(event) {
$(this).parent().addClass('selected');
$(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
var $anchor = $(this);
//preventing click within #qWrap
if ($('#qWrap').is(':animated')) {
$('#qWrap').unbind('click');
}
//firing the animation
$('#qWrap').stop(true, true).delay(800).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function() {
nextCount();
});
stopTimer();
addData();
event.preventDefault();
});

Your JS code should look like this:
$('.qAnswers li a').bind('click', function(event) {
event.preventDefault();
//preventing click within #qWrap
if ($('#qWrap').is(':animated')) {
return;
}
$(this).parent().addClass('selected');
$(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
var $anchor = $(this);
//firing the animation
$('#qWrap').stop(true, true).delay(800).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function() {
nextCount();
});
stopTimer();
addData();
});
The code $('#qWrap').is(':animated') is not an event that will trigger when the element is animating, it's a normal check. I moved your event.preventDefault(); to the top also; figured you want to do that regardless. You might need to move around some other things also.

$('[where you click]').click(
function(){
if(!$('[what animates]').is(':animated')){
$('[what animates]').[your_animation];
}
});