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);
Related
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 am using CKEditor asp.net page for allowing client to easily edit/format text. Also i am using tabs option within CKEditor as shown in the fig. attached. But tabs are not working at all. Initially i have created tabs withJS. I thought it’s the JS that not working with CKEditor so i have chosen alternative solution using css3. But tabs are still not working in CKEditor. I have searched on CKEditor forum but unable to get good resource or help.
For css3 I am using checkbox hidden through opacity 0; but checkboxes are not working in CKEditor. What comes finally in my mind is CKEditor doesn’t run html. Is there any solution for this?
CKEditor secures JavaScript code so it's not executed to prevent unexpected editor behavior. Also mouse/keyboard events from form elements are captured for robust editing, making regular manipulation impossible. The conclusion is: editor is for creating rich content, not for rendering layouts.
The simplest advice I have is to put the editor one level down. Namely:
Create tabs.
Make each tab title an inline editor (it must be a block element).
Put an inline instance of CKEditor into each single tab contents.
Serialize your tabs when saving. It's easy.
Bonus: With a little help from ACF (since 4.1) you can prevent the layout from being destroyed by thoughtless users. Basically restrict which plugins are loaded for every editor to manipulate the result of the editing.
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.
I'm interested in using only some of the components of jQuery mobile (specifically, the tap event handlers and datepicker). What's the best way to make use of the library without it "taking over" the layout and behavior my mobile web app?
modifying DOM is JQM's main feature. You have to cripple it hard.
Get the repo from git, remove all plugins from manifest, get to the code and find the .page method/widget and remove all the code (or leave some bits if you need to get something working - I haven't tried that).
Then run make and it will create a stripped jquery.mobile.min.js for you
I'm trying to choose a JavaScript modal plugin to use it on a web site.
I used to use nyroModal (without making any research on this topic) but they have updated it recently and all of the API has changed and, apparently, some of the functionallity of previous version has been lost.
So, I think that this is time to start thinking about whether nyroModal is the right plugin to choose.
I see this question: https://stackoverflow.com/questions/756342/whats-your-favorite-jquery-modal-plugin but I'm not asking for a jQuery plugin, but a JavaScript plugin. The one that you prefer.
This is the functionallity I need:
Launch the modal using an anchor
Launch the modal manually and specify its content
Ability to customize all its content
Ability to attach callbacks on specific modal events
Updated documentation
Thank you!
I think most of the best modal layers are built using a particular framework (i.e. jQuery, mootools, dojo, etc).
By the way, I used several times highslide and it's very powerful!! No frameworks needed :)
I am a mootools fan, and this plugin is my favorite at the moment. It does modal for images, videos, and etc. http://iaian7.com/webcode/mediaboxAdvanced
if you are looking for something similar to what facebook as. David Walsh has a modal plugin called LightBox and its great. http://davidwalsh.name/facebook-lightbox
Both of these plugins are based off Mootools framework.