Are there any docs or training materials available that advise the best way to include multiple jQuery plugins in an abstract way, allowing for extension of those plugins, and also global control of things like events, setTimeout() etc?
I want to be able to do these kind of things:
Extend someone else's jQuery plugin, e.g. if I want to add a new feature, but not touch the original codebase
Have my own server-side detection script pass a value to JS (using a HTML meta tag) so JS can detect that and then decide which script to use (e.g. tone down some of the jQuery for lesser devices)
Better control all the events that are attached
setTimeout() - I have loads of these dotted around the place at various intervals - I want to control all this in one function
Add my own fixes to jQuery scripts. If I download a ready-made one and use it I always find I can improve usability - especially on mobile devices - so I want to add my own fixes and improvements.
Control the resize event. There's all sorts going on at the moment and it's quite a job triggering a full re-size when I write new code (and the resize is pretty slow on some mobile devices)
You can use RequireJS or similar library to load scripts dynamically depending on screen size or navigator's user agent parameter (You will need to set condition checking yourself though).
we have a big ExtJS (still ExtJs 2) application, which provides windows explorer like functionality on a Java EE server.
We now evaluate implementing a new functionality; we could base this functionality on a jQuery plug in.
Is it recommended to use jQuery and ExtJs in one application?
Or will I have to deal with side effects occurring?
You will not have to deal with any side effect. The only problems I ever ran into when I did this is if I tried to operate on elements that Extjs relied on being left alone. Just make sure that when you start operating using jQuery that you're working inside a div that extjs doesn't plan to mess with. The best way to do this is to inherit from Ext.Component and then operate inside the div it provides. Ext doesn't do anything inside this div so you should be ok. You can also tap into the resize functionality if you need to, though this is not really necessary.
My company does so with no problems on a fairly large Apache/Catalyst site. We do use jQuery() rather than $() due to some old Prototype stuff on our site.
More: Blueprint CSS Extjs and JQuery in the same page, best way to make them coexist without conflict
keep jQuery within the jQuery namespace http://api.jquery.com/jQuery.noConflict/
Use it like so: $.noConflict();
jQuery only adds a single object (jQuery) to the window's context so you won't have any conflicts.
PROBLEM: Some third party libraries for jquery may rely on static webpage organization. As ExtJS components can be added to webpage dynamically - they will have no functions from third party libraries.
SOLUTION: You will have to run this library's script after component is added (use afterrender event, for example). Then you can call these functions on this ext component.
I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github
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 creating a popup dialog using jQueryUI. I have run into problems because I'm using exactly the same blocks of HTML and JavaScript code as on the page. (The application was not designed for that and I'm not going to recode it deeply). So I have two tags with same ID attributes in the document - on the page and in popup.
To avoid this I decided to open the dialog in an iFrame. Everything works, of course, but the popup opens too slowly (it has a long list of JS and CSS files to load). They are in cache of course, but the browser seems to send requests to check them.
The question: can anything be done as a quick help? I can connect the parent window using Javascript, so can I somehow import, or clone (deep copy), for example, jQuery library? What do you think of it?
(Please don't blame me if the question is crazy)
You don't need to clone jQuery, you may use it also from within the frame.
parent.$('selector', document).someMethod()