hide and show doesn't work with hover()? - javascript

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>

Related

I am using jquery's toggleClass method on a click event to an li , refreshing the page, the class is already applied without clicking on the li

Below is the JS and the html, I tried using the preventDefault method but to no avail.
$(this).parent().remove();
event.stopPropagation();
});
$("li").click(function(event){
event.preventDefault();
$(this).removeClass("done");
$(this).toggleClass("done");
});
<ul>
<li class="done"> <span class="deleteButton">X</span> sdfd</li>
<li class="done"> <span class="deleteButton">X</span> sdf</li>
<li class="done"> <span class="deleteButton">X</span> sdfds</li>
</ul>
Your issue is that you're applying the class within the HTML markup and not removing it on load. If you don't add the class to begin with this will fix your issue. Working example can be found here.
<ul>
<li> <span class="deleteButton">X</span> sdfd</li>
<li> <span class="deleteButton">X</span> sdf</li>
<li> <span class="deleteButton">X</span> sdfds</li>
</ul>
$("li").click(function(event){
$(this).toggleClass("done");
});
Try this if this helps
.done {
color:yellow;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li").click(function(event){
event.preventDefault();
$(this).toggleClass("done");
});
});
</script>
</head>
<body>
<ul>
<li > <span class="deleteButton">X</span> sdfd</li>
<li > <span class="deleteButton">X</span> sdf</li>
<li > <span class="deleteButton">X</span> sdfds</li>
</ul>
</body>
</html>
The problem is you have already added the class to the elements. You should declare the class and then you should assign the class when the click-on the element. this what you can do.
$("li").click(function(){
$(this).toggleClass("done");
});
.done{
font-size: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
</ul>

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

On mouseenter target a single item

<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span></li>
I have a list of items and I want the display to delete icon to the Mouse Enter li(current li) items by default that delete icon will be hidden.
Thanks
You can do it using CSS only (disaply the delete icon if the mouse is on the item),
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<label class="delete-icon" (click)="onDelItem()">
<i class="fa fa-remove"></i>
</label>
</li>
</ul>
in CSS:
.delete-icon {
display: none;
}
.list-group-item:hover .delete-icon {
display: block !important;
}
One of easiest way :- Try this
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="item.toggle = true"
(mouseleave)="item.toggle = false"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="item.toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span>
</li>
</ul>
Try Following
I tried Angular JS first time so so please try to undersrand and Let me know its working or not
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.mouseenter=function($event)
{
var SpanEle=angular.element('<span class="CrossSpan")"><i class="fa fa-remove" style="color:red"></i></span>');
$event.target.append(SpanEle[0]);
}
$scope.mouseleave=function($leave)
{
angular.element(document.querySelector('.CrossSpan')).remove();
}
$scope.SpanClick=function()
{
debugger;
alert('click');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">First</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Second</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Third</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fourth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fifth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Sixth</li>
</ul>
</div>
Try Following Using jquery
You can see Cross on Hover & Can Perform Action on Cross click
//For showing Cross on Hover
$("li").hover(function(){
$(this).append('<span class="CrossSpan"><i class="fa fa-remove"></i></span>');
}, function(){
$(".CrossSpan").remove();
});
//For Click Event
$("li").click(function(){
alert('Cross Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
You should use CSS for such requirements. Handling events can get messy.
Following is a sample of an element being shown on hover:
li > span {
display: none;
}
li:hover > span {
display: block;
}
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
Note: I know original question is based on Angular JS, but the requirement is not dependent of Angular and can be achieved using just CSS. This is what above answer depicts. If there is anything incorrect/inappropriate, please comment it along with your vote. A silent vote does not help anyone.

jQuery get Text of parent in list

I have the following list
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.target).children().remove().end().text());
alert($(e.target).siblings('span:first').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
I would like to extract "foo1" and "bar1" at the same time in different values. The function above looks really weird. Could someone find a better approach?
Could you adjust my jQuery function please?
You should try this code:
$(document).ready(function() {
$('li').click(function() {
console.log('span #1', this.children[0].innerHTML);
console.log('span #2', this.children[1].innerHTML);
});
});
You can use find('span:first').text() to get the texts with foo:
$(document).ready(function() {
$('li').click(function(e) {
console.log($(this).find('span:first').text());
});
});
I have the following list $(document).ready(function() { $('li').click(function(e) { alert($(e.currentTarget).text()); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>
Expand snippet I would like to get only the "foo".text() of each list element clicked. With my actual approach I also receice the "bar".text() unfortunately. Could you adjust my jQuery function please? javascript jquery target shareeditcloseflag asked
6 mins ago AppRoyale 1281217
You can read more about find() here and about text() here.
You need to find() the span, and then do the text() or html()
$(document).ready(function() {
$('li').click(function(e) {
alert($(e.currentTarget).find('span:last-child').text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<span>foo1</span>
<span style="visibility: hidden">bar1</span>
</li>
<li>
<span>foo2</span>
<span style="visibility: hidden">bar2</span>
</li>
<li>
<span>foo3</span>
<span style="visibility: hidden">bar3</span>
</li>
</ul>

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>

Categories

Resources