I am wondering if anyone is using the latest jQTouch with Backbone.js and if so how are they handling transitioning between pages using Backbone's routers and views instead of jQTouch automatically trying to show a div with the specific ID relating to the hash.
What are you trying to achieve with jQTouch? AFAIK, it is a lightweight mobile framework which allows you to build a single page mobile web app by showing and hiding divs. The three main things it gives you:
Nice mobile UI elements
CSS3 transitions between pages (slide, pop, fade, etc).
A navigation framework which automatically transitions between pages based on the UI element you touch (e.g. touch an anchor with href #about will auto transition from the current page to the page (div) with ID about)
I presume you'd like to keep 1) and 2) to make your life as a dev easier, and for BackBone to handle 3) - this makes sense to me as BackBone's MVC structure and event propagation between views is nice. If this is the case, really 1) and 2) are just CSS tricks. So keep jqtouch.css and ditch jqtouch.js. That way, you get all the nice styling and can programatically perform transitions in your BackBone views, without jqTouch getting in the way when dealing with navigation.
If you do this, remember to wrap your entire app in <div id="jqt"></div> so the stylesheet finds and styles all your list elements and buttons. When you want to use a transition, use jQuery/Zepto add the correct CSS to each page:
$("#toPage").addClass('slideleft in current');
$("#fromPage").addClass('slideleft out');
This will trigger the CSS3 transitions specified in jqtouch.css. The list of transitions available can be found in jqtouch.js, line 61 onwards. Just change slideleft in the code above for a different animation name to achieve a different transition.
Disclaimer! I haven't actually tried this, only a theory and might not work... although I am trying to achieve exactly this, use a nice mobile UI theme with BackBone, and this is the closest I can find. When I get a chance I will try and code this up over the next few days. If you get there first and attempt it please let me know how you get on!
Related
I would like to use the following CSS slider in my project
http://jsfiddle.net/63w9jnqq/1/
It does not using any JavaScript or jQuery. When I clicking on the link from any slide other than the 'slide 5' takes me back to the first 'slide 5' instead of opening a new tab. It is CSS heavy code, I have no idea about how to fix it. I have no problem to use extra jQuery or JavaScript to fix this issue.
I tried the following jQuery to stop click action, it does not working
$(document).ready(function(){
$(".slide-gfx a").click(function(event){
event.preventDefault();
});
});
:focus state
The cause of this issue is down to the fact that the slideshow is relying on the :focus handling of CSS to remember state. This is a very temporary handler, which is lost whenever a new element is focused. I built the slideshow more for non-interactive elements, just to demo visual work — this works fine with :focus
The slideshow reverts back to slide 5 (or the end slide) when none of the slides are focused. This was fine for my needs, but obviously not for your use-case. This is occurring when you focus on your <a href="" /> elements.
Limitations of css
Unfortunately there is no way to match (in current CSS) up to a parent from a focused child — at least not that I am aware of. This would solve the issue with pure CSS. You can obviously match downwards (i.e. parent:focus .child), but that doesn't help. You can employ the The checkbox/radio hack which I did consider at the time, or you can switch to using a different way of "remembering state".
:target state
The CSS in the original demo was already tailored to also support :target as an alternative, so you can patch current functionality with a small bit of JS. I wouldn't want to rely on this across older browsers however — but then again, older browsers would probably find it hard to cope with this system anyway.
Snippet and fiddle
This patch listens for the :focus event, and sets the fragment in the URL to match the id of the slide. This means that the CSS then switches to listening to the :target selectors instead, which should keep the right slide selected.
http://jsfiddle.net/63w9jnqq/4/
$('.slide').on('focus',function(e){
window.location.hash = $(this).attr('id');
});
Recommendation
Going forward, I'd suggest perhaps looking at more recent methods for implementing CSS. As I'm sure there are a lot of new improvements that could be used to extend the system — something I haven't had time for of late. There may even be handling to integrate touch-style events to make things more naturally mobile friendly, although perhaps that is just wishful thinking.
At the end of the day, even though there is a lot of CSS in this solution, it is best to try and understand every part of the code you use in your projects — as that helps to debug situations you might find yourself in. This issue is mentioned in the original post here, and the solution using :target is employed to handle the "sub nav" links:
Implement a CSS-only slideshow / carousel with next and previous buttons?
Imagine a mobile webpage with a navigation bar at the very top of the page.
Using javascript/jQuery I'd like to be able to detect when a user scrolls "past" the top of the screen.
Let me try to explain: Imagine that the webpage just loaded and you see the navigation bar at the very top of your screen. Now, you put your finger on the screen and drag down. On an iPhone, this will look something like:
I'm looking for something similar to the following:
$(document).ready(function () {
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if(y < -20)) {
//do something
}
Unfortunately, this won't work on Android phones because they don't have the same elastic behavior as iPhones:
The bad news
So, let's start with the bad news: there is no way to get the information you wish for natively. Why? Because once you get into the 'elastic' zone you're dragging the entire webview component down rather than just the content of the document like in your pseudo code.
What does this practically mean? Emulation or Native wrapping
Emulation, the choices
So you will have to run your own solution and you will have to make a couple of choices. First of all if you wish to use elastic scrolling you should note that this is patented by Apple Inc. in patent US7469381 B2. Please go through this patent carefully to ensure you won't be infringing (even if you're building an iOS only app this does not change anything).
Secondly the question is whether you really want to emulate a native experience. There is a big lobby against native experience emulation due to 1) a believe that it can't ever be perfect enough and 2) as operating systems and browser change your code will stay out of date and thus look terrible/weird or possible can even cause entirely unexpected behaviour/combinations.
Secondly you will have to decide whether you wish for the same elastic behaviour on android or whether you wish to give a more native like experice on android. Personally I believe it makes for some excellent UX, so I wouldn't explicitedly disadvice you from using an elastic effect, however it is something you should consider carefully.
Emulation, the scripts
Most scripts that provide similar emulation to what you want are "pull to refresh" scripts. Depending on your specific wishes you should simply use one of those scripts and either alter them or use some CSS to hide the message inside them.
Hook.js - Not perfect emulation of the native experience and uses the old iOS background, but a pretty good option none the less, to hide the spinner just use
.hook-spinner{
display:none;
}
iScroll.js - Very well developed code and behaves excellently. Disadvantage is that it provides a lot more than what you're looking for which might be either a good thing or a bad thing. You can find a sample implementation of pull to refresh behaviour here, but do note it's for an older version of iScroll, in the last version the example seems not to have been implemented, but it should be quite similar. Just look at the code to see how to remove the pull to refresh message.
jQuery scrollz - Just one more option. Seems to be comparable to hook.js, but does have some iScroll like features as well. You can 'remove' the message by specifying the pullHeaderHTML with empty HTML strings.
Native wrapping
The alternative, which I am convinced you do not want to do, but I do want to add for the sake of completeness, is to distribute your app as a native app for example bundled up in phonegap. However to get this working would require a fair number of changes to the phonegap code itself and would not be an advisable approach (I have once developed a phonegap app using native components and interactions 'around' it triggering various javascript events, although doable and presenting certain advantages it's not something I would advice).
So..I'm not sure what do you need this for.
If it's for a ListView - you can override onOverScrolled
If you need this for ScrollView - there's a way by also extending it. I don't remember now, but if you need it - I can find it.
If it's for a WebView inside your app - I'm pretty sure it's not possible. The amount of control you have on the way web pages are rendered and manipulated is limited.
If you want the Chrome/stock browser to act the way it does on iOS - I don't think it's possible unless you get the browser's code and change it yourself :)
I'm trying to use the jQuery Mobile Column-Toggle widget in a web application that will be almost exclusively used by non-mobile users, so I really just want the Column picker functionality, without any of the other jQuery Mobile features. However, if I load the jQuery Mobile js and css, my entire site picks up the mobile style, which conflicts horribly with my existing stlying.
I've tried several mobileinit options that supposedly should suppress the mobile styling (I've tried various combinations of these settings - I'm just combining them all here for brevity):
$(document).bind("mobileinit", function(){
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled = true;
$.mobile.page.prototype.options.keepNative = "select, input, a";
});
The other option I've seen is to add data-role="none" to all of the elements you don't want to style, but that has two problems:
It doesn't work for me (I'm still investigating why, and will update my question soon).
It seems like bad practice to junk up your html with a ton of suppression tags, which also increase the page size.
I've tried using the download builder to create a customer jQuery Mobile package with only the Column-Toggle (and dependency) module, but that custom package doesn't seem to work at all.
So I have two questions really:
Is there an alternative column picker for HTML tables that I can use instead of the jQuery Mobile version. I feel like I have done extensive web research, but have found nothing else.
What methods exist to prevent jQuery Mobile from applying it's style to your whole page? There are a few other SO questions about this, and I'm afraid that there just isn't any currently working method to do so.
Update: I've actually changed to using the new column selection widget in the tablesorter plugin, and scrapped jQuery Mobile.
I would like to use widgets from jQuery Mobile - buttons, drop down list, etc.
I already have a site that has been developed without the use of jQuery mobile, which has its own menus and links - and when I try to add jQuery mobile framework to it, it causes all sorts of problems (overrides CSS, tries to hijack page transitions, etc).
Is it possible to disable some features of the framework?
This is related to the question: Removing unused jQuery Mobile elements? - but it deals with minimizing the script size. I only want to disable certain functinality, so it doesnt interfere with the rest of my app.
Update: Part of the problem caused by using jQuery Mobile "as is" stems from the fact that it will attempt to load all links via ajax. It can be mitigated by adding rel="external" to links, so jQM won't attempt to load it via ajax.
There is a builder for JQM coming soon. As of 5/4/2012 its still in beta. Hang in there and the feature will be available any time now. I will try to update this answer when its released.
Update here is a link to the JQM builder http://jquerymobile.com/download-builder/
Adding the data-role="none" attribute to any form or button element tells the framework to not apply any enhanced styles or scripting
Building your package with only needed components is the first step that you should do but sometimes it is not enough.
There is also a piece of code which we found recently and used to stop loading jQuery Mobile panes on one page. This is very usefull if you want to use jQuery Mobile components separately without the framework itself. In other words, you still want to have a normal page behaviour (i.e. page reloads by clicking links) and use some jQuery Mobile components.
And here is this code that did a trick for our Symfony 2 project:
(function($) {
$(document).bind('mobileinit',function() {
$.mobile.ajaxEnabled = false;
});
})(jQuery);
I'm working on a client's website that has a database of products in a table with a menu on the left side. Currently, clicking on a new menu entry brings up a new set of products on a new page.
The client wants me to change the site such that when a user clicks on a menu entry, the content transitions using an effect like that in the jQuery Quicksand plugin.
However, the Quicksand plugin does not work across page loads. Do you have any advice on ways I could achieve this effect without rewriting the entire structure of the site? I had a look at History.js, and this gist which provides a bookmarklet to automatically ajaxify a site via History.js. Prior to this I did not think that was possible, but now I wonder, could I use a technique similar to this to somehow allow the Quicksand plugin to transition between the various pages?
To transition between pages on my customers websites i use jquery ajax calls. i have each page in its own .php file. and then i use $.ajax to bring it up.
For transitions i use Jquery UI that provides some very nice transitions.
And as for the browser history, i use jHash. Its a bit frustrating to use and implement, but if you understand how it works and etc, you will be amazed by its power.