I started developing my first mobile app using jquery mobile.
So far it has been going nicely, but I am not able to solve a specific popup behaviour.
What I want it for a popup to show once the user loads the app. This popup should be similar to a add to home popup like you see in many apps. It is intended to point the users direction to the fixed footer with some important buttons. I managed to insert this popup and open it on page load, but there are two things I am not able to do.
My popup loads and disappears, which I want, and that is all OK. However, once you reload the page, or navigate to another and go back, it opens up again. This is annoying for the user. I would like it to open up only the first time you load the home page.
I would like to position the popup above the footer, so not over it, but above. How would I do this? Do I use x and y, and if yes how?
Is there a way for the overlay effect to obscure the whole page, except the footer?
Thank you.
Here is the code:
<div data-role="page" id="home">
<div data-position="fixed" data-role="header" data-theme="d">
<h1>Prva pomoć</h1>
<button data-icon="info" data-iconpos="right"></button>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d">
<li data-role="list-divider">Ne reagira i ne diše
</li>
<li>Oživljavanje</li>
<li>Oživljavanje + AVD</li>
<li data-role="list-divider">Ne reagira, ali diše</li>
<li>Bočni položaj</li>
<li data-role="list-divider">Ostalo</li>
<li>Gušenje</li></ul></div>
<div id="popspot"></div>
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!<p></div>
<script type="text/javascript" language="JavaScript">
$(":jqmData(role='page'):last").on("pageshow", function(event) {
$("#popup", $(this)).popup("open");
setTimeout(function(){
$("#popup").popup("close");
}, 3000);
});
</script>
<div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
<div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
<ul>
<li>Zovi Hitnu</li>
<li>Oživljavanje</li>
<li>Osobni podaci</li>
</ul>
</div>
You can use sessionStorage or localStorage to keep track of the information related to whether pop up is shown or not.
You code would be something as below
if (localStorage.popUpShown != 'true') {
// window will position the pop up to center
$('#popup').popup('open', {positionTo: 'window'});
localStorage.popUpShown = 'true';
setTimeout(function () {
$("#popup").popup("close");
}, 3000);
}
else{
// Can remove this alert in development enviornment.
alert('already shown the popup');
}
you can check the live fiddle here http://jsfiddle.net/mayooresan/MyaE9/
Also did some tweaking to your html. You had markup errors in your html page.
<div data-role="page" id="home">
<div data-position="fixed" data-role="header" data-theme="d">
<h1>Prva pomoć</h1>
<button data-icon="info" data-iconpos="right"></button>
</div>
<div data-role="content">
<ul data-role="listview" data-divider-theme="d">
<li data-role="list-divider">Ne reagira i ne diše</li>
<li>Oživljavanje
</li>
<li>Oživljavanje + AVD
</li>
<li data-role="list-divider">Ne reagira, ali diše</li>
<li>Bočni položaj
</li>
<li data-role="list-divider">Ostalo</li>
<li>Gušenje
</li>
</ul>
<div id="popspot"></div>
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#popspot" data-theme="a" data-overlay-theme="e" data-history="true">
<p>U slučaju hitnoće koristi ovaj izbornik!</p>
</div>
</div>
<div data-role="footer" id="hitnizbor" data-position="fixed" class="nav-glyphish-example">
<div class="nav-glyphish-example" data-grid="b" data-role="navbar" data-theme="e">
<ul>
<li>Zovi Hitnu
</li>
<li>Oživljavanje
</li>
<li>Osobni podaci
</li>
</ul>
</div>
Related
When navigating the site http://emich.edu on Android devices (with any browser), the sticky mobile navigation menu sticks to the bottom of the page if one clicks through to another page, scrolls to the bottom of that page, and clicks the back button. A picture of the issue is attached.
This should not happen; the nav should always be under the site header. We are using Foundation 6.3 and have tried several other versions. We have even tried Foundation outside of this site with no extra markup, and the same result is produced. I can't seem to find any other threads that describe a similar problem. Could it be a problem with Android?
The phones we have tested use Android v. 7.0 and 6.0.1.
To be clear, this problem does not happen on Apple devices nor PCs.
<header class="wide-image">
<div class="brand front-top">
<div class="row top-row" data-equalizer="branding">
<div class="large-4 medium-12 small-12 columns logo-combine" data-equalizer-watch="branding">
<div class="front-title">
<img src="{{f:57957}}" alt="Eastern Michigan University logo" />
</div>
</div>
<div class="large-8 medium-12 show-for-large columns" data-equalizer-watch="branding">
<div class="row idrow front">
<div class="small-12 columns secondary-nav">
<xsl:copy-of select="ou:includeFile('/_resources/inc/site-search.inc')" />
<ul id="quick-links-top">
<xsl:copy-of select="ou:includeFile('/_resources/inc/quick-links.inc')" />
<li id="search-glass"><span class="visuallyhidden">Search</span><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
<div id="site-title" class="row">
<div class="small-12 columns">
<ouc:div label="site-name" button-text="Site Name" group="_Admin" path="{$ou:siteroot}/_site/inc/name.pcf">
<xsl:if test="$ou:action = 'pub' and $ou:siteroot != '/'"><xsl:copy-of select="ou:includeFile(concat($ou:siteroot,'/_site/inc/name.inc'))" /></xsl:if>
</ouc:div>
</div>
<xsl:if test="($ou:topnav!='off')">
<div class="small-12 columns skip-main-nav">
<a class="show-on-focus show-for-sr" href="#maincontent">Skip Global Navigation</a>
</div>
</xsl:if>
</div>
<div data-sticky-container="">
<div data-sticky="" data-top-anchor="site-title:bottom" data-options="marginTop:0;" style="width:100%">
<div class="title-bar" data-responsive-toggle="example-animated-menu" data-hide-for="large">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft" aria-expanded="false" aria-controls="offCanvasLeft">
<div class="visuallyhidden">Open/Close Menu</div>
</button>
<div class="title-bar-title" data-toggle="offCanvasLeft">Search & Navigation</div>
</div>
<!-- If top nav, add bar -->
<xsl:if test="$ou:topnav='on' or $ou:topnav='true' or $ou:topnav='1' or $ou:topnav='yes'"><!-- Top nav is truthy? -->
<div id="main-nav">
<div class="row show-for-large collapse">
<div class="small-12 columns">
<nav class="menu-box {if ($ou:action != 'pub') then 'omni-primary-nav' else ''}"><!-- 'omni-primary-nav' class used to style nav list within OUC preview -->
<ouc:div label="top-nav" button-text="Navigation" group="_Admin" path="{$ou:siteroot}/_site/inc/navigation.pcf">
<xsl:if test="$ou:action = 'pub'">
<xsl:text disable-output-escaping="yes"><? echo $navigation->primaryMenu; ?></xsl:text>
</xsl:if>
</ouc:div>
</nav>
</div>
</div>
</div>
</xsl:if>
</div>
</div>
</div>
...a bunch of XSL
</header>
It seems by default, the elements aren't sticky for small screens.
Sticky for small screens can be turned on by adding
data-options="stickyOn:small;"
or
data-sticky-on="small"
To the element data-sticky attribute.
Seems the reason it isn't sticky by default on "small" is to "save real estate".
Methinks it is this bug. See the workarounds mentioned there. Moving discussion there...
I am using Bootstrap v3.3.2 with JQuery 2.13 and JQueryMobile 1.4.5
The bootstrap carousel works smoothly on iPAD & Windows 8 Tablets but it almost does not work on Android tablets (v4.4.2)
On Android, the swipe event does not fire easily. You have to swipe (left or right) many times and then only one time it fires. So the swipe has issues on Android. While on other two platforms its like breeze.
Here is my code piece:
HTML
<div id="Carousel" class="carousel slide" data-interval="false">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" ></li>
<li data-target="#Carousel" data-slide-to="1"></li>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div>DATA 1</div>
</div>
<div class="col-sm-4">
<div>DATA 2</div>
</div>
<div class="col-sm-4">
<div>DATA 3</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div>DATA 4</div>
</div>
<div class="col-sm-4">
<div>DATA 5</div>
</div>
<div class="col-sm-4">
<div>DATA 6</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div>DATA 7</div>
</div>
<div class="col-sm-4">
<div>DATA 8</div>
</div>
<div class="col-sm-4">
<div>DATA 9</div>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control leftArrowIcon"></a>
<a data-slide="next" href="#Carousel" class="right carousel-control rightArrowIcon"></a>
</div>
JS
$("#afterLoginPage").on("pageshow", function( event ) {
$('#Carousel').each(function(){
var $myCarousel = $(this);
$myCarousel.swipeleft(function() {
$(this).carousel('next');
console.log("Carousel - next" );
});
$myCarousel.swiperight(function() {
$(this).carousel('prev');
console.log("Carousel - prev" );
});
});
});
Also tried in this way but no benefit:
$("#afterLoginPage").on("pageshow", function( event ) {
$("#Carousel").on("swiperight", function() {
console.log("Carousel - prev" );
$(this).parent().carousel('prev');
// $(this).carousel('prev'); // did not work as well
});
$("#Carousel").on("swipeleft", function() {
console.log("Carousel - next" );
$(this).parent().carousel('next');
// $(this).carousel('next'); // did not work as well
});
});
I'm creating a mobile app with backbone, phonegap and for css topcoat (http://topcoat.io/).
I have a strange problem when viewing the app on my android phone. Im using android version 2.3.3. A mail symbol on it's side appears, seemingly whereever p and span tags are used.
Here is the code (in this case it goes into the else):
<ul class="topcoat-list list">
<% _.each(players, function(player) { %>
<li class="topcoat-list__item">
<%
if(checkbox){
%>
<label class="topcoat-radio-button">
<input type="radio" name='player_id' value="<%= player.id %>" />
<div class="topcoat-radio-button__checkmark"></div>
<div class="player-details">
<span><%= player.name %></span>
<span><%= player.position %></span>
</div>
</label>
<%
}
else{
%>
<div class="player-details">
<span><%= player.name %></span>
<span><%= player.position %></span>
</div>
<%
}
%>
<div class="player-more">
<a target="_blank" href="http://www.premierleague.com/<%= player.link %>">More</a>
</div>
</li>
<% }); %>
</ul>
I have gone through topcoat.io css but it doesn't set any css for span or p tags...Any ideas what could be producing this weird symbol?
This is an encode issues. Where is the code that generates this HTML. It could be the linebreak code causing it. Remove the line break.
<li class="topcoat-list__item">
<div class="player-details">
<span>Tim Krul</span><span>Goalkeeper</span>
</div>
<div class="player-more">
<a target="_blank" href="http://www.premierleague.com//en-gb/players/profile.overview.html/tim-krul">More</a>
</div>
</li>
I have noticed strange thing - when I put ScrollableView into SwapView and I programmatically (after clicking on button) change view in SwamView and next give focus (click one elment in list) to list in ScrollableView, the first view appear under this one with list in ScrollableView which is currently main view (both are visible at the same time - one superimposed on the other). I use it in PhoneGap as a Android project. And the version of Dojo which I use is 1.9.
My code is:
<div id="view1" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" data-dojo-props='href:"page1.html", parseOnLoad: false, onLoad:NewClientForm.loadForm'></div>
</div>
<div id="view2" data-dojo-type="dojox/mobile/SwapView">
<div data-dojo-type="dojox.mobile.ContentPane" id="cview2" data-dojo-props='href:"page2.html", parseOnLoad: true'></div>
</div>
and the page2.html
<div id="offer_page">
<div class="pageLogo">
<img src="theme/images/logo.png" alt="" />
</div>
<header>
<h1 id="offer_page_client_name_header"> </h1>
</header>
<div id="new_client_nav_menu" class="pageNavMenu">
<div>menu</div>
</div>
<div id="new_client_nav_settings" class="pageNavSettings">
<div>set</div>
</div>
<div class="pageNavPrev">
<div id="offer_page_nav_prev" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props='onClick: OfferPageForm.prevButton'><img src="theme/images/nav_prev.png" alt="" /></div>
</div>
<div class="pageNavNext">
<div id="offer_page_nav_next" class="pageImageLink" data-dojo-type="dojox/mobile/Button" data-dojo-props="onClick: OfferPageForm.nextButton"><img src="theme/images/nav_next.png" alt=""></div>
</div>
<ul data-dojo-type="dojox/mobile/TabBar" data-dojo-props='barType:"standardTab", center:false'>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='selected:true, moveTo:"tab1"'>Client data</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab2"'>Needs analysis</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab3"'>Offers</li>
<li data-dojo-type="dojox/mobile/TabBarButton" data-dojo-props='moveTo:"tab4"'>Simulations</li>
</ul>
<div id="tab1" data-dojo-type="dojox.mobile.View" class="tabView">
Client data:
</div>
<div id="tab2" data-dojo-type="dojox.mobile.View" class="tabView">
Needs analysis
</div>
<div id="tab3" data-dojo-type="dojox.mobile.View" class="tabView">
<div class="offersLeftPanel">
<div class="offersLeftPanelTableHeader">
<div class="offersLeftPanelTableDate">Creation date</div>
<div class="offersLeftPanelTableProduct">Product</div>
<div class="offersLeftPanelTableName">Name</div>
<div class="offersLeftPanelTableRisk">Risk Profile</div>
<div class="offersLeftPanelTableStatus">Status</div>
<div class="offersLeftPanelTableSigned">Signed</div>
<div class="offersLeftPanelTableActions">Actions</div>
</div>
<div data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props="height: '88%'">
<ul data-dojo-type="dojox/mobile/EdgeToEdgeList">
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
<li data-dojo-type="dojox.mobile.ListItem" class="offersLeftPanelTableRow">
<div class="offersLeftPanelTableDate">2013-03-25 08:00</div>
<div class="offersLeftPanelTableProduct">iSave Target</div>
<div class="offersLeftPanelTableName">iSavetarget-Medium-1</div>
<div class="offersLeftPanelTableRisk">Neutral</div>
<div class="offersLeftPanelTableStatus">New</div>
<div class="offersLeftPanelTableSigned">No</div>
<div class="offersLeftPanelTableActions"></div>
</li>
...
</ul>
</div>
</div>
<div class="offersRightPanel">
<div data-dojo-type="dojox/mobile/Button" class="offersOtherNeedsButton">Other uncovered needs</div>
<div class="offersBottomButtons">
<div data-dojo-type="dojox/mobile/Button" class="offersConsolidateButton">Consolidate offers and issue</div>
<div data-dojo-type="dojox/mobile/Button" class="offersIssueButton">Issue proposal</div>
</div>
</div>
</div>
<div id="tab4" data-dojo-type="dojox.mobile.View" class="tabView">
Simulations
</div>
page1.html looks very similar, but ther are no lists and ScrollableViews.
The most interesting thing is the fact that it occurs not every time and not on every devices on which I have a chance to test it (I tested it on Samsung Galaxy Tab 2? - here I have noticed this issue, Asus Transformer and one "no name").
Thanks in advance for any help.
The HTML in your page2.html seems malformed (the top-level is not closed). Besides that, the HTML you posted uses JavaScript and CSS pieces which are missing. All in one, I can't correctly run your code to see if I reproduce.
On the other side, one of the SwapView tests in dojox/mobile/tests (test_SwapView.html) includes a button which programmatically transitions to a swap view - quite close to what you describe. Do you reproduce using this sample or can you modify it to reproduce your issue?
Finally, telling the Android version of the devices where you reproduce would help too.
I'm developing an app for Android using Phonegap and JQuery. One of the tasks is to dynamically add some content to the list. In the first time, when I add a first element and call .listview() everything seems to be fine, but when I add some content, its styles doesn't work properly, and listview('refresh') and other commands don't help at all. I'm using jquery mobile 1.0a1. Here is the code for two buttons:
$("#nextDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo1</h3></li>');
$('#SheduleList').listview('refresh');
});
$("#prevDay").click(function(){
$("#SheduleList").append('<li><h3 class="ui-li-heading">ololo</h3></li>');
$("#SheduleList").listview();
});
The first Button is "prevButton". Here is some HTML:
<body onload="init();">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Расписание группы 04-322</h1>
<h1 id=hday>День недели</h1>
</div>
<div data-role="content" data-theme="b">
<ul id="SheduleList">
</ul>
<button id="nextDay">Следующий день</button>
<button id="prevDay">Предыдущий день</button>
</div>
</div>
</body>
You are not alone.
This seems to work the best for me:
refresh = function (selector)
{
try
{
//this may throw an exception:
// call methods on listview prior to initialization; attempted to call method 'refresh'
$(selector).listview('refresh');
}
catch (e)
{
}
}
refresh("#SheduleList");
Add data-role="listview" in your <ul> in HTML.
<ul id="SheduleList" data-role="listview" data-inset="true"></ul>