Hi ,
I am kinda new to jquery . I am making an application in which the second screen has two different UI depending upon device orientation.
Device- IPAD ,Language - jquery/jquery-mobile
How do i dynamically repaint the screen with new UI upon device orientation.
My jquery code is as follows :
<div data-role="page" id="calendar" >
<div data-role="content" id="calendar_content">
<script>
generateCalendarView();</script>
</div>
</div>
Above, I am calling my function generateCalendarView() from my content datarole.
This is my function :
var generateCalendarView = function() {
if(window.orientation == 90 || window.orientation == -90) {
document.write( "<div>"+
"<p style=\"text-align: center;\">"+
"<span style=\"font-size: x-large;\" data-mce-style=\"font-size: x-large;\">"+
"<label class=\"empName\" style=\"font-size:65%\"></label>"+
"<p style=\"text-align: center;\" data-mce-style=\"text-align: center;\">"+
"<span style=\"font-size: small; \">"+
"</div>");}
else {
document.write(
"<br>"+
"<div class=\"ui-grid-b\">"+
"<div class=\"ui-block-a\">"+
"<a data-role=\"button\" data-direction=\"reverse\" data-transition=\"slide\" data-theme=\"c\" href=\"#balance\">Balances</a>"+
"</div>"+
"<div class=\"ui-block-b\">"+
"<div>");
}
event.stopPropagation();
}
$(document).ready(function(){
$(window).bind(orientationEvent, generateCalendarView);
}).bind('load', generateCalendarView);
This is not rerendering the page , because I think in the Data-Role the function is being called only once.
How do i re-render the particular screen on orientation
Please guide.
Thanks a lot.
P.s - Please dont bother about what is inside the document.write as i have deleted the divs before publishing it here as it was a lot of code.