| C:\vivek\jquerymobile\netbeansEx\vivekmras\web\fixedheadermultiple.html |
1 <html>
2 <head>
3 <title>vivekmras.webhostingbuilders.com</title>
4 <meta name="viewport" content="width=device-width,user-scalable=no">
5 <script src="viscpt.js"></script>
6 <style>
7 #fixhed{
8
9 position: fixed;
10 width: 100%;
11 height: 40px;
12 top: 0px;
13 -webkit-margin-before: 0em;
14 display: block;
15 }
16
17 #fixhed td{
18 width: 10%;
19 height: 40px;
20 }
21 .ui-content .ui-listview, .ui-panel-inner>.ui-listview {
22 margin: 0px;
23 }
24 .maincont {
25 position: relative;
26 }
27 .secHead{
28 position: absolute;
29 }
30 .subHead{
31 height: 20px;
32 }
33
34 .headerpersist {
35 position: fixed !important;
36 margin: auto;
37 z-index:1000;
38 top: 0px;
39 }
40 </style>
41 </head>
42 <body>
43
44 <div style="text-align: center;"><div style="position:relative; top:0; margin-right:auto;margin-left:auto; z-index:99999"></div></div>
45 <div data-role="content">
46 <ul data-role="listview" data-divider-theme="d">
47 <li data-role="list-divider" id="fhm1" class="maincont"><div class="subHead"><div id="secondary1" class="secHead">Mail</div></div></li>
48 <li><a href="#">Inbox</a></li>
49 <li><a href="#">Outbox</a></li>
50 <li data-role="list-divider" id="fhm2" class="maincont"><div class="subHead"><div id="secondary2" class="secHead">Contacts</div></div></li>
51 <li><a href="#">Friends</a></li>
52 <li><a href="#">Work</a></li>
53 </ul>
54
55 <p>
56 Adding Back buttons
57
58 jQuery Mobile has a feature to automatically create and append "back" buttons to any header, though it is disabled by default. This is primarily useful in chromeless installed applications, such as those running in a native app webview. The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true. This can also be set via markup if the page div has a data-add-back-btn="true" attribute.
59
60 If you use the attribute data-rel="back" on an anchor, any clicks on that anchor will mimic the back button, going back one history entry and ignoring the anchor's default href. This is particularly useful when linking back to a named page, such as a link that says "home", or when generating "back" buttons with JavaScript, such as a button to close a dialog. When using this feature in your source markup, be sure to provide a meaningful href that actually points to the URL of the referring page. This will allow the feature to work for users in C-Grade browsers.
61
62 If you just want a reverse transition without actually going back in history, you should use the data-direction="reverse" attribute.
63 </p>
64
65 </div>
66 <script>
67 var x4=0;
68 if(x4==0){
69 var lastY;
70 document.addEventListener('touchmove', function(event) {
71
72 event.preventDefault();
73 var currentY = event.touches[0].clientY;
74 if(currentY > lastY){
75
76 x4= x4+1;
77 }else{
78
79 x4= x4+1;
80 }
81 console.log("x2="+x4);
82 lastY = currentY;
83 });
84 }else{
85 event.preventDefault();
86 }
87 $( window ).on( "orientationchange", function( event ) {
88
89 });
90 window.onresize = resize;
91 function resize()
92 {
93 console.log("resize");
94 $.mobile.silentScroll(0);
95 var x3=0;
96 if(x3==0){
97 var lastY;
98 document.addEventListener('touchmove', function(event) {
99
100 event.preventDefault();
101 var currentY = event.touches[0].clientY;
102 if(currentY > lastY){
103 window.scrollBy(0,-6);
104 x3= x3+1;
105 }else{
106 window.scrollBy(0,6);
107 x3= x3+1;
108 }
109 console.log("x2="+x3);
110 lastY = currentY;
111 });
112 }else{
113 event.preventDefault();
114 }
115 }
116
117 function addclass(add, idname, classtoadd){
118 if(add){
119 if((document.getElementById(idname).className).indexOf(classtoadd) == '-1'){
120 document.getElementById(idname).className +=' '+ classtoadd;
121 }
122 }
123 }
124
125 function removeclass(remove, idname, classtoremove){
126 if(remove){
127
128 document.getElementById(idname).className = document.getElementById(idname).className.replace(new RegExp('\\b' + classtoremove + '\\b'),'');
129 }
130 }
131
132 document.addEventListener('scroll', function (event) {
133 event.preventDefault();
134 var ele = document.getElementById("fhm1");
135 var x = 0;
136 while(ele){
137 x += ele.offsetTop;
138 ele = ele.offsetParent;
139 }
140 console.log("x="+x);
141 if(document.body.scrollTop > (x+3)){
142 addclass(true, 'secondary1','headerpersist');
143
144 }
145 if(document.body.scrollTop < (x+3)){
146 removeclass(true, 'secondary1','headerpersist');
147 }
148
149 var ele1 = document.getElementById("fhm2");
150 var x1 = 0;
151 while(ele1){
152 x1 += ele1.offsetTop;
153 ele1 = ele1.offsetParent;
154 }
155 console.log("x1="+x1);
156 if(document.body.scrollTop > (x1-30)){
157 removeclass(true, 'secondary1','headerpersist');
158 }
159 if(document.body.scrollTop > (x1+3)){
160 addclass(true, 'secondary2','headerpersist');
161
162 }
163 if(document.body.scrollTop < (x1+3)){
164 removeclass(true, 'secondary2','headerpersist');
165 }
166
167 });
168
169 </script>
170 </body>
171
172 </html>
173
174
|
No comments:
Post a Comment