7 Simple jQuery Snippets
- Jonh
- Mar 26, 2012
- 0 Comment
1. jQuery autosave plugin
jQuery plugin to save individual form fields each time something changes. Usage:
[js]$(‘#MyForm’).autosave(url, options);[/js]
where url defaults to form.method and option defaults to $.fn.autosave.defaultOptions
[js]
// jQuery plugin to save individual form fields each time something changes.
// Usage: `$(‘#MyForm’).autosave(url, options);`
// where `url` defaults to form.method
// and `options` defaults to $.fn.autosave.defaultOptions
// (UNTESTED)
(function($) {
$.fn.autosave = function(url, options) {
// build options based on defaultOptions and passed options
options = $.extend({}, $.fn.autosave.defaultOptions, options || {});
// `this` is the jQuery collection
return this.each(function() {
// `this` is the</pre>
<form>element
if (!this.elements) {
return;
}
url = url || this.action;
options.method = options.method || this.method;
var $idElement = $(options.idElement || this.elements[options.idElementName]);
if ($idElement.length == 0) {
return;
}
$(this.elements).change(function() {
// `this` is the input element that changed
var queryString =
options.idField + ‘=’ + encodeURIComponent($idElement.val()) +
options.columnField + ‘=’ + encodeURIComponent(this.name) +
options.valueField + ‘=’ + encodeURIComponent($(this).val())
;
if (options.useImage) {
var img = new Image(url + ‘?’ + queryString);
}
else {
$.ajax($.extend({
url: url,
method: options.method,
data: queryString
}, options.ajaxOptions));
}
});
});
};
$.fn.autosave.defaultOptions = {
idElement: null,
idElementName: ‘id’,
idField: ‘id’,
columnField: ‘column’,
valueField: ‘value’,
method: null,
ajaxOptions: {},
useImage: false
};
})(jQuery);
[/js]
2. Simple jQuery active menu highlighter
This is a very simple way of highlighting the current page of a menu. It uses javascipt to take the current url and cross checks it against any URLs that match in the menu. If one matches then add an ‘active’ class to it. Be careful with #’s though. because a traling # in the URL would screw this up. Though you could always build in a function to strip out #’s before getting to the selector… Please note: if at first this doesn’t work try using document ready or replacing $’s for jQuery..
[js]
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){
// Get current url
// Select an a element that has the matching href and apply a class of ‘active’. Also prepend a – to the content of the link
var url = window.location;
$(‘a[href="'+url+'"]‘).addClass(‘active’);
$(‘a[href="'+url+'"]‘).prepend(‘// ‘);
});
// ]]></script>
[/js]
3. Get Hashtag in URL with jQuery
Grab the hashtag at the end of the current URL.
[js]
var url = $(location).attr(‘href’).split("#")[1];
[/js]
4. Get an array of list element contents in jQuery
[js]
var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });
To join the results:
var quotedCSV = ‘"’ + optionTexts.join(‘", "’) + ‘"';
[/js]
5. Fullscreen html
Include https://github.com/martinaglv/jQuery-FullScreen Then add following and replace selectors with yours.
[js]
if($.support.fullscreen){
$(‘#wraperouter’).append(‘<a id="fsButton" href="#">fullscreen</a>’)
$(‘#fsButton’).click(function(e){
// Use the plugin
$(‘#wraperouter’).fullScreen();
e.preventDefault();
});
}
[/js]
6. $_GET() function to get any url parameter in javascript
[js]
function $_GET(a) {
return (a = location.search.match(RegExp("[?&]" + a + "=([^&]*)(&?)", "i"))) ? a[1] : a
}
// example, if browser’s url was like:
// http://www.google.co.in/search?q=web&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
// then you can get the value of any parameter like: alert($_GET(‘rls’));
// returns org.mozilla:en-US:official as an alert
[/js]
7. get form input fields with jQuery
[js]
$(‘#myForm’).submit(function() {
// get all the inputs into an array.
var $inputs = $(‘#myForm input, #myForm textarea, #myForm select’);
// not sure if you wanted this, but I thought I’d add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function(i, el) {
values[el.name] = $(el).val();
});
});
[/js]
