Skip to content

Commit be9d04a

Browse files
mrfrogcodermrfrogcoder
committed
Create testhtml
1 parent 15d0368 commit be9d04a

File tree

1 file changed

+169
-0
lines changed

1 file changed

+169
-0
lines changed

‎testhtml

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Accessibility Application</title>
6+
<style>
7+
.expander {
8+
width: 100%;
9+
}
10+
.expander .l-content {
11+
width: 70%;
12+
float: left;
13+
}
14+
.expander .r-content {
15+
width: 30%;
16+
float: left;
17+
}
18+
.expander .footer {
19+
clear: both;
20+
display: block;
21+
width: 100%;
22+
}
23+
.hello {
24+
background: green;
25+
color: white;
26+
}
27+
/* LINKS */
28+
.skip a:link, .skip a:visited, .skip a:link, .skip a:visited {
29+
color: #20399D;
30+
outline: 0;
31+
-webkit-transition: background-color .25s linear;
32+
transition: background-color .25s linear;
33+
}
34+
.skip a:active, .skip a:focus, .skip a:hover, .skip a:active, .skip a:focus, .skip a:hover {
35+
/* color: white !important;
36+
text-decoration: underline !important;
37+
background-color: #1f881c !important*/background-color: #ffffcc !important;
38+
color: #BF1722;
39+
border-top: 1px solid #ddd;
40+
border-bottom: 1px solid #ccc;
41+
outline: none;
42+
border-radius: 5px;
43+
}
44+
/* Flying focus */
45+
46+
/* Flying focus */
47+
#flying-focus {
48+
position: absolute;
49+
margin: 0;
50+
background: transparent;
51+
-webkit-transition-property: left, top, width, height, opacity;
52+
transition-property: left, top, width, height, opacity;
53+
-webkit-transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
54+
transition-timing-function: cubic-bezier(0, 0.2, 0, 1);
55+
visibility: hidden;
56+
pointer-events: none;
57+
box-shadow: 0 0 2px 3px #78aeda, 0 0 2px #78aeda inset;
58+
border-radius: 2px;
59+
}
60+
#flying-focus.flying-focus_visible {
61+
visibility: visible;
62+
z-index: 9999;
63+
}
64+
.flying-focus_target {
65+
outline: none !important; /* Doesn't work in Firefox :( */
66+
}
67+
/* http://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links/199319 */
68+
.flying-focus_target::-moz-focus-inner {
69+
border: 0 !important;
70+
}
71+
/* Replace it with @supports rule when browsers catch up */
72+
@media screen and (-webkit-min-device-pixel-ratio: 0) {
73+
#flying-focus {
74+
box-shadow: none;
75+
outline: 5px auto -webkit-focus-ring-color;
76+
outline-offset: -3px;
77+
}
78+
}
79+
.skip-navigation {
80+
display: block;
81+
}
82+
.positionDiv {
83+
position: absolute;
84+
width: 75px;
85+
height: 75px;
86+
background: green;
87+
display: none;
88+
}
89+
90+
.ui-tooltip, .arrow:after {
91+
background: black;
92+
border: 2px solid white;
93+
}
94+
.ui-tooltip {
95+
padding: 10px 20px;
96+
color: white;
97+
border-radius: 20px;
98+
font: bold 14px "Helvetica Neue", Sans-Serif;
99+
/*text-transform: uppercase;
100+
box-shadow: 0 0 7px black;*/
101+
102+
}
103+
104+
.arrow {
105+
width: 70px;
106+
height: 16px;
107+
overflow: hidden;
108+
position: absolute;
109+
left: 50%;
110+
margin-left: -35px;
111+
bottom: -16px;
112+
background: url(http://github.com/'http://usvhilshpd09.us.hsbc/_catalogs/masterpage/css/images/focus-indicator-top.fw.png') no-repeat center;
113+
}
114+
.arrow.top {
115+
top: -13px;
116+
bottom: auto;
117+
}
118+
.arrow.left {
119+
left: 20%;
120+
}
121+
.custom-tooltip-styling {
122+
background:green !important;
123+
border:none !important;
124+
font-size: 11px !important;
125+
color: #ffffff !important;
126+
font-weight:normal !important;
127+
}
128+
/* .arrow:after {
129+
content: "";
130+
position: absolute;
131+
left: 20px;
132+
top: -20px;
133+
width: 25px;
134+
height: 25px;
135+
box-shadow: 6px 5px 9px -9px black;
136+
-webkit-transform: rotate(45deg);
137+
-ms-transform: rotate(45deg);
138+
transform: rotate(45deg);
139+
}
140+
.arrow.top:after {
141+
bottom: -20px;
142+
top: auto;
143+
}*/
144+
</style>
145+
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
146+
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
147+
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
148+
<script src="apps.js"></script>
149+
</head>
150+
<body>
151+
152+
<div class="skip-navigation"> <a href="#" data-skip="navigation" data-accessibility-tooltip="I'm Navigation" title="Navigation">Navigation</a> <a href="#" data-skip="content" data-accessibility-tooltip="I'm content" title="Navigation">Content</a> <a href="#" data-skip="footer" title="Navigation" data-accessibility-tooltip="I'm Footer">Footer</a> </div>
153+
<div class="expander">
154+
<div data-accessibility-navigation="navigation"> <a href="#" data-accessibility-tooltip="High I'm Nav 1" title="Navigation">nav 1</a> <a href="#" title="Navigation">nav 2</a> <a href="#" title="Navigation">nav 3</a> <a href="#">nav 4</a> </div>
155+
<div class="l-content" data-accessibility-navigation="content">
156+
<p tabindex="0" data-accessibility-tooltip="I'm Navigation" title="Press ENTER to stop banner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae interdum ante. Etiam faucibus elit at diam sollicitudin suscipit. Aliquam nec sapien eu libero imperdiet lacinia a eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque leo felis, lobortis eleifend nunc tempus in. Donec eros augue, luctus maximus ante quis, iaculis consequat nisl. Fusce porta vulputate hendrerit. </p>
157+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<a href="#"> Etiam vitae interdum ante. Etiam faucibus elit at diam sollicitudin</a> suscipit. Aliquam nec sapien eu libero imperdiet lacinia a eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque leo felis, lobortis eleifend nunc tempus in. Donec eros augue, luctus maximus ante quis, iaculis consequat nisl. Fusce porta vulputate hendrerit. </p>
158+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae interdum ante. Etiam faucibus elit at diam sollicitudin suscipit. Aliquam nec sapien eu libero imperdiet lacinia a eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque leo felis, lobortis eleifend nunc tempus in. Donec eros augue, luctus maximus ante quis, iaculis consequat nisl. Fusce porta vulputate hendrerit. </p>
159+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae interdum ante. Etiam faucibus elit at diam sollicitudin suscipit. Aliquam nec sapien eu libero imperdiet lacinia a eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque leo felis, lobortis eleifend nunc tempus in. Donec eros augue, luctus maximus ante quis, iaculis consequat nisl. Fusce porta vulputate hendrerit. </p>
160+
</div>
161+
<div class="r-content">
162+
<p> <a href="#" title="Press ENTER to stop banner">nav 1</a> <a href="#">nav 2</a> <a href="#">nav 3</a> <a href="#">nav 4</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae interdum ante. Etiam faucibus elit at diam sollicitudin suscipit. Aliquam nec sapien eu libero imperdiet lacinia a eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras scelerisque leo felis, lobortis eleifend nunc tempus in. Donec eros augue, luctus maximus ante quis, iaculis consequat nisl. Fusce porta vulputate hendrerit. </p>
163+
</div>
164+
<div class="footer" data-accessibility-navigation="footer"> <a href="#" title="Press ENTER to stop banner">nav 1</a> <a href="#">nav 2</a> <a href="#">nav 3</a> <a href="#">nav 4</a> </div>
165+
</div>
166+
167+
168+
</body>
169+
</html>

0 commit comments

Comments
 (0)