html box width and height setting
<div id="content" style="width:100%;">
<div style="border:solid 1px black; height:200px; width:69%; margin:auto;margin-top:60px;">
<span style="width:100% ; margin-left:2px; float:left;height:20px; color:white; background-color:rgb(67,120,182); margin-bottom:0;">Employee Email Listing</span>
<table border="1" STYLE="float:clear; width:100%">
<tr>
<th style="width:80%;">Employee Email</th>
<th style="width:20%;"></th>
</tr>
<tr style="height:20px">
<td>someOne@email.com</td>
<td></td>
</tr>
</table>
</div>
</div>
It is my Computer Notes. Using Guide : object-key or object-key-key e.g. Step 1 Blog Search : [mysql-run] and then Step 2 ctrl+F [mysql-run] {bookMark me : Ctrl+D}
2013年7月31日 星期三
html label example eg sample e.g. memo input
label example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||||||||||||
<html xmlns="http://www.w3.org/1999/xhtml"> | ||||||||||||
<head> | ||||||||||||
<meta http-equiv="Content-Type" content="text/html;charset=big5" /> | ||||||||||||
<title>SAMPLE</title> | ||||||||||||
<style type="text/css"> | ||||||||||||
#myform label {display: block; | ||||||||||||
width: 100px; | ||||||||||||
float: left; | ||||||||||||
font-size: 0.875em;}
| ||||||||||||
</style>
| ||||||||||||
</head>
| ||||||||||||
<body> | ||||||||||||
<form method="post" action="#" id="myform"> | ||||||||||||
<p> | ||||||||||||
<label for="user" >姓名</label> | ||||||||||||
<input type="text" id="user" name="username" /> | ||||||||||||
</p> | ||||||||||||
<p> | ||||||||||||
<label for="mail" >電子郵件信箱</label> | ||||||||||||
<input type="text" id="mail" name="mailaddress" /> | ||||||||||||
</p> | ||||||||||||
<p> | ||||||||||||
<label for="com" >留言內容</label>
<!--long test memo field inut textarea--> | ||||||||||||
<textarea id="com" name="comment" cols="40" rows="8"></textarea> | ||||||||||||
</p> | ||||||||||||
<p><input type="submit" value="傳送" id="submit" /></p> | ||||||||||||
</form> | ||||||||||||
</body> | ||||||||||||
</html> | ||||||||||||
2013年7月30日 星期二
html return to history
<FORM><INPUT Type="button" VALUE="Back" onClick="history.go(-1);return true;"></FORM>
html dynamic height (ibm website)
http://pic.dhe.ibm.com/infocenter/rbdhelp/v8r5m0/index.jsp?topic=%2Fcom.ibm.egl.lr.doc%2Ftopics%2Fregl_core_str_format_number.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highstock API Reference</title>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css"/>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css" />
<link
href="http://api.highcharts.com/resources/css/themes/base/jquery.ui.all.css"
rel="stylesheet" type="text/css" />
<link href="http://api.highcharts.com/resources/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="http://api.highcharts.com/resources/js/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.widget.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.position.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.autocomplete.min.js"
type="text/javascript"></script>
<script type="text/javascript">
var PRODUCTNAME = 'Highstock'.toLowerCase();
var RESOURCE = "http://api.highcharts.com";
$(function() {
function updateHeight() {
var height = $(window).height() - $('#top').height();
$("#wrapper").height(height);
$("#nav-wrap").height(height);
$("#details-wrap").height(height);
};
updateHeight();
$(window).resize(updateHeight);
// Make the Highcharts/Highstock links dynamic
$('#highstock-link, #highcharts-link').click(function () {
this.href += location.hash;
});
// Login shortcut (hot corner)
$("<div>")
.css({
position: 'absolute',
display: 'block',
width: '10px',
height: '10px',
right: 0,
cursor: 'pointer'
})
.click(function () {
$.getScript('http://code.jquery.com/ui/1.8.16/jquery-ui.min.js', function () {
$('<iframe src="http://api.highcharts.com/auth/login">').dialog({
height: 300
});
});
})
.appendTo('#top');
});
</script>
<script src="http://api.highcharts.com/resources/js/ref.js"
type="text/javascript"></script>
</head>
<body>
<div id="top">
<!--
<ul>
<li><a id="highcharts-link" href="http://api.highcharts.com/highcharts">Highcharts</a></li>
<li><a id="highstock-link" href="http://api.highcharts.com/highstock">Highstock</a></li>
</ul>
-->
<a href="http://www.highcharts.com" title="Highcharts Home Page" id="logo"><img
alt="Highcharts Home Page"
src="http://api.highcharts.com/resources/images/Highcharts-icon-160px.png"
border="0"></a>
<h1>Highstock Options Reference</h1>
</div>
<div id="wrapper">
<div id="nav-wrap">
<div id="nav">
<div class="ui-widget" id="search-div">
<!-- label for="search">Search:</label -->
<input id="search" />
</div>
<div class="nav-section">
<h3 id="options-header">Configuration options</h3>
<p class="subheader">For initial declarative chart setup. View as <a class="dump" href="http://api.highcharts.com/highstock/option/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/option/dump.xml">XML</a>.</p>
<div id="global-options-tree">
<code>Highcharts.setOptions({</code>
<div id="global-options" class="tree"></div>
<code>});</code>
</div>
<div id="options-tree">
<code>$("#container").highcharts("StockChart", {</code>
<div id="options" class="tree"></div>
<code>});</code>
</div>
</div>
<div class="nav-section">
<h3>Methods and properties</h3>
<p class="subheader">For dynamically modifying the chart. View as <a class="dump" href="http://api.highcharts.com/highstock/object/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/object/dump.xml">XML</a>. </p>
<div id="methods-and-properties-toc"></div>
<div id="objects-tree">
<div id="objects" class="tree"></div>
</div>
</div>
</div>
</div>
<div id="details-wrap">
<div id="details"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Highstock API Reference</title>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css"/>
<link href="http://api.highcharts.com/resources/css/ref.css" rel="stylesheet"
type="text/css" />
<link
href="http://api.highcharts.com/resources/css/themes/base/jquery.ui.all.css"
rel="stylesheet" type="text/css" />
<link href="http://api.highcharts.com/resources/images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<script src="http://api.highcharts.com/resources/js/jquery-1.7.1.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.core.min.js"
type="text/javascript"></script>
<script src="http://api.highcharts.com/resources/js/ui/jquery.ui.widget.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.position.min.js"
type="text/javascript"></script>
<script
src="http://api.highcharts.com/resources/js/ui/jquery.ui.autocomplete.min.js"
type="text/javascript"></script>
<script type="text/javascript">
var PRODUCTNAME = 'Highstock'.toLowerCase();
var RESOURCE = "http://api.highcharts.com";
$(function() {
function updateHeight() {
var height = $(window).height() - $('#top').height();
$("#wrapper").height(height);
$("#nav-wrap").height(height);
$("#details-wrap").height(height);
};
updateHeight();
$(window).resize(updateHeight);
// Make the Highcharts/Highstock links dynamic
$('#highstock-link, #highcharts-link').click(function () {
this.href += location.hash;
});
// Login shortcut (hot corner)
$("<div>")
.css({
position: 'absolute',
display: 'block',
width: '10px',
height: '10px',
right: 0,
cursor: 'pointer'
})
.click(function () {
$.getScript('http://code.jquery.com/ui/1.8.16/jquery-ui.min.js', function () {
$('<iframe src="http://api.highcharts.com/auth/login">').dialog({
height: 300
});
});
})
.appendTo('#top');
});
</script>
<script src="http://api.highcharts.com/resources/js/ref.js"
type="text/javascript"></script>
</head>
<body>
<div id="top">
<!--
<ul>
<li><a id="highcharts-link" href="http://api.highcharts.com/highcharts">Highcharts</a></li>
<li><a id="highstock-link" href="http://api.highcharts.com/highstock">Highstock</a></li>
</ul>
-->
<a href="http://www.highcharts.com" title="Highcharts Home Page" id="logo"><img
alt="Highcharts Home Page"
src="http://api.highcharts.com/resources/images/Highcharts-icon-160px.png"
border="0"></a>
<h1>Highstock Options Reference</h1>
</div>
<div id="wrapper">
<div id="nav-wrap">
<div id="nav">
<div class="ui-widget" id="search-div">
<!-- label for="search">Search:</label -->
<input id="search" />
</div>
<div class="nav-section">
<h3 id="options-header">Configuration options</h3>
<p class="subheader">For initial declarative chart setup. View as <a class="dump" href="http://api.highcharts.com/highstock/option/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/option/dump.xml">XML</a>.</p>
<div id="global-options-tree">
<code>Highcharts.setOptions({</code>
<div id="global-options" class="tree"></div>
<code>});</code>
</div>
<div id="options-tree">
<code>$("#container").highcharts("StockChart", {</code>
<div id="options" class="tree"></div>
<code>});</code>
</div>
</div>
<div class="nav-section">
<h3>Methods and properties</h3>
<p class="subheader">For dynamically modifying the chart. View as <a class="dump" href="http://api.highcharts.com/highstock/object/dump.json">JSON</a>, <a class="dump" href="http://api.highcharts.com/highstock/object/dump.xml">XML</a>. </p>
<div id="methods-and-properties-toc"></div>
<div id="objects-tree">
<div id="objects" class="tree"></div>
</div>
</div>
</div>
</div>
<div id="details-wrap">
<div id="details"></div>
</div>
</div>
</body>
</html>
highchart highstock add / destroy series from click button
add series from click button
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/
$(function() {
$('#container').highcharts('StockChart', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
selected: 1
},
series: [{
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
});
});
Destroy a chart
$(function() {
$('#container').highcharts('StockChart', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
selected: 1
},
series: [{
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
});
});
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/members/chart-addseries/
$(function() {
$('#container').highcharts('StockChart', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
selected: 1
},
series: [{
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
});
});
Destroy a chart
$(function() {
$('#container').highcharts('StockChart', {
scrollbar: {
enabled: true
},
navigator: {
enabled: true
},
rangeSelector: {
selected: 1
},
series: [{
name: 'MSFT',
data: MSFT
}]
});
$('#button').click(function() {
var chart = $('#container').highcharts();
chart.addSeries({
name: 'ADBE',
data: ADBE
});
$(this).attr('disabled', true);
});
});
html ul li e.g. example eg sample
to css page header
<ul id=:"nav">
<li><a href="home.html">home</a>,/li>
<li><a href="about.html">About Us</a>,/li>
<li><a href="product.html">Our Product</a>,/li>
</ul>
no . style
ul#nav,ul#nav li{
list-style:none;
margin:0;
padding:0;
}
on a line style
ul#nav,ul#nav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
Button style
ul#nav{
font-family:aaaaa;
font-size:.82em;
background-color:#DDD;
}
ul#nav li a{
border: 1px solid #000;
display:block;
float:left;
padding: 3px;
}
<ul id=:"nav">
<li><a href="home.html">home</a>,/li>
<li><a href="about.html">About Us</a>,/li>
<li><a href="product.html">Our Product</a>,/li>
</ul>
no . style
ul#nav,ul#nav li{
list-style:none;
margin:0;
padding:0;
}
on a line style
ul#nav,ul#nav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
Button style
ul#nav{
font-family:aaaaa;
font-size:.82em;
background-color:#DDD;
}
ul#nav li a{
border: 1px solid #000;
display:block;
float:left;
padding: 3px;
}
html a record eg sample example call href html-window iframe a-record
arecord
<li><a href="home.html" style="text-decoration:none;">home</a></li>
arecord change iFrame
arecord with image icon jpg
<a href="menu2.jsp?menu=menu6&http=welcome.jsp">
<img border="0" style="float:right;" src="images/Home-icon.png" width="30" height="30">
</a>
arecord with button
<a href="input.jsp?input=payrollEntryList.txt&config=payrollEntryListConfig.txt&mode=LIST"> <button style="float:right;">X</button>
</a>
click-or-dbclick open new window or not
<a href="#" onclick="window.open('http://google.com/', '_blank')">Go_blank</a>;
<a href="#" onclick="window.open('http://google.com/', '_self')">Go_Self</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_blank')">dblclick Go_blank</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_self')">dblclick Go_Self</a>;
click-href
<button style=" " class="formButton" type="button" onclick="location.href='/hr/ir56b.zip'">test1</button>
<li><a href="home.html" style="text-decoration:none;">home</a></li>
arecord change iFrame
<p>Click on link bellow to change iframe content:</p>
<a href="http://www.bing.com" target="search_iframe">Bing</a> -
<a href="http://en.wikipedia.net" target="search_iframe">Wikipedia</a> -
<a href="http://google.com" target="search_iframe">Google</a> (not allowed in inframe)
<iframe src="http://en.wikipedia.net" width="100%" height="100%" name="search_iframe"></iframe>
arecord with image icon jpg
<a href="menu2.jsp?menu=menu6&http=welcome.jsp">
<img border="0" style="float:right;" src="images/Home-icon.png" width="30" height="30">
</a>
arecord with button
<a href="input.jsp?input=payrollEntryList.txt&config=payrollEntryListConfig.txt&mode=LIST"> <button style="float:right;">X</button>
</a>
click-or-dbclick open new window or not
<a href="#" onclick="window.open('http://google.com/', '_blank')">Go_blank</a>;
<a href="#" onclick="window.open('http://google.com/', '_self')">Go_Self</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_blank')">dblclick Go_blank</a>;
<a href="#" ondblclick="window.open('http://google.com/', '_self')">dblclick Go_Self</a>;
click-href
<button style=" " class="formButton" type="button" onclick="location.href='/hr/ir56b.zip'">test1</button>
css selector eg sample example css-selector
http://hongkong2000.freehostia.com/html/css0.html
selector {property : value}
[lang] [rel] [href]
:hover, :visited, :first-child
li.active
Attribute Selector :
input [type="text"]{color:#000; font-size:12px; font-family:}
input[type="text"] {font-size:<%=FontSize%>;}
p[lang="fr"]
html: <p lang="fr" class="className">
p[lang~="fr"]
html: <p lang="fr" class="className">
html: <p lang="la sp fr" class="className">
p[lang |= "en"]
html: <p lang="en" class="className">
html: <p lang="en-US" class="className">
Type Selector :
body {color:#000; font-size:12px; font-family:}
h1{color:red}
Universal Selector : * {color : #000}
Descendant Selectors :
<p> I just <em> Love </em> emphasis</p>
<ul><li>I just <em> Love </em> emphasis</li></ul>
em {text-transform: uppercase;}
ul em {text-transform: uppercase;}
Class Selector :
input.box{border:1px solid #000;}
.text{}
.box{}
id Selectors :
#page-title{}
Child Selectors :
body p {}
Group Selectors :
h1 , h2 ,h3 {}
#content, #footer, #supplement{}
http://www.w3schools.com/cssref/css_selectors.asp
selector {property : value}
[lang] [rel] [href]
:hover, :visited, :first-child
li.active
Attribute Selector :
input [type="text"]{color:#000; font-size:12px; font-family:}
input[type="text"] {font-size:<%=FontSize%>;}
p[lang="fr"]
html: <p lang="fr" class="className">
p[lang~="fr"]
html: <p lang="fr" class="className">
html: <p lang="la sp fr" class="className">
p[lang |= "en"]
html: <p lang="en" class="className">
html: <p lang="en-US" class="className">
Type Selector :
body {color:#000; font-size:12px; font-family:}
h1{color:red}
Universal Selector : * {color : #000}
Descendant Selectors :
<p> I just <em> Love </em> emphasis</p>
<ul><li>I just <em> Love </em> emphasis</li></ul>
em {text-transform: uppercase;}
ul em {text-transform: uppercase;}
Class Selector :
input.box{border:1px solid #000;}
.text{}
.box{}
id Selectors :
#page-title{}
Child Selectors :
body p {}
Group Selectors :
h1 , h2 ,h3 {}
#content, #footer, #supplement{}
http://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
Selector | Example | Example description | CSS |
---|---|---|---|
.class | .intro | Selects all elements with class="intro" | 1 |
#id | #firstname | Selects the element with id="firstname" | 1 |
* | * | Selects all elements | 2 |
element | p | Selects all <p> elements | 1 |
element,element | div,p | Selects all <div> elements and all <p> elements | 1 |
element element | div p | Selects all <p> elements inside <div> elements | 1 |
element>element | div>p | Selects all <p> elements where the parent is a <div> element | 2 |
element+element | div+p | Selects all <p> elements that are placed immediately after <div> elements | 2 |
[attribute] | [target] | Selects all elements with a target attribute | 2 |
[attribute=value] | [target=_blank] | Selects all elements with target="_blank" | 2 |
[attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" | 2 |
[attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" | 2 |
:link | a:link | Selects all unvisited links | 1 |
:visited | a:visited | Selects all visited links | 1 |
:active | a:active | Selects the active link | 1 |
:hover | a:hover | Selects links on mouse over | 1 |
:focus | input:focus | Selects the input element which has focus | 2 |
:first-letter | p:first-letter | Selects the first letter of every <p> element | 1 |
:first-line | p:first-line | Selects the first line of every <p> element | 1 |
:first-child | p:first-child | Selects every <p> element that is the first child of its parent | 2 |
:before | p:before | Insert content before the content of every <p> element | 2 |
:after | p:after | Insert content after every <p> element | 2 |
:lang(language) | p:lang(it) | Selects every <p> element with a lang attribute equal to "it" (Italian) | 2 |
element1~element2 | p~ul | Selects every <ul> element that are preceded by a <p> element | 3 |
[attribute^=value] | a[src^="https"] | Selects every <a> element whose src attribute value begins with "https" | 3 |
[attribute$=value] | a[src$=".pdf"] | Selects every <a> element whose src attribute value ends with ".pdf" | 3 |
[attribute*=value] | a[src*="w3schools"] | Selects every <a> element whose src attribute value contains the substring "w3schools" | 3 |
:first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent | 3 |
:last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent | 3 |
:only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent | 3 |
:only-child | p:only-child | Selects every <p> element that is the only child of its parent | 3 |
:nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent | 3 |
:nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child | 3 |
:nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child | 3 |
:last-child | p:last-child | Selects every <p> element that is the last child of its parent | 3 |
:root | :root | Selects the document’s root element | 3 |
:empty | p:empty | Selects every <p> element that has no children (including text nodes) | 3 |
:target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) | 3 |
:enabled | input:enabled | Selects every enabled <input> element | 3 |
:disabled | input:disabled | Selects every disabled <input> element | 3 |
:checked | input:checked | Selects every checked <input> element | 3 |
:not(selector) | :not(p) | Selects every element that is not a <p> element | 3 |
::selection | ::selection | Selects the portion of an element that is selected by a user | 3 |
css overflow html example
overflow-x,
overflow-y
W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.
Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE.
In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘auto’).
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....
All browsers seem to further reduce the number of combinations giving different results:
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.
Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:
visible,visible
hidden,hidden
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden; visible,hidden (2 combinations)
hidden,scroll; hidden,visible (2 combinations)
In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:
visible,visible
hidden,hidden; visible,hidden; hidden,visible (3 combinations)
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden
hidden,scroll
overflow-y
W3C CSS3 working draft: The 'overflow-x' and 'overflow-y' properties.
Partially supported in Gecko 1.8, Safari 3, Opera 9.5, IE.
In all the following test cases the green box has fixed dimensions (80px × 80px, with padding 9px, border 10px.) The blue bar (width 119px, border 1px) should overflow at the right, and the red one (height 119px, border 1px) at the bottom. When one of the two properties is ‘auto’ there are four cases: two with only one overflowing bar at a time, one with both overflowing, one with no overflow (the third case should behave as with ‘scroll’ instead of ‘auto’).
According to the spec ... some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’ ....
All browsers seem to further reduce the number of combinations giving different results:
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
In IE7, IE8 ‘visible’ becomes ‘hidden’ when combined with ‘hidden’.
IE6 seems to render all combinations differently, but of course here ‘visible’ means ‘expand’ the box (in the specified direction) to enclose the content.
Neglecting the cases with ‘auto’ (which depend on content), there are 9 (= 3 × 3) possible combinations of values of overflow-x and overflow-y, but only five distinct results in Gecko, Safari, Opera. These correspond to:
visible,visible
hidden,hidden
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden; visible,hidden (2 combinations)
hidden,scroll; hidden,visible (2 combinations)
In IE7, IE8 there are also the same five distinct results, but they correspond to a different grouping of values:
visible,visible
hidden,hidden; visible,hidden; hidden,visible (3 combinations)
scroll,scroll; visible,scroll; scroll,visible (3 combinations)
scroll,hidden
hidden,scroll
html window eg sample example
javascript window windows
function openNewWindow(url) { _top=_top*1+numWindows*20; _left=_left+20; numWindows += 1; parameters = "toolbar=0,scrollbars=0,location=0,statusbar=0,"+ "menubar=0,resizable=0,width=600,height=800,top = 1 ,left =650 "; var title = "Window #"+numWindows; myWindow=window.open(url,'','location=false,width=200,height=110'); myWindow.focus(); }
$("#ID").click(function() // click function
{ var _1="callHttp.jsp?KeyCode="+_lookup('InputValue'); openNewWindow(_1);
}
);
Open in same window
a link with button
<a href="input.jsp?input=payrollEntryList.txt&config=payrollEntryListConfig.txt&mode=LIST"><button class="SaveButton" style="float:right;">close</button></a>
Open in next window
<!DOCTYPE html> <html> <head> <script> function open_win() { window.open("http://www.w3schools.com"); } </script> </head> <body> <form> <input type="button" value="Open Window" onclick="open_win()"> </form> </body> </html>
html-checker html-check-box
checkbox readonly
onclick="return false;"
<div style="border:solid 1px black; width:100%; height:200px;">
<span class="interBoxHeader" style="">Employee Payroll Frequency</span>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left; width:20%;">
<input type="checkbox" id="weekly">
<label for="weekly">weekly</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="bi_weekly">
<label for="bi_weekly">BI Weekly</label>
</div>
</div>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left;width:20%;">
<input type="checkbox" id="Monthly">
<label for="Monthly">Monthly</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="Semi_Monthly">
<label for="Semi_Monthly">Semi Monthly</label>
</div>
</div>
<div style="clear:both; height:30px; width:100%; border:0px solid black;">
<div style="float:left;width:20%;">
<input type="checkbox" id="Quarterty">
<label for="Quarterty">Quarterty</label>
</div>
<div style="float:left;width:30%;">
<input type="checkbox" id="Semi_Quarterty">
<label for="Semi_Quarterty">Semi Quarterty</label>
</div>
<div style="float:left;">
<input type="checkbox" id="Annuality">
<label for="Annuality">Annuality</label>
</div>
</div>
</div>
2013年7月29日 星期一
css - layout template : multi setting 1,2,3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<%String contentHeight="700px";%>
<head>
<style type="text/css">
body {
background: url(images/bg.png) repeat;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
}
.boxH {width:100% ; margin-left:2px; float:left;height:20px; color:white;
background-color:rgb(67,120,182); margin-bottom:10px;
}
</STYLE>
</head>
<body>
<div style="height:20px; color:white; background-color:rgb(67,120,182); border: 1px white solid; margin:0;">
<span>Create Entries</span>
</div>
<div id="content" style="width:100%; margin-top:10px; ">
<div style="border:solid 1px black; height:<%=contentHeight%>; width:20%;float:left;">
<span class="boxH" style="">Payroll Setting</span>
</div>
<div style="border:solid 1px black; height:<%=contentHeight%>; width:79%;float:right;">
<span class="boxH" style="">Payroll Parameter</span>
<div style="float:left; border:solid 0px black; width:50%;margin: 0px 0;">
<div style=" height:500px;">
<div style="border:solid 1px black; width:100%; height:350px;">
</div>
<div style="border:solid 1px black; width:100%; height:300px;">
</div>
</div>
</div>
<div style="float:right; height:500px; border:solid 0px black; width:49%;margin: 0px 0;">
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<%String contentHeight="700px";%>
<head>
<style type="text/css">
body {
background: url(images/bg.png) repeat;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
text-align: left;
text-decoration: none;
}
.boxH {width:100% ; margin-left:2px; float:left;height:20px; color:white;
background-color:rgb(67,120,182); margin-bottom:10px;
}
</STYLE>
</head>
<body>
<div style="height:20px; color:white; background-color:rgb(67,120,182); border: 1px white solid; margin:0;">
<span>Create Entries</span>
</div>
<div id="content" style="width:100%; margin-top:10px; ">
<div style="border:solid 1px black; height:<%=contentHeight%>; width:20%;float:left;">
<span class="boxH" style="">Payroll Setting</span>
</div>
<div style="border:solid 1px black; height:<%=contentHeight%>; width:79%;float:right;">
<span class="boxH" style="">Payroll Parameter</span>
<div style="float:left; border:solid 0px black; width:50%;margin: 0px 0;">
<div style=" height:500px;">
<div style="border:solid 1px black; width:100%; height:350px;">
</div>
<div style="border:solid 1px black; width:100%; height:300px;">
</div>
</div>
</div>
<div style="float:right; height:500px; border:solid 0px black; width:49%;margin: 0px 0;">
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
<div style="border:solid 1px black; width:100%; height:200px;">
</div>
</div>
</div>
</div>
</body>
</html>
2013年7月28日 星期日
html-table-template eg sample example
This code can copy to your blog html
<div style="border:solid 1px black; height:200px; width:49%;float:left;">
<span style="width:100% ; margin-left:2px; float:left;height:20px; color:white; background-color:rgb(67,120,182); margin-bottom:0;">Update</span>
<table style="margin-top:20px;">
<colgroup>
<col span="1" style="width: 60%;"> <!-- column width -->
<col span="1" style="width: 40%;">
</colgroup>
<tr>
<td>key<td>
<td>value</td>
</tr>
</table>
<div style="border:solid 1px black; height:200px; width:49%;float:left;">
<span style="width:100% ; margin-left:2px; float:left;height:20px; color:white; background-color:rgb(67,120,182); margin-bottom:0;">Update</span>
<table style="margin-top:20px;">
<colgroup>
<col span="1" style="width: 60%;"> <!-- column width -->
<col span="1" style="width: 40%;">
</colgroup>
<tr>
<td>key<td>
<td>value</td>
</tr>
</table>
</div>
Update
key | value |
jquery each eg sample example
aMAs=[<%=CompareNo%>];
$.each(aMAs, function(i, ma) {
$.getJSON('ServletProgram?code='+cCODE+'&Type=ModeName &value='+ma+'&callback=?',
function(data) {
chart.addSeries( {type: 'line',name: xxx,yAxis: 0, data: data,dataGrouping: { units: groupingUnits} })
})}
);
$.each(aMAs, function(i, ma) {
$.getJSON('ServletProgram?code='+cCODE+'&Type=ModeName &value='+ma+'&callback=?',
function(data) {
chart.addSeries( {type: 'line',name: xxx,yAxis: 0, data: data,dataGrouping: { units: groupingUnits} })
})}
);
jquery resize html eg sample example
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
$(window).resize(function() { chart.setSize( $(document).width(), $(document).height()/2, false ); });
2013年7月27日 星期六
aspx example asp.net
http://youtu.be/w0gpUxOArZA
Login.aspx
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Login.aspx.vb" Inherits="BasicFormAuthVbWeb.Login" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>登入網頁</title>
<meta name="GEN-ERATOR" content="Microsoft Visual Studio .NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="新細明體">
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 13px; POSITION: absolute; TOP: 71px" runat="server">請輸入使用者的名稱:</asp:Label>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" style="Z-INDEX: 109; LEFT: 439px; POSITION: absolute; TOP: 107px" runat="server" ControlToValidate="txtPassword" Width="229px">務必輸入密碼不可以空白</asp:RequiredFieldValidator>
<asp:Label id="Label2" style="Z-INDEX: 102; LEFT: 13px; POSITION: absolute; TOP: 107px" runat="server">請輸入使用者的密碼:</asp:Label>
<asp:TextBox id="txtUserName" style="Z-INDEX: 103; LEFT: 202px; POSITION: absolute; TOP: 68px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:TextBox id="txtPassword" style="Z-INDEX: 104; LEFT: 202px; POSITION: absolute; TOP: 104px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:Button id="btnSubmit" style="Z-INDEX: 105; LEFT: 213px; POSITION: absolute; TOP: 180px" runat="server" Font-Size="12pt" Text="登入"></asp:Button>
<asp:Label id="Message" style="Z-INDEX: 106; LEFT: 13px; POSITION: absolute; TOP: 228px" runat="server" ForeColor="Red"></asp:Label>
<asp:CheckBox id="PersistentCookie" style="Z-INDEX: 107; LEFT: 74px; POSITION: absolute; TOP: 140px" runat="server" Font-Size="12pt" Text="永久性 Cookie:" TextAlign="Left"></asp:CheckBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 108; LEFT: 439px; POSITION: absolute; TOP: 71px" runat="server" ControlToValidate="txtUserName" Width="302px">務必輸入使用者名稱不可以空白</asp:RequiredFieldValidator><IMG style="Z-INDEX: 110; LEFT: 16px; POSITION: absolute; TOP: 7px" alt="" src="Images/Title1.jpg"></FONT>
</form>
</body>
</HTML>
Login.aspx.vb
Imports System.Web.Security
Public Class Login
Inherits System.Web.UI.Page
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents RequiredFieldValidator2 As System.Web.UI.WebControls.RequiredFieldValidator
Protected WithEvents Label2 As System.Web.UI.WebControls.Label
Protected WithEvents txtUserName As System.Web.UI.WebControls.TextBox
Protected WithEvents txtPassword As System.Web.UI.WebControls.TextBox
Protected WithEvents btnSubmit As System.Web.UI.WebControls.Button
Protected WithEvents Message As System.Web.UI.WebControls.Label
Protected WithEvents PersistentCookie As System.Web.UI.WebControls.CheckBox
Protected WithEvents RequiredFieldValidator1 As System.Web.UI.WebControls.RequiredFieldValidator
#Region " Web Form 設計工具產生的程式碼 "
'此呼叫為 Web Form 設計工具的必要項。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法呼叫為 Web Form 設計工具的必要項
'請勿使用程式碼編輯器來修改它。
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此加入要初始化頁面的使用者程式碼
End Sub
Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If ((txtUserName.Text = "章立民") And (txtPassword.Text = "iamalex") Or _
(txtUserName.Text = "周時恕") And (txtPassword.Text = "ilovemydaughter") Or _
(txtUserName.Text = "洪志豪") And (txtPassword.Text = "naturalplayer")) Then
' 將通過驗證之使用者重新導向至原來所要求的URL
FormsAuthentication.RedirectFromLoginPage(txtUserName.Text, PersistentCookie.Checked)
Else
Message.Text = "憑證資料錯誤,請再次嘗試!!"
End If
End Sub
End Class
Login.aspx
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="Login.aspx.vb" Inherits="BasicFormAuthVbWeb.Login" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>登入網頁</title>
<meta name="GEN-ERATOR" content="Microsoft Visual Studio .NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<FONT face="新細明體">
<asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 13px; POSITION: absolute; TOP: 71px" runat="server">請輸入使用者的名稱:</asp:Label>
<asp:RequiredFieldValidator id="RequiredFieldValidator2" style="Z-INDEX: 109; LEFT: 439px; POSITION: absolute; TOP: 107px" runat="server" ControlToValidate="txtPassword" Width="229px">務必輸入密碼不可以空白</asp:RequiredFieldValidator>
<asp:Label id="Label2" style="Z-INDEX: 102; LEFT: 13px; POSITION: absolute; TOP: 107px" runat="server">請輸入使用者的密碼:</asp:Label>
<asp:TextBox id="txtUserName" style="Z-INDEX: 103; LEFT: 202px; POSITION: absolute; TOP: 68px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:TextBox id="txtPassword" style="Z-INDEX: 104; LEFT: 202px; POSITION: absolute; TOP: 104px" runat="server" Font-Size="12pt"></asp:TextBox>
<asp:Button id="btnSubmit" style="Z-INDEX: 105; LEFT: 213px; POSITION: absolute; TOP: 180px" runat="server" Font-Size="12pt" Text="登入"></asp:Button>
<asp:Label id="Message" style="Z-INDEX: 106; LEFT: 13px; POSITION: absolute; TOP: 228px" runat="server" ForeColor="Red"></asp:Label>
<asp:CheckBox id="PersistentCookie" style="Z-INDEX: 107; LEFT: 74px; POSITION: absolute; TOP: 140px" runat="server" Font-Size="12pt" Text="永久性 Cookie:" TextAlign="Left"></asp:CheckBox>
<asp:RequiredFieldValidator id="RequiredFieldValidator1" style="Z-INDEX: 108; LEFT: 439px; POSITION: absolute; TOP: 71px" runat="server" ControlToValidate="txtUserName" Width="302px">務必輸入使用者名稱不可以空白</asp:RequiredFieldValidator><IMG style="Z-INDEX: 110; LEFT: 16px; POSITION: absolute; TOP: 7px" alt="" src="Images/Title1.jpg"></FONT>
</form>
</body>
</HTML>
Login.aspx.vb
Imports System.Web.Security
Public Class Login
Inherits System.Web.UI.Page
Protected WithEvents Label1 As System.Web.UI.WebControls.Label
Protected WithEvents RequiredFieldValidator2 As System.Web.UI.WebControls.RequiredFieldValidator
Protected WithEvents Label2 As System.Web.UI.WebControls.Label
Protected WithEvents txtUserName As System.Web.UI.WebControls.TextBox
Protected WithEvents txtPassword As System.Web.UI.WebControls.TextBox
Protected WithEvents btnSubmit As System.Web.UI.WebControls.Button
Protected WithEvents Message As System.Web.UI.WebControls.Label
Protected WithEvents PersistentCookie As System.Web.UI.WebControls.CheckBox
Protected WithEvents RequiredFieldValidator1 As System.Web.UI.WebControls.RequiredFieldValidator
#Region " Web Form 設計工具產生的程式碼 "
'此呼叫為 Web Form 設計工具的必要項。
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub
Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: 此方法呼叫為 Web Form 設計工具的必要項
'請勿使用程式碼編輯器來修改它。
InitializeComponent()
End Sub
#End Region
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'在此加入要初始化頁面的使用者程式碼
End Sub
Private Sub btnSubmit_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSubmit.Click
If ((txtUserName.Text = "章立民") And (txtPassword.Text = "iamalex") Or _
(txtUserName.Text = "周時恕") And (txtPassword.Text = "ilovemydaughter") Or _
(txtUserName.Text = "洪志豪") And (txtPassword.Text = "naturalplayer")) Then
' 將通過驗證之使用者重新導向至原來所要求的URL
FormsAuthentication.RedirectFromLoginPage(txtUserName.Text, PersistentCookie.Checked)
Else
Message.Text = "憑證資料錯誤,請再次嘗試!!"
End If
End Sub
End Class
tomcat servlet java web.xml example
https://developers.google.com/appengine/docs/java/config/webxml#Secure_URLs
Sample web.xml File
The following sample
web.xml
deployment descriptor shows how to declare the HelloServlet servlet in the HelloWorld Web application. See also Description of the web.xml File.<?xml version="1.0" encoding="ISO-8859-1" ?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> <display-name>HelloWorld Application</display-name> <description> This is a simple web application with a source code organization based on the recommendations of the Application Developer's Guide. </description> <servlet> <servlet-name>HelloServlet</servlet-name> <servlet-class>examples.Hello</servlet-class> </servlet> <servlet-mapping> <servlet-name>HelloServlet</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping> </web-app>
In the preceding
web.xml
deployment descriptor file, the <servlet>
XML element declares the HelloServlet
, the examples.Hello
Java class implements the servlet, and the <servlet-mapping>
XML element specifies the/hello
URL pattern that invokes the servlet in a browser. This URL pattern is used in the index.html
file.
訂閱:
文章 (Atom)