Beginners guide on jQuery Selectors

In our previous blog, we went through almost all the major CSS selectors and I felt that was helpful for some and helpful for me as well. That’s why I came up with the same kind of way of selecting element using jQuery :).

As we know, jQuery is a light weight javascript library used to manipulate the DOM easily, for CSS manipulation, for effects and animations etc. So, in this blog, we will go through manipulating DOM using selector.

ID Selector :- Selects one element that has a given id attribute. Below example will apply black border to the element which id equals to ‘idMyTest’.

$("#idMyTest").css("border", "1px solid black");

 

Class Selector :- Selects one or more element that has the given class attribute. The below will apply black background to all the elements where the class defines as ‘class-my-test’ in the html document.

$(".class-my-test").css("border", "1px solid black");

 

Type Selector :- Selects every element that has the given type node. Type node can be ‘span’, ‘p'(paragraph), ‘div’, ‘a'(hyperlink), ‘img’ etc.. The example will add border to all the span present in the web document.

$("span").css("border", "1px solid black");

 

Descendant Combination Selector :- Selects all the elements with the type. For below example, it will select all elements inside elements. The below will apply the border to the hyperlink present inside or as child of span element.

$("span a").css("border", "1px solid black");

 

Link History Pseudo-Class Selector :- Selects all unvisited link only. The below will make all the link elements color as blue.

$("a:link").css("color", "blue");

 

User Action Pseudo-Class Selector :- Selects all matched elements which are activated by any user. The below example will make the color as green for the active buttons.

$("a:active").css("color", "green");

 

Universal Selector :- Selects every element of any type, that means apply style to all the attribute of the web page. Below will add green color to all the elements present in DOM.

$("*").css("color", "green");

 

User action pseudo-class Selectors :- Apply the styles on hover or on focus of any element. The below code will make the color red on hover of any link.

$("a:hover").css("color", "red");

 

Lang pseudo-class Selector :- Selects all the elements mentioned in the document language. The language value can be any 2-digit international language (en, fr, nl, de, etc..). The below will apply red color to the text which will be in english language.

$("div:lang(en-us)").css("color", "red");

 

Attribute Selector :- Selects matching string in the value attribute. The below example select all elements which have a title attribute and add a black border.

$("[title]").css("border", "1px solid black");

 

Structural pseudo-class Selector :- Selects the first-child of the given attribute. The below will select the first child (can be a span or div or p element) of span and apply black border to it.

$("div span:first-child").css("border", "1px solid black");

 

Child combination Selector :- Select the direct child elements of the mentioned parent/first selector. The below example will add border to the first span present inside the div.

$("div > span").css("border", "1px double black");

 

Adjacent sibling combination Selector :- Select an element immediately preceded by another element. For the below example, border will apply to <p> elements, placed immediately after <div> elements.

$("div + p").css("border", "1px double black");

 

Negation pseudo-class Selector :- Selects every element that is not of the given element type. The below example applies border to all the element present inside the div, except <p> element.

$("div:not(p)").css("border", "1px double black");

 

Target pseudo-class Selector :- Selects the element being the target of the referring URI. The below will add border to the ‘heading4′ text on click of ‘First’ link.

$("h4:target").css("border", "1px double black");

 

Enabled and Disabled pseudo-class Selector :- Select every enabled/disabled element. The below example will add green border to the enabled input element and gray border to the disabled input element.

$("input:enabled").css("border", "1px solid green");

$("input:disabled").css("border", "1px solid gray");

 

Selected-option pseudo-class Selector :- Select every checked input element i.e. will apply the style to the radio or select element. The below will make the option as red color on checked.

$("input:checked").css("color", "red");

 

Structural pseudo-class Selector :- It select the root element of the document or the web page. The example will make the background color as red for the root element in the hierarchy.

$(":root").css("background-color", "red");

 

Attribute Selector :- Selects every element whose attribute value begins with given string. The below will select every <a> element and make the color red, where href attribute value starts with “https”.

$("a[href^='https']").css("color", "red");

 

General sibling combinator Selector :- Selects the second element only if it is preceded by the first, and both share a common parent. The below will make red color to ‘Second Span’ text.

$("p ~ span").css("color", "red");

<span>First Span</span>
<p>Paragraph</p>
<div>Code Example</div>
<span>Second Span</span>

 

Negation pseudo-class Selector :- Same as CSS3 i.e. it selects every element that is not of the given element type. The only difference is in CSS3, it takes only a single selector list, where in CSS4, it takes multiple. The below will add the border to all html elements except the link.

$(":not(:link), :not(:visited)").css("border", "1px solid black");

 

Matches-any pseudo-class Selector :- Match with every element, provided in the attribute list. The below example will add border to the navigation, article, section and aside of the web page.

$("*:matches(nav, article, section, aside)").css("border", "1px solid black");

 

Local link pseudo-class Selector :- Matches links that point to the domain, where the current page stands for.

$("a[href^=#]").css("border", "1px solid black");

 

Default option pseudo-class Selector :- Selects the default element among others. The below will apply green as background color to the default button among all the buttons.

$(":default").css("background-color", "green");

 

Validity pseudo-class Selector :- Match the elements which has its value attribute come inside/outside the specified range. It is divided into 2 selectors i.e. :in-range and :out-of-range.

$("input:in-range").css("background-color", "green");

$("input:out-of-range").css("background-color", "red");

 

Optionality pseudo-class Selector :- Select every form element which are optional or required.

$("input:required").css("background-color", "red");

$("input:optional").css("background-color", "grey");

 

Mutability pseudo-class Selector :- Selects all the elements of the page, where the contents are writable or not.

$("input:read-only").css("background-color", "gray");

$("input:read-write").css("background-color", "green");

 

Miscellaneous :-

1. Animated Selector :- Select all elements that are undergoing animation.

$("img:animated").toggleClass("animated");

 

2. Attribute contains prefix Selector :- Selects element that starts with the specified attribute. The attribute value should either equal to or should start with that string followed by a hyphen (-). The below will apply outline to the first and third link, not to the second and fourth link.

<a title="test">First link</a>
<a title="this is a test">will not be outlined - second</a>
<a title="test-account">third link</a>
<a title="testing">will not be outlined - fourth</a>

$("a[title|='test']").css("border", "1px solid black");

 

3. Attribute contains Selector :- Selects all the elements that have the specified attribute in any part of the string. The below will apply outline to all except the second link.

<a title="test">First link</a>
<a title="account-check">will not be outlined - second</a>
<a title="test-account">third link</a>
<a title="testing">fourth link</a>

$("a[title*='test']").css("border", "1px solid black");

 

4. Attribute contains word Selector :- Selects the specified element which contains the specific word, delimited by a space. The below will apply the outline to the first link only.

<a title="test">First link</a>
<a title="account-check">will not be outlined - second</a>
<a title="test-account">will not be outlined - third</a>
<a title="testing">will not be outlined - fourth</a>

$("a[title~='test']").css("border", "1px solid black");

 

5. Attribute ends with Selector :- Selects all elements which have the specified attribute with ending exactly match with a given value. The below will apply the outline to first and fourth link.

<a title="test">First link</a>
<a title="account-check">will not be outlined - second</a>
<a title="test-account">will not be outlined - third</a>
<a title="account-test">fourth link</a>

$("a[title$='test']").css("border", "1px solid black");

 

6. Attribute starts with Selector :- Selects all elements which have the specified attribute with starting exactly match with a given value. The below will apply the outline to first and third link.

<a title="test">First link</a>
<a title="account-check">will not be outlined - second</a>
<a title="test-account">third link</a>
<a title="account-test">will not be outlined - fourth</a>

$("a[title^='test']").css("border", "1px solid black");

 

7. Attribute not equal Selector :- Selects all elements which does not match with the specified attribute in the string. Below will outline the second link.

<a title="test">will not be outlined - First</a>
<a title="account-check">second link</a>
<a title="test-account">third link</a>
<a title="account-test">fourth link</a>

$("a[title!='test']").css("border", "1px solid black");

 

8. :eq() Selector :- Select the x index element within the matched set. The below will apply red color to the 3rd list element.

$("li:eq(3)").css("color", "red");

 

9. :nth-child() Selector :- Selects nth child of the parent. The below will apply red color to the 3rd child of each unordered list.

$("ul li:nth-child(3)").css("color", "red");

 

10. :nth-last-child() Selector :- Selects nth child of the parent, counting from last to first. The below will apply red color to the 3rd child from last of each unordered list.

$("ul li:nth-last-child(3)").css("color", "red");

 

Great!! 🙂 We covered almost all the jQuery selector with small example. But, there can be more also, if we will combine two or more selected. Do you really find it useful? 🙂 If yes, then please like and add some comments, if you want.

Thanks 🙂 and will be happy to listen from you 🙂 :).

Beginners guide on CSS Selectors

As we all know about CSS (Cascading Style Sheets) is a language used for styling the web pages written in HTML, XML or XHTML. In CSS, selectors play a vital role to declare which part of the web page, the style applies to and it is done by matching the tags or attributes present in that web page. It’s very simple to write the tags or attributes for applying the selector, but need some tricks to precise and reuse it. Today in this post, we will go through the type of selectors, its advantages, introduced in every version of CSS.

CSS1 :-

ID Selector :- Selects one element that has a given id attribute. Below example will apply black border to the element which id equals to ‘idMyTest’.

#idMyTest {
    border: 1px solid black;
}

 

Class Selector :- Selects one or more element that has the given class attribute. The below will apply black background to all the elements where the class defines as ‘class-my-test’ in the html document.

.class-my-test {
    border: 1px solid black;
}

 

Type Selector :- Selects every element that has the given type node. Type node can be ‘span’, ‘p'(paragraph), ‘div’, ‘a'(hyperlink), ‘img’ etc.. The example will add border to all the span present in the web document.

span { 
    border: 1px solid black;
}

 

Descendant Combination Selector :- Selects all the elements with the type. For below example, it will select all elements inside elements. The below will apply the border to the hyperlink present inside or as child of span element.

span a {
    border: 1px solid black;
}

 

Link History Pseudo-Class Selector :- Selects all unvisited link only. The below will make all the link elements color as blue.

:link {
    color: blue;
}

 

User Action Pseudo-Class Selector :- Selects all matched elements which are activated by any user. The below example will make green as background color for the active buttons.

button:active {
    background-color: green;
}

 

CSS2 :-

Universal selector :- Selects every element of any type, that means apply style to all the attribute of the web page. Below will add black border to all the elements present in DOM.

* {
    border: 1px solid black;
}

 

User action pseudo-class selectors :- Apply the styles on hover or on focus of any element. The below code will make red background on hover of the element where the class name mentioned as ‘btn’.

.btn:hover {
    background-color: red;
}

 

Dir pseudo-class selector :- Select elements by its directionality based on the mentioned document language. The values are ‘ltr’ (left to right) and ‘rtl’ (right to left). The below will apply green background to the element where the text start from left to right, and applies red background to the element where the text start from right to left.

:dir(ltr) {
    background-color: green;
}

:dir(rtl) {
    background-color: red;
}

 

Lang pseudo-class selector :- Selects all the elements mentioned in the document language. The language value can be any 2-digit international language (en, fr, nl, de, etc..). The below will apply red color to the text which will be in english language.

:lang(en) {
    color: red;
}

 

Attribute selectors :- Selects matching string in the value attribute. The below example select all elements which have an title attribute and add a black border.

[title] {
    border: 1px solid black;
}

 

Structural pseudo-class selector :- Selects the first-child of the given attribute. The below will select the first child (can be a span or div or p element) of span and apply black border to it.

span :first-child {
    border: 1px solid black;
}

 

Child combination selector :- Select the direct child elements of the mentioned parent/first selector. The below example will add border to the first span present inside the div.

div > span {
    border: 1px solid black;
}

 

Adjacent sibling combination selector :- Select an element immediately preceded by another element. For the below example, border will apply to <p> elements, placed immediately after <div> elements.

div + p {
    border: 1px solid black;
}

 

CSS3 :-

Negation pseudo-class selector :- Selects every element that is not of the given element type. The below example applies border to all the element present inside the div, except <p> element.

div :not(p) { 
    border: 1px solid black; 
}

 

Target pseudo-class selector :- Selects the element being the target of the referring URI. The below will add border to the ‘heading4’ text on click of ‘First’ link.

h4:target {
    border: 1px solid black;
}
<h4 id="one">heading4</h4> 

<p>paragraph</p>
<div id="three">DIV</div>
<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>

 

Scope pseudo-class selector :- Match the elements that are a reference point for selectors to match against. The below will make lime background color for “Inside scope.”.

<div>
    It match the elements that are a reference point for selectors to match against.
    <section>Outside scope.</section>
    <section>Inside scope.</section>
    <section>Outside scope.</section>
</div>

 

Enabled and Disabled pseudo-class selectors :- Select every enabled/disabled element. The below example will add green border to the enabled input element and gray border to the disabled input element.

:enabled {
    border-color: green;
}
 
:disabled {
    border-color: gray;
}

 

Selected-option pseudo-class selector :- Select every checked input element i.e. will apply the style to the radio or select element. The below will make the option as red color on checked.

:checked {
    color: red;
}

 

Structural pseudo-class selectors :- It select the root element of the document or the web page. The example will make the background color as red for the root element in the hierarchy.

:root {
    background-color: red;
}

 

Attribute selectors :- Selects every element whose attribute value begins with given string. The below will select every <a> element and make the color red, where href attribute value starts with “https”.

a[href^="https"] {
    color: red;
}

 

General sibling combinator selector :- Selects the second element only if it is preceded by the first, and both share a common parent. The below will make red color to ‘Second Span’ text.

p ~ span {
  color: red;
}

<span>First Span</span>
<p>Paragraph</p>
<div>Code Example</div> 
<span>Second Span</span>

 

CSS4 :-

Negation pseudo-class selector :- Same as CSS3 i.e. it selects every element that is not of the given element type. The only difference is in CSS3, it takes only a single selector list, where in CSS4, it takes multiple. The below will add the border to all html elements except the link.

html|*:not(:link):not(:visited) { 
    border: 1px solid black; 
}

 

Matches-any pseudo-class selector :- Match with every element, provided in the attribute list. The below example will add border to the navigation, article, section and aside of the web page.

*|*:matches(nav, article, section, aside) { 
    border: 1px solid black; 
}

 

Local link pseudo-class selector :- Matches links that point to the domain, where the current page stands for.

:local-link(0) {
    border: 1px solid black; 
}

 

Time-dimensional pseudo-class selector :- As the name suggests, matches the elements according to currently active position in some timeline. It can be applied to the document, when video is displaying its subtitle or during speech recognition of a web document. This is divided into 3 pseudo class i.e. :current, :past, :future. While reading out an web page, the below example will highlight as green color whichever text is being read aloud currently, highlight as grey color whichever has been read/will read in future.

:current(p, li) { 
    background: green; 
}

:past(p, li), :future(p, li) { 
    background: grey; 
}

 

Indeterminate-value pseudo-class selector :- Represents any checkbox/radio element whose indeterminate DOM property is set to true using javascript.

input, span { 
    background: red;
}
:indeterminate, :indeterminate + span { 
    background: yellow;
}

<input id="chk_myExample" type="checkbox" />This is an Indeterminate-value pseudo-class selector example.

document.getElementById("chk_myExample").indeterminate = true;

 

Default option pseudo-class selector :- Selects the default element among others. The below will apply green as background color to the default button among all the buttons.

:default {
    background-color: green;
}
<form>
    <input id="submit1" type="submit" /> 
    <input id="submit2" type="submit" /> 
    <input id="reset" type="reset" />
</form>

 

Validity pseudo-class selectors :- Match the elements which has its value attribute come inside/outside the specified range. It is divided into 2 selectors i.e. :in-range and :out-of-range.

input:in-range {
    background-color: green;
}

input:out-of-range {
    background-color: red;
}

 

Optionality pseudo-class selectors :- Select every form element which are optional or required.

:required {
    border: red;
}
 
:optional {
    border: grey;
}

 

Mutability pseudo-class selectors :- Selects all the elements of the page, where the contents are writable or not.

:read-only {
    border: grey;
}
 
:read-write {
    border: green;
}

 

Structural pseudo-class selectors :- It is similar to CSS3 :nth-child() selector. The only difference is before entering into the document tree, it applies the style. The below style will be applied to the second last paragraph element of DOM tree.

p:nth-last-match(2n+1) { 
    border: 1px solid black; 
}

 

Grid-Structural pseudo-class selectors :- Styles different columns of a single grid/table in a document. The below will apply background color as green for the selected/highlighted column, apply yellow as background to each second column and apply grey color to each third column of the document.

:column(.highlight) {
    background-color: green;
}
 
:nth-column(2n+1) {
    background-color: yellow;
}
 
:nth-last-column(3n+1) {
    background-color: grey;
}

 

Attribute case-sensitivity selector :- It is similar to CSS2 [attribute] selector. The only difference is case sensitivity. It match with the element exactly with the provided attribute. The first example will apply red color to the element where id can be ‘mytestclass’, ‘mytestexample’, ‘mytestset’, ‘mytestlink’. But the second example will apply the color to the element where the id exactly match with the word ‘mytestid’.

a[id~="mytestid"] { 
    color: red;
}
a[id="mytestid"] {
    color: red;
}

 

Reference combinator :- This selector consists of two slashes separating two compound attributes. The below example will apply green color to the input element, whenever its label hovered or focused.

label:matches(:hover, :focus) /for/ input { 
    color: green; 
}

 

Subject of a selector with Child combinator selector :- Generally child combinator applies the styles to the last compound selector. But here, with “Subject of a selector with Child combinator selector”, we can apply the style to the prefixed selector object. The below style will add border to the ‘ul’ element instead of ‘li’ elements.

!ul > li {
    border: 1px solid black;
}

 

Hyperlink pseudo-class selector :- Apply the style to the elements that come as the source anchor of an hyperlink. The below example will have the blue background color for all link type elements.

:any-link {
    background-color: blue;
}

 

Ohh!! That’s so much really. This time, we went through almost all the selectors of CSS and with very small and simple example. Do you really find it useful? 🙂 If yes, then please like and add some comments, if you want.

Thanks 🙂 and will be happy to listen from you 🙂 :).

A walk through into Late Static Binding in PHP

Hello everyone, do we remember the concept of Static Binding and Dynamic Binding, the one we studied in Java classes during our college time?

Yes!! Then very nice :). Today in this blog, we will go through those concepts using PHP for better understanding and visibility for the persons like me :D.

What is Binding?
In simple software language, “connecting a method call, to the method body is known as binding”.

 

Types of Binding
There are two types of binding

  1. Static binding (early binding)
  2. Dynamic binding (late binding)

 

Example of static binding in PHP
Here in this case, class association is made during compile time.

<?php
class Vehicle {
    public function color() {
        echo 'car color is RED';
    }
}

$vehicle = new Vehicle();
$vehicle->color();
?>

This would print the output as : car color is RED

 

Example of dynamic binding in PHP
Here in this case, class association is not made until the object is created at execution time.

<?php
class Vehicle {
    public function color() {
        echo 'car color is RED';
    }
}

class Honda extends Vehicle {
    public function color() {
        echo 'car color is BLUE';
    }
}

$vehicle = new Honda();
$vehicle->color();
?>

This would print the output as : car color is BLUE

 

But, have you heard of another binding called “Late Static Binding”!! No…. then let’s go through that 🙂 with some interesting example.

What is Late Static Binding?
PHP 5.3 implemented a new feature called Late Static Binding, which is used to reference the called class regarding to static method inheritance.

 

Why the name Late Static Binding?
It is the combination of two concepts i.e. Late Binding and Static Binding.
Late binding comes from the fact that static:: keyword will not be resolved using the class where the method is defined but it will rather be computed using runtime information.
Static binding comes from the fact that it can be used for (but is not limited to) static method calls.

 

Why it came into the picture?
To overcome the use of self keyword, Late static binding concept came. self does not follow the rules of inheritance and it always resolves to the class in which it is used. For example – if you make a method in a parent class and call it from a child class, self will always reference the parent, instead of child.

But in case of Late Static Binding, static keyword has been used extensively to represent the class where it is first used i.e. it binds to the runtime class.

 

Example of late static binding in PHP with self, parent and static

<?php

class Mango {       
    function classname(){
        return __CLASS__;
    }
    
    function selfname(){
        return self::classname();
    }
    
    function staticname(){
        return static::classname();
    }
}

class Orange extends Mango {     
    function parentname(){
        return parent::classname();
    }
    
    function classname(){
        return __CLASS__;
    }
}

class Apple extends Orange {     
    function parentname(){
        return parent::classname();
    }
    
    function classname(){
        return __CLASS__;
    }
}

$apple = new Apple();
echo $apple->selfname() . '<br/>';
echo $apple->parentname() . '<br/>';
echo $apple->staticname();

?>

This would print the output as :
Mango
Orange
Apple

 

Example of late static binding in PHP with forward_static_call()

<?php

class Mango
{
    const NAME = 'Mango is';
    public static function fruit() {
        $args = func_get_args();
        echo static::NAME, " " . join(' ', $args) . "<br/>";
    }
}

class Orange extends Mango
{
    const NAME = 'Orange is';

    public static function fruit() {
        echo self::NAME, "<br/>";
        
        forward_static_call(array('Mango', 'fruit'), 'my', 'favorite', 'fruit');
        forward_static_call('fruit', 'my', 'father\'s', 'favorite', 'fruit');
    }
}

Orange::fruit('NO');

function fruit() {
    $args = func_get_args();
    echo "Apple is " . join(' ', $args);
}

?>

This would print the output as :
Orange is
Orange is my favorite fruit
Apple is my father’s favorite fruit

 

Example of late static binding in PHP with get_called_class()

<?php

class Mango {
    static public function fruit() {
        echo get_called_class() . "<br/>";
    }
}

class Orange extends Mango {
    //
}

Mango::fruit();
Orange::fruit();

?>

This would print the output as :
Mango
Orange

So, did you get some idea of method overriding or binding? Do you really find it useful? 🙂 If yes, then please like and add some comments, if you want.

Thanks 🙂 and will be happy to listen from you 🙂 :).

HTML5: Geolocation from the ground up

The word Geolocation is the combination of two words Geo (Geographic) and Location. Yes, that means, Geolocation is the way of getting geographic location of the object. It uses the positioning system logic, for getting the location. The HTML Geolocation is secured and that’s the reason, it won’t show the position till user approves for it.

Hmmm… the word Geolocation sounds interesting … right? 🙂 So, why to wait? Lets check deeper part of Geolocation API.

Geolocation has never been part of HTML5 specification, previously called Web Application Specification. It is created by W3C not the WHATWG. We can use geolocation in multiple ways, like –

  • Social networking services for ex-Facebook is using Geolocation extensively, for getting current places, that allow users to share their location to others.
  • It helps user to guide for the direction, they want.
  • Anyone can share their location with others.
  • Users can be aware of what is around them depending upon their interests.

But, let’s think practically, how it is possible to get current location of any person, without using anything ❓ …

Hmmm… :idea:, we just now came across one word “Sharing”, means user need to share his/her location using some API and it might sound like a privacy concern. But, the specification clearly specify that the user have to first allow the user agent so it can share the location with the server.

According to GeoLocation API Specification, “User agents must not send location information to Web sites without the express permission of the user. User agents must acquire permission through a user interface, unless they have prearranged trust relationships with users, as described below. The user interface must include the URI of the document origin.”

When requesting for authorization, the browsers may show alert message to the user. Let’s check how it works with some browsers.

Firefox :-
Screen Shot 2014-11-03 at 6.08.19 pm

Chrome :-
Screen Shot 2014-11-03 at 6.06.38 pm

Safari :-
Screen Shot 2014-11-03 at 6.09.30 pm

Once a user allows the user agent to share the user location with the server, there are still some privacy concerns:

  • What would be the duration of saving location data
  • Will it be shared to other sites or other users
  • What would be the result, if the location data can be deleted/updated by end user

That’s why, according to Geolocation API Specification, “Recipients must clearly and conspicuously disclose the fact that they are collecting location data, the purpose for the collection, how long the data is retained, how the data is secured, how the data is shared if it is shared, how users may access, update and delete the data, and any other choices that users have with respect to the data.”.

According to Geolocation API Specification, “Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input”.

The geolocation API is located in the Geolocation object. There are some methods which are available with Geolocation API, among those, 2 methods (getCurrentPosition() and watchPosition()) are used to get the location of the user.

Let’s check one example with using the above two methods.

<!DOCTYPE html>
<html>
    <head>
        <title>Geolocation API Test</title>
    </head>
    <body onload="getLocation()">
        <script>
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else { 
                    alert("Geolocation is not supported by this browser.");
                }
            }

            function showPosition(position) {
                alert("Latitude: " + position.coords.latitude + " - Longitude: " + position.coords.longitude);	
            }
        </script>
    </body>
</html>

getCurrentPosition() :-
It gets the user location only once. It takes 3 parameters i.e. showLocation, ErrorHandler, options.
showLocation => It is the callback method which retrieves the current location of the user. It always called asynchronously and method returns Position as an object. There are few properties present for that Position object.

  • coords.latitude => To get the latitude of the location
  • coords.longitude => To get the longitude of the location
  • coords.accuracy => To get the accuracy of the position returned
  • coords.altitude => To get the altitude of the position above sea level[optional]
  • coords.altitudeAccuracy => To get the accuracy of the altitude position[optional]
  • coords.heading => To get the device current location as per degree, clockwise from North[optional]
  • coords.speed => To get the speed in meter per second[optional]
  • timestamp => To get the timestamp for the response[optional]

ErrorHandler => This is an optional parameter. It invoked when any error occurs while calling PositionError object.
options => This is also an optional parameter. This can contain many options for getting location information like use of the locations which is already in cache, check for the accuracy of the location info, get the timeout info while getting location info.

watchPosition() :-
It regular checks the user location and check if the user location has changed. It also takes 3 parameters i.e. showLocation, ErrorHandler, options, which description we already went through.

This method returns an unique id, which can be used to cancel getting the regular location updates.

clearWatch() :-
There are one more method available clearWatch(), which cancels/stops watching position of the user. It takes one parameter i.e. watchId.
watchId => It is an unique ID of the watchPosition call to cancel the current call.

So, what do you think!! It is nice to use … right? 🙂 Hmmm… yes, using Geolocation API, we can get the geographic location of the user, using which, we can do a lot stuff :).

Note :- Please check here for Browser support details.

Thanks 🙂 and will be happy to listen from you 🙂 :).

Version Control with Subversion: Tortoise SVN – III

Hello All, I am here again with some more SVN commands which you may like or which may help you, while using SVN for any app :).

This is the continuous part of Version Control with Subversion and the previous two are listed below.

1 – Version Control with Subversion: Tortoise SVN
2 – Version Control with Subversion: Tortoise SVN – II

This time, we will check some more SVN useful commands, and let’s jump into the SVN sea, without wasting our time :-D.

svn diff <Old File Path> <New File Path>

This plays a big role in SVN commands and while managing the code. This command helps to display the differences between two revisions or paths, so that developers can check what has been changed by any other developer or by herself/himself with effect to different dates.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -c [--change] ARG -> The change made by revision ARG (like -r ARG-1:ARG). If ARG is negative this is like -r ARG:ARG-1
3. --old ARG -> Use ARG as the older target
4. --new ARG -> Use ARG as the newer target
5. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
6. --diff-cmd ARG -> Use ARG as diff command
7. --internal-diff -> Override diff-cmd specified in config file
8. -x [--extensions] ARG -> Default: ‘-u’. -u (–unified), -b (–ignore-space-change), -w (–ignore-all-space), –ignore-eol-style(Ignore changes in EOL style), -p (–show-c-function).
9. --no-diff-deleted -> Do not print differences for deleted files
10. --show-copies-as-adds -> Don’t diff copied or moved files with their source
11. --notice-ancestry -> Notice ancestry when calculating differences
12. --summarize -> Show a summary of the results
13. --changelist [--cl] ARG -> Operate only on members of changelist ARG
14. --force -> Force operation to run
15. --xml -> Output in XML
16. --git -> Use git’s extended diff format

svn revert <File Name>

As the name implies, it reverts/undo all the local changes or it also used to resolve any file in conflicted state.

Options
1. --targets ARG -> Pass contents of file ARG as additional args
2. -R [--recursive] -> Descend recursively, same as –depth=infinity
3. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. -q [--quiet] -> Print nothing, or only summary information
5. --changelist [--cl] ARG -> Operate only on members of changelist ARG

svn resolve <File Path>

This command is helpful to resolve conflicts on the files or directories.

Options
1. --targets ARG -> Pass contents of file ARG as additional args
2. -R [--recursive] -> Descend recursively, same as –depth=infinity
3. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. -q [--quiet] -> Print nothing, or only summary information
5. --accept ARG -> Specify automatic conflict resolution source (‘base’, ‘working’, ‘mine-conflict’, ‘theirs-conflict’, ‘mine-full’, ‘theirs-full’)

svn cleanup <File Path>

This command is required to cleanup the working copy recursively. Mainly, it is needed when the working copy has been locked, while any issues/conflicts.

Options
1. --diff3-cmd ARG -> Use ARG as merge command

svn merge <Source File Path> <Target File Path>

This command is used to merge the differences between source files to a working copy path. If anyone will not provide target file path, then the changes will be applied to the current working directory.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -c [--change] ARG -> The change made by revision ARG (like -r ARG-1:ARG). If ARG is negative this is like -r ARG:ARG-1
3. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. -q [--quiet] -> Print nothing, or only summary information
5. --force -> Force operation to run
6. --dry-run -> Try operation but make no changes
7. --diff3-cmd ARG -> Use ARG as merge command
8. --record-only -> Merge only mergeinfo differences
9. -x [--extensions] ARG -> When Subversion is invoking an external diff program, ARG is simply passed along to the program. But when Subversion is using its default internal diff implementation, or when Subversion is displaying blame annotations, ARG could be -u (–unified), -b (–ignore-space-change), -w (–ignore-all-space), –ignore-eol-style, -p (–show-c-function).
10. --ignore-ancestry -> Ignore ancestry when calculating merges
11. --accept ARG -> Specify automatic conflict resolution action (‘postpone(p)’, ‘working’, ‘base’, ‘mine-conflict(mc)’, ‘theirs-conflict(tc)’, ‘mine-full(mf)’, ‘theirs-full(tf)’, ‘edit(e)’, ‘launch(l)’)
12. --reintegrate -> Merge a branch back into its parent branch
13. --allow-mixed-revisions -> Allow merge into mixed-revision working copy. Use of this option is not recommended! Please run ‘svn update’ instead.

Ohh!! that’s a lot guys 🙂 … We went through almost all the basic commands, that could be required, on SVN usage. We listed all the options for each command, which could be possible with the main command.

In my next blog, we will go through the process of creating project, managing the project with the commands, we already went through. So, STAY TUNED for my next blog, that will cover some more commands. Hope you will like this blog.

Thanks 🙂 and will be happy to listen from you 🙂 :).

Version Control with Subversion: Tortoise SVN – II

Hello everyone, I am back again with your demand for SVN commands. This time, we will go through all usual commands which may be needed while using SVN :).

So, let’s not waste our time, and let’s go and check the commands one by one :).

svn help

The name itself suggests ‘HELP’. Yes, it will assist the new/old user to use SubVersion. There are a lot more subcommands like checkout, commit, update, add, blame, revert, relocate, resolve, … etc., which can be used with svn help like svn help <subcommand> to get individual brief details for that subcommand.

svn ls <URL of Repo> OR svn list <URL of Repo>

This command will list all the directories or files list, in the repository.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -v [--verbose] -> Print extra information
3. -R [--recursive] -> Descend recursively, same as –depth=infinity
4. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
5. --incremental -> Give output suitable for concatenation
6. --xml -> Output in XML

svn co <URL of Repo> OR svn checkout <URL of Repo>

This command will checkout a working copy from the given repository.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -q [--quiet] -> Print nothing, or only summary information
3. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. --force -> Force operation to run
5. --ignore-externals -> Ignore externals definitions

svn up <URL of Repo> OR svn update <URL of Repo>

This command will help to update the working copy, which will finally sync with the Subversion repository.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be one of NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED).
2. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
3. --set-depth ARG -> set new working copy depth to ARG (‘exclude’, ’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. -q [--quiet] -> Print nothing, or only summary information
5. --diff3-cmd ARG -> Use ARG as merge command
6. --force -> Force operation to run
7. --ignore-externals -> Ignore externals definitions
8. --changelist [--cl] ARG -> Operate only on members of changelist ARG
9. --editor-cmd ARG -> Use ARG as external editor
10. --accept ARG -> Specify automatic conflict resolution action (‘postpone(p)’, ‘working’, ‘base’, ‘mine-conflict(mc)’, ‘theirs-conflict(tc)’, ‘mine-full(mf)’, ‘theirs-full(tf)’, ‘edit(e)’, ‘launch(l)’)
11. --parents -> Make intermediate directories

svn add <File Name>

This command will help to add files or directories, subdirectories or symlinks to repositories.

Options
1. --targets ARG -> Pass contents of file ARG as additional args
2. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
3. -q [--quiet] -> Print nothing, or only summary information
4. --force -> Force operation to run
5. --no-ignore -> Disregard default and svn:ignore property ignores
6. --auto-props -> Enable automatic properties
7. --no-auto-props -> Disable automatic properties
8. --parents -> Add intermediate parents

svn delete <File Name>

This will help user to delete an item from working copy or working repository.

Options
1. --force -> Force operation to run
2. -q [--quiet] -> Print nothing, or only summary information
3. --targets ARG -> Pass contents of file ARG as additional args
4. -m [--message] ARG -> Specify log message ARG
5. -F [--file] ARG -> Read log message from file ARG
6. --force-log -> Force validity of log message source
7. --editor-cmd ARG -> Use ARG as external editor
8. --encoding ARG -> Treat value as being in charset encoding ARG
9. --with-revprop ARG -> Set revision property ARG in new revision using the name[=value] format
10. --keep-local -> Keep path in working copy

svn copy <From File Path> <To File Path>

This command is required to copy a file or directory in a working copy or in the repository. It needs to paths as argument, one is from file path and another is to file path.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -q [--quiet] -> Print nothing, or only summary information
3. --ignore-externals -> Ignore externals definitions
4. --parents -> Make intermediate directories
5. -m [--message] ARG -> Specify log message ARG
6. -F [--file] ARG -> Read log message from file ARG
7. --force-log -> Force validity of log message source
8. --editor-cmd ARG -> Use ARG as external editor
9. --encoding ARG -> Treat value as being in charset encoding ARG
10. --with-revprop ARG -> Set revision property ARG in new revision using the name[=value] format

svn move <From File Path> <To File Path>

This command is used to move one file or item from one place to another in a working copy or repository. This is purely equivalent to first copy the file content from one place to another and then delete the file from where copy content has been made.

Options
1. -r [--revision] ARG -> ARG (some commands also take ARG1:ARG2 range), a revision argument can be NUMBER(revision number), DATE(revision at start of the date), HEAD(latest in repository), BASE(base rev of item’s working copy), COMMITTED(last commit at or before BASE), PREV(revision just before COMMITTED)
2. -q [--quiet] -> Print nothing, or only summary information
3. --force -> Force operation to run
4. --parents -> Make intermediate directories
5. -m [--message] ARG -> Specify log message ARG
6. -F [--file] ARG -> Read log message from file ARG
7. --force-log -> Force validity of log message source
8. --editor-cmd ARG -> Use ARG as external editor
9. --encoding ARG -> Treat value as being in charset encoding ARG
10. --with-revprop ARG -> Set revision property ARG in new revision using the name[=value] format

svn status <File Path>

This command is used to print the status of working copy files and directories.

Options
1. -u [--show-updates] -> Display update information
2. -v [--verbose] -> Print extra information
3. --depth ARG -> Limit operation by depth ARG (’empty’, ‘files’, ‘immediates’, or ‘infinity’)
4. -q [--quiet] -> Don’t print unversioned items
5. --no-ignore -> Disregard default and svn:ignore property ignores
6. --incremental -> Give output suitable for concatenation
7. --xml -> Output in XML
8. --ignore-externals -> Ignore externals definitions
9. --changelist [--cl] ARG -> Operate only on members of changelist ARG

😎 … Really interesting ones!!! 🙂 There are a lot of options available for each and every SVN commands, and which will make a programmer’s life much easier than not using any SubVersion mechanism.

But, there are still some more commands we have, which will be helpful while dealing with one project/application. So, STAY TUNED for my next blog, that will cover some more commands. Hope you will like this blog.

Thanks 🙂 and will be happy to listen from you 🙂 :).

CSS3: Multiple Column Layout

The name Multiple Column Layout suggests a new way to arrange the text like newspaper-wise, which has better flexibility for viewing the page for the viewers. Multi Column Layout is actually a module, with having block layout mode for smoothing definition of multiple columns of text.

Ummm… difficult to understand 😦 … Hmmm… same thing happening to me too :-(. Then, why to wait!!! Let’s check with some example.

This is the HTML code which we will use for demo purpose with adding below styles.

<!DOCTYPE html> 
<html>
    <head> 
        <style> 
            div { 
                -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
                -moz-column-count: 3; /* Firefox */ 
                column-count: 3; 
            } 
        </style> 
    </head> 
    <body> 
        <div> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rutrum auctor egestas. Vivamus malesuada felis quis ipsum dapibus sagittis. Maecenas quis tempor eros. Pellentesque tempor ex vel dictum pharetra. Maecenas id hendrerit enim. Phasellus a urna nec elit imperdiet mollis. Donec gravida augue ut aliquam accumsan. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin orci elit, volutpat sed dapibus quis, ornare a augue. Aliquam purus arcu, pharetra quis gravida eget, ultrices at est. Donec sodales ac felis ac ullamcorper. Nullam ac tortor diam. Mauris blandit quis enim nec luctus. Curabitur pharetra libero auctor tincidunt scelerisque. Aliquam sodales sagittis ipsum eget sodales. Proin vel ante gravida, efficitur leo et, dignissim odio. Vestibulum erat enim, suscipit id luctus sit amet, convallis sit amet erat. Integer sagittis metus orci, sit amet condimentum elit pretium nec. Phasellus quis metus nunc. Sed fringilla leo semper, tempor risus eget, elementum ipsum. Curabitur at aliquet felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium nunc lacus, vel ultrices libero accumsan vitae. In eleifend, velit non facilisis rhoncus, ligula felis aliquet tellus, cursus bibendum sapien erat vitae est. Vivamus laoreet metus sed sapien venenatis accumsan. Phasellus aliquam hendrerit felis. Sed semper fermentum feugiat. Aliquam tempor volutpat lorem, ac tempor enim lacinia sed. Mauris vulputate, mi semper aliquet lacinia, odio massa commodo lorem, nec convallis mi urna vitae neque. Nunc leo mauris, gravida vitae tincidunt vel, elementum ac sem. Aenean vel porttitor nisi. Donec aliquet ullamcorper risus ac vulputate. Aliquam in eleifend augue. Cras mattis, neque in efficitur feugiat, mi orci euismod risus, non bibendum leo tortor tincidunt ipsum. Morbi dapibus nisl eget sodales gravida. Pellentesque facilisis nibh vel urna ultrices, ac tincidunt urna semper. Integer tincidunt velit at dolor gravida, vitae gravida velit rhoncus. Cras sollicitudin fermentum orci, vel bibendum arcu sodales non.         
        </div> 
    </body> 
</html>

So, let’s go through the properties of Multiple Column Layout one by one to check how it works –

Multiple Column Properties

1) column-count – Specifies the number of columns an element should be divided into

column-count: number|auto|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

Screen Shot 2014-10-20 at 1.55.41 pm

2) column-fill – Specifies how to fill columns

column-fill: balance|auto|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -moz-column-fill: auto; /* Firefox */
    column-fill: auto;
}

Screen Shot 2014-10-20 at 2.08.03 pm

3) column-gap – Specifies the gap between the columns

column-gap: length|normal|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
    -moz-column-gap: 60px; /* Firefox */
    column-gap: 60px;
}

Screen Shot 2014-10-20 at 2.11.08 pm

4) column-rule – A shorthand property for setting all the column-rule-* properties

column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-rule: 5px outset #16a085; /* Chrome, Safari, Opera */
    -moz-column-rule: 5px outset #16a085; /* Firefox */
    column-rule: 5px outset #16a085;
}

Screen Shot 2014-10-20 at 2.19.03 pm

5) column-rule-color – Specifies the color of the rule between columns

column-rule-color: color|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
    -moz-column-gap: 60px; /* Firefox */
    column-gap: 60px;
}

Screen Shot 2014-10-20 at 2.26.54 pm

6) column-rule-style – Specifies the style of the rule between columns

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
div {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 60px;
    -webkit-column-rule-style: dashed;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 60px;
    -moz-column-rule-style: dashed;

    column-count: 3;
    column-gap: 60px;
    column-rule-style: dashed;
}

Screen Shot 2014-10-20 at 2.30.01 pm

7) column-rule-width – Specifies the width of the rule between columns

column-rule-width: medium|thin|thick|length|initial|inherit;
div {
    /* Chrome, Safari, Opera */
    -webkit-column-count: 3;
    -webkit-column-gap: 60px;
    -webkit-column-rule-style: outset;
    -webkit-column-rule-width: 20px;
    -webkit-column-rule-color: #16a085;

    /* Firefox */
    -moz-column-count: 3;
    -moz-column-gap: 60px;
    -moz-column-rule-style: outset;
    -moz-column-rule-width: 20px;
    -moz-column-rule-color: #16a085;

    column-count: 3;
    column-gap: 60px;
    column-rule-style: outset;
    column-rule-width: 20px;
    column-rule-color: #16a085;
}

Screen Shot 2014-10-20 at 2.33.28 pm

8) column-span – Specifies how many columns an element should span across

column-span: 1|all|initial|inherit;
div {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}

h1 {
    -webkit-column-span: all; /* Chrome, Safari, Opera */
    column-span: all;
}

Screen Shot 2014-10-20 at 2.40.44 pm

9) column-width – Specifies the width of the columns

column-width: auto|length|initial|inherit;
div {
    -webkit-column-width: 200px; /* Chrome, Safari, Opera */
    -moz-column-width: 200px; /* Firefox */  
    column-width: 200px;
}

Screen Shot 2014-10-20 at 2.43.12 pm

10) columns – A shorthand property for setting column-width and column-count

columns: auto|column-width column-count|initial|inherit;
div {
    -webkit-columns: 200px 4; /* Chrome, Safari, Opera */
    -moz-columns: 200px 4; /* Firefox */
    columns: 200px 4;
}

Screen Shot 2014-10-20 at 3.23.10 pm

OMG!!! 😯 We can do so many things with CSS3 Multi Column properties 😎 … Really, feels awesome with the smoothness of UI with using mutli column CSS :roll:. Hope you will like this post and use the above property in your application (of course if it is required :mrgreen: :-p).

Note :- Please check here for Browser support details.

Thanks 🙂 and will be happy to listen from you 🙂 :).