I have this code
$(function() {
$(window).on("swipeleft", jqmForward).on("swiperight", jqmBack);
});
function jqmBack(e) {
var prevpage = $('div.ui-page-active').prevAll('div[data-role="page"]');
if (prevpage.length > 0)
$.mobile.changePage($(prevpage[0]), { transition: "slide", reverse: true }, true, true);
}
function jqmForward(e) {
var nextpage = $('div.ui-page-active').nextAll('div[data-role="page"]');
if (nextpage.length > 0)
$.mobile.changePage($(nextpage[0]), "slide", false, true);
}
But the forward function never works because apparently jqm deletes the latest div.ui-page when you go back.
Is there a way to keep the div.ui-page to let you go forward after you accidentally swipe right (ie. go back)?
I am using jQuery Mobile 1.4.0
The solution is to have
$(function () {
$.mobile.page.prototype.options.domCache = true;
});
(see Caching pages in DOM). But that rises another problem.
Related
I'm building a Meteor app that let's the user organize lists of items in tags.
I use jQuery draggable and droppable to update a collection when a user drags an item from one tag to another.
I find it hard to understand how/where/when I should call the function. I've tried a few different options (including this "hacky way of doing it". The Blaze documentation mentions that functions can be called on DOM events, but lacks the drag and drop events that I'm looking for. I've currently settled on calling the function under Template.rendered, but that means the item can only be dropped once per render. I've tried to counter this with Tracker.autorun, but I don't think I understand how it works and the item can still only be dropped once per render.
How can I make the .item draggable several times per render?
Template.tag.rendered = function () {
//wait on subscriptions to load
if (Session.get('DATA_LOADED')) {
Tracker.autorun(function () {
$(".item").draggable({
revert: true,
start: function (event, ui) {
var movingItem = Blaze.getData(this)._id;
Session.set('movingItem', movingItem);
},
});
$(".tag").droppable({
hoverClass: 'droppable',
drop: function () {
var movingItem = Session.get('movingItem');
var acceptingTag = Blaze.getData(this)._id;
Items.update(movingItem, {
$set: {"parents": acceptingTag}
});
}
});
});
}
};
I found the solution.
By separating the .draggable and .droppable into two different Template.rendered the function is now correctly called each time an item is moved.
No need for the Tracker.autorun
Template.item.rendered = function () {
if (Session.get('DATA_LOADED')) {
$(".item").draggable({
revert: true,
start: function (event, ui) {
var movingItem = Blaze.getData(this)._id;
Session.set('movingItem', movingItem);
console.log('moving ' + movingItem);
},
});
}
};
Template.tag.rendered = function () {
if (Session.get('DATA_LOADED')) {
$(".tag").droppable({
hoverClass: 'droppable',
drop: function () {
var movingItem = Session.get('movingItem');
var acceptingTag = Blaze.getData(this)._id;
Items.update(movingItem, {
$set: {"parents": acceptingTag}
});
console.log('Dropped on ' + acceptingTag);
}
});
}
};
I know this has been asked before but I can't get any of he examples to work.
Getting the slide transition to work where you have all the pages as separate html files seems very difficult to do? How does the next/prev part of the script know which of the other files is next?
For example, index.html should slide to 01_welcome.html - but how does it know that it's not 02_funds.html?
Thanks for any enlightenment you can give. Below is the script ( courtesy of a previous answer) I've been trying to implement.
$('div.ui-page').live("swipeleft", function () {
var nextpage = $(this).next('div[data-role="page"]');
if (nextpage.length > 0) {
$.mobile.changePage(nextpage, "slide", false, true);
}
});
$('div.ui-page').live("swiperight", function () {
var prevpage = $(this).prev('div[data-role="page"]');
if (prevpage.length > 0) {
$.mobile.changePage(prevpage, {
transition: "slide",
reverse: true
}, true, true);
}
});
The code in your OP works well in Multi-Page Model environment, since all pages (div's) are present in DOM. For Single Page Model, you will need to tweak the code a bit as each page is an individual file. Another note, .live() is deprecated, use .on() instead.
The simplest solution is to add custom attributes to each page div, e.g.
<div data-role="page" data-next-page="services" data-prev-page="about">
Retrieve the values of the custom attributes on swipe and then load the target page.
$(document).on("swipeleft swiperight", function (event) {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"),
nextPage = activePage.data("next-page"),
prevPage = activePage.data("prev-page");
/* move to next page */
if (event.type == "swipeleft" && nextPage) {
$.mobile.pageContainer.pagecontainer("change", nextPage + ".html");
}
/* move to previous page */
if (event.type == "swiperight" && prevPage) {
$.mobile.pageContainer.pagecontainer("change", prevPage + ".html", {
reverse: true
});
}
});
I'm new to jQuery UI.
I'm trying to create a selectable jQuery UI tooltip. The tooltip is associated with the links on a page.
When the link is surrounded by just text, it works fine. But when there are few links next to each other, the functionality overlaps and tooltips don't show smoothly anymore.
you can find the code on http://jsfiddle.net/zumot/Hc3FK/2/
Below the JavaScript code
$("[title][data-scan]").bind("mouseleave", function (event) {
event.stopImmediatePropagation();
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").click(function () {
alert("I am clickable");
return false;
});
$(".ui-tooltip").hover(
function () {
clearTimeout(fixed);
},
function () {
$("[title][data-scan]").tooltip("close");
});}).tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}});
My attempt to fix the issue was by making the variable fixed global (to make it accessible by other jQuery UI properties), and on Open event, hide any other previously opened tooltips and clear the timeout id saved in fixed variable.
You can find the solution here http://jsfiddle.net/zumot/dVGWB/
, though to see the code working properly, you'll have to run it directly on your browser.
Here's the snapshort of the fixed code.
// Make the timeout id variable global
var fixed = 0;
$("[title][data-scan]").tooltip({
items: "img, [data-scan], [title]",
content: function () {
var element = $(this);
if (element.is("[data-scan]")) {
var text = element.attr("href");
return "<a href='http://www.google.com'>You are trying to open a tooltip <span>" + text + "</span></a>";
}
if (element.is("[title]")) {
return element.attr("title");
}
if (element.is("img")) {
return element.attr("alt");
}
},
open: function (event, ui) {
// When opening a new div, hide any previously opened tooltips first.
$(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide();
// clear timeout as well if there's any.
if (tf > 0) {
clearTimeout(tf)
};
},
position: {
my: "right center",
at: "left center",
delay: 200,
using: function (position, feedback) {
$(this).css(position);
$("<div>")
.addClass(feedback.vertical)
.addClass(feedback.horizontal)
.appendTo(this);
}
}
}).bind("mouseleave", function (event) {
// stop defeulat behaviour
event.stopImmediatePropagation();
fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").hover(
function () {
clearTimeout(tf);
}, function () {
$("[title][data-scan]").tooltip("close");
})
});
I'm trying to combine some of JS libraries to create a mobile SPA website. I'm working with knockoutJS that misses routing engine so I take it from SammyJS or PathJS (haven't decided yet). And I'd like to use jQuery Mobile to get the controls and the mobile design from it.
The thing is that whenever I include the jquery mobile js file into my page the routing engine stops working. Actually it does work, but the window.location.hash get changed not only by me but with jquery mobile itself.
So here is how the code looks like:
in the html file I got a div that I binded to a template
(function ($) {
infuser.defaults.templateUrl = "templates";
console.log('just before pageinit');
$(document).bind('pagecreate', function () {
// disable autoInit so we can navigate to bookmarked hash url
$.mobile.autoInitializePage = false;
// let PathJS handle navigation
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
$(document).bind('pagebeforechange', function (e, data) {
var to = data.toPage;
if (typeof to === 'string') {
/* var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname;
// manually set hash so PathJS will be triggered
location.hash = to;
// prevent JQM from handling navigation*/
e.preventDefault();
}
});
$(document).bind('pagechange', function (e, data) {
});
var Model = function () {
this.items = ko.observable(null);
this.chosenItemData = ko.observable();
this.state = ko.observable('items');
this.goToItemDetails = function (item) {
location.hash = '/details/' + item.id;
};
};
window.currentModel = new Model();
ko.applyBindings(window.currentModel);
Path.map('#home').to(function () {
currentModel.state(window.templates.items);
currentModel.items(window.dummyData);
});
Path.map('#home/details/:id').to(function () {
var self = this;
$(currentModel.items()).each(function (index, item) {
if (item.id.toString() == self.params['id']) {
currentModel.chosenItemData(item);
currentModel.state(window.templates.itemDetail);
}
});
});
Path.root('#home');
$(function () {
Path.listen();
})
})(jQuery);
Now, you can see that $.mobile.hashListeningEnabled = false; is set to false so the jquery mobile should not listen or react to hash changes whatsoever.
But!
lets say I move from localhost/sammy/#home to localhost/sammy/#home/detail/1
the hash change happens and changes right away to localhost/sammy/home/detail/1
for some reason the hash itself is ommited and the route doesn't get executed.
I sorry if I didnt explain myself better. I'm working on publishing it on a server for everyone to be able to look at it, but, unfortunately it takes time.
Meanwhile, if anyone has any idea what i can do to fix this it will be awesome!
So apparently (and it's written in the jQuery Mobile website the "initmobile" event fires as the script for jquery mobile it attached. To be able attach the event the following lines should be included before the jQuery Mobile script.
<script type="text/javascript">
$(document).on('mobileinit', function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false;
});
then the onchangehash event in jquery mobile will be disabled.
I want to unbind all events when I change a page. I took this solution which extends the View's close function with this.unbind() call and I tried to combine it with JQM page transitions in a changePage function in the Router from here:
changePage: function(page){
$(page.el).attr("data-role", "page");
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
Then changePage looks like this:
changePage: function(page){
if (this.currentView)
this.currentView.close();
$(page.el).attr("data-role", "page");
this.currentView = page;
page.render();
$("body").append($(page.el));
var transition = $.mobile.defaultPageTransition;
if(this.firstPage){
transition = "none",
this.firstPage = false;
}
$.mobile.changePage($(page.el), {changeHash: false, transition: transition});
}
But then I get the JQM error:
Uncaught TypeError: Cannot call method '_trigger' of undefined jquery.mobile-1.1.0.js:2788
transitionPages jquery.mobile-1.1.0.js:2788
$.mobile.changePage jquery.mobile-1.1.0.js:3390
window.AppRouter.Backbone.Router.extend.changePage
I also have jqm-config.js which removes the page's DOM on pagehide event. Could I unbind all events here like: $(event.currentTarget).unbind(); ? But this doesn't work either.
$('div[data-role="page"]').live('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
I had the same problem. The JQM error occurs because you try to call this.remove() in close() backbone extended method, but the event "pagehide" has already removed the view from the DOM.
Backbone.View.prototype.close = function () {
if (this.beforeClose) {
this.beforeClose();
}
this.remove();
this.unbind();
};
If you comment this.remove() on close method, it works.
Another option is to comment $(event.currentTarget).remove(); on pagehide jqmobile event and doesn't comment this.remove() on close method.
You can't do both, you should choose one of the two options. I prefer the second option, but I think that it's similar to first option. I don't recommend call unbind() on pagehide event.
I was facing the same problem, for some reason the pagechange event was not being fired and the previous pages were not removed from the DOM. Once I removed the non-active pages the CSS was back in action.
So I added
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
$(event.currentTarget).remove();
});
inside
$(document).bind('pagechange', function() {
});
So my jqm-config.js looks like this
$(document).bind("mobileinit", function () {
console.log('mobileinit');
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
//$.mobile.defaultPageTransition = "none";
});
$(document).bind('pagechange', function() {
$('div[data-role="page"]').bind('pagehide', function (event, ui) {
console.log("Removing page");
$(event.currentTarget).remove();
});
});
It took me a few hours and this SO thread to get to this. Hope this helps someone.