I have multiple pages inside a single html.
And I've an external panel that can be swipe in and out (panel can open and close ) in all pages. In one page i have swipe tabs feature.
Both Panel and Swipe Tabs functionality are fine now..
My problem is when i come to swipe tabs page,swiping tabs will also pull the panel too, how to adjust these swipe events?, How to detect swipe tabs and panel swipe events correctly.
Here the DEMO i created, i also need a panel which can also can open and close with swipe events. user can swipe between swipes and swipe to open and close a left panel, panel must be external so it can be available in whole pages.
unfortunately panel not working in the demo i don't know whats happening, but working in my project.
To add the external panel, you can use the regular jQuery document ready:
var panel = '<div data-theme="a" data-role="panel" data-display="overlay" id="leftpanel"><ul data-role="listview"><li data-icon="false"><a data-ajax="false" href="index.html">Home</a></li><li data-icon="false"><a data-ajax="false" href="html/examples.html">Examples</a></li><li data-icon="false"><a data-ajax="false" href="html/custom/version.html">Version 1.0.1</a></li></ul></div>';
$(function () {
$("body").prepend(panel);
$("[data-role=panel]").panel().enhanceWithin();
});
Then you could listen for swipes on the content div to change tabs and on the header div to open/close the panel:
$("div[data-role=content]").on("swipeleft", function (event) {
changeNavTab(true);
});
$("div[data-role=content]").on("swiperight", function (event) {
changeNavTab(false);
});
// Navigation Drawer Swipe Listener
$("div[data-role=header]").on("swipeleft swiperight", function (e) {
// save swipe direction right/left
var dir = 'prev';
if (e.type == 'swiperight') {
dir = 'next';
}
if (dir == 'prev') {
$('#leftpanel').panel('close');
} else {
$('#leftpanel').panel('open');
}
});
Updated FIDDLE
Related
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 created a Collapsible set using jQuery mobile . It is working fine but it is not smooth like Accordion in Jquery UI.
When i tap on header it expands with a jerk.
Is there any way to make it smooth?
Attach a click listener to collapsible's heading .ui-collapsible-heading-toggle. Once clicked, .slideDown() or .slideUp() based on whether the clicked collapsible is collapsed or expanded. When expanding a collapsible, other ones will be collapsed, i.e. only one collapsible should be expanded a time.
$(".ui-collapsible-heading-toggle").on("click", function (e) {
var current = $(this).closest(".ui-collapsible");
if (current.hasClass("ui-collapsible-collapsed")) {
$(".ui-collapsible-content", current).slideDown(300);
current.siblings(".ui-collapsible:not(.ui-collapsible-collapsed)").find(".ui-collapsible-content").slideUp(300);
} else {
$(".ui-collapsible-content", current).slideUp(300);
}
});
Demo
I'm trying to integrate this plug-in into my site so I can swipe to delete. The problem however is that this plugin is triggered with a 'swiperight', the same swipe event is used to reveal my panel. I managed to separate the events using event.target.tagName. When it's a A(link), I want to activate the swipe to delete button and otherwise I want my panel to slide in.
With other words the pageinit event is triggered twice so the swipe to delete button starts to appear then the same event is triggered again. I want to somehow cancel one action but i can't make it work. I already tried:
event.stopImmediatePropagation();
event.stopPropagation();
event.preventDefault();
I also tried to use some solutions given here but with no luck:
jQuery Mobile: document ready vs page events
A demo of my problem can be found snip and my current pageinit function is this:
$(document).on('pageinit', function() {
//Activate horizontal swipe after x px.
$.event.special.swipe.horizontalDistanceThreshold = 80;
$('div[data-role="content"]').on("swiperight", function(event) {
//If tagname is 'A' you probably want slide to delete not the panel
if(event.target.tagName != 'A') {
$.mobile.activePage.find("#menu").panel("open");
} else {
//Cancel swipe
event.stopImmediatePropagation();
}
});
//Swipe to delete
$("#swipe li").swiper( {
corners: false,
label: "Verwijder",
swipe: function(event, ui) {
alert('trigger');
},
click: function(event, ui) {
var $item = $(this);
//console.log($(this));
$item.fadeOut(250, function() {
$item.remove();
});
}
});
});
Fixed issue using the following plugin: TouchSwipe which has the ability to simple exclude elements from the events.
I am trying to drag an element without keeping the mouse button down.
The behavior I would like is :
I click on a draggable item
Drag my item without keeping mouse left click down : just follow the mouse as a cursor
I click on a droppable container to confirm and append my item
I am able to simulate this behavior if I add an alert box durring the start event.
start : function(){
alert('test')
},
Here is the fiddle : http://jsfiddle.net/QvRjL/103/
How is it possible to code this behavior without the alert box?
Here is a good solution about this problem : Trigger Click-and-Hold Event
http://jsfiddle.net/VXbpu/1/
http://jsfiddle.net/vPruR/70/
var click = false;
$(document).bind('mousemove', function (e) {
if (click == true) {
$('#your_div_id').css({
left: e.pageX,
top: e.pageY
});
}
});
$('#your_div_id').click(function() {
click = !click;
return false;
});
$('html').click(function() {
click = false;
});
My plan is to have a content DIV, and inside that div I will load content via AJAX. I want the already loaded page to slide to the left, fade in the loading page with the circle.gif, and then fade in the new content and so on for the rest of the pages.
I have this code, but it goes to the top not the left, there is no scrollLeft I think.
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).slideDown("slow");
});
And there is this one:
$('.cont a').click(function() {
var page = $(this).attr('href');
$('.p-list').prepend('<div class="loader"> </div>');
$('.p-list').slideUp("slow").load(page +" .proj", function() {
$(this).fadeIn("slow"); //or show or slideDown
});
return false;
});
Use animate with left property like this:
$("#someDiv").slideUp("slow").load('blah.html', function() {
$(this).animate({'left' : 'show'});
});
You can also use right, margin-left, margin-right with show as value depending on your needs.
To hide them back with horizontal sliding, use hide value instead.
Make sure that elements are hidden first and have set appropriate CSS values for those properties.