is it possible to disable single headers in jquery ui 1.9? I had a quation runing about this, while i was using 1.8 and there it wasnt possible. I fond a way, but its really hard coded. It opens the tab and if the user doesnt have permitions to it , the tab closes. So is there any better way now?
best regrads.
I found a way and i thought ill share it hopefully it will help some one else a lot. :)
$(function() {
var icons = {
header: "h3",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#prod_accordion" ).accordion({
active:<?php echo $db_obj->getValue('status') ? 'acc_'.$tab_status : 'acc_0'; ?>,
icons: icons,
autoHeight: false,
beforeActivate: function(event, ui) {
var newIndex = $(ui.newHeader).index('h3');
if (jQuery.inArray(newIndex , accordion_array) == -1) {
event.preventDefault();
}
}
});
});
the accrodion_array is an array with indexes like (1,2,3,4) and i check if the index of the clicked accordion lets say 5 is in the array. If not then perventDefault() and the accordion header wont open.
if u add ui.addClass('ui-state-disabled'); to the accordion headers that are not in the array the user will now what accordion he cant open. :)
Related
I am using jQuery-ui autocomplete version v1.12.1. How do I add loading GIF ? I am trying to retrive data using jQuery only ... There is NO AJAX call.
jQuery(document).ready(function(){
var product_data = <?php echo $product_implode; ?>;
if(product_data != ''){
jQuery( "#search_box" ).autocomplete({
appendTo: "#project-description",
minLength: 1,
source: product_data,
open: function(e, ui) {
jQuery('#project-description').addClass('autocomplete-content');
},
close: function(e, ui){
jQuery('#project-description').removeClass('autocomplete-content');
}
});
}
});
Here is my code for autocomplete. And I am using datatables version 1.10.16 to display data. I want to show loader image until search data is not displayed.
JQuery autocomplete adds the ui-autocomplete-loading class at the time of loading content.
Add the following line to css:
.ui-autocomplete-loading { background:url(http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif) no-repeat right center }
Edit:
As said by #Twisty, if you have your all data at client side, then it will not get enough time to display loading gif while displaying autocomplete.
So you can add following script with css above mentioned. See Demo
setTimeout(function(){
//logic of fetching data.
}, 1500);
Hope, this may help you to solve your problem.
I'm using jquery-ui selectmenu and have noticed if you leave the drop menu open and resize your window, the drop menu moves independently of the select.
Here's a fiddle with a totally stock usage:
http://jsfiddle.net/kirkbross/65q0fL5r/
The odd thing is that the example on the jqueryui site doesn't have this issue, even though it's the same code.
Is there an easy fix for this?
$(function() {
$( "#select" ).selectmenu();
});
Here is my quickfix: On window resize, close and re-open the selectmenu if it is currently open:
$(window).resize(function() {
$('.js-selectmenu').each(function() {
var open = $(this).next().attr('aria-expanded') == 'true';
if (open) {
$(this).selectmenu("close");
$(this).selectmenu("open");
}
});
});
I'm playing around with jQueryUI Accordion for the first time and I'm trying to make simple expanding div, which switches it's header text and sliding to the bottom of the content, when expanded.
I have the default h3 header saying 'More' and I want it to change to 'Less', when the div is expanded and revert to 'More', when it is closed. Also, the header should slide down and stay below the content, when expanded.
I've been searching for 2 days with no luck.
Change text by #Irvin Dominin aka Edward
$(function() {
$( "#accordion" ).accordion({
header: 'h3',
collapsible: true,
active: false,
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Slide Header by #vitaliy zadorozhnyy
var headers = $('#accordion h3');
headers.click(function () {
var panel = $(this).prev();
var isOpen = panel.is(':visible');
$(this).text(!isOpen ? 'Less' : 'More');
panel[isOpen ? 'slideUp' : 'slideDown']();
return false;
});
Now the problem is these two can't be used together. Any idea how to mix them?
You can use activate event to switch your accordion header text:
Triggered after a panel has been activated (after animation
completes). If the accordion was previously collapsed, ui.oldHeader
and ui.oldPanel will be empty jQuery objects. If the accordion is
collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
Code:
$('#accordion').accordion({
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Demo: http://jsfiddle.net/IrvinDominin/r93wn/
if you use accordion with one item and want to slide it when it is active then use collapsible option
In your case $('#accordion').accordion({collapsible:true});
but if u want to slide header down you can use another approach. I have made some sample on JsFiddle for you.
Hope it helps.
Given this example here: http://jqueryui.com/selectable/#display-grid I would like to make a selection without the "selection box" that appears when you click 'n drag. Namely, when I click on number 5 and drag to number 6 and then to 10 I get this:
where in fact what i would like to is drag from 5 to 6 to 10 and have only them selected without 9.
I searched the docs and couldn't find that option, and my google skills didn't bring me any luck, and I thought this must have been already done it's just so happens I can't grasp it on my own or find an existing solution, so any help here is appreciated (not saying you should do the research for me, am just hoping someone dealt with this before so he can point me to the right direction).
It also could be I'm missing the point in trying to accomplish this with jquery UI but this was the first such example I found that fits (kind of) what I want to accomplish.
First, you might want to hide .ui-selectable-helper or change the CSS:
.ui-selectable-helper{display:none;}
Next, do something like this:
$(function() {
var _mousedown = false;
$('#selectable').selectable({
start: function(event,ui){
_mousedown=true;
},
stop: function(event,ui){
_mousedown=false;
$('.ui-selected').removeClass('ui-selected');
$('.selecting').addClass('ui-selected');
},
selecting: function(event,ui){
if($('.ui-selecting').length == 1)
$(ui.selecting).addClass('selecting');
$('.ui-selecting').removeClass('ui-selecting');
$('.selecting').addClass('ui-selecting');
},
unselecting: function(event,ui){
if($(ui.unselecting).hasClass('selecting'))
$(ui.unselecting).removeClass('selecting');
}
});
$('#selectable').on('mouseenter', '.ui-selectee', function(){
if(_mousedown)
$(this).addClass('selecting');
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/5/ (HELPER HIDDEN)
http://jsfiddle.net/dirtyd77/7UVNS/6/ (HELPER VISIBLE)
Let me know if you have any questions!
***UPDATE:***
.selectable() is not able to do what you are looking for. However, here is something I created. Hope it helps!
JAVASCRIPT:
$(function() {
var _mousedown = false,
_last=null;
$('#selectable li').mousedown(function(){
_mousedown = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$(this).addClass('ui-selecting');
}).mouseup(function(){
_mousedown=false;
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
$('#selectable li').removeAttr('unselectable style');
}).mouseenter(function(){
if(_mousedown){
if($(this).hasClass('ui-selecting'))
$(_last).removeClass('ui-selecting');
$(this).addClass('ui-selecting')
}
}).mouseleave(function(){
if(_mousedown){
_last = $(this)[0];
$(this).addClass('ui-selecting');
}
});
});
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/9/
***UPDATE #2:***
If you want to use this on a mobile device, I recommend changing up the format entirely to avoid any possible pitfalls. Here is how I would go about it:
JAVASCRIPT:
$(function() {
var _clicked = false;
$('#btn_select').click(function(){
_clicked = false;
$(this).hide();
$('#selectable li').removeAttr('unselectable style');
$('.ui-selecting').addClass('ui-selected').removeClass('ui-selecting');
});
$('#selectable li').click(function(){
if(!_clicked){
_clicked = true;
$('.ui-selected').removeClass('ui-selected');
$('#selectable li').attr('unselectable', 'on').css('user-select', 'none');
$('#btn_select').show();
}
if($(this).hasClass('ui-selecting')){
$(this).removeClass('ui-selecting');
}else{
$(this).addClass('ui-selecting');
}
});
});
*NOTE: you might want a $('body').click() to act as the end_selection button.
DEMO:
http://jsfiddle.net/dirtyd77/7UVNS/13/
This doesn't answer the original question, but it does show how to access the helper div of the selectable widget.
var helper = $( "#selectable" ).selectable('widget').data().uiSelectable.helper;
helper.css( { border:'none' } );
I've got some jQuery code written to enable autocomplete on an input field.
I'm having two issues with it that I can't seem to fix.
Tabbing away from the field will not populate the input. What I need is for either the FIRST suggestion to populate the field if nothing is selected(clicked or selected via up/down) OR for the highlighted item to be populated in the field. (note: highlighting is done via up/down arrows)
When using the up/down arrows I need the input to display the "LABEL" and not the "VALUE" Currently pressing up/down will populate the input the the VALUE.
Any advice will be greatly appreciated.
Here is my JSBIN testing ground.
http://jsbin.com/iyedo3/2
Note: the <input id="dummy" /> field is just there to give you something to "tab" over to. If it's removed the help area is expanded.
I think I've figured this out. Using the jQuery AutoComplete Helper
$(function () {
$(label_element).autocomplete({
source: json_string,
selectFirst: true,
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
$(value_element).val(ui.item.value);
$(label_element).val(ui.item.label);
return false;
}
});
});
And the following Select First Script
(function ($) {
$(".ui-autocomplete-input").live("autocompleteopen", function () {
var autocomplete = $(this).data("autocomplete"),
menu = autocomplete.menu;
if (!autocomplete.options.selectFirst) {
return;
}
menu.activate($.Event({ type: "mouseenter" }), menu.element.children().first());
});
} (jQuery));
Now anywhere I need to add autocomplete, I just use this.
<script type="text/javascript">
var json_string = // My Autocomplete JSON string.
var label_element = "#RegionName";
var value_element = "#RegionID";
</script>