I have a list with a bunch of items. If there is a certain amount of items the list becomes a scrollbar and if the user clicks a button to see an item which for example is at the bottom of the list, it should automatically scroll to that element. I created a scroll function but it doesn't seem to work correctly.
the javascript looks like this:
$('a').on('click', function(e){
var id = $(e.currentTarget).attr('id') // catch the ID of the clicked item
$('#left').animate({ // #left is the container of the list
scrollTop: $('#left ul li#'+id+'').offset().top // scroll to the element which metches the cliced ID
}, 500);
})
I created a simple JSFIDDLE - Could someone help me out?
Thanks alot!
The problem is that you are using .offset().top that calculate the offset relative to the window but not to the container.
The solution is to use .offsetTop
note: I really don't know where the extra 8 pixels come from but it works..
$('a').on('click', function(e){
var id = $(this).attr('id')
$('#left').animate({
scrollTop: $('#left ul li#'+id+'')[0].offsetTop - 8
}, 500);
})
#con {
}
#right {
float: right;
}
#right a {
display: block;
}
#left {
float: left;
height: 500px;
overflow: scroll
}
#left ul {
padding: 0;
margin-top:20px;
}
#left ul li {
}
#left ul li div {
height: 100px;
width: 100px;
border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="con">
<div id="left">
<ul>
<li id="1">
<div>
Item 1
</div>
</li>
<li id="2">
<div>
Item 2
</div>
</li>
<li id="3">
<div>
Item 3
</div>
</li>
<li id="4">
<div>
Item 4
</div>
</li>
<li id="5">
<div>
Item 5
</div>
</li>
<li id="6">
<div>
Item 6
</div>
</li>
<li id="7">
<div>
Item 7
</div>
</li>
<li id="8">
<div>
Item 8
</div>
</li>
<li id="9">
<div>
Item 9
</div>
</li>
<li id="10">
<div>
Item 10
</div>
</li>
<li id="11">
<div>
Item 11
</div>
</li>
<li id="12">
<div>
Item 12
</div>
</li>
</ul>
</div>
<div id="right">
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Item10
Item11
Item12
</div>
</div>
https://jsfiddle.net/znwjvtzg/
Related
I just want to ask :
how to make the dropdown-menu collpase when the dropdown menu is active?
When the mouse hovers to the sidebar, the active dropdown menu expanded again?
i think i just wondering using hover but it doesnt work when i try it, so i hope someone can help me to solve this?
Simple Concept I Just want :
Mouse:hover to sidebar-icon/burger is clicked => sidebar-expanded => menu list that have:submenu clicked => dropdown-menu displayed => mouseOut from sidebar => icon is-collapsed
Mouse:hover to sidebar-icon again / sidebar:state(active) => dropdown menu is already expanded
well i dont know that you can understand my question or something.. but i hope u can make this auto collapse menu
$(document).ready(function() {
// Sidebar links
$('.sidebar .side-list li a').on('click', function() {
const $this = $(this);
if ($this.parent().hasClass('buka')) {
$this
.parent()
.children('.dropdown-menu')
.slideUp(200, () => {
$this.parent().removeClass('buka');
});
} else {
$this
.parent()
.parent()
.children('li.buka')
.children('.dropdown-menu')
.slideUp(200);
$this
.parent()
.parent()
.children('li.buka')
.children('a')
.removeClass('buka');
$this
.parent()
.parent()
.children('li.buka')
.removeClass('buka');
$this
.parent()
.children('.dropdown-menu')
.slideDown(200, () => {
$this.parent().addClass('buka');
});
}
});
// ٍSidebar Toggle
$('.burger').on('click', e => {
$('.konten').toggleClass('k-kebuka');
$('.sidebar').toggleClass('s-kebuka');
e.preventDefault();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar" class="sidebar bg-cerah">
<div class="sidebar-dalem">
<div class="side-konten">
<ul class="side-list">
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">ICON</span>
<span class="side-judul">MENU</span>
<span class="panah">[>]</span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item dropdown">
<a class="dropdown-toggle" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #2</span>
<span class="panah">[>] ></span>
</a>
<ul class="dropdown-menu">
<li>
SUBMENU #1
</li>
<li>
SUBMENU #2
</li>
</ul>
</li>
<li class="side-item">
<a class="side-link" href="javascript:void(0)">
<span class="side-ikon">[X]</span>
<span class="side-judul">MENU #3</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div id="konten" class="konten">
<div class="konten-navbar sticky-top">
<ul class="navbar-kiri">
<li>
<a id="burger" href="javascript:void(0)" class="burger">BURGER ICO</a>
</li>
<li>
SEARCH ICO
</li>
</ul>
</div>
</div>
In pure CSS, .menu:hover definitely works, but you have to build the entire menu inside of the element that has the :hover pseudo class and also either touching or overlapping:
.popup {
position: relative;
}
button {
width: 8em;
height: 40px;
}
ul {
position: absolute;
top: 36px;
left: 8px;
background: #eee;
border: 1px solid black;
display: none;
margin: 0;
width: 14em;
min-height: 8em;
padding: 0.5em;
list-style: none;
}
.popup:hover ul {
display: block;
}
<div>
<div class="popup"><button>Menu</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
Certainly, you'd need to style everything properly.
I also seem to remember that JQuery has OnMouseEnter and OnMouseLeave events that work kind of like :hover too.
I am trying to close a custom jquery drop down on click of outside of dropdown, just like default behavior of HTML select dropdown, I tried to use the window click but that is creating trouble in opening the dropdown it self.
$(".selected").click(function() {
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954426 (LKP)</div>
</li>
</ul>
</div>
JSfiddle
https://jsfiddle.net/5zgyouwL/1/
This will work fine for you:
In this method I have used event.stopPropagation();
Your method was right on the path, it just needed some tweaks - I have used the click on the <html> to but the difference is that I have prevented the body click on the .selected and .custom-dropdown-list li using event.stopPropagation();.
$("html").click(function(event) {
$(".custom-dropdown-list").removeClass("open");
});
$(".selected").click(function() {
event.stopPropagation();
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function() {
event.stopPropagation();
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
.custom-dropdown {
width: 300px;
}
.selected {
padding: 5px;
cursor: pointer;
min-height: 37px;
background-color: #ccc;
}
.custom-dropdown-list {
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.custom-dropdown-list.open {
display: block;
}
.custom-dropdown-list li {
padding: 5px;
cursor: pointer;
}
.custom-dropdown-list li:hover {
background: #f2f2f2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>
Hope this was helpfull.
I think what you might want is when clicked anywhere else of custom select/dropdown it must close.
So here it is:
$(".selected").click(function(){
$(".custom-dropdown-list").toggleClass("open");
});
$(".custom-dropdown-list li").click(function(){
var dataVal = $(this).attr("data-val");
var dpText1 = $(this).children('.dp-val1').text();
var dpText2 = $(this).children('.dp-val2').text();
$(".selected").attr("data-val", dataVal);
$(".selected .dp-val1").text(dpText1);
$(".selected .dp-val2").text(dpText2);
$(".custom-dropdown-list").removeClass("open");
});
/*Mouse click anywhere but custom select dropdown, will close it. */
$(document).mouseup(function (e) {
var container = $(".custom-dropdown");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".custom-dropdown-list").removeClass("open");
}
});
.custom-dropdown { width:300px;}
.selected { padding:5px; cursor:pointer; min-height:37px; background-color:#ccc;}
.custom-dropdown-list { list-style:none; padding:0; margin:0; display:none;}
.custom-dropdown-list.open { display:block;}
.custom-dropdown-list li { padding:5px; cursor:pointer;}
.custom-dropdown-list li:hover { background:#f2f2f2;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-dropdown">
<div class="selected" data-val="">
<div class="dp-val1">
Selected Bank</div>
<div class="dp-val2">
</div>
</div>
<ul class="custom-dropdown-list">
<li data-val="0">
<div class="dp-val1">Option Dp0</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="1">
<div class="dp-val1">Option Dp1</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="2">
<div class="dp-val1">Option Dp2</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="3">
<div class="dp-val1">Option Dp3</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
<li data-val="4">
<div class="dp-val1">Option Dp4</div>
<div class="dp-val2">5879464954466 (LKP)</div>
</li>
</ul>
</div>
The key is Event.stopPropagation()
$('body').on('click', function(){
// close the drop down
});
$('.custom-dropdown').on('click', function(e){
e.stopPropagation();
});
You use Mouse Up Event Also Like this
$(document).mouseup(function(e)
{
var container = $(".custom-dropdown");
// if the target of the click isn't the container nor a descendant of the container
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
I believe #weBer answered your question , but another way to do this is to have an event handler right on your html element and inside that check if the targeted element or its children are being clicked :
$('html').on('click' , function(e){
if($(e.target).closest('.custom-dropdown').length ) return
$(".custom-dropdown-list").toggleClass("open");
});
FIDDLE HERE
I have a list of Li's that wen clicked on will have a class of plSel, When clicked, I want them to have a different video playing and the other videos, clear off
This is how I have it down on my html:
<div class="fullscreen-bg">
<video id="appendVid" loop muted autoplay poster="assets/one.png" class="fullscreen-bg__video">
</video>
</div>
and later the lis appear like this:
<li id="numb01"></li>
<li id="numb02"></li>
<li id="numb03"></li>
<li id="numb04" class="plSel"></li> //whenclicked
and this is how I've laid out my JS so far, the problem is when it gets to be more than one, it just wont work
$(document).ready(function(){
if ($('#numb01').hasClass('plSel')) {
$('#appendVid').append('<source src="assets/one.mp4" type="video/mp4"><source src="assets/one.ogv" type="video/ogg">');
});
how do i continue it on to remove what was appended and append the next one for each li each video would have something like this appended <source src="assets/two.mp4" type="video/mp4"><source src="assets/two.ogv" type="video/ogg">
thanks for your help
It's hard to pair them as you need grammar there. I mean class one with numb01. It could be better if you keep those naming convention better. In case you still them unmodified, at least you should collect them within a scope. Just like li has always ul as their parent.
If both video and list have their position in correct order, here I use jQuery index to find its position, then show it and collect its siblings element then hide them. Then find which video to show by found index, hide its siblings, that's all.
I also showing here on how easier you'll get it if you can store related selector with better naming convention. Example here using data- attribute on button to relate target li visibility.
$(function () {
var index = $('.numb .plSel').index()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
$(document).on('click', '[data-toggle]', function () {
var targetId = $(this).data('toggle')
targetId = $(targetId)
var index = targetId.index()
targetId.show().siblings().hide()
$('.fullscreen-bg:eq('+ index +')').show().siblings().hide()
})
.numb {
margin-top: 20px;
}
.numb > li:not(.plSel) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fullscreen">
<div class="fullscreen-bg one">
One
</div>
<div class="fullscreen-bg two">
Two
</div>
<div class="fullscreen-bg one">
Three
</div>
</div>
<ul class="numb">
<li id="numb01" class="plSel">Numb 1</li>
<li id="numb02">Numb 2</li>
<li id="numb03">Numb 3</li>
</ul>
<button type="button" data-toggle="#numb01">Toggle One</button>
<button type="button" data-toggle="#numb02">Toggle Two</button>
<button type="button" data-toggle="#numb03">Toggle Three</button>
I've adjusted your HTML, but I think this is what you want. FIDDLE
$(document).on("click", ".menu ul li a", function() {
$(".container > div").eq($(this).parent().attr("id")-1).addClass("plSel");
$(".container > div").not(".plSel").css("display", "none");
})
.menu {
float: left;
margin-bottom: 25px;
}
.container {
float: left;
clear: left;
}
.fullscreen-bg {
float: left;
}
li {
list-style: none;
float: left;
min-width: 50px;
text-align: center;
}
li a {
text-decoration: none;
color: darkblue;
}
li a:hover {
color: red;
}
.fullscreen-bg:not(:last-child) {
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li id="1">One</li>
<li id="2">Two</li>
<li id="3">Three</li>
<li id="4">Four</li>
<li id="5">Five</li>
<li id="6">Six</li>
</ul>
</div>
<div class="container">
<div class="fullscreen-bg one">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg two">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg three">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg four">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg five">
<img src="http://placehold.it/100x150" />
</div>
<div class="fullscreen-bg six">
<img src="http://placehold.it/100x150" />
</div>
</div>
Actually,I have a multiselect option to select,But now i can able to select a parent & there child alone,But now i want to select a Group With its parent & Child,
So if i select a group all the parent & child in the group should have be moved with the group,So help me....
Here is my example code
<script src="./jquery.min.js"></script>
<script type="text/javascript">
var me = jQuery || $.noConflict();
me(document).ready(function() {
if((me('ul li ul li ul li').children().length) == 0 ) {
me('ul li ul li ul li').addClass("list");
}
me('ul li ul li').click(function() {
me('ul li ul li').removeClass("list_state");
if((me(this).children().length) > 0 ) {
me(this).addClass("list_state");
me('.list_state').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
}
});
me('li.list').click(function() {
$val = me(this).prop("tagName").toLowerCase();
$txt = me(this).text();
me('#result').html($txt).wrapInner('<'+$val+'>');
});
});
</script>
<ul>
<li id="level-0">India
<ul>
<li id="level-0-3">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1">United Kingdom
<ul>
<li id="london">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
If i select a group (i.e) India then all the childs under this group should be moved to right column as like jquery ui multiselect option
I have attached an example screenshot below..
Check this fiddle
In the above fiddle only the text within clicked li and its successor li's will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par" to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}
I need to indicate a selected list item. I need a small line under each list item when it is being selected. I tried:
<div id="types">
<ul>
<li>
item 1
<div class="active"></div>
</li>
<li>
item 2
<div></div>
</li>
<li>
item 2
<div "></div>
</li>
<li>
item 2
<div ></div>
</li>
</ul>
</div>
In css:
.active{
background-color: #5299bd !important;
height: 7px;
}
In jquery:
var classHighlight= 'active';
var $thumb = $('#types ul li > a').click(function(e){
e.preventDefault();
$thumb.removeClass(classHighlight);
$(this).addClass(classHighlight);
});
Its getting highlighted on the anchor tags like, item 1 Item 2 etc.. But i need a small border like indicator/highlight, under the anchor tags, item 1, item 2..
Like this,
Please help me doing this.. Thanks
Try this code instead
$('#types ul li > a').click(function(e){
$("#types div").removeClass('active');
$(this).parent().find('div').addClass('active');
});
personally I think you should add a "dummy"-class, a white line, so the list-items doesnt "jump".
Edit : As Frits van Campen comments, target <li> instead :
style :
#types ul li {
border: 1px solid #fff;
}
#types ul li.active {
border: 1px dotted #5299bd;
}
markup :
<div id="types">
<ul>
<li>
item 1
</li>
<li>
item 2
</li>
<li>
item 2
</li>
<li>
item 2
</li>
</ul>
script
$('#types ul li > a').click(function(e){
$("#types li").removeClass('active');
$(this).parent().addClass('active');
});
results imho in a more "professional" look
$(this).addClass(classHighlight);
$(this).css('border-bottom', '8px solid cyan');