I have a table with some rows and and cells. Using jQuery UI Selectable how can I customize the selection so it's only possible to select cells following each other. It shouldn't be possible to select cells vertically across rows without selecting the cells between.
Any solutions?
Use the selected callback to add a class to the selected element; The class which you will use to tie .selectable(). You can then use the next siblings selector in combination with this, and you should be able to accomplish what you need.
To start off, you're going to want something like the following:
<ol>
<li class="ui-widget-content ui-selectee">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
Then, as you select one, which will fire the callback, you want to make the second selectable.
<ol>
<li class="ui-widget-content ui-selectee ui-selected">Item 1</li>
<li class="ui-widget-content ui-selectee">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
<li class="ui-widget-content">Item 7</li>
</ol>
And so on.
Related
I create simple drop down menu using Foundation 6
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Now i want to on different event ( like other button to hide or show menu.) But in doc there is no method to do this. When I use jquery trigger on click also not working is there any solution for this ?
Attach an event handler to an element (for example a button) and give it a function like hiding the dropdown menu:
$("button").click(function(){$(".dropdown").hide()})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown menu" data-dropdown-menu>
<li>
Item 1
<ul class="menu">
<li>Item 1A</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<button>
I'm a button
</button>
To allow it to come back again, try $("button").click(function(){$(".dropdown").toggle()})
I'm using isotope.js to make a megamenu, and have the UL's within the megamenu stack in an orderly fashion. So essentially I have the following HTML:
<ul>
<li>ABOUT
<ul>
<li>We're Great</li>
<li>We're Really Great</li>
</ul>
</li>
<li>DIVISIONS
<ul class="level-2">
<li>Category One
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
</ul>
</li>
</ul>
<ul class="level-2">
<li>Category Two
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
</ul>
<ul >
<li>Category Three
<ul class="level-3">
<li>Item One</li>
<li>Item Two</li>
</ul>
</li>
</ul>
</li>
<li>Products
<ul>
<li>Product One</li>
<li>Product Two</li>
</ul>
</li>
</ul>
What I need, is for the LI's within the UL with the class "level-2", to stack together nicely in the megamenu, and have isotope.js applied to them.
Simple enough, except what isotope seems to do for me, is when I use the following JS:
var $container = $('ul.level-2');
$container.isotope({
itemSelector: 'li'
});
It applies isotoping to the li's even within the level-3 class of UL... which I only want it to be applied to that ONE layer of UL, so they stack friendly, but I don't want the deeper LI's to have anything happen, they should just be normal within their respective UL's.
I have position:relative on the containing UL's, and the LI's are floated left with display: block on them as well. Not sure what I might be missing!!
Hopefully this actually makes sense. Anyone able to point me in the right direction?
I'm having a problem with jQuery.
I'm doing a mobile menu using jQuery with sub menus. I need to use the same class to activate all the menus because they will be created dynamically, but when I do this, when I click on a item, all the others show their sub-item too.
To be clear, here's an example:
<ul>
<li class="OpenMenu">Menu 1
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 2
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="OpenMenu">Menu 3
<ul class="sub-item">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
I need each menu to show its sub-items only when is clicked, but all using the same class. I'm doing the "open" effect of the menus with jQuery.
You can achieve by below code, find() method will drill down to only its child items and find sub items
$(".OpenMenu").click(function(){
$(this).find('.sub-item').show();
});
DEMO (covers only displaying required sub menu)
To view how to hide other sub items and display only current items, use this http://jsfiddle.net/Lboyrqnc/2/
I'm attempting to create a "filterable" list of items. The user should be able to click on a list element (the parent), which would hide all other parent elements and show the "children".
An example of the html is:
<ul class='parent_list'>
<li>Parent 1</li>
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2</li>
<ul class='child_list hidden'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
My jQuery code is:
$('.parent_list li').click(function(){
$(this).siblings().addClass('hidden');
$(this).children().removeClass('hidden');
});
Of course, you can probably tell by the javascript that I don't have too much experience with things like this. I've tried searching for a bunch of different examples on Google and haven't been able to get anything to work as of yet. Any tips?
Thanks!
http://jsfiddle.net/czHQE/2/
This way you won't need a .child-list class.
HTML:
<ul class='parent_list'>
<li>Parent 1
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2
<ul>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
Javascript:
$('.parent_list li').click(function(){
$(this).siblings().children().hide();
$(this).children().show();
});
Try this:
$('.parent_list > li').click(function(){
$('ul.child_list').hide();
$('ul.child_list', this).show();
});
And change your HTML to remove the extra </li> after "Parent1" and "Parent2":
<ul class='parent_list'>
<li>
Parent 1
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>
Parent 2
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
When the direct children of .parent_list are clicked, it'll hide all children lists except for it's own. I used the .hide() and .show() methods since they simply toggle the element's display property.
Here's the jsfiddle to play around with.
You're going to want to clean up your markup also - you've closed the <li> tags for the "Parent 1" and "Parent 2" and then tried to close them again after the nested <ul>.
<ul class='parent_list'>
<li>Parent 1
<ul class='child_list'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
<li>Parent 2
<ul class='child_list hidden'>
<li>Child 1</li>
<li>Child 2</li>
</ul>
</li>
</ul>
I am looping through some unordered lists and I'd like to get all of the descendants by using only the saved selectors (both of which are wrapped with jquery objects).
Here is my sample HTML:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ul>
<li>item 6</li>
<li>item 7</li>
<li>item 8</li>
<li>item 9</li>
<li>item 10</li>
</ul>
<ul>
<li>item 11</li>
<li>item 12</li>
<li>item 13</li>
<li>item 14</li>
<li>item 15</li>
</ul>
<ul>
<li>item 16</li>
<li>item 17</li>
<li>item 18</li>
<li>item 19</li>
<li>item 20</li>
</ul>
Here is my sample JS:
$(document).ready(function() {
allUls = $('ul');
allAs = allUls.find('a');
// shouldn't this next line get all anchors within the second unordered list?
console.log( allUls.eq(1).find(allAs) );
});
So there it is. I was expecting for an array of anchors that are descendants of the second list to be sent to the console. But that's not the case.
You can see for yourself on my jsfiddle example: http://jsfiddle.net/u6uf4/
I'm also open to any "better" solutions you may have. Just keep in mind, I'd like to use only the saved selectors and would like to avoid creating any new selectors for this task.
Thank you for your time and effort for helping a fellow Jquery-er!
The option to pass a jQuery object to find() was only recently added in version 1.6. Your jsfiddle example uses version 1.5.2. Select the latest jQuery version on the left to make it work.
Close, but you don't need to filter by allAs, just filter by 'a'.
allUls.eq(1).find('a')