File Uploader


Hi,

This code is about restricting uploads to 5 only with the use of javascript alone. This adds the controls to the page only when the add button is clicked. No control lives in the form without any need. If the upload is deleted, it will be deleted from the form as a whole.

Link: download code here

Regards,

Saravanan.

jQuery Selectors


The following are the jQuery Selectors that may be used for the selection of the HTML DOM elements in a page using jQuery

Selector  Example  Selects 
* $(“*”) All elements
#id $(“#lastname”) The element with
.class $(“.intro”) All elements with
element $(“p”) All <p> elements
.class.class $(“.intro.demo”) All elements with and
:first $(“p:first”) The first <p> element
:last $(“p:last”) The last <p> element
:even $(“tr:even”) All even <tr> elements
:odd $(“tr:odd”) All odd <tr> elements
:eq(index) $(“ul li:eq(3)”) The fourth element in a list (index starts at 0)
:gt(no) $(“ul li:gt(3)”) List elements with an index greater than 3
:lt(no) $(“ul li:lt(3)”) List elements with an index less than 3
:not(selector) $(“input:not(:empty)”) All input elements that are not empty
:header $(“:header”) All header elements <h1><h2>…
:animated All animated elements
:contains(text) $(“:contains(‘W3Schools’)”) All elements which contains the text
:empty $(“:empty”) All elements with no child (elements) nodes
:hidden $(“p:hidden”) All hidden <p> elements
:visible $(“table:visible”) All visible tables
s1,s2,s3 $(“th,td,.intro”) All elements with matching selectors
[attribute] $(“[href]”) All elements with an href attribute
[attribute=value] $(“[href=’#’]”) All elements with href attribute value=”#”
[attribute!=value] $(“[href!=’#’]”) All elements with href attribute value<>”#”
[attribute$=value] $(“[href$=’.jpg’]”) All elements with href attribute value containing “.jpg”
:input $(“:input”) All <input> elements
:text $(“:text”) All <input> elements with
:password $(“:password”) All <input> elements with
:radio $(“:radio”) All <input> elements with
:checkbox $(“:checkbox”) All <input> elements with
:submit $(“:submit”) All <input> elements with
:reset $(“:reset”) All <input> elements with
:button $(“:button”) All <input> elements with
:image $(“:image”) All <input> elements with
:file $(“:file”) All <input> elements with
:enabled $(“:enabled”) All enabled input elements
:disabled $(“:disabled”) All disabled input elements
:selected $(“:selected”) All selected input elements
:checked $(“:checked”) All checked input elements

jQuery DOM


The following are the list of the selectors and uses of them to modify the contents of the HTML DOM Tree using the jQuery framework.

Manipulate  Description 
$(selector).html(content)  Set the content (inner HTML) of selected elements 
$(selector).text(text)  same as html(), but tags will be escaped 
$(selector).attr(attr,value)  Set an attribute and value of selected elements 
$(selector).val(value)  Set the value of the first selected element 
Getting Contents    
$(selector).html()  Get the contents (inner HTML) of the first selected element 
$(selector).text()  Get the text content of all selected elements (combined) 
$(selector).attr(attr)  Get the value of an attribute from selected elements 
$(selector).val()  Get the current value of the first selected element 
Adding Content    
$(selector).after(content)  Add content after selected elements 
$(selector).before(content)  Add content before selected elements 
$(selector).insertAfter(selector)  Add selected elements after selected elements 
$(selector).insertBefore(selector)  Add selected elements before selected elements 
Manipulate CSS  Description 
$(selector).addClass(content)  Add a class to selected elements 
$(selector).removeClass(content)  Remove a class from selected elements 
$(selector).toggleClass(content)  Toggle between adding/removing a class from selected elements 
$(selector).hasClass(content)  Check if the selected elements have a specified class 
Adding Inner Content    
$(selector).append(content)  Append content to the inner content of selected elements 
$(selector).prepend(content)  “Prepend” content to the inner content of selected elements 
$(content).appendTo(selector)  Append selected elements to the inner content of selected elements 
$(content).prependTo(selector)  “Prepend” selected elements to the inner content of selected elements 
Wrapping    
$(selector).wrap(content)  Wrap each selected element within a content 
$(selector).wrapAll(content)  Wrap all selected elements into one content 
$(selector).wrapinner(content)  Wrap selected inner child contents within a content 
$(selector).unwrap()  Remove and replace the parents of the specified elements 
Copy, Replace, Remove    
$(content).replaceAll(selector)  Replace selected elements with selected elements 
$(selector).replaceWith(content)  Replace selected elements with new content 
$(selector).empty()  Remove all content and child elements from selected elements 
$(selector).remove()  Remove all selected elements 
$(selector).removeAttr(attr)  Remove a specified attribute from all selected elements 
$(selector).clone()  Clone all selected elements 
$(selector).detach()  Remove the specified elements from the DOM 

jQuery CSS


Here is the CSS properties that may be referrenced by the jQuery

CSS Properties  Description 
$(selector).css(name)  Get the style property value of the first selected element 
$(selector).css(name,value)  Set the value of one style property for all selected elements 
$(selector).css({properties})  Set multiple style properties for all selected elements 
CSS Size    
$(selector).height()  Get the pixel height of the first selected element 
$(selector).height(value)  Set the height of all selected elements 
$(selector).width()  Get the pixel width of the first selected element 
$(selector).width(value)  Set the width of all selected elements 
CSS Positioning    
$(selector).offset()  Get the position of the first selected element relative to the document 
$(selector).offsetParent()  Get the first parent element with an offset position 
$(selector).position()  Get the position of the first selected element relative to the parent element 
$(selector).scrollTop()  Get the scroll top offset of the first selected element 
$(selector).scrollTop(value)  Set the scroll top offset of all selected elements 
$(selector).scrollLeft()  Get the scroll left offset of the first selected element 
$(selector).scrollLeft(value)  Set the scroll left offset of all selected elements 

Here is the list of animations and events that the jQuery can respond to

Hide / Show  Description 
$(selector).show(speed,callback)  Show selected elements 
$(selector).hide(speed,callback)  Hide selected elements 
$(selector).toggle(speed,callback)  Toggle hide and show for selected elements 
   
Slide    
$(selector).slideDown(speed,callback)  Slide-show selected elements by adjusting height 
$(selector).slideUp(speed,callback)  Slide-hide selected elements by adjusting height 
$(selector).slideToggle(speed,callback)  Toggle slide-hide and slide-show for selected elements 
   
Fade in / out    
$(selector).fadeIn(speed,callback)  Fade in selected elements to full opacity 
$(selector).fadeOut(speed,callback)  Fade out selected elements to zero opacity 
$(selector).fadeTo(speed,opacity,callback)  Fade selected elements to a given opacity 
   
Animation    
$(selector).animate(params,duration,effect,callback)  Applies a “custom” animation for selected elements 
$(selector).stop()  Stops running animations on selected elements 
   
Queue    
$(selector).clearQueue()  Remove all queued functions (not yet run) for the selected element 
$(selector).delay()  Set a delay for all queued functions (not yet run) for the selected element 
$(selector).dequeue()  Run the next queued functions for the selected element 
$(selector).queue()  Show the queued functions for the selected element 
Event function  Binds the function to 
The ready event of a document 
(when an HTML document is ready to use) 
$(selector).blur(function)  The blur event of matching elements 
$(selector).change(function)  The change event of matching elements 
$(selector).click(function)  The click event of matching elements 
$(selector).dblclick(function)  The double click event of matching elements 
$(selector).error(function)  The error event of matching elements 
$(selector).focus(function)  The focus event of matching elements 
$(selector).keydown(function)  The key down event of matching elements 
$(selector).keypress(function)  The key press event of matching elements 
$(selector).keyup(function)  The key up event of matching elements 
$(selector).load(function)  The load event of matching elements 
$(selector).mousedown(function)  The mouse down event of matching elements 
$(selector).mouseenter(function)  The mouse enter event of matching elements 
$(selector).mouseleave(function)  The mouse leave event of matching elements 
$(selector).mousemove(function)  The mouse move event of matching elements 
$(selector).mouseout(function)  The mouse out event of matching elements 
$(selector).mouseover(function)  The mouse over event of matching elements 
$(selector).mouseup(function)  The mouse up event of matching elements 
$(selector).resize(function)  The resize event of matching elements 
$(selector).scroll(function)  The scroll event of matching elements 
$(selector).select(function)  The select event of matching elements 
$(selector).submit(function)  The submit event of matching elements 
$(selector).unload(function)  The unload event of matching elements