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.
Related
I'm trying to make a web page that is single page, doesn't scroll; IE, takes up the whole width/height of the browser size the user has.
It will have buttons/navigation on the top or bottom.
So when the user click on the "contact" page, it will show up instead of the regular "home" intro page, likewise with the other pages without loading to a new url/page.
Does this make sense?
Similar to this.
https://itmeo.com/brut-premium-wordpress-theme/live/#!
I'm wondering if this is possible, if so, would JavaScript be beneficial in creating a site like this or would another language better fit this project?
I suggest that you should read more about AJAX.
SPA or "single-page application" have a havier usage of ajax. and also take time to read about Developing cross-browser and cross-platform pages to avoid inconsistency and issues on the design part.
I am currently building a website but in an effort to prevent not necessary data to be loaded i decided to split but the website into serveral divs and load the content inside the div.
Because of this when i click on the back button i dont go to the previous location on the site but to where i was browsing before. Is there a way to solve this without rewriting the entire site? So for instance on my site there would be a members page that would be called upon using javascript by loading $('#content').load('members.php?id=$id');
For instance by creating a fake location...index.php#fakelocation (which contains the specific content i just loaded)
Can anyone give me a push in the right direction (or if this is impossible id like to hear it to)
I think what you're looking for is a combination of the History API and AJAX.
Lucky for you, there's a great library called PJAX that combines these technologies.
Without knowing more about how your backend works, I can't comment on additional steps to optimize the whole application, but PJAX is friendly with any number of server-side technologies.
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 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!