I have issue with collapsible jQuery mobile.
I'm using Multipage template, where all the pages are in the same document, separated with the div named page. I have two Collapsible, one on each page. I made an animation to the top of the page, my code is above:
$(document).on("pagecreate",function(event, ui){
// alert("pagecreate event fired - the page has been initialized, the DOM has been loaded and jQuery Mobile has finished enhancing the page.");
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(300);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(300);
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
}
});
$('.ui-collapsible-heading-toggle').click(function(){
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
});
In the first collapsible animation works, but in the second, only the animations slideUp and slideDown work, with offset nothing happens.
Why??
Thanks for help!
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 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.
I have implemented a drag & drop feature using JQuery UI - my current code is provided below:
My JavaScript function receives JSON array from PHP and then uses a loop to create the draggable elements:
<script type="text/javascript">
function init() {
var items = <?php echo $result_j;?>; //items is an one dimensional array
for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {
$('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
}
With the 'items' array I have created several div elements (above code) which I then turn into draggable elements (code below).
$(".snk_button").draggable( {
containment: '#drag_section',//Div #drag_section contains the Div #drag
stack: '#drag div',
cursor: 'move',
revert: true
} )
Below is my droppable code:
$( "#dropp" ).droppable(
drop: handleDrop
});
function handleDrop( event, ui ) {
ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop
So far, everything is fine with the draggable items attaching themselves to the droppable div.
Now, I want to tweak this behavior a little:
I want the draggable items to arrange themselves 'automatically' in the droppable div (called '#dropp' in this example), starting from the top left (they will be floating left). Currently this is not happening even though the '#dropp' div has the 'float:left' property set. So, what should I do to have the draggable items arrange themselves when dropped on '#dropp'?
When I take out a draggable item out of the droppable div ('#dropp') I want it return to the div that originally contained the draggable items ('#drag' in this example).
Can you please help implement these 2 behaviors?
After trying this on my own and some R&D for nearly 5-6hrs, I have been able to solve both my problems.
For benefit of others who might be facing the same issues, below is the additional code that is required to implement the behaviors described above:
$( "#dropp" ).droppable({
accept: '#drag div',
drop: function(event, ui)
{
$("div#dropp").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
.addClass("moved");
} // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable
This has been added new:
$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
$("div#drag").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });
} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable
That's all is required to implement the behaviors described above. Hope somebody finds the information useful :-)
I have a dynamically created TinyMCE textarea (using an external toolbar), inside a container div. I'm trying to get it to be draggable, and resizeable (the whole text area).
jQueryUI's .draggable() works with tinyMCE, but if I use .resizable(), the tinyMCE external toolbar doesn't appear when I click on the area. If I use tinyMCE's resizing option in its settings, when I click to drag to size it, it breaks the draggable function of jqueryUI (the whole box follows the mouse as well as resizing, and won't let go).
I solved this problem using the handle option of jquery ui draggable and the drag function callback:
div.draggable.handle = "div[role=group], td.mceLast";
div.draggable.drag = function ( event, ui ) {
if ( $( event.srcElement ).is( '.mceResize' ) || $( event.originalEvent.target ).is( '.mceResize' ) ) {
return false;
}
};
This is solution
".mce-resizehandle" is class of tinymce resize button
$( ".selector" ).resizable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
$( ".selector" ).draggable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
The following error just occurs in IE8.
Demo: http://tinyw.in/BLrg
Click on show at Newsletter 313. If you now hover over the blue bar at the left, a layer slides out containing some elements. You can drag each one of this elements. If you start dragging the layer slides back. As you see, in IE8, the dragged element also gets hidden or if you directly drag it over it might get added instantly. And that's the problem, you can open it in IE9, Firefox, Chrome and it works. To see, how it should actually work.
Here's the code which can be found in logic.frontend.js:
(Just a part which is actually used)
$( ".draggable li table" ).draggable({
connectToSortable: ".sortable",
helper: 'clone',
revert: 'invalid',
appendTo: 'body',
start: function(ui) {
$('#elementsContainer').hide('slide', {
direction: "left"
}, 500);
}
});
var height = $('#elementsContainer').outerHeight();
$('#elementsContainerHandle').css('height', height);
$('#elementsContainerHandle').mouseenter(function() {
$('#elementsContainer').css('visibility', 'visible');
$('#elementsContainer').show('slide', { direction: "left" }, 500);
});
$('#elementsContainer').mouseenter(function() {
$(this).css('visibility', 'visible');
});
$('#elementsContainer').mouseleave(function() {
$(this).css('visibility', 'hidden');
});
The problem is, that #elementsContainer gets hidden and due to that all it's children including the dragged element are getting hidden as well. In other browser, .hide() doesn't affect the dragged element because of the option appendTo : 'body'. But in IE8, this seems to break somehow although I'm quite sure the element gets added to the body. I've tried making the draggable visible again with css, .show() etc. but i didn't get it.
Thanks