I'm on a phonegap project.
I was doing this project with Jquery Mobile Framework. But its results and performance arre so bad at many devices (f.e. my device android 2.3.3 - jquery mobile works nice on android 4.x.x devices i think)
After that, i found this nice and fast framework.
Now, i'm trying to carry my jquery mobile project to Jqmobi.
But there are some problems when i'm trying to carry. I am stucked with the function that i need to show current/active/chosen/opened panel when i click from the navigation.
Why do i need this. Because, "i want to work the functions when the user chooses that panel" that is what i want.
Here is what i have tried in jqmobi;
HTML SIDE ;
<!DOCTYPE html>
<html>
<head>
<title>Live Score</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />
<link rel="stylesheet" type="text/css" href="css/jq.ui.css" />
<link rel="stylesheet" type="text/css" href="css/add.css" />
<script type="text/javascript" charset="utf-8" src="js/jq.ui.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jq.mobi.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/myscripts.js"></script>
</head>
<body>
<div id="jQUi">
<div id="content">
<div title="Home" id="index" class="panel" selected="true">
<img src="img/fanatik.jpg" width="320" height="120" alt="">
<ul class="index_list">
<li><span>Football </span>Live Scores</li>
<li><span>Football </span>League Tables</li>
<li><span>Football </span>League Fixtures</li>
<li><span>Program </span>Settings</li>
</ul>
</div>
<!---------------------------------------------------------------------------------------------------->
<div title="LiveScores" id="contents01" class="panel" scrolling="no">
</div><!-- livescores page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueTables" id="contents02" class="panel">
</div><!-- leaguetable page -->
<!---------------------------------------------------------------------------------------------------->
<div title="LeagueFixtures" id="contents03" class="panel">
</div><!-- leaguefixture page -->
<!---------------------------------------------------------------------------------------------------->
<div title="Settings" id="contents04" class="panel">
</div><!-- settings page -->
<!---------------------------------------------------------------------------------------------------->
</div>
<div id="navbar">
home
live
tables
fixtures
settings
</div>
<!---------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
Javascript Side (not working)
$(document).bind('pageshow', function () {
var id = $.ui.activeDiv[0].id;
if (id=="contents01"){
ctx="livescores";
$("#contents01 [class='panel']").text(ctx);
}
else
if (id=="contents02"){
ctx="leaguetables";
$("#contents02 [class='panel']").text(ctx);
}
else
if (id=="contents03"){
ctx="leaguefixtures";
$("#contents03 [class='panel']").text(ctx);
}
});
function getLiveMatches(){
$.getJSON("MY WEB API URL", function (data){
ctx='<ul>';
$.each(data, function (index, value) {
ctx+="<li><table border='1' class='imagetable'><tr><td rowspan='3' width='18%'>" + value.MinuteOrShortStatus + "</td><td>" + value.HomeTeam.Name + "</td><td width='8%'>" + (value.CurrentHomeTeamScore == null ? "-" : value.CurrentHomeTeamScore) + "</td></tr><tr><td>" + value.AwayTeam.Name + "</td><td width='8%'>" + (value.CurrentAwayTeamScore == undefined ? "-" : value.CurrentAwayTeamScore) + "</td></tr></table></li>";
});
ctx+='</ul>';
injectContext("contents01",ctx);
});
}
function injectContext(target, context){
$("#"+target+" [class='panel']").html(context);
}
How can i determine the active panel or page or div in Jqmobi / Appframework..
Please help about it.
Thanks.
You can run a function whenever a panel becomes active.
Add the attribute data-load="func_name" to the panel's div tag.
For Example
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
...
<script>
function onPanel1Activated() {
do task for panel1
}
function onPanel2Activated() {
do task for panel2
}
</script>
...
</head>
<body>
<div id="afui" class='ios'>
<!-- Header ------------------------------------------------------->
<div id="header"></div>
<!-- Content Start ------------------------------------------------>
<div id="content">
<!-- Panel 1 -------------------------------------------------->
<div class="panel" title="Panel 1" id="panel1" selected="true" data-load="onPanel1Activated">
...
</div>
<!-- Panel 2 -------------------------------------------------->
<div class="panel" title="Panel 2" id="panel2" data-load="onPanel2Activated">
...
</div>
...
</div>
</div>
</body>
</html>
Related
I know this has been asked million times. I look at other topics for solution and so far I can't fix it.
I am using Masonry to develop grid system, like pinterest and google images. It works fine. The images load properly on the Firefox but in Chrome/Safari, they are overlapping until I refresh the page. Which is weird because images load fine on my iphone(until I refresh the page and they overlap).
Also I just noticed an error Firebug gives me in the imagesloaded script. This line.
} else if ( typeof obj.length === 'number' ) {
Here is my page setup.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<title>Home page</title>
<meta name="description" content="description here" />
<link rel="stylesheet" href="css/global.css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<!-- external jQuery file to fall back on !-->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<script>
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</head>
<body>
<section id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 30, "itemSelector": ".item" }'>
<h1 class="hidden">Main Container</h1>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
<div class="item">
<img src="images/long.jpg">
</div>
<div class="item">
<img src="images/small.jpg">
</div>
</section>
</body>
</html>
So all in all, how do I fix this overlapping issue on refresh page?
ps. I should mention that in browsers, the images will overlap only when I refresh using
ctrl + f5. Normal refresh page doesn't stack up the images.
Alright the issue has been solved.
I added the following script and now it reloads fine.
<script>
$(window).load(function() {
var $container = $('#container');
$container.masonry({
itemSelector: '.item'
});
});
</script>
I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...
Below example belongs Tolis Emmanouilidis and is for jquerymobile 1.0.1 . when i want to upgrade it to 1.2.0, map isn't full screen in frame, only a part of it is shown on top-left corner of frame
Internet is full of example with jquerymobile and google maps. after upgrade to jqm 1.2.0 maps have this problem and not much source on this topic.
Can you help me to solve this issue?
http://jsfiddle.net/jCemG/4/
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=el"> </script>
</head>
<body>
<!-- /page -->
<div data-role="page" class="page-map" style="width:100%; height:100%;">
<!-- /header -->
<div data-role="header" data-theme="b">
<h1>Map</h1>
Home
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</body>
</html>
This should solve your problem:
$('#map').live('pagebeforeshow',function(e,data){
$('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height()));
});
I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});