Search jQuery

jQuery Forum

Screen name:
artjom.fomenko

artjom.fomenko's Profile

3 Posts

5 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

jQuery slide panel
[1Reply]
- 18-Jun-2013 05:33 AM
- Forum: jQuery Mobile
I have a hidden menu, which is:
1. <div data-role="panel" id="menupanel" class="menu" data-display="push">
2. <ul data-role="listview" data-inset="true" data-theme="b" class="leftmenu">
3. <li data-role="list-divider" class="ui-bar-b">{{locale.Program}}</li>
4. <li data-icon="false"> <a href="#home" class="ui-state-persist">{{locale.Home}}</a> </li>
5. <li data-icon="false"> <a href="#about" class="ui-state-persist" >{{locale.About}}</a> </li>
6. <li data-icon="false"> <a href="#myContacts" class="activelink">{{locale.Contacts}}</a> </li>
7. <li data-role="list-divider" class="ui-bar-b">{{locale.Application}}</li>
8. <li data-icon="false"> <a href="#settings" class="ui-state-persist">{{locale.Settings}}</a> </li>
10. </ul>
11. </div>
Which is called out by pressing a button in my header:
<div id="header" data-role="header" data-position="fixed" data-theme="a" class="pageHeader">
<h1 class="ui-title-long page-title">{{title}}</h1>
<a href="#menupanel" data-role="none" class="header-btn-menu ui-btn-left">{{locale.Menu}}</a>
<div>

Problems:

1) Content and header flow away. For a second they place where they should be, but next second they flow away ( if i mannually add margin-left:-200px; they show up but this breaks all the effect ).

2) Footer doesn't move.

Menu hidden:

Menu opened:

Application scrolling
[0Replies]
- 17-Jun-2013 04:38 AM
- Forum: jQuery Mobile
Hello. I have a problem with jQuery on WP8 and need help.
1. <div data-role="page">
2. <div data-role="header" data-position="fixed">...</div>
3. <div data-role="content" id="test">
4. <ul data-role="listview" data-inset="true" id="news_list" class="list-default list-vendors list-bottom">
5. <li data-icon="false" class="list-row">
6. <a href="#article">
7. <div class="row">
8. <div class="title">
9. <h3>Pervij</h3>
10. <span class="address"></span>
11. </div>
12. <div class="side-right"></div>
13. </div>
14. </a>
15. </li>
16. <li data-icon="false" class="list-row">
17. <a href="#article">
18. <div class="row">
19. <div class="title">
20. <h3>Vtoroj</h3>
21. <span class="address"></span>
22. </div>
23. <div class="side-right"></div>
24. </div>
25. </a>
26. </li>
27. <li data-icon="false" class="list-row">
28. <a href="#article">
29. <div class="row">
30. <div class="title">
31. <h3>Tretij</h3>
32. <span class="address"></span>
33. </div>
34. <div class="side-right"></div>
35. </div>
36. </a>
37. </li>
38. <li data-icon="false" class="list-row">
39. <a href="#article">
40. <div class="row">
41. <div class="title">
42. <h3>Cetvertij</h3>
43. <span class="address"></span>
44. </div>
45. <div class="side-right"></div>
46. </div>
47. </a>
48. </li>
49. <li data-icon="false" class="list-row">
50. <a href="#article">
51. <div class="row">
52. <div class="title">
53. <h3>Pjatij</h3>
54. <span class="address"></span>
55. </div>
56. <div class="side-right"></div>
57. </div>
58. </a>
59. </li>
60. <li data-icon="false" class="list-row">
61. <a href="#article">
62. <div class="row">
63. <div class="title">
64. <h3>Sestoj</h3>
65. <span class="address"></span>
66. </div>
67. <div class="side-right"></div>
68. </div>
69. </a>
70. </li>
71. <li data-icon="false" class="list-row">
72. <a href="#article">
73. <div class="row">
74. <div class="title">
75. <h3>Sedmoj</h3>
76. <span class="address"></span>
77. </div>
78. <div class="side-right"></div>
79. </div>
80. </a>
81. </li>
82. <li data-icon="false" class="list-row">
83. <a href="#article">
84. <div class="row">
85. <div class="title">
86. <h3>Vosmoj</h3>
87. <span class="address"></span>
88. </div>
89. <div class="side-right"></div>
90. </div>
91. </a>
92. </li>
93. <li data-icon="false" class="list-row">
94. <a href="#article">
95. <div class="row">
96. <div class="title">
97. <h3>Pervij</h3>
98. <span class="address"></span>
99. </div>
100. <div class="side-right"></div>
101. </div>
102. </a>
103. </li>
104. <li data-icon="false" class="list-row">
105. <a href="#article">
106. <div class="row">
107. <div class="title">
108. <h3>Vtoroj</h3>
109. <span class="address"></span>
110. </div>
111. <div class="side-right"></div>
112. </div>
113. </a>
114. </li>
115. <li data-icon="false" class="list-row">
116. <a href="#article">
117. <div class="row">
118. <div class="title">
119. <h3>Tretij</h3>
120. <span class="address"></span>
121. </div>
122. <div class="side-right"></div>
123. </div>
124. </a>
125. </li>
126. <li data-icon="false" class="list-row">
127. <a href="#article">
128. <div class="row">
129. <div class="title">
130. <h3>Cetvertij</h3>
131. <span class="address"></span>
132. </div>
133. <div class="side-right"></div>
134. </div>
135. </a>
136. </li>
137. <li data-icon="false" class="list-row">
138. <a href="#article">
139. <div class="row">
140. <div class="title">
141. <h3>Pjatij</h3>
142. <span class="address"></span>
143. </div>
144. <div class="side-right"></div>
145. </div>
146. </a>
147. </li>
148. <li data-icon="false" class="list-row">
149. <a href="#article">
150. <div class="row">
151. <div class="title">
152. <h3>Sestoj</h3>
153. <span class="address"></span>
154. </div>
155. <div class="side-right"></div>
156. </div>
157. </a>
158. </li>
159. <li data-icon="false" class="list-row">
160. <a href="#article">
161. <div class="row">
162. <div class="title">
163. <h3>Sedmoj</h3>
164. <span class="address"></span>
165. </div>
166. <div class="side-right"></div>
167. </div>
168. </a>
169. </li>
170. <li data-icon="false" class="list-row">
171. <a href="#article">
172. <div class="row">
173. <div class="title">
174. <h3>Vosmoj</h3>
175. <span class="address"></span>
176. </div>
177. <div class="side-right"></div>
178. </div>
179. </a>
180. </li>
181. </ul>
182. </div>
183. <div data-role="footer" data-position="fixed">...</div>
184. </div>
Code looks like this, just an example.
When i want to scroll the content the whole app goes after my finger... I think its called bounce.

-ms-touch-action: none;
This wont do... because then when i scroll the element they start to open, the phone doesnt recognize when i scroll and when i tap

1px gap after footer
[5Replies]
- 10-Jun-2013 06:06 AM
- Forum: jQuery Mobile
Hello, i need a little help with footer.

here is my code for footer:
1. <div data-role="footer" data-position="fixed" data-theme="b">
2. <div class="footer">
3. <div class="seablue"></div>
4. <div class="red"></div>
5. <div class="gold"></div>
6. <div class="blue"></div>
7. </div>
8. </div>
And you can notice the 1px gap after:
How to get it out, tried to do this with footer:

margin-bottom: -1px
padding-bottom: -1px

but it seems it doesn't help,...

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend