I have an input and users list. This input is a search box, so every time I type on the input it changes the users list reactively. How do I achieve that there's always one selected on the users list preferably the first list item then if I hover to other the selected changes and leaves to where I last hovered on. This is my html code:
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
This needs javascript, cause I wanted to know which is selected. So I can get its data. Also can use up and down keys in changing selection. Doesn't have to be a code that works. Maybe just help me with the logic and give me some pseudocode.
Try using css :hover , :not()
ul li:hover {
background: grey;
}
ul:hover li:first-child:not(:hover) {
background: transparent;
}
ul li:nth-of-type(1) {
background: grey;
}
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text"/>
<div id="userList ">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
another approach js wise would be...
create a css class
.selected{
/* css for selected class */
}
On page load, add this to first-child
$("some-first-child").addClass("selected")
on selecting any other class, remove it from above li and add it to new li class.
To setup a default, you can search for this class in html body
In case $('body').hasClass doesnt return true, you can always add it back toh the first li child.
Jquery search
$("input").on('input', function() {
var val = $(this).val().toUpperCase();
$("#userList li").each(function() {
if ($(this).text().trim().toUpperCase().indexOf(val) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
You want like this.
<style>
.active{
background: gray;
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").mouseover(function(){
$("ul li").removeClass("active");
$(this).addClass('active');
});
});
</script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul style="width:100px;">
<li class="active">
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
with up and down key working.. I am working on this wait.
Related
The issue I am having is:
when I click on "menu2", it is showing me sub-menu and all options of sub-menu.
Expected result:
click on "menu2" should open "sub-menu2" only and NO "sub-menu2" options.
click on ""sub-menu2" should open all it's children.
I see there are some question on related to this one but I did not find any question similar to mine.
If you can suggest a way to do this in pure JS/ES that would be great. Currently I am using jQuery.
$('.container > ul > li').on('click', function(){
$('ul',this).toggle(200);
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
YOu just need to use your selector a bit different way, and its done, if need something else, pls let me know
$('.container li').on('click', function(e) {
var ckeckChildVisiblity = $(this).find('>ul').is(':visible');
if (!ckeckChildVisiblity) {
$(this).find('>ul').slideDown();
return false;
} else {
$(this).find('>ul').slideUp();
return false;
}
})
div.container > ul ul{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li>menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</u1>
</li>
</ul>
</li>
</ul>
</div>
This can be done using toggling immediate children and stop event propagation.
$('.container li').on('click', function(event){
$(this).children("ul").toggle(200)
event.stopPropagation()
})
.menu ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class ="menu">menu1
<ul>
<li>testA</li>
<li>testB</li>
<li>testC</li>
</ul>
</li>
<li class ="menu">menu2
<ul>
<li>
sub-menu2
<ul>
<li>issue1</li>
<li>issue2</li>
<li>issue3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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();
}
<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.
I have a problem with my web page hiding and showing different <div> elements on it. I want to translate the page and add two buttons to switch between the languages.
$('#hu').click(function() {
$('#show').css('display', 'none');
$('#hide').show();
});
$('#en').click(function() {
$('#hide').css('display', 'none');
$('#show').show();
});
#hide {
display: none;
}
#show {
display: true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English">
<input class="translate" type="button" id="hu" value="Magyar">
<ul>
<li class="current">
<div id="show"><a href=index.html>Főoldal</a></div>
</li>
<li>
<div id="show"><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li>
<div id="show"><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li>
<div id="hide"><a href=index.html>Home</a></div>
</li>
<li>
<div id="hide"><a href=oneletrajz.html>About US</a></div>
</li>
<li>
<div id="hide"><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>
You have totally confused between the #hide, #show, etc. What you need is a class for each language and a flag (optional).
Have a language class en or es and have items on it.
Use .hide() and .show() for hiding and showing.
On loading, hide one of the languages.
Don't ever duplicate id values. It's a crime in HTML. Use classes instead.
Use the language classes on the <li> than the child.
$(function() {
$('.Magyar').hide();
$('#hu').click(function() {
$('.English').hide();
$('.Magyar').show();
});
$('#en').click(function() {
$('.English').show();
$('.Magyar').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English" />
<input class="translate" type="button" id="hu" value="Magyar" />
<ul>
<li class="current Magyar">
<div><a href=index.html>Főoldal</a></div>
</li>
<li class="Magyar">
<div><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li class="Magyar">
<div><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li class="current English">
<div><a href=index.html>Home</a></div>
</li>
<li class="English">
<div><a href=oneletrajz.html>About US</a></div>
</li>
<li class="English">
<div><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>
First change your names to something easy to understand at first sight.
Finally your code works but not the way you want. The JS will look for the first ID element (not all of them) because ID Elements are unique. So, I've changed your ID elements for classes and applied the class to the <li> items, otherwise the "dots" will still be visible.
$('#hu').click(function() {
$('.eng').css('display', 'none');
$('.hun').show();
});
$('#en').click(function() {
$('.hun').css('display', 'none');
$('.eng').show();
});
.hun {
display: none;
}
.eng {
display: true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="translate" type="button" id="en" value="English">
<input class="translate" type="button" id="hu" value="Magyar">
<ul>
<li class="eng">
<div><a href=index.html>Főoldal</a></div>
</li>
<li class="eng">
<div><a href=oneletrajz.html>Önéletrajz</a></div>
</li>
<li class="eng">
<div><a href=kapcsolat.html>Kapcsolat</a></div>
</li>
<li class="hun">
<div><a href=index.html>Home</a></div>
</li>
<li class="hun">
<div><a href=oneletrajz.html>About US</a></div>
</li>
<li class="hun">
<div><a href=kapcsolat.html>Contact Us</a></div>
</li>
</ul>
Regarding the second part of your question, it all depends of the size of the website. If it's a small project then it's ok to do it this way.
If we are talking about thousands of pages like (Wikipedia) this isn't a good way. In this case you would need a centralized translation template.
For bigger sites, you could, for example use PHP to create HTML templates with language placeholders (check this pseudocode):
<p>{HOME_LINK}</p>
Then, use PHP to process the language selection (sending a request via JS/Query) and rendering the placeholder with the correct language from a file with the translations:
if selection == EN then :
// EN Translations
HOME_LINK {Home}
if selecction == UN then :
// UN Translations
HOME_LINK {Főoldal}
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>