Form Element Selector
Posted on September 11, 2011 by Sameera Thilakasiri
: button Selector
This type of selector is used to select all input buttons plus all button elements.
Example :
$(“:button”).css({background:”yellow”, border:”3px red solid”});
It changes the color and border of all buttons.
: checkbox Selector
It selects all the element of type checkbox.
Example :
$(“form input: checkbox”).wrap(‘‘).parent().css({background:”yellow”, border:”3px red solid”});
It select all the checkboxes of form and create a border around it and changes it’s color also.
: checked Selector
The :checked selector works for checkboxes and radio buttons. For select elements, use the :selected selector. Matches all elements that are checked.
Example :
$(“input: checked”).length;
It gives the number of input elements that are checked.
: disabled Selector
It selects all the elements that are disabled.
Example : It finds all input elements that are disabled.
: enabled Selector
It selects all the element that are enabled.
Example :
It selects all the input element that are enabled .
: file Selector
It selects all the element of ‘file’ type.
Example :
$(“input: file”).css({background:”yellow”, border:”3px red solid”});
: image Selector
It selects all the image type elements.
Example :
$(“input: image”).css({background:”yellow”, border:”3px red solid”});
: input Selector
It selects all the input elements. Input elements like input, textarea, select and button etc.
Example :
var allInputs = $(“:input”);
It counts the number of input elements and save it to “allInputs” variable.
: password Selector
It selects all the element of type password.
Example :
$(“input: password”).css({background:”yellow”, border:”3px red solid”});
: radio Selector
This type of selector selects all element of radio type.
Example :
$(“form input: radio”).css({background:”yellow”});
: reset Selector
This type of selector selects all element of radio type.
Example :
$(“input: reset”).css({background:”yellow”, border:”3px red solid”});
: submit Selector
This type of selector selects all element of submit type.
Example :
$(“td :submit”).parent(‘td’).css({background:”yellow”, border:”3px red solid”})
It changes the background color and border of all the ‘submit’ type whose parent is ‘ td ‘.
: text Selector
It selects all element of type submit .
Example :
$(“form input: text”).css({background:”yellow”, border:”3px red solid”});
It selects all text inputs :
: selected Selector
It selects all the elements that are selected.
Example:
<body>
<select name="cloths" multiple="multiple">
<option>Shirt</option>
<option selected="selected">T-Shirt</option>
<option>Jeans</option>
<option selected="selected">Trousers</option>
<option>Skirts</option>
<option>Coats</option>
</select>
<div></div>
You can select multiple option by pressing "ctrl" key. <br>Can deselect the option by clicking on it.
<script>
$("select").change(function () {
var str = "YOU SELECTED :";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
</script>
</body>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
jQuery content Filter
Posted on September 4, 2011 by Sameera Thilakasiri
: contains() Selector
It filters the elements which have the matched text.
Example :
It filters the div which have ‘Ankit’ as text and underline them.
: empty Selector
It filters the elements which are empty. Here empty means they don’t have children or text.
Example :
It filters all the ‘td’ element which don’t have any child or text and fill it with text “Was empty” and change it’s background color.
:has() Selector
It filters the elements which contains the element provided to ‘ has() ‘.
Example :
It filters all the ‘div’ elements which have ‘p’ (paragraph) inside it and add the css class ‘test’ to it.
: parent Selector
It selects all the elements that have at least one child including text .
<body>
<table border="1">
<tr><td>Ankit</td><td></td></tr>
<tr><td>Vinita</td><td></td></tr>
</table>
<script>$("td:parent").fadeTo(1500, 0.3);</script>
</body>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
jQuery filters
Posted on September 4, 2011 by Sameera Thilakasiri
Uses of JQuery filter
Some of the key uses are given below :
- It is very similar to selector in fact we can say that it is a type of selector to enhance the functionality of selector.
- We can select filter according to their position.
- We can select filter according to tag name.
- We can select filter according to child, last-child ,nth child ,only child.
- We can select filter according to their visibility.
- We can select filter according to sibling, adjacent, or descendant etc.
Use of jQuery attribute filters
Using jQuery attribute filters make it easy to select and modify particular attributes in your html DOM.
Given below is the demonstration how you can apply filters on attribute ,here we are using “a href ” attribute of html DOM :
- Using it , you can hide all the link in your html page as : $(“a[href]”).toggle();.
- But if you want to hide one link , you can do it as : $(“a[href=’http://www.ai.com/’]”).toggle();
- If you want to hide the link which has “google” in href.
- You can also hide the links which ends with “org” as $(“a[href$=’org’]”).toggle();
- You can also hide the link which starts like ” http://doc ” as : $(“a[href^=’http://docs’]”).toggle();
eg:-
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$("div").css("background", "#c8ebcc")
.filter(".middle")
.css("border-color", "red");
</script>
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
jQuery Utility Functions
Posted on August 28, 2011 by Sameera Thilakasiri
.clearQueue()
This function is used to remove all the functions from the queue that have not been executed.
jQuery.contains()
The jQuery.contains() function is used to check if a DOM node is within another DOM node.
eg:-
jQuery.contains( container, contained )
jQuery.contains(document.documentElement, document.body); // true
jQuery.contains(document.body, document.documentElement); // false
jQuery.data()
The jQuery.data() function is used to add data of any type to a DOM element..
eg:-
jQuery.data( element, key, value )
Note: this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
.dequeue()
The .dequeue() function is used to remove the next function on the queue.
jQuery.dequeue()
The jQuery.dequeue() is used to execute the next function on the queue for the matched element.
jQuery.each()
The jQuery.each() function is not same as .each(), which is used to iterate over the jQuery objects. The jQuery.each() iterates through the array displaying each number as both a word and numeral.
eg:-
var map = {
‘flammable’: ‘inflammable’,
‘duh’: ‘no duh’
};
$.each(map, function(key, value) {
alert(key + ‘: ‘ + value);
});
result-
flammable: inflammable
duh: no duh
jQuery.extend()
The jQuery.extend() function merge the contents of two or more objects together into the first object.
eg:-
jQuery.extend( [deep,] target, object1, [objectN] )
deepIf true, the merge becomes recursive (aka. deep copy).
targetThe object to extend. It will receive the new properties.
object1An object containing additional properties to merge in.
objectNAdditional objects containing properties to merge in.
jQuery.globalEval()
Execute some JavaScript code globally.
jQuery.grep()
The jQuery.grep() function is used to find the elements of an array which satisfy a filter function. The original array is not affected.
jQuery.inArray()
The jQuery.inArray() function searches for a specified value within an array and return its index (or -1 if not found).
jQuery.isArray()
The jQuery.isArray() function is used to determine whether the argument is an array.
jQuery.isEmptyObject()
The jQuery.isEmptyObject() function is used to check to see if an object is empty (in order words contains no properties).
jQuery.isFunction()
The jQuery.isFunction() is used to determine if the argument passed is a Javascript function object.
jQuery.isPlainObject()
The function jQuery.isPlainObject() is used to find if an object is a plain object (created using “{}” or “new Object”).
jQuery.isXMLDoc()
The jQuery.isXMLDoc() function is used to find if a DOM node is within an XML document (or is an XML document).
jQuery.makeArray()
The function jQuery.makeArray() is used to convert an array-like object into a true JavaScript array.
jQuery.map()
The function jQuery.map() translates all items in an array or array-like object to another array of items.
jQuery.merge()
The function jQuery.merge() merge the contents of two arrays together into the first array.
jQuery.noop()
The jQuery.noop() is an empty function.
jQuery.parseJSON
The jQuery.parseJSON function takes a well-formed JSON string as parameter and then returns the resulting JavaScript object.
jQuery.proxy()
The jQuery.proxy() function Takes a function and returns a new one that will always have a particular context.
.queue()
It shows the queue of functions to be executed on the matched elements.
jQuery.queue()
It shows the queue of functions to be executed on the matched element.
jQuery.removeData()
This function is used to remove a previously-stored piece of data.
jQuery.support
Properties of the Global jQuery Object.
jQuery.trim()
It is used to remove the whitespace from the beginning and end of a string.
jQuery.unique()
The jQuery.unique() function sorts an array of DOM elements, in place, with the duplicates removed.
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Jquery Mobile for Beginners
Posted on August 21, 2011 by Sameera Thilakasiri
Anatomy of a Page
Viewport meta tag
Note above that there is a meta viewport tag in the head to specify how the browser should display the page zoom level and dimensions. If this isn’t set, many mobile browsers will use a “virtual” page width around 900 pixels to make it work well with exisitng desktop sites but the screens may look zoomed out and too wide. By setting the viewport attributes to content=”width=device-width, initial-scale=1, the width will be set to the pixel width of the device screen.
These settings do not disable the user’s ability to zoom the pages which is nice from an accessibility perspective. There is a minor issue in iOS that doesn’t properly set the width when changing orientations with these viewport settings, but this will hopefully be fixed a a future release. You can set other viewport values to disable zooming if required since this is part of your page content, not the library.
Inside the body: Pages
Inside the
Within the “page” container, any valid HTML markup can be used, but for typical pages in jQuery Mobile, the immediate children of a “page” are divs with data-roles of “header”, “content”, and “footer”.
<div data-role="page"> <div data-role="header">...</div> <div data-role="content">...</div> <div data-role="footer">...</div> </div>
Titles in multi-page templates
On multi-page documents, we follow a similiar convention, but since all the page share a common title, we have a data-title attribute that can be added each page container within a multi-page template to manually define a title. The title of the HTML docuemnt will be automatically updated to match the data-title of the page currently in view.
<div data-role="page" id="foo" data-title="Page Foo"> </div><!-- /page -->
Linking without Ajax
Links that point to other domains or that have rel=”external”, data-ajax=”false” or target attributes will not be loaded with Ajax. Instead, these links and will cause a full page refresh with no animated transition. Both attributes have the same effect, but different semanic meaning. rel=”external” should be used when linking to another site or domain, while data-ajax=”false” is useful for simply opting a page within your domain from being loaded via Ajax. Because of security restrictions, the framework always opts links to external domains out of the Ajax behavior.
“Back” button links
If you use the attribute data-rel=”back” on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor’s default href. This is particularly useful when linking back to a named page, such as a link that says “home”, or when generating “back” buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page (this will allow the feature to work for users in C-Grade browsers. Also, please keep in mind that if you just want a reverse transition without actually going back in history, you should use the data-direction=”reverse” attribute instead.
Page transitions
The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.
To set a custom transition effect, add the data-transition attribute to the link. Possible values include:
Creating dialogs
Any page can be presented as a modal dialog by adding the data-rel=”dialog” attribute to the page anchor link. When the “dialog” attribute is applied, the framework adds styles to add rounded corners, margins around the page and a dark background to make the “dialog” appear to be suspended above the page.
Prefetching pages
Usually, it’s a good idea to store your app’s pages in several single-page templates instead of one large multi-page template. This minimizes the size of the page’s DOM.
When using single-page templates, you can prefetch pages into the DOM so that they’re available instantly when the user visits them. To prefetch a page, add the data-prefetch attribute to a link that points to the page. jQuery Mobile then loads the target page in the background after the primary page has loaded and the pagecreate event has triggered. For example:
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.