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

How to hide and show elements based on current hovered element?

We need to be able to hide and show elements based on currently hovered element. We have tried the following below, but it does not add the is-active class and remove it based on what other element is on hover.
How can we hide and show elements based on the current hovered element?
Goal (based on example below):
when you hover over some under first, display <div class="two" id="some-link">some link</div> using is-active class
when you hover over path under first, <div class="two" id="some-link">some linke</div> should not display (remove is-active class), and <div class="two" id="path-link">path link</div> should display (add is-active class)
Current issue:
is-active class is not being removed when on hover element is changed
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>

First your .find() is using the wrong selector. You have find('is-active') which is an element name selector, you wanted a css class selector ie .is-active.
el_parent.find('.is-active').removeClass('is-active');
Note for removeClass() you don't use a css selector you just use a class name hence why you don't need the dot in that call
Now if you wanted to also have the class removed on hovering out of the element as well then you need to add an event listener for that, and call removeClass from there. .hover() uses a second argument for setting such an event listener callback.
$('li#two').hover(onHoverCallback,function(){
//code for finding the right element
$(el_sel).removeClass('is-active');
})
$(function() {
$('li#two').hover( function() {
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
var el_parent = el_two.parent().parent();
el_parent.find('.is-active').removeClass('is-active');
$(el_sel).addClass('is-active');
},function(){
var el_two = $(this);
var el_id = el_two.attr('id');
var el_link = el_two.attr('data-at');
var el_sel = '#'+el_link+'.'+ el_id;
$(el_sel).removeClass("is-active");
});
});
.two {
display: none;
}
.is-active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">
first
<div class="one">
<ul>
<li data-at="some-link" id="two">
some
</li>
<li data-at="path-link" id="two">
path
</li>
<li data-at="another-one" id="two">
another one
</li>
</ul>
<div class="dropdown">
<div class="two" id="some-link">some link text</div>
<div class="two" id="path-link">path link</div>
<div class="two" id="another-one">another one</div>
</div>
</div>
</li>
<li id="one">
second
<div class="one">
<ul>
<li>
another some
</li>
<li>
another path
</li>
</ul>
</div>
</li>
<li id="one">
third
<div class="one">
<ul>
<li>
third some
</li>
<li>
third path
</li>
</ul>
</div>
</li>
</ul>

making event on wrapper element

First, my HTML tag is here
<ul>
<li>
<form>...</form>
<div>
<div class="A"></div>
<div class="B"><img class="wantToShow"></div>
</div>
<div class="C"></div>
</li>
<li>...</li>
</ul>
What I want to do is that when I mouse over <li>, the small image, <img class="wantToShow"> , is shown up(like hover).
But when I add event on each <li> element the following problems occur.
If I use jQuery.mouseover(<li>, function), the whole element in <li> shown up whenever I move mouse cursor in <li>.
If I use jQuery.mouseenter(<li>, function), an element, my mouse cursor enter at first, shown up. In this case, the real problem is that the event do not catch <li> but an element in <li>.
What can I do for this... Thank you!

I think something like this is what you are after:
$('li').on('mouseover',function() {
var $this = $(this);
if($('.wantToShow').is(':hidden')) {
$this.find('.wantToShow').show();
} else {
$this.find('.wantToShow').hide();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<form>This is A</form>
<div>
<div class="A"></div>
<div class="B">
<img src='https://placebear.com/200/300' class="wantToShow">
</div>
</div>
<div class="C"></div>
</li>
<li>This is B</li>
</ul>

How to prevent div aligning to bottom

In this fiddle : http://jsfiddle.net/ak4Ed/139/
When I click a node (which loads the iframe) the tree structure aligns to the bottom of the iframe. How can I align the tree to remain at the top of corresponding iframe ?
I've tried adding margin:0px; to the div which contains the tree but it does not work.
Here is the fiddle code :
<div id="demo1" style="height:100px;display:inline-block;margin:0px;">
<ul>
<li id="node_1_id">
<a>Root node 1</a>
<ul>
<li id="child_node_1_id">
<a>Child node 1</a>
</li>
<li id="child_node_2_id">
<a>Child node 2</a>
</li>
</ul>
</li>
</ul>
<ul>
<li><a>Team A's Projects</a>
<ul>
<li><a>Iteration 1</a>
<ul>
<li><a>Story A</a></li>
<li><a>Story B</a></li>
<li><a>Story C</a></li>
</ul>
</li>
<li><a>Iteration 2</a>
<ul>
<li><a>Story D</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div style="display: inline-block;">
<iframe id="preview" src=""></iframe>
</div>
$(function() {
$('#preview').toggle();
$("#demo1").jstree({
"plugins": ["ui", "html_data", "themes", "hotkeys"]
});
$("#demo1").on("select_node.jstree", function() {
var node = $(this).find("a.jstree-clicked").parent("li");
$('#preview').show();
$('#preview').attr('src', 'http://www.google.com')
alert("selected node: "+node.attr("id"));
});
});

Simply add "vertical-align:top" to div style
<div id="demo1" style="height:100px;display:inline-block;margin:0px;vertical-align:top">
jsfiddle

If you want the tree to stay on top of the iFrame:
<div id="demo1" style="height:100px;display:inline-block;margin:0px;margin-right:100%">
jsFiddle

Demo
just add this to css
#demo1
{ position:fixed;
}
or
append position:fixed; in div with id demo1
<div id="demo1" style="position:fixed;height:100px;display:inline-block;margin:0px;vertical-align:top">
Hope this helps,Thank you

jQuery accordion

Our html:
<ul class="accordion">
<li>
<h2 class="a-head">head 1</h2>
<div class="a-body">body 1</div>
</li>
<li>
<h2 class="a-head">head 2</h2>
<div class="a-body">body 2</div>
</li>
<li>
<h2 class="a-head">head 3</h2>
<div class="a-body">body 3</div>
</li>
</ul>
JS:
$(".accordion .a-head").click(function()
{
$(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
$(this).siblings().css({backgroundColor:"#fff"});
});
This accordion begins to work If I remove <li></li>. How do I make it work with current code?
Actually problem is in .siblings().
Thanks.

I can offer you this:
jQuery:
$('li h2.a-head').click(
function(){
$(this).closest('ul').find('div.a-body').slideUp(400);
$(this).closest('li').find('div.a-body').slideToggle(400);
});
css:
li div.a-body {
display: none;
}
JS Fiddle demo.

Is it what you want? : http://jsfiddle.net/v2Z5L/1/
It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.