With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.
The HTML:
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
<progress></progress>
First, you can do some validation if you want. For example, in the .on('change')
event of the file:
$(':file').on('change', function () {
var file = this.files[0];
if (file.size > 1024) {
alert('max upload size is 1k');
}
// Also see .name, .type
});
Now the $.ajax()
submit with the button's click:
$(':button').on('click', function () {
$.ajax({
// Your server script to process the upload
url: 'upload.php',
type: 'POST',
// Form data
data: new FormData($('form')[0]),
// Tell jQuery not to process data or worry about content-type
// You *must* include these options!
cache: false,
contentType: false,
processData: false,
// Custom XMLHttpRequest
xhr: function () {
var myXhr = $.ajaxSettings.xhr();
if (myXhr.upload) {
// For handling the progress of the upload
myXhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
$('progress').attr({
value: e.loaded,
max: e.total,
});
}
}, false);
}
return myXhr;
}
});
});
As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.
Since the question refers to a single element, this code might be more suitable:
// Checks CSS content for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible");
// The same works with hidden
$(element).is(":hidden");
It is the same as twernt's suggestion, but applied to a single element; and it matches the algorithm recommended in the jQuery FAQ.
We use jQuery's is() to check the selected element with another element, selector or any jQuery object. This method traverses along the DOM elements to find a match, which satisfies the passed parameter. It will return true if there is a match, otherwise return false.
Best Answer
Looking at the source for ui.sortable.js (1.7.2), you can cheat and set the
placeholder
to an object with aelement
function and anupdate
function. Theelement
function is used to return the placeholder dom object and theupdate
function allows you to do things like correct its size (you can check out the_createPlaceholder
function inside sortable if you want to see what the default implementation does).So for example, the following will create a list item with the word test inside as your placeholder (note that it returns the actual dom object (
[0]
) and not the jQuery object itself):If I'm reading source correctly, the
element
function should be passed the current item (jQuery object) andthis
should point to thesortable
itself (i.e.$("#sortable")
in this instance). Inupdate
you're passed the "container" which is the object which holds all the options, & the element, etc & theplaceholder
itself.Please note that this is an undocumented hack, so it would obviously be unsupported & may change with the next version of jQuery UI... but it still may be of use to you, given you were talking about editing
ui.sortable.js
directly anyway.Hope that helps.