I am using jQuery mobile 1.3 for my app in phonegap. I would like to implement the left slide menu like facebooks's app. I have fixed header with data-position="fixed". When I open the app in chrome it works. When I open the App in phonegap it doesn't works, because the fixed header is not moving to the right.
Some solutions to fix this?
EDIT:
Here is very simple example code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 435px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 435px;
}
.ui-content{
padding:10px 15px 0px 15px;
}
.panel-content { padding:15px; }
#myhdr.ui-panel-content-fixed-toolbar-position-left {
border:1px solid red;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:440px; min-height:440px;">
<!-- defaultpanel -->
<div data-role="panel" id="defaultpanel" data-theme="b">
<div class="panel-content">
<ul data-theme="d" data-icon="false" data-divider-theme="d" data-inset="false" data-filter="true" data-filter-placeholder="keywords" data-role="listview" style="overflow:auto; height:200px;">
<li><a data-rel="close"><img src="images/icon.png" class="ui-li-icon" />close</a></li>
</ul>
</div><!-- /content wrapper for padding -->
</div><!-- /defaultpanel -->
<div data-role="header" data-position="fixed" id="myhdr">
<h1>Panel Demo</h1>
</div>
<div data-role="content">
Default panel
</div>
</div>
</body>
</html>
I am working with Cordova 2.2.0, but I have tested it now with Cordova 2.9.0 and it is the same situation. Somehow the browser in Phonegap doesn't apply some style to the fixed header.
Thanks
Nik
This solution is working for me, I am talking about Android hybrid app made in Phonegap.
Working jsFiddle example: http://jsfiddle.net/Gajotres/PMrDn/56/
<div data-role="page" id="index">
<div data-role="panel" id="mypanel" data-position="left" data-display="push">
<a data-role="button">Some button</a>
</div>
<div data-theme="b" data-role="header">
Open panel
<h1>Index page</h1>
</div>
<div data-role="content">
</div>
</div>
What you require is data-display="push" attribute inside your panel. It will successfully push fixed header to the right. This works on Android 3+ and it will not work on Android 2.X, but this is not jQuery Mobile fault.
You either need to turn on hardware acceleration in the android manifest.xml file, or you need to turn transforms off.
I was able to do this with the following..
$(document).bind("pagebeforeshow", function(event, data) {
// this doesn't seem to turn off animations
//$(".ui-panel-menu").panel("option", "animate", false);
// this does turn off animation
$(".ui-panel-animate").removeClass('ui-panel-animate');
});
I'm experiencing the same issue in Android 4.1.2 and here's what I did to resolve the issue.
I added this code in my stylesheet
.ui-header.ui-panel-open {
top:-1px;
position:absolute;
bottom: auto;
}
and this script on my app.js
$( '.ui-panel' ).on( "panelbeforeopen", function( ) {
$('.ui-header.ui-header-fixed').addClass('ui-panel-open');
} );
$( '.ui-panel' ).on( "panelclose", function( ) {
$('.ui-header.ui-header-fixed').removeClass('ui-panel-open');
} );
and set data display of my panel to push ( data-display="push" )
Related
I am using jqm 1.4.5 to create an application but I have a problem about icons.
I got remove all the disc from the icons with a class=ui-nodisc-icon but when I get to the header icons the disc does not come out. Someone was able to remove the disc from the icons in the header?
print https://i.postimg.cc/v81SLPZx/2019-02-26-00-10-54.png
Solution:
<div data-role="header">
<div id="custom-border-radius">
No text
</div>
</div>
And some CSS:
#custom-border-radius .ui-btn-icon-notext.ui-corner-all {
border: 0 solid transparent;
background-color: transparent;
}
Working example: http://jsfiddle.net/kv1jayLe/
If this is it please do not forget to accept the answer.
The .ui-nodisc-icon class is used for the icon background, not for the button itself.
Here is the reference Icons - jQuery Mobile Demos :
The semi-transparent dark circle behind the icon ensures good contrast
on any background color so it works well with the jQuery Mobile
theming system.
If You need a full-flat design, You can wrap the buttons inside a container with the .ui-noboxshadow class (see my explanation below) and declare the border and the background of the button as transparent. If You need to do that for all Your .ui-nodisc-icon buttons, remoove the .ui-header selector from the css.
.ui-header .ui-alt-icon.ui-nodisc-icon.ui-btn.ui-btn-icon-notext {
background-color: transparent;
border-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<div class="ui-noboxshadow">
Menu
</div>
<h1>Header</h1>
</div>
<div role="main" class="ui-content">
Shadow, disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
Shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-shadow ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
No-shadow, no-disc: <a href="#" class="ui-btn ui-btn-corner-all ui-nodisc-icon ui-btn-icon-notext ui-btn-inline ui-alt-icon ui-icon-bars" >Menu</a>
<br>
</div>
</div>
</body>
</html>
To clarify my answer, please note: You don't need to add an extra div to Your markup, it is just enough that Your buttons are inside a container with the class .ui-noboxshadow. For instance, You can add the class to the header. So, this will achieve the same result:
<div data-role="header" class="ui-noboxshadow">
Menu
<h1>Header</h1>
</div>
Sorry for the long title. The "launch demo modal" button on 'click' opens a modal, which loads an iframe from another domain. The iframe site is just an image wrapped in an anchor tag with a 'mailto:' href.
the iframe loads via jQuery.
This flow works well on desktop across browsers, and in Android devices (v. 4-6 tested so far).
In iOS, most of the time Chrome loads the mailto link quickly without issue after the user clicks the image.
In Safari, however, the 'tap' is ignored, and only when the user touches and holds the image will safari open a dialog asking the user to "open message".
Has anyone encountered this before? This is not an issue if loading the iframe directly into a div. It seems to happen only if loading into a modal, which is hidden at page load time.
You can test on iOS Safari here:
https://valuer-fox-52454.netlify.com/
from researching online I've implemented:
'touch-action: manipulation;' rules to both parent and child pages.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> on the parent page
I've added 'touchstart touchend tap focus' to the 'click' even function.
added an onclick event to the anchor tag and tried using jQuery to link out.
Image mapped a clickable area rather than wrapping the image in an anchor tag.
None of the above affected the iOS safari behavior.
Since I can't find anything specifically related to iOS overriding touch events when in an iframe and/or when loaded into a modal, I figured I'd check here.
Thanks for any assistance.
This is the parent page:
<!doctype html>
<html>
<head>
<title>Bootstrap - Modals (test)</title>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body {font-family: Arial, sans-serif;}
.errors {display: none;}
.errors h2 {color: red;}
.coupon {width: 100%; height: 500px; border: 1px solid #ccc;}
.coupon iframe {width: 100%; height: 100%; overflow: scroll;}
ol li {margin: 1em 0; line-height: 1.5em;}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>
<!-- Button trigger modal -->
<button id="getCoupon" type="button" class="btn btn-primary btn- lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
</p>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h2>Your coupon is below!</h2>
<div class='coupon' id='mydiv'></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-3.1.1.js'></script>
<script>
$(document).ready(function(){
$("#getCoupon").on("click", function(){
var rtxURL = "https://childinmodaltest.herokuapp.com/index.html";
if (!$('iframe[src="'+ rtxURL +'"]').length > 0) {
var iframe = document.createElement('iframe');
iframe.src = rtxURL;
$(iframe).prop({
'scrolling': 'no',
'marginwidth': '0',
'marginheight': '0',
'hspace': '0',
'vspace': '0',
'frameborder': '0',
'allowtransparency': 'true'
}).css('min-height', '640px');
setTimeout(function(){
$('#mydiv').append(iframe);
}, 333)
}
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is the child page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>child page to be loaded into modal</title>
<style>
body {text-align: center;}
img { width: 100%; height: auto; }
</style>
</head>
<body>
<a href="mailto:test#example.com" target="_blank">
<img src='https://lh3.ggpht.com/vqKa5XeIG6W51gLV-wG_-DfX20FJxGxOw4-AoDQOJAzCqFeoED50-gabK94PFnWbHf8=w300' alt="click me button" />
</a>
</body>
</html>
In case anyone comes across this, my fix was to use postMessage to communicate from the iframe to the parent page and tell it to redirect on the click event.
I am new to JQueryMobile... I am trying get this sample code to open another popup from within an open popup using JQueryMobile and I am failing. The first link works, but the one within the popup does not. I am also open to suggestions on a better way I should be doing this.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery/mobile/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="jquery/jquery-2.0.3.js" ></script>
<script type="text/javascript" src="jquery/mobile/jquery.mobile-1.4.2.js" ></script>
<style>
html, body { padding: 0; margin: 0; }
html, .ui-mobile, .ui-mobile body {
height: 585px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 585px;
}
</style>
</head>
<body>
<div data-role="page" style="max-height:590px; min-height:590px;">
main menu
<div data-role="popup" id="mainMenu" data-overlay-theme="a" data-theme="a" 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 role="main" 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>
settings
<div data-role="popup" id="settingsMenu" data-overlay-theme="a" data-theme="a" 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 role="main" 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>
Cancel
Delete
</div>
Cancel
Delete
</div>
</div>
</div>
</body>
</html>
Update:
Alright, I do not like the solution on the duplicate question, is there a different way I could go about doing this in JQueryMobile to do something similar, maybe just using pages but theming them as the popup?
You can open a popup within a popup is possible is Jquery mobile. Check the below one to get popup within a popup.
Open poup 1
<div data-role="popup" id="expensePopup" data-dismissible="false"> Close
<div> <div data-role="header">
<h3>popup1</h3>
</div>
Open popup 2
</div>
<div id="pagetwo" data-role="popup">
<a data-role="button" data-theme="a" data-icon="delete" class="ui-btn-left" data-iconpos="notext" onclick="closePopup();"></a>
<div data-role="header">
<h3>I'm A popup2!</h3>
</div>
<div data-role="main" class="ui-content">
<p>The dialog box is different from a normal page.</p>
</div>
</div>
<div>
function closePopup(){
$("#pagetwo").popup("close");
$("#expensePopup").popup("open");
}
See this fiddle Demo
I have a multiple page jquery mobile app (along with Phonegap). In one of the dynamically loaded pages, I am trying to use iScroll (v5) to let the users scroll through a large image, both horizontally and vertically. Here is the code I am using for this page:
!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
</head>
<body>
<div id="largeimage-viewer" data-role="page" class="backdrop">
<script type="text/javascript" charset="utf-8" src="../common/iscroll.js"></script>
<script type="text/javascript" charset="utf-8">
$("#largeimage-viewer").die('pageinit');
$("#largeimage-viewer").live('pageinit', function (e)
{
var myscroll = new IScroll(document.getElementById('wrapper'),
{
scrollbars: true,
scrollX: true
//freeScroll: true,
//fadeScrollbars: true
});
console.log("Created iScroll object: " + (myscroll != null));
});
</script>
<div data-role="header">
Back
<center>CG</center>
</div><!-- /header -->
<div data-role="content" style="scrolling: scroll">
<div id="wrapper">
<img alt="Floor Plan" src="../common/images/floorplan.jpg" width="1217" height="1699" />
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
When I view the page on my Android (4.1.2), the image shows up but I can't scroll the image at all. There is no scrollbars visible either.
Can anyone suggest what I might be missing? Thanks.
Earlier, I tried the following without using iScroll library:
<div data-role="content" style="scrolling: scroll">
<div style="-webkit-overflow-scrolling: touch; overflow: scroll;">
<img alt="" src="../common/images/floorplan.jpg" />
</div>
</div><!-- /content -->
This code showed the vertical scrollbar, and scrolling worked alright, but the horizontal scrolling was extremely slow and there was no scrollbar either. With all the swiping across the screen, I would get the image moved horizontally by one inch or so!! Any solution on this front would also be appreciated.
I am using Durandal which is available in the Hot towel template SPA.
The idea is to have a SPA application for a touch based device, and I need to implement swipe feature on some on the divs.
jquery mobile supports swipe feature, but can someone tell me how to use it.
There is a data-bind on the div, where I give the 'swipe: somefuntion' - this does not happen, whereas the same works when I use a click instead of swipe. And somefunction is defined in the view model.
I have included the jquery mobile in the scripts and also in the bundle.
Can someone help me out if this possible?
Here's a working eample: http://jsfiddle.net/Gajotres/pf3kc/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Share QR</title>
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1,maximum-scale=1"/>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="article1">
<div data-role="header" data-theme="b" data-position="fixed" data-id="footer">
<h1>Articles</h1>
</div>
<div data-role="content">
<p>Article 1</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed" data-id="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
Javascript :
$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){
alert('swipeleft');
});
$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){
alert('swiperight');
});