Stacking Context Rules

New stacking context can be formed on an element:
1 When an element is the root element of a document ( the <html> element )
2 When an element has a position value other than static and a z-index value other than auto
3 When an element has an opacity value less than 1

Stacking order within the same stacking context ( back to front)
1 The stacking context’s root element
2 Positioned elements ( and their children ) with negative z-index values
3 Non-positioned elements
4 floating elements
5 Positioned elements with a z-index value of auto
6 Positioned elements with positive z-index

Advertisements

JQuery Send Ajax Request With ‘delete’ Method (Two Approaches)

Knowledge point:

$.post( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, which is equivalent to:
$.ajax({
type: ‘POST’,
url: url,
data: data,
success: success,
dataType: dataType
});

Two approaches:

1. a form with a hidden field ‘_method’ set to ‘delete’ and use JQuery $.post method:

1.1 form code:

<form action=”test url” accept-charset=”UTF-8″ method=”post” class=”form_example”>
  <input type=”hidden” name=”_method” value=”delete” />
  <label for=”Please_enter_the_username_that_you_want_to_delete:”>Please enter the username that you want to delete:   </label>
  <input type=”text” name=”name” id=”name” />
  <input type=”submit” name=”commit” value=”Send delete request” />
</form>

1.2 JQuery code:

$(‘.form_example’).submit(function(e) {
  var $this = $(this);
  var form = $this;
  var data = form.serialize();

  // Prevent form form submit normally
  e.preventDefault();

  // Use ajax to submit the form
  $.post(form.attr(‘action’), data).done(function(data) {
  // If ajax request succeed, code goes here
  });
});

2. a form without ‘_method’ hidden field and use JQuery $.ajax method with ‘type’ set to ‘delete’:

2.1 form code:

<form action=”test url” accept-charset=”UTF-8″ method=”post” class=”form_example”>
  <label for=”Please_enter_the_username_that_you_want_to_delete:”>Please enter the username that you want to delete:  </label> 
  <input type=”text” name=”name” id=”name” /> 
  <input type=”submit” name=”commit” value=”Send delete request” />
</form>

2.2 JQuery code:

$(‘.form_example’).submit(function(e) {
  var $this = $(this);
  var form = $this;
  var data = form.serialize();

  // Prevent form form submit normally
  e.preventDefault();

  // Use ajax to submit the form
  $.ajax({
    type: ‘delete’,
    url: url,
    data: data,
    success: success,
    dataType: dataType
  });
});

D3 Donut Chart with Labels Using Angular Directive and Json Data (Example)

Running index.html, get the result:

1

 

 

priorityData.json:

{
“priority”:{
“Blocker”:12,
“Critical”:18,
“Major”:5,
“Minor”:30,
“Trivial”:24
}
}

index.html:

<!DOCTYPE html>
<html>
<head>

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js
http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-resource.min.js
http://d3js.org/d3.v3.min.js
</head>
<body ng-app=”grey” ng-controller=PriorityCtrl>

<priority-graph data=”priorityData”></priority-graph>

var grey = angular.module(‘grey’, [‘ngResource’]);

grey.factory(‘DataFac’,function($resource){
return $resource(‘count.json’,{});
});
grey.controller(‘PriorityCtrl’,function($scope,DataFac){

DataFac.get(function(response){
$scope.priorityData = response.priority;

})
});

grey.directive(‘priorityGraph’, function(){
function link(scope, el, attr){
// set the element
el = el[0];
var width=960,
height=500,
radius=Math.min(width,height)/2;

var color=d3.scale.ordinal().range([“rgb(166,60,48)”, “rgb(229,144,78)”, ” rgb(221,226,77)”, “rgb(157,211,72)”, “rgb(40,106,151)”]);

var arc=d3.svg.arc()
.outerRadius(radius-80)
.innerRadius(radius-150);

//watch data change from json
scope.$watch(‘data’, function(data){
if(!data){ return; }

//change json to two arrays for category and count
//count array
var countArr=[];
//category array
var categoryArr=[];
//total number of issues
var total=0;

for (key in data){
if(data.hasOwnProperty(key)){
categoryArr.push(key);
countArr.push(data[key]);
total+=data[key];
}
}

var pie=d3.layout.pie()
.sort(null)
.value(function(d){return d});

var svg=d3.select(el).append(“svg”)
.attr(“width”,width)
.attr(“height”,height)
.append(“g”)
.attr(“transform”,”translate(“+width/2+”,”+height/2+”)”);

var g=svg.selectAll(“.arc”)
.data(pie(countArr))
.enter().append(“g”)
.attr(“class”,”arc”);

//paint the grah
g.append(“path”)
.attr(“d”,arc)
.style(“fill”,function(d,i){return color(i);});

//paint the text
g.append(“text”)
.attr(“transform”,function(d){return “translate(“+arc.centroid(d)+”)”;})
.attr(“dy”,”.35em”)
.style(“text-anchor”,”middle”)
.text(function(d,i){return countArr[i]});

//paint total number in the middle of graph
g.append(“text”)
.attr(“dy”, “.35em”)
.style(“text-anchor”, “middle”)
.text(function(d) { return total+” tickets”; });

}, true);
}
return {
link: link,
restrict: ‘E’,
scope: { data: ‘=’ }
};
});

</body>
</html>

Front End Accessibility Development Guide

Header

  • Carefully write heading(h1,h2,h3) for screen reader.

Alternative Image

  • Provide alt text for both essential and functional images.
  • Provide empty alt text (alt=””) for decorative images.
  • Don’t repeat the alt text of an image in the adjacent text.
  • Define decorative image as CSS background images.
  • CSS be used instead of spacer images.

Labeling Form Elements

  • Must ensure the forms can be navigated and completed using keyboard.
  • Ensure “for” and “id” attributes are associated in the label and form element.
  • Use a fieldset to group several associated form elements such as checkboxes and radio buttons. Legend text should be visible and concise.
  • 1 

Use html buttons, input or button element for

  • submitting a form
  • Opening model dialogs
  • Dynamic page updates
  • 2 3