Changing the text of a button at runtime
If you are trying to update the value of a button at run time then create the button with
<input type = "button" id="total_time" value= "Time : 00.00" class="ui-btn-right">
but not with <a href="" data-role="button">
You get the below error
can not call method of button before initialization error.
Set the
<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" />
</div>
Grouping and dividing content
jQuery Mobile provides classes ui-bar and ui-body for subdividing and for visually grouping content.
Add class ui-bar to create a full-width heading or a separator between sections of content.
Additionally, classes ui-bar-[a-z] add the appropriate swatch from your theme.
Add class ui-body to visual group and/or emphasize a section of content.
Additionally, classes ui-body-[a-z] add the appropriate swatch from your theme.
<div id="are_you_lost" data-inline="true" align="center">
<h3 class="ui-bar ui-bar-b ui-corner-all" id="high_scrore_header">Are You Lost ?</h3>
<div class="ui-body ui-body-b ui-corner-all">
<p>There is a keyboard for you at upper right corner !
</br>Click it and start playing.</br></p>
</div>
</div>
Creating a DialogBox like Popup
<div id="success_dialog" data-position-to="window" data-role="popup" data-history="false" data-transition="flip">
<h3 class="ui-bar">Header </h3>
<div class="ui-body ui-body-b">
<p>This is a content
</br>This is a content</br>
</br>This is a content</br>
</br></p>
</div>
</div>
This is a better example
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>
</div>
</div>
Creating grouped button
You can group buttons together and put them together in fotter/header e.g
<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
<a href="quit.html" data-icon="delete" data-ajax="false" data-role="button">Quit</a>
<input type = "button" id="total_tries" value= "Tries : 0" >
</div>
Prevent ChangePage
-----------------
$(document).bind('pagebeforechange', function(e, data) {
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (from) from = '#' + from.attr('id');
if (from === '#page1' && to === '#page3') {
alert('Cannot change to page 3 from page 1');
e.preventDefault();
// remove active class on button
// otherwise button would remain highlighted
$.mobile.activePage
.find('.ui-btn-active')
.removeClass('ui-btn-active');
}
}
});
How to display a scrollbar in a div This is best way to display more informations in a Game
$(document).on("pageinit","#pageone",function(event){
var heightOfWindow = $(window).height();
var totalHeightOfContents = $(document).height();
if(heightOfWindow <= totalHeightOfContents){
var contentIDHeight = $('#content_id').height();
var infoDivIDHeight = $('#info').height();
var heightExcludingInfo = contentIDHeight - infoDivIDHeight;
var availableHeightForInfo = heightOfWindow - heightExcludingInfo;
var test = availableHeightForInfo - 420;
$('#info').height(test);
}
});
If you are trying to update the value of a button at run time then create the button with
<input type = "button" id="total_time" value= "Time : 00.00" class="ui-btn-right">
but not with <a href="" data-role="button">
You get the below error
can not call method of button before initialization error.
Set the
for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.<div data-role="fieldcontain">
<label for="password">Password Input:</label>
<input type="password" name="password" id="password" value="" />
</div>
Grouping and dividing content
jQuery Mobile provides classes ui-bar and ui-body for subdividing and for visually grouping content.
Add class ui-bar to create a full-width heading or a separator between sections of content.
Additionally, classes ui-bar-[a-z] add the appropriate swatch from your theme.
Add class ui-body to visual group and/or emphasize a section of content.
Additionally, classes ui-body-[a-z] add the appropriate swatch from your theme.
<div id="are_you_lost" data-inline="true" align="center">
<h3 class="ui-bar ui-bar-b ui-corner-all" id="high_scrore_header">Are You Lost ?</h3>
<div class="ui-body ui-body-b ui-corner-all">
<p>There is a keyboard for you at upper right corner !
</br>Click it and start playing.</br></p>
</div>
</div>
Creating a DialogBox like Popup
<div id="success_dialog" data-position-to="window" data-role="popup" data-history="false" data-transition="flip">
<h3 class="ui-bar">Header </h3>
<div class="ui-body ui-body-b">
<p>This is a content
</br>This is a content</br>
</br>This is a content</br>
</br></p>
</div>
</div>
This is a better example
<a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Delete page...</a>
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Delete</a>
</div>
</div>
You can group buttons together and put them together in fotter/header e.g
<div data-role="controlgroup" data-type="horizontal" class="ui-btn-left">
<a href="quit.html" data-icon="delete" data-ajax="false" data-role="button">Quit</a>
<input type = "button" id="total_tries" value= "Tries : 0" >
</div>
Prevent ChangePage
-----------------
$(document).bind('pagebeforechange', function(e, data) {
var to = data.toPage,
from = data.options.fromPage;
if (typeof to === 'string') {
var u = $.mobile.path.parseUrl(to);
to = u.hash || '#' + u.pathname.substring(1);
if (from) from = '#' + from.attr('id');
if (from === '#page1' && to === '#page3') {
alert('Cannot change to page 3 from page 1');
e.preventDefault();
// remove active class on button
// otherwise button would remain highlighted
$.mobile.activePage
.find('.ui-btn-active')
.removeClass('ui-btn-active');
}
}
});
How to display a scrollbar in a div This is best way to display more informations in a Game
$(document).on("pageinit","#pageone",function(event){
var heightOfWindow = $(window).height();
var totalHeightOfContents = $(document).height();
if(heightOfWindow <= totalHeightOfContents){
var contentIDHeight = $('#content_id').height();
var infoDivIDHeight = $('#info').height();
var heightExcludingInfo = contentIDHeight - infoDivIDHeight;
var availableHeightForInfo = heightOfWindow - heightExcludingInfo;
var test = availableHeightForInfo - 420;
$('#info').height(test);
}
});
