can anyone help me use the jquery ui selectable library to perform the following functions:
Allow a user to select multiple items with a mouse click
De-select an item if it is already selected with a mouse click
This is worked around in another question, but I'm reposting here for anyone who finds this via google. If you bind the "mousedown" event in jQuery and set metaKey there (as if the user is holding the ctrl/cmd key), then when you call selectable, it will already be set.
$(".YOUR_SELECTOR_HERE").bind("mousedown", function(e) {
e.metaKey = true;
}).selectable();
Doesn't use Selectable but this will get you the behavior you want with the setup you already have:
instead of
$( "#selectable" ).selectable()
try
$(".ui-widget-content").click( function() {
$(this).toggleClass("ui-selected");
});
Have you checked the demo page for selectable? You can already do this. To select multiple items, just hold control. This is similar to how you would work with files. Is using "Ctrl+Click" not good enough?
Demo Code Here:
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>
<div class="demo">
<ol id="selectable">
<li class="ui-widget-content">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>
</div>
Take a look at my answer on this thread.
jQuery UI selectable - making multiple select default
It includes the full code replacement for the selectable ui js as well as outlining the changes needed, making this an option that can be passed.
use this code may be ot helps you
$('#selectable').bind("mousedown", function (e) {
e.metaKey = true;
}).selectable('filter : td')
if you are using the selectable on table for td's the use selectable('filter : td') else
use selectable()
Related
Select2 4.0 jQuery plugin
In (Mac) Chrome or Firefox, the multiple select box looks fine with default, selected values:
but in (Mac) Safari it looks like below (light gray bracket around what is the <input> element for typing in a search term.)
What is the preferred way (i.e. select2 option or select2 css) to get rid of this visual artifact: [] ?
The HTML element generated by select2 is this:
<span class="select2 select2-container select2-container--default select2-container--below" dir="ltr" style="width: 110px;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" tabindex="0">
<ul class="select2-selection__rendered">
<li class="select2-selection__choice" title="Text">
<li class="select2-selection__choice" title="Video">
<li class="select2-search select2-search--inline">
<input class="select2-search__field" type="search" tabindex="-1" autocomplete="off"
autocorrect="off" autocapitalize="off" placeholder=""
spellcheck="false" role="textbox" style="width: 0.75em;"/>
</li>
</ul>
</span>
</span>
I tried both of the below (now commented out) select2 options to no effect:
$j(".select2").select2({ // we're using the Select2 plugin
// minimumResultsForSearch: Infinity // has no effect on Safari
// placeholder: null // attempt two - no effect
});
The only select2 class styles overridden are:
<style type="text/css">
.select2 { /* select2 honors width CSS property */
font-size: xx-small;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice { /* The results container with MSP-chosen values */
margin-left: .2em;
padding: 0px 2px;
}
.select2-results__option { /* The list of available MSP choices */
font-size: xx-small;
margin-left: .2em;
padding: 0px 4px;
}
</style>
The answer comes courtesy of select2 gitHub Issues - Select box not displayed properly in safari #3459
Specifically, this line of css:
.select2-search__field {
-webkit-appearance: textfield;
}
Per Kevin Brown, added to 4.01 milestone
<li class="menu-item menu-item-has-children">About Us
<ul class="sub-menu">
<li class="menu-item">Meet the team</li>
<li class="menu-item">Our History</li>
</ul>
</li>
The above has a CSS solution to display the .sub-menu which works fine on desktop:
.ul li:hover .sub-menu { display:block; }
.sub-menu { display:none; }
However, as the parent li have links, on IOS devices when clicking on the parent link to display a sub-menu, the page loads the parent link, missing out the sub-menu.
Ideally on an Ipad, I would like to tap once to open up the sub-menu, then tap again on the same link to go to the parent link. Or tap on the sub-menu item once displayed.
You can try place pseudo-element before <a> and remove them on click for mobile devices:
HTML:
<ul>
<li class="menu-item menu-item-has-children">About Us
<ul class="sub-menu">
<li class="menu-item">Meet the team</li>
<li class="menu-item">Our History</li>
</ul>
</li>
</ul>
CSS:
li:hover .sub-menu { display:block; }
.sub-menu { display:none; }
#media only screen and (max-device-width : 1024px){
li.menu-item-has-children { position:relative; }
li.menu-item-has-children:before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:100;
}
li.menu-item-has-children.clicked:before{display:none;}
}
JQ:
$(document).on('click', '.menu-item.menu-item-has-children', function(){
if (window.innerWidth<1024){
$(this).toggleClass('clicked')
}
})
DEMO
I'm trying to give a "Options" drop down in the header bar. I've successfully added it to the header. But the problem is, it is stretching in its "expand" state, and return to normal in its collapse state.
Here's the fiddle to the problem : http://jsfiddle.net/vNTR5/
I've tried a couple of things :
I noticed the "ui-collapsible-heading ui-collapsible-heading-collapsed" class in the collapsed state, vs "ui-collapsible-heading" class in the expanded state. I captured the events and tried adding the "ui-collapsible-heading-collapse" class. It resulted in keeping the list permanently "expanded" once it had been expanded.
I tried making custom css class, and adding and removing those. But it simply won't take in margin-left added through a class. It takes it when its inline.
Please help.
Code snippet:
HTML:
<div data-role="header">
<h1>Main Menu</h1>
<div data-role="collapsible" id="optionsMenu" data-mini="true" class="rightMenu" data-collapsed-icon="gear" data-expanded-icon="gear">
<h3 style="margin-left:-20%;">Options</h3>
<ul data-role="listview">
<li data-icon="false">Settings</li>
<li data-icon="false">Logout</li>
</ul>
</div>
</div>
CSS:
.rightMenu{
position: absolute;
top:-10%;
right:2%;
}
Working example: http://jsfiddle.net/Gajotres/FSSzK/
.rightMenu {
position: absolute;
top:-10%;
right:2%;
width: 100px !important;
}
.rightMenu .ui-collapsible-content .ui-listview {
margin: -10px -15px -10px -35px !important;
}
I am new to jQuery/jQuery UI. I am trying to create multiple tabs in a page(sample.html) which loads dynamic content(temp.html) via ajax. Desired effect is content in temp.html should change according to tab selected. I am using position to place some widgets in positions relative to each other.
The problem I am facing is when i click the first tab, everything is working fine. When i click on the second tab positioning does not work. I have added my code below.
Sample.html
$(function() {
$("#tabs").tabs({
ajaxOptions : {
error : function(xhr, status, index, anchor) {
$(anchor.hash).html("Couldn't load this tab.");
},
cache : false
}
});
});
<div id="content" class="content">
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
</div>
</div>
temp.html
#widget1 {
width: 150px;
height: 70px;
top: 20px;
left: 50px
}
#widget2 {
width: 150px;
height: 70px;
}
function resetPositions() {
$("#widget2").position({
my : "left top",
at : "right bottom",
of : "#widget1",
offset : "0 50"
});
}
$(function() {
$(".customAccordion").draggable();
$(".customAccordion").accordion({
collapsible : true,
fillSpace : false,
icons : {
header : "ui-icon-circle-arrow-e",
headerSelected : "ui-icon-circle-arrow-s"
}
});
resetPositions();
});
<div id="widget1" class="customAccordion">
<h3>Widget 1</h3>
<div>Widget 1</div>
</div>
<div id="widget2" class="customAccordion">
<h3>Widget 2</h3>
<div>Widget 2</div>
</div>
Please do let me know if i am making any mistakes.
Possibly a tricky part of jQuery UI, you need to make sure you initialize your accordion(s) BEFORE your tabs
$(".customAccordion").accordion();
$("#tabs").tabs();
Try first to remove your accordion, see if it helps.
Then try to initialize your tabs at the very end.
Then you need to verify loading your html page with AJAX will run its included Javascript... If not, you need to paste that initialization code into the select event of your tabs.
$("#tabs").tabs(
{
select: function(event,ui)
{
// initAccordions();
}
});
I have some series on un-order lists, wrapped with Link I want show edit icon on mouseover of Link... how to do that using jquery?
<div class="user_welcome_dropDown_wrapper">
<ul style="padding-left:0; margin-left:0;">
<li>Settings</li>
<li>Dummy Link</li>
<li>Dummy Link</li>
</ul>
</div>
check this out;
http://jsfiddle.net/M48tr/3/
$("a").hover(function(){
$(this).append("<div>edit</div>")
}, function(){
$(this).children("div").remove();
})
For this purpose, you should be using mouseenter and mouseleave to append and prepend the link to whereever you want it.
Try the following:
$('a').mouseenter(function () {
// show icon here
});
$('a').mouseleave(function () {
// hide or remove icon here
});
If you only want to show the icon for anchor tags with a href attribute of # the 'a[href="#"]' selector can be used instead.
This would basically work the following way:
You have:
...
<li>Link<span class="additional">extra info</span></a></li>
...
With the span hidden via CSS:
.additional{
display: none;
}
and finally the jQuery:
$('a').hover(function(){
$(this).next('.additional').show();
},function(){
$(this).next('.additional').hide();
});
See http://api.jquery.com/hover/ for more info
jQuery is great for all sorts of things, but might be overkill here. This can easily be pulled off using plain old HTML+CSS.
http://jsfiddle.net/AzkPD/
CSS:
li {
width: 66px;
}
li:hover {
background-image:url('http://glyphicons.com/wp-content/themes/glyphicons/images/updates.png');
background-repeat:no-repeat;
background-position:right center;
}
HTML:
<ul>
<li>Settings</li>
</ul>