Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
Posts: 16
Registered: ‎04-05-2013
My Device: Blackberry 9780
My Carrier: None

Phonegap and Jquery Mobile application on Blackberry

Hello,

 

I have just started wroking on Jquery Mobile wrapped in phonegap for blackberry phones. I have a few screens with tabbars, navigation bars , collapsible lists etc.

 

The issue is with rendering the navigation bars which are included in the footer. There seems to be a lag while loading the pages and the navigation bars, they get all distorted and out of place but, after a few seconds fall back to the correct place. 

 

The  arrow images that appear with the lists are not displaying correctly. There is a box around these default images and icons. The page transitions are clumsy and the text boxes seem to be getting a blue wierd looking highlight around them.

 

All these issues do not occur on an Android phone.

 

Could someone please help me to fix these rendering issues.

 

Looking forward for any help.

 

Thanks a million in advance.

 

Regards.

Developer
Posts: 19,629
Registered: ‎07-14-2008
My Device: Not Specified

Re: Phonegap and Jquery Mobile application on Blackberry

I will ask for this to be moved to the correct forum:

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/bd-p/browser_dev

Trusted Contributor
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: Phonegap and Jquery Mobile application on Blackberry

Post your html and XML 

Contributor
Posts: 16
Registered: ‎04-05-2013
My Device: Blackberry 9780
My Carrier: None

Re: Phonegap and Jquery Mobile application on Blackberry

Thank you for the reply.

 

I have moved this question to the "Web and WebWorks Development forum". 

Contributor
Posts: 16
Registered: ‎04-05-2013
My Device: Blackberry 9780
My Carrier: None

Re: Phonegap and Jquery Mobile application on Blackberry

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />

<title>JQUERY MOBILE PG</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.js" ></script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script>
$(function() {
$( "#datepicker2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<style type="text/css">

.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 2px;
}

.ui-icon-phone1 {
background-image: url(images/phone1.png) !important;
background-size: 18px 18px;
}
.ui-icon-locate4 {
background-image: url(images/locate4.png) !important;
background-size: 18px 18px;
}
.ui-icon-chart2 {
background-image: url(images/chart2.png) !important;
background-size: 18px 18px;
}
.ui-corner-all{-moz-border-radius:.8em;-webkit-border-radius:.8em;border-radius:.8em}

.ui-body-b, .ui-overlay-b {
border: 1px solid #999;
background: #F3F3F3;
color: #222;
text-shadow: 0 1px 0 white;
font-weight: normal;
background-image: -webkit-gradient(linear,left top,left bottom,from( #DDD ),to( #f1f1f1 )); //This was #CCC
background-image: -webkit-linear-gradient( #DDD,#CCC );
background-image: -moz-linear-gradient( #DDD,#CCC );
background-image: -ms-linear-gradient( #DDD,#CCC );
background-image: -o-linear-gradient( #DDD,#CCC );
background-image: linear-gradient( #DDD,#CCC );
}

</style>
<script type="text/javascript">
function Call_Page()
{
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Page.html", { transition: "none"} );

}
</script>
<script type="text/javascript">
function Call_Forgot()
{
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Forgot.html", { transition: "none"} );
}
</script>
<script type="text/javascript">
function Save_onclick()
{
alert('Saved');
}
</script>
<script type="text/javascript">
function submitForm(){

var validator = $("#login").validate({
rules: {
username: "required",
Password: "required",

},
errorElement: "span" ,
messages: {
username: "<font color='red'> Enter your User Name</font>",
Password: "<font color='red'>Enter Password</font>",

}
});
if(validator.form()){ // validation perform

$('form#login').attr({action: 'mycontroller'});
$('form#login').submit();
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Ac_Page.html", { transition: "none"} );
}
}

</script>

 


</head>
<body>



<div data-role="page" >
<div data-role="header" >
<h4>Login</h4>

</div>

<div data-role="content" style="padding: 6px 6px 6px 6px;">

<form name="login" id="login" method="post" action="">
<center><img src="images/logo.png" ></center>

<br />
<br />

<div style="padding: 5px 5px 5px 5px;" data-corners="true" data-shadow="true" data-iconshadow="true" data-icon="null" data-iconpos="null" data-theme="a" class=" ui-body ui-body-b ui-corner-all">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding: 10px 10px 10px 10px;">
<tr>
<td>User ID</td>
<td><input type="text" name="username" id="username" value="" data-mini="true"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="Password" id="Password" value="" data-mini="true"/></td>
</tr>
<tr>
<td>Remember User ID</td>
<td><select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true">
<option value="off">Off</option>
<option value="on">On</option>
</select></td>
</tr>
</table>
</div>
<br >
<div style="padding: 0px 0px 0px 0px;" data-corners="true" data-shadow="true" padding="0px" data-iconshadow="true" data-icon="null" data-iconpos="null" data-theme="a" class=" ui-body ui-body-b ui-corner-all">
<a href="" data-role="button" data-theme="a" data-transition="none" data-ajax="false" onclick="submitForm();">Login</a>
</div>




<div>
<br /><center><label id="New_User" onclick="Call_Page();"><font color="blue">New ?</font></label></center> <br />
</div>

<div>
<center><label id="Forgot_User" onclick="Call_Forgot();"><font color="blue">Forgot ?</font></label></center>
</div>



</form> <!--form-->
</div><!--content-->

<div data-role="footer" data-theme="a" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="A.html" data-prefetch="true" data-transition="none" data-ajax="false" data-icon="locate4">A</a></li>
<li><a href="#B" data-prefetch="true" data-ajax="false" data-icon="chart2">B</a></li>
<li><a href="#C" data-prefetch="true" data-icon="phone1" data-ajax="false" >C</a></li>
<li><a href="dp.html" data-prefetch="true" data-icon="info" data-ajax="false" data-transition="none">D</a></li>
</ul>
</div><!--navbar-->
</div>


</div>

 

 



</body>
</html>

Trusted Contributor
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: Phonegap and Jquery Mobile application on Blackberry

[ Edited ]

I noticed you are declaring  transition:"none" in the javascript found in head section several times as well as in some cases in the html syntax you declare data-transition="none"

 

suggestion: eliminate both and declare this once in the head section:

				<script>

					$(document).bind("mobileinit", function() {

					$.mobile.defaultPageTransition = "slidefade";

					});
				</script>

 no more html transition syntax required.

 

#2.

suggestion: cleaning up CSS statements in head and document.

create a mystyle.css file and remove the css from the document body and head sections then link relative to the file in the head section.

Same can be done for javascript in head section.

#3

is there a look  you are trying to achive using divs and tables rather than  <ul data-role="listview"  data-inset="true"> ?

this will eleminate all the padding you are adding to your divs and tables

 

JQM has built in style -- included is your original file with changes made... without seeing your xml and your directory structure for phonegap I cannot comment further ...save this below and load into browser

 

*****************************************************************

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1" />

<title>JQUERY MOBILE PG</title>
<!--link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<!--script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script-->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="jquery.validate.js" ></script>
<!--script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script-->
<script>
$(function() {
$( "#datepicker2" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
<style type="text/css">

.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 2px;
}

.ui-icon-phone1 {
background-image: url(images/phone1.png) !important;
background-size: 18px 18px;
}
.ui-icon-locate4 {
background-image: url(images/locate4.png) !important;
background-size: 18px 18px;
}
.ui-icon-chart2 {
background-image: url(images/chart2.png) !important;
background-size: 18px 18px;
}
.ui-corner-all{-moz-border-radius:.8em;-webkit-border-radius:.8em;border-radius:.8em}

.ui-body-b, .ui-overlay-b {
border: 1px solid #999;
background: #F3F3F3;
color: #222;
text-shadow: 0 1px 0 white;
font-weight: normal;
background-image: -webkit-gradient(linear,left top,left bottom,from( #DDD ),to( #f1f1f1 )); //This was #CCC
background-image: -webkit-linear-gradient( #DDD,#CCC );
background-image: -moz-linear-gradient( #DDD,#CCC );
background-image: -ms-linear-gradient( #DDD,#CCC );
background-image: -o-linear-gradient( #DDD,#CCC );
background-image: linear-gradient( #DDD,#CCC );
}

</style>
<script type="text/javascript">
function Call_Page()
{
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Page.html", { transition: "none"} );

}
</script>
<script type="text/javascript">
function Call_Forgot()
{
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Forgot.html", { transition: "none"} );
}
</script>
<script type="text/javascript">
function Save_onclick()
{
alert('Saved');
}
</script>
<script type="text/javascript">
function submitForm(){

var validator = $("#login").validate({
rules: {
username: "required",
Password: "required",

},
errorElement: "span" ,
messages: {
username: "<font color='red'> Enter your User Name</font>",
Password: "<font color='red'>Enter Password</font>",

}
});
if(validator.form()){ // validation perform

$('form#login').attr({action: 'mycontroller'});
$('form#login').submit();
$.mobile.transitionFallbacks.flip = "none"
$.mobile.changePage( "Ac_Page.html", { transition: "none"} );
}
}

</script>
    <script>

     $(document).bind("mobileinit", function() {

     $.mobile.defaultPageTransition = "slidefade";

     });
    </script>
 </head>
<body>
<div data-role="page" id="pg">
 <div data-role="header" ><h4>Login</h4></div>
 <div data-role="content">
  <center><img src="images/logo.png" ></center>
 <form name="login" id="login" method="post" action="">
 
  <ul data-role="listview"  data-inset="true">
    <li>User ID<input type="text" name="username" id="username" value="" data-mini="true"/></li>
    <li>Password<input type="password" name="Password" id="Password" value="" data-mini="true"/></li>
    <li>
     <label>Remember User ID</label>
     <select name="flip-mini" id="flip-mini" data-role="slider" data-mini="true">
     <option value="off">Off</option>
     <option value="on">On</option>
     </select>
    </li>
    <li>
     <p><a href="" data-role="button" data-theme="a" onclick="submitForm();">Login</a></p>
    </li>
    <li><a href="#" id="New_User" onclick="Call_Page();">New User</a></li>
    <li><a href="#" id="Forgot_User" onclick="Call_Forgot();">Forgot User</a></li>
  </ul>
 </form> <!--/form-->
 </div><!--/content-->

 <div data-role="footer" data-theme="a" data-position="fixed">
   <div data-role="navbar" data-iconpos="top">
    <ul>
     <li><a href="A.html"  data-icon="locate4">A</a></li>
     <li><a href="B.html"  data-icon="chart2">B</a></li>
     <li><a href="C.html"  data-icon="phone1"  >C</a></li>
     <li><a href="dp.html" data-icon="info">D</a></li>
    </ul>
   </div><!--/navbar-->
 </div><!--/footer-->
</div><!--/page-->
</body>
</html>

 

Trusted Contributor
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: Phonegap and Jquery Mobile application on Blackberry

Betsy_Robert

and comment out your style you have in the head section and you will see the proper 'data-inset="true" style

Trusted Contributor
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: Phonegap and Jquery Mobile application on Blackberry

Quote  "All these issues do not occur on an Android phone." Unquote

 

That's laughable.

 

Contributor
Posts: 16
Registered: ‎04-05-2013
My Device: Blackberry 9780
My Carrier: None

Re: Phonegap and Jquery Mobile application on Blackberry

[ Edited ]

Thank you for your time and your comments.

 

Yes there was a particular look i wanted to achieve and hence the padding.  I agree that there is a lot of work to do in terms of cleaning up the code. 

 

By "All these issues do not occur on an Android phone", I meant that there is a lag while displaying a page with the navigation bar in the footer on a blackberry. What happens on a blackberry is that when I scroll on a page the footer gets distorted and goes out of position even when "data-position" is set to "fixed".  

Trusted Contributor
Posts: 222
Registered: ‎03-03-2012
My Device: Ripple, LE Z10, Dev Alpha _C, Playbook, Bold 9900
My Carrier: rogers

Re: Phonegap and Jquery Mobile application on Blackberry

 suggest:

update jqm to the latest ( 1.3.0 )

Jquery to ( 1.9.1 )

In place of Phonegap use Blackberry Webworks SDK 1.0.4.11

 

worthwhile to join the jquerymobile forum. there are several top notch coders answering questions in that forum.

they have seen it all . code may still work with errors and causes all kinds of behaviours.

 

**the ripple emulator for chrome is a must have tool and you can turn on debugging

:smileyvery-happy: