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.
Related
How can i implement lazy loading in mobile jquery lisview widget?
can anybody give a example using static data in json format binding to jquery mobile listview widget?
Thank you.
There are a few ways, The following two ways work great
JQM way, a great tutorial. It detects when you scrolled to the bottom of the listview and loads more items to list
http://jqmtricks.wordpress.com/2014/07/15/infinite-scrolling/
Demo
http://jsfiddle.net/Palestinian/pAgbT/light/
Another way is to use Iscroll 5 plugging. Similarly you can setup a function to detect when you scrolled to the bottom of the list and load new items
http://iscrolljs.com/
Demo I placed the whole Iscroll 5 plugging in the demo so scroll down to //// JQM STUFF to see the actual code
Some of the JQM code e.g trigger create is depreciated in JQM 1.4 so some modifications are needed above > 1.4 for it work.
http://jsfiddle.net/t0t3Lz5x/
var myScroll;
$(document).ready(function(){
myScroll = new IScroll('#wrapper',
{
scrollX: false,
scrollY: true
,click:true // open click event
,scrollbars: false
,useTransform: true
,useTransition: false
,probeType:3,
mouseWheel:true,
bindToWrapper: true
});
});
function initscroll() {
setTimeout(function () {
myScroll.refresh();
}, 1000);
}
output = '<li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li><li><a>Item</a></li>';
$('#listview').html(output).listview().listview('refresh');
initscroll()
myScroll.on('scrollEnd', function() {
if (this.y == this.maxScrollY)
load_new_items();
});
function load_new_items() {
mysearchlist = $('<li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li><li><a>New Item</a></li>');
mysearchlist.appendTo("#listview").trigger('create');
$('#listview').listview().listview('refresh');
initscroll()
}
There is one more way using the Jquery's on scroll function to monitor the height of the list and then as you scroll measure the pixels you scrolled from the top of the list. When both match you can run a function to append more items in the list
Currently I am using a Jquery ui autocomplete, and after someone selects an option from a Jquery ui autocomplete, I am removing the focus from the textbox.
I would like to add the following functionality -
When someone clicks into the textbox again, I would like to leave the option that was previously selected in the text box, but highlight it (as if the text was double clicked), and redisplay all the choices.
How can this be done?
CURRENT CODE -
$(function () {
var availableItems = ['item1', 'item2', 'item3'];
$("#myTextBox").autocomplete({
source: availableItems,
minLength: 0,
select: function(event, ui) {
$('#myTextBox').blur();
}
}).focus(function () {
$(this).autocomplete("search");
}); ;
});
Did you try to put
$(this).select();
in the focus function()?
Also try
$(this).autocomplete("search", "");
to enhance an empty search
I'm using the jQuery accordion, but the first accordion tab is, by default, already expanded on page load. I tried adding the aria-selected="false" to the inline html, and I tried changing/removing this from line 6345 in jquery-ui.js, but the first tab is still expanded:
// make sure at least one header is in the tab order
if ( !this.active.length ) {
this.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
this.active.attr({
"aria-selected": "true",
tabIndex: 0
})
.next()
.attr({
"aria-expanded": "true",
"aria-hidden": "false"
});
}
Any pointers?
EDIT: new fiddle using the answer below: http://jsfiddle.net/pfeff/WNdRe/1/
Accordion jQuery-ui is working with the tabs visibility by changing CSS, but not class of content . Place this in code just after accordion initialization:
$("#accordion div.ui-accordion-content").css({"display": "none"});// hide content block
UPD:
$(...).accordion({ collapsible: true, active: false });
UPD 2:
The best way to change original behavior of the original ui element -- create your own plugin or widget :)
http://jsfiddle.net/R8J5p/1/
Now you can use it like $(...).myAccordion();
I'm dragging sortables from a grey ul list (parent group) to two yellow lists underneath. I am trying to have a hidden button in the grey sortable list appear when dragged into the yellow sortable lists.
I'm using a stupid method of display none and using a mouseUp event handler to make the hidden button appear. It's not achieving the desired effect.
it is also important that the hidden button only appear in the bottom yellow boxes and not appear in the grey sortable lists.
Any help would be much appreciated. Thanks.
http://jsfiddle.net/equiroga/4At6J/4/
//Show js
$(function(){
$(document).mouseup(function(){
$('.button, .button2, .button3, .button4, .button5').show();
});
});
//Sortable js
$(function () {
$("#sortable1").sortable({
helper: "clone",
connectWith: ".sortable",
start: function (event, ui) {
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop: function (event, ui) {
if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
},
stop: function (event, ui) {
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});
Remove the top code and add this in the stop function:
ui.item.children('.button').show();
EDIT
I added a bt common class to all the buttons and then:
ui.item.children('.bt').show();
http://jsfiddle.net/stevemarvell/4At6J/6/
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. :)