Welcome To Web Developer's Library: November 2014

Thursday 27 November 2014

Positions

1. position : static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn't specify this unless you needed to override a positioning that had been previously set.

#div-1{

position:static

}

2. position : relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That's because div-1 still occupies that original space in the document, even though we have moved it.

#div-1 {

position:relative;

top:20px;

left:20px;

}

example Link : relative

3. position : absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let's move div-1a to the top right of the page:

#div-1 { position:absolute; top:0; right:0; width:200px;}

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

example link: absolute

4.position : relative+absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

exaplelink: relative+absolute

Tuesday 25 November 2014

Angular form validation

form validation using required
<style>
.my-form {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
background: transparent;
}
.my-form.ng-invalid {
background: red;
}
</style>
<form name="myForm" ng-controller="FormController" class="my-form">
userType: <input name="input" ng-model="userType" required>
<span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
</form>

Angular broadcast

Using $scope.$emit will fire an event up the $scope. Using $scope.$broadcast will fire an event downthe $scope. Using $scope.$on is how we listen for these events.

example:
// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');
// firing an event downwards
$scope.$broadcast('myCustomEvent',{
someProp: 'Sending you an Object!' // send whatever you want
});
// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data){
console.log(data); // 'Data to send'
});

HTML Layout.

Footer is dynamically fitting to the bottom of the screen.

example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>
</body>
</html>

<style>
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
display:table;
table-layout:fixed;
margin:0 auto;
}
.row {
display:table-row;
background:orange
}
div.row {
height:100%;
background:pink
}
</style>

Yeoman Setup

Fresh Installation of Yeoman...

1. Download Node.js from http://nodejs.org/ , install and add to path

2. Download GIT from http://git-scm.com/, install and add to path

3. configure git using command : git config --global url."https://".insteadOf git://

4. Download Ruby from https://www.ruby-lang.org/en/, install and add to path

5. Install sass using this command: gem install sass

6. Install compass using this command : gem install compass.

7. Install generators using these commands
--> npm install -g yo
--> npm install -g grunt-cli
--> npm install -g bower
--> npm install -g generator-webapp

8. Create a folder, go into it and run command: yo angular Appname

9. Once step 8 is done run command: grunt serve (grunt server)

If already Installed:

1. Configure git using command : git config --global url."https://".insteadOf git://

2. Run commands to clean npm and bower
---> npm cache clean
---> bower cache clean

3. Run commands to uninstall Compass and sass
---> gem uninstall compass
---> gem uninstall sass

4. Run commands to install sass and compass the following versions
---> gem install sass
---> gem install compass --version

5. Install generators using these commands
--> npm install -g yo
--> npm install -g grunt-cli
--> npm install -g bower
--> npm install -g generator-webapp

6. Create a folder, go into it and run command: yo angular Appname

7. Once step 6 is done run command: grunt serve (grunt server)

HTML5

HTML5 is a markup language, has been come into existence around January 2008.

<!DOCTyPE html>

DOCTYPE is such an element, which tells the browser about the html ver- sion.

<aside> Defines content aside from the page content
<audio> Defines sound content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<command> Defines a command button that a user can invoke
<datalist> Specifies a list of pre-defined options for input controls
<defines> article an article
<details> Defines additional details that the user can view or hide
<embed> Defines a container for an external application or interactive content (a plug-in)
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption> Defines a caption for a <figure> element
<footer> Defines a footer for a document or section
<header> Defines a header for a document or section
<hgroup> Groups a set of <h1> to <h6> elements when a heading has multiple levels
<keygen> Defines a key-pair generator field (for forms)
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<output> Defines the result of a calculation
<progress> Represents the progress of a task
<ruby> Defines a ruby annotation (for East Asian typography)
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<section> Defines a section in a document
<source> Defines multiple media resources for <video> and <audio>
<summary> Defines a visible heading for a <details> element
<track> Defines text tracks for <video> and <audio> <time> Defines a date/time <video> Defines a video or movie
<wbr> Defines a possible line-break

Audio Example:
<audio controls>
<source src="media/simple_audio.mp3" type="audio/mpeg"/>
<source src="media/simple_audio.ogg" type="audio/ogg"/>
<p>not support the audio element</p>
</audio>

<keygen name=”key”>
The KEYGEN Element is commonly used for generating the keypair in the form. Whenever user hit the submit button, the KEYGEN Element creates two key pair, first one is Public Key and another one is Private Key. Private key is encrypted and stored in local key database and the public key is sent with the form data to server. The KEYGEN Element is most useful when user wants to generate the unique key for a particular form.
exmple:
<form action="keygen.php" method="post">
Username: <input type="text" name="text">
Encryption: <keygen name="key">
<input type="submit">
</form>

Creating form data Object

var formData = new FormData();
formData.append("username", "bujjibabu"); 
formData.append("password", 'password');
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost/register");  
xhr.send(formData);

Reference Link

we can add some more data to existing form data

var formElement = document.getElementById("Id");
var formData = new FormData(formElement);
formData.append("additionaldata", "somedata");
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.send(formData);

send the form data using jquery

var formElement = document.getElementById("Id");
var formData = new FormData(formElement);
formData.append("additionaldata", "somedata");
$.ajax({
  url: "post.php",
  type: "POST",
  data: formData,
  processData: false,  // tell jQuery not to process the data
  contentType: false   // tell jQuery not to set contentType
});

 sending file using form data

var formData = new FormData();
formData.append("file", file);
var xhr = new XMLHttpRequest();
xhr.open("POST",uploadURL);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        $('#output').html(xhr.responseText);
    }
}
xhr.send(formData);

Monday 24 November 2014

Simple jQuery Ajax Call

1.Using done Method.

$.ajax({
type: "POST",
url: "server url",
data: { name: "bujjiBabu", location: "hyderabad" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
}).fail(function(msg){
alert( "Data Saved: " + msg );
});

2.Using success Method.

$.ajax({
type: "POST",
  url: url,
  data: { name: "bujjiBabu", location: "hyderabad" },
  datatype:datatype,
  success: function(){
    alert('success');
  },
  error: function(){
   alert('error');
  }
});