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()));
});
Related
I downloaded demo version of particles.js and am trying to modify it using basic HTML . But none of the changes are getting reflected on the webpage. Is there any obvious thing which I am missing ? TIA
<!DOCTYPE html> <html lang="en" >
<head><meta charset="UTF-8"> <title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container --> <div id="particles-js"></div>
<!-- stats - count particles --> <div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!--particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<h1 class="main-title">Hello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</body>
</html>
please use position: relative to your overall container
below code will works for you ...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js" class="tt"></div>
<!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<div class="body-container" style="position: relative;">
<h1 class="main-title">Hgdfgdfello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</div>
</body>
</html>
I'm trying to make a sign in page for my web application and I followed the steps on this website:https://developers.google.com/identity/sign-in/web/sign-in
but the google sign in button won't show up, it's just a blank screen but I see that the google icon shows up and fades so it is connecting to google.
this is my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Google SignIn</title>
<!-- Bootstrap CDN: Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Google Sign In Client ID -->
<meta name="google-signin-client_id" content="**MY GOOGLE CLIENT ID**">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<style>
.g-signin2{
margin-left:500px;
margin-top:200px;
}
.data{
display:none;
}
</style>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<div class="data">
<p>Profile Details</p>
<img id="pic" class="img-circle" width="100" height="100"/>
<p>Email Address</p>
<p id="email" class="alert alert-danger"></p>
<button onclick="signOut()" class="btn btn-danger">SignOut</button>
</div>
</body>
</html>
The Google Sign in API works only on a running web server. You will not be able to see the Sign in button if you are directly opening the file.
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>
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...
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;
});
});