jQuery Forum

Upgraded to JQM 1.1.1 and header jump returns - only on dynamic pages
[3Replies]
- 02-Oct-2012 11:23 AM
- Forum: jQuery Mobile
I am using the Sea of Clouds twitter script and it was working fine in 1.0.1. I've upgraded to PhoneGap 2.1.0 and have everything up to par except for this page issue. If I load in 10 or 15 tweets, so that the page has to scroll, on the initial page load, the header drops about 1/4 of the page. Once swiped, the header jumps back and seats correctly at the top of the screen without further issue. Seems like it is only happening on the initial page load. Can't seem to figure this one out.

Using PhoneGap 2.1.0, JQ 1.7.1 and JQM 1.1.1. THANKS for any ideas:

<!DOCTYPE html>

<html>

<head>

<title>Nusinov</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/jquery.mobile-1.1.1.css" />



<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>

<div data-role="page" id="twitterfeed">

<div data-role="header" class="page-header" data-position="fixed">

<a href="social.html" data-transition="none" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse">Back</a>

<div class="logo"></div>

</div>

   <div data-role="content">

   <div class="content-left">



<script src="js/jquery.tweet.js" charset="utf-8"></script>

<link rel="stylesheet" href="css/jquery.tweet.css">





<script type="text/javascript">

   function randomString(length) {

var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');

var str = '';

for (var i = 0; i < length; i++) {

   str += chars[Math.floor(Math.random() * chars.length)];

}

return str;

   }

   var rnd = randomString(8);

   jQuery(function($) {

$(".rnd").replaceWith(rnd);





$(".demo .code").hide().each(function(i,e){

   $(e).before($('').

   click(function(ev) {

   $(e).slideToggle();

   $(this).hide();

   ev.preventDefault();

   }));

   }).each(function(i, e){ eval($(e).text()); });

});

   </script>



<div class="demo">

   <pre class="code">



jQuery(function($){

$(".tweet").tweet({

username: "nusinov",

count: 7,

loading_text: "Please wait, loading new tweets..."

});

});

   </pre>

   <div class='tweet query'></div>

</div>

</div>

</div>

   <div data-role="footer" data-id="foo1" data-position="fixed">

<div data-role="navbar" class="custom-icons" data-grid="d">

   <ul>

<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>

<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>

<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>

<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>

   </ul>

</div>

   </div>

</div>



</body>

</html>

data-prefetch
[0Replies]
- 12-Sep-2012 08:45 PM
- Forum: jQuery Mobile
Trying to use best practices here. I've created a footer below. Should I be using data-prefetch after each data-transition type? Using 1.7.1 jq and 1.1.0 jam. Wrapping in cordova 1.7.0. Single page set-up. Thanks for the advice.

<div data-role="footer" data-id="foo1" data-position="fixed">

   <div data-role="navbar" class="custom-icons" data-grid="d">

   <ul>

<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none">Home</a></li>

<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none">Buy</a></li>

<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a">News</a></li>

<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a">Calc</a></li>

<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a">Contact</a></li>

   </ul>

   </div>

   </div>

Sea of Clouds twitter feed script - anyone used before? Having a very strange issue with loading the feed
[2Replies]
- 11-Sep-2012 04:31 PM
- Forum: jQuery Mobile
My question revolves around the issue I am having loading the feed when on 3G rather than wifi. I am wrapping it up with Cordova 1.7.0, jq 1.7.1 and jqm 1.1.0.

If on wifi, the feed pops no problem and loads in about a second.

If on 3G, sometimes it loads, sometimes it hangs and does not load. In other words, it is not 100% reliable.

Is there some timeout I am missing somewhere? I am grateful for any feedback or suggestions.

This is twitter.html, which is fed from social.html (below twitter.html).

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">


<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.mobile-1.1.0.min.js"></script>




</head>

<body>

<div data-role="page" id="twitterfeed">

<div data-role="header" class="page-header" data-position="fixed">
<a href="social.html" data-icon="arrow-l" data-transition="none" data-iconpos="notext" data-direction="reverse">Back</a>
<div class="logo"></div>
</div>

<div data-role="content">
<div class="content-left">

<script src="js/jquery.tweet.js" charset="utf-8"></script>
<link rel="stylesheet" href="css/jquery.tweet.css" media="all">

<script type="text/javascript">
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var rnd = randomString(8);

jQuery(function($) {
$(".rnd").replaceWith(rnd);


$(".demo .code").hide().each(function(i,e){
$(e).before($('').
click(function(ev) {
$(e).slideToggle();
$(this).hide();
ev.preventDefault();
}));

}).each(function(i, e){ eval($(e).text()); });
});
</script>


<div class="demo">

<pre class="code">

jQuery(function($){
$(".tweet").tweet({
username: "nusinov",
count: 10,
loading_text: "Please wait, loading new tweets..."
});
});
</pre>
<div class='tweet query'></div>
</div>

</div>
</div>

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>

**** social.html ****

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">

<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>

<script src="js/jquery.mobile-1.1.0.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header" class="page-header" data-position="fixed">
<div class="logo"></div>
</div>
<BR><BR><BR>

<div data-role="content">
<div class="content-left">

<ul data-role="listview" data-theme="f" data-inset="true" style="margin-bottom:-3px">
<li><a href="blog.html" data-transition="none" data-prefetch>TrainingPro Blog</a></li>
<li><a href="twitter.html" data-transition="none">Twitter</a></li>
<li><a href="rss.html" data-transition="none" data-prefetch>Industry News</a></li>
</ul>

<div class="shadow2box"><img src="images/shadow2.png" class="shadow2" alt="shadow"></div>

<div class="content-center">
<p>Check back here to review important update
for your Continuing Education, Pre-Licensing,
Webinar and industry focused commentary.</p></div>

</div>
</div>

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>

</body>

</html>

Refresh button in the header, but how to avoid the flash transition?
[5Replies]
- 09-Jul-2012 06:50 PM
- Forum: jQuery Mobile
Hi, again, thanks to all the mods and contributors for helping me along the way. Not sure there is a way to fix the issue, but when I have the following code in the header, the refresh button refreshes the whole page, instead of just the content section. I am trying to allow users to refresh tweets and everything works fine, except this dang transition flash:

<div data-role="header" class="page-header" data-position="fixed">
<a href="social.html" data-icon="arrow-l" data-transition="none" data-iconpos="notext" data-direction="reverse">Back</a>
<div class="logo"></div>
<a href="blog.html" data-icon="refresh" data-transition="none" data-iconpos="notext" data-direction="reverse" data-ajax="false" class="ui-btn-right">Refresh</a>
</div>

Thanks if anyone can help with a pointer or two.

Weird header movement issue / flash issue on a normal single page .html link
[1Reply]
- 06-Jul-2012 01:40 PM
- Forum: jQuery Mobile
Hi JQM,

Upgrading my project to 1.7.1 / 1.1.0 and hitting a weird issue when a page is linked from another page. The fixed header seems to push down then once the page content loads, it pushed back into position. I am testing on an iPhone 4, Xcode 4.3.2. I do not have this problem with 1.6.4 / 1.0.1. Could someone take quick peek and see if I have anything wrong here with how I have link the pages. This problem does not happen in the links in the navbar - only if I put a regular a href link to another page ---> a href="about.html". THANK YOU!

contact.html:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">

<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header" class="page-header" data-position="fixed" data-id="foo">
<div data-role="header" data-transition="none" data-position="fixed" class="page-header" data-add-back-btn="true" data-id="foo" data-prefetch >

<a href="index.html" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" data-rel="back">Back</a>
<div class="logo"></div>
</div>
</div>

<div data-role="content">

<div class="content-left">

<h3>Client Services</h3>

PT customer service representatives are here to help. Click an icon to reach out:<BR><BR>

<table style="width:100%">
<tr>
<td style="width:25%;">
<a href="tel:+18778783600"><img src="images/new_phone.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">Call us toll free, <a href="tel:+18778783600">1-877-878-3600</a>. Our office hours:<BR>
Mon - Thurs 9am - 8pm EST<BR>
Friday 9am - 7pm EST<BR>
Saturday 10am - 3pm.<BR><BR></td>
</tr>

<tr>
<td style="width:25%;">
<a href="mailto:support@PT.com"><img src="images/new_email.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">Send email to us at <a href="mailto:support@PT.com">support@PT.com</a>. Your email is important to us and will be answered promptly.<BR><BR> </td>
</tr>

<tr>
<td style="width:25%;">
<a href="about.html" data-transition="none"><img src="images/new_about.png" width="57" height="57"></a><BR><BR></td>
<td style="width:75%;">PT is the national leader in mortgage education.
<a href="about.html" data-transition="none"><BR>Read More...</a><BR><BR> </td>
</tr>

<tr>
<td style="width:25%;">
<img src="images/new_mail.png" width="57" height="57"><BR><BR></td>
<td style="width:75%;">Physical Mail Address:<BR>
5455 McCormick Road<BR>
Plaza 2<BR>
Sixth Floor<BR>
Huntsman, MO 21031<BR><BR></td>
</tr>

</table>

</div>
</div>

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>

about.html:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>JQuery Testing</title>

<link rel="stylesheet" href="css/jquery.mobile-1.1.0.css">

<script src="cordova-1.7.0.js"></script>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.1.0.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="header" class="page-header" data-position="fixed" data-id="foo">

<div class="logo"></div>
</div>

<div data-role="content">
<div class="content-left">

<h3>About TP</h3>

<p>Since its establishment in 1999, TP has been a pioneer in navigating the
changing licensure environment of the automotive industry and nimbly adjusting its business
to accommodate the compliance needs of its clients. From training automotive professionals in
only two states that required education in 1999 to becoming a nationally accredited provider
in all 50 states and territories, TP has become a resource and a partner for automotive
companies of all sizes.</p>

<p>TP’s timely course curriculum and practical compliance tools have ensured proper
licensure for automotive loan originators across the country. Providing training in every format
allowed by the Nationwide automotive Licensing System (NMLS), TP offers a comprehensive
solution to training that caters to individual learning styles. TP’s course catalog is
the most inclusive in the industry, and its exam prep product line has helped thousands of automotive
loan originators pass their national and state licensing exams. </p>

</p>With its robust Tracking and Reporting System, TP is able to take its education platform
to the next level of service by filling a critical need for automotive compliance teams nationwide. For
more information on why TP should be your education partner, visit www.TP.com or
call 877-878-9001.<BR><BR><BR></p>
</div>
</div>

<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar" class="custom-icons" data-grid="d">
<ul>
<li><a href="index.html" id="home" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Home</a></li>
<li><a href="download.html" id="download" data-icon="custom" data-theme="a" data-transition="none" data-prefetch>Buy</a></li>
<li><a href="social.html" id="chat" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>News</a></li>
<li><a href="calc.html" id="calc" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Calc</a></li>
<li><a href="contact.html" id="cell" data-icon="custom" data-transition="none" data-theme="a" data-prefetch>Contact</a></li>
</ul>
</div>
</div>

</div>

</body>

</html>

JQM - A Thank You - and another question regarding external links and page flashing.
[11Replies]
- 27-Jun-2012 12:07 PM
- Forum: jQuery Mobile
haga0054 and watusiware - thanks for the help yesterday in working through my external div loading issue. Your help is greatly appreciated and this forum is very informative and kicks a$$.

Now, I have another issue perhaps someone can shed some light on. I've managed to deal with the flashing page / transition issues in every area of my app, except for the following scenario. The first page, social.html, is simply a page with three links, one for a blog page with external data loading in, one for a twitter page with twitter data loading in and the last page is for rss feeds, again with rss feeds loading in. No matter how I've tried, I can not kill the flash once these links are clicked on to navigate to the new page. I am using jquery 1.7.1 and jam 1.0.1. I know I can upgrade, but that is causing a bunch of different issues and this is one of the last issues I need to solve prior to production launch.

social.html:

   <link rel="stylesheet" href="assets/css/style3.css">

<script src="phonegap-1.4.0.js"></script>
<script src="jquery-1.7.1.min.js"></script>
<script src="load-json.js"></script>

<script src="today.js"></script>

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
   var myScroll;
function loaded() {
   setTimeout(function () {
myScroll = new iScroll('wrapper');
}, 100);
}
window.addEventListener('load', loaded, false);
</script>

<script src="jquery.mobile-1.0.1.min.js"></script>

</head>

<body>

<div data-role="page" id="social">


<div data-role="header" data-position="fixed" data-id="foo" class="page-header">
<div class="logo"></div>
</div>





   <div id="wrapper">
<div id="scroller">
   <div data-role="content" >

   <BR><BR><BR><BR>



<ul data-role="listview" data-inset="true" id="listview_social" style="margin-bottom:0px">

   <li><a href="blog.html" data-prefetch data-transition="none" rel="external">TP Blog</a></li>
   <li><a href="twitter.html" data-transition="none" rel="external">Twitter</a></li>
   <li><a href="rss.html" data-prefetch data-transition="none" rel="external">Industry News</a></li>
</ul>

<div class="shadow2box"><img src="assets/images/shadow2.png" class="shadow2" alt="shadow"></div>

How to dynamically load a collapsible div with json return data?
[16Replies]
- 25-Jun-2012 03:16 PM
- Forum: jQuery Mobile
Hi, relative jam newb coming atcha here with a question on how to dynamically generate collapsible content block based on json return data, here are the files. I am not sure if I put the code in the json js file or the html file. Currently, I am putting the collapsible div info into the json with the id in the html file. The data loads, but just as regular text and not within the collapsible block. THANK YOU IF YOU CAN ADVISE!

.html file

<div id="wrapper">

<div id="scroller">

   <div data-role="content">

<div class="content-left">

   <BR> Latest Blog Posts<BR>

   <div id="blog" data-role="collapsible" data-collapsed="true" data-theme="f"></div><BR><BR><BR> 



</div>

   </div>

</div>

   </div>

javascript file:

$(document).ready(function(){

$(document).bind('deviceready', function(){

var blog = $('#blog');

$.ajax({

url: 'http://myurl.php',

dataType: 'jsonp',

jsonp: 'jsoncallback',

timeout: 5000,

success: function(data, status){

$.each(data, function(i,item){

var blogpost = '<div data-role="collapsible" data-collapsed="true" data-content-them="f"><h4>'+item.title+'</h4>'

+ '<p>'+item.date+'<br>'

+ item.blog_text+'</p></div>';

blog.append(blogpost);

});

},

error: function(){

blog.text('We could not load your data, please try again.');

}

});

});

});

Twitter feed works fine via WIFI, does not via 3G
[1Reply]
- 12-Jun-2012 03:36 PM
- Forum: jQuery Mobile
Hello JQM,

Using the seaofclouds script to incorporate my twitter feeds into the app. Weirdness - works fine via WIFI - does not display tweets when on 3G. Is there something / some setting I am missing here? Anyone else have a similar issue. Please enlighten me. Thank you!

Craig

Do not want to external link with rss feed - need an expert please
[0Replies]
- 23-May-2012 04:25 PM
- Forum: jQuery Mobile
Still newbie here. I've set up the wonderful script zrssfeed and have but one question. How do I prevent the external link from navigating away from my app? Because, there is no navigation back to the app on the external link is clicked. Here is the snippet I've been working on, but I can't figure how to keep the contents of the rss feed within the DOM of my app (instead of jumping out of the app to the url / page.

Thank you!

// Add feed row
html += '<li class="rssRow '+row+'">' +
'<'+ options.titletag +'><a href="'+ entry.link +'" title="Vie this feed at '+ feeds.title +'">'+ entry.title +'</a></'+ options.titletag +'>'
if (options.date && pubDate) html += '<div>'+ pubDate +'</div>'
if (options.content) {

Not sure how to parse specific data from a json string into a collapsible container
[4Replies]
- 09-May-2012 11:50 AM
- Forum: jQuery Mobile
First post, new to this stuff, having a newb issue:

I have the following code, which is successfully pulling back the JSON object with the data fields / rows from mysql.

*****Begin Code*****
$(document).ready(function(){
$(document).bind('deviceready', function(){
var output3 = $('#blog1');

$.ajax({
type: 'GET',
url: 'http://xxxxx.com/aaa/blog.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){

$.each(data, function(i,item){

var blog1 = '<b>Published:</b> '+item.date+' <br>'
+ '<b>Title: </B>' +item.title+ '<br>'
+ '<b>Summary: </B>' +item.summary+'<br>'
+ '<b>Post: </b>' +item.blog_text+'<br>';

output3.append(blog1);}
);

},
error: function(){
output.text('We are sorry, the TPro blog can not be loaded at this time. Please check your network connection.');
}
});
});
});

****END CODE****

What I can not figure out is how to pull out a field (or multiple fields) within each JSON record, and then drop that return value (such as blog1 above) into a collapsible panel div in query mobile (building within phone gap).

The end goal is to return the five most recent rows from mysql into 5 collapsible panels in the DOM. I am new to this (obviously) and learning by doing from all of you experts. Thank you for the help!

Craig

Selecting values from a JSON return object
[1Reply]
- 09-May-2012 09:38 AM
- Forum: Getting Started
First post from a newbie, I am learning by doing.

I've been able to read data out of mysql, put it into a JSON object and return that data into a browser. There are currently five rows in the db and my query is selecting all rows. What I would like to do is return the five most recent rows (in the JSON object) and then pull out the first field of each row as the title in a collapsible panel (jam) with the third field of each row as the content in that drop down collapsible div.

Can't seem to figure out how to pull a specific pair from the JSON return object. I hope my post makes sense. I appreciate any pointers, doc, tutorial, sample where I can learn how to do this.

Thank you!

Response title

Attachments

jQuery Forum

Activity Trend