In CSS, z-index is the property to control the 3D Z position of the element (for example DIV). This property is useful when you have element that has absolute or fixed position.
In the real work application, we use z-index for the date picker, time picker, numeric keypad, any popup list, prompt, etc.
Here is the find out:
1. If you set the z-index for the DIV, it works as expected. Not strange thing will happen in this simplest case.
<body>
<div class="container1">helo</div>
<body>
2.But, if you have the following structure, then, it might work unexpectedly.
First of all, if you set the z-index for the inner1 & inner2, the z-index is relative to container1. While container2 is relative to the body.
<body>
<div class="container1">Container 1
<div class="inner1">Inner 1</div>
<div class="inner2">Inner 2</div>
</div>
<div class="container2">Container 2
</div>
<body>
For example, you have the following settings for the z-index where the final output is container2 is always at the top that covers container1 and hence it covers inner1 and inner2.
container1 - z-index: 100
inner1 - z-index: 300
inner2 - z-index: 400
container2 - z-index: 200
All DIV elements have the following settings.
position: absolute;
top: 0;
left:0;
width:100px;
height:100px;
overflow:hidden;
Wednesday, 23 August 2017
Calculating age
Calculating age using moment.js is very simple:
var birth_date = new Date(1966,1,1)
var age = moment().diff(birth_date, 'years', true);
var birth_date = new Date(1966,1,1)
var age = moment().diff(birth_date, 'years', true);
Thursday, 17 August 2017
User interface with HTML+CSS+JS
Let's build the user interface with HTML+CSS+JS and then build the back end program with any web programming language (ASP.Net, PHP, etc) or objective-C for iOS.
This strategy decouple the front end and back end which leads to shorter development and higher customer satisfaction.
From the front end aspect:
Cheers!!
This strategy decouple the front end and back end which leads to shorter development and higher customer satisfaction.
From the front end aspect:
- We build the prototype in a shorter time.
- We build a back end program using Javascript that simulate the AJAX call between the front end and back end. This script does not rely on any database and web server. It will be loaded and running within the browser context. So, the AJAX call simulation does not required a complex development environment setup.
- The prototype can be build with any tool as simple as a text file editor + a browser to test the prototype.
- The user can "see' and "feel" the prototype. It's not talking on a "paper" and the user must "imagine" how it works.
- This prototype will be uploaded to any web server for discussion purpose.
- Now, we build a more stable front end regardless of which OS platform.
- It solves the problem with "installation".
- The back end can be built with any programming language (ASP.Net, PHP, etc) or Objective-C for iOS.
- The back end program should only provides the correct API for AJAX request and response.
- The back end program can be build parallel with the front end.
Cheers!!
Subscribe to:
Comments (Atom)