I am having an issue launching the popup from another javascript file, I boot the popup correctly form the index.html (had to put the javascript in the #main .
Now I can't launch it from a helper.js file (it loads the content properly as before but when I click the it doesn't launch the popup, whilst I copied the same code and it works straight from the index.html.
content = '<li data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-thumb ui-btn-up-c">'+
'<div class="ui-btn-inner ui-li">'+
'<div class="ui-btn-text">'+
'<a id="btnChoicePopup" href="#" data-rel="popup" class="ui-link-inherit">'+
'<img src="http://www.luc.edu/media/lucedu/sustainability-new/images/food_icon-1109x1089.png" class="ui-li-thumb">'+
'<h3 class="ui-li-heading">Food</h3>'+
'<p class="ui-li-desc">Im hungry!</p>'+
'</a>'+
'</div>'+
'<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span>'+
'</div></li>';
$('.home').html(content).trigger("create");'
Any ideas? Here is the
Fiddle.
I found my mistake, I had the (#btnPopupChoice).click on another page (index.html) I just moved it right after the $('.home').html(content).trigger("create");' in the javascript file and worked.
Related
I'm not sure how to explain this problem.
We have 3 environments (Dev,Staging, and Prod) .Project is written in MVC, code is the same in all .
webconfig setting for sessionstate timeout is the same as below :
<sessionState timeout="45" />
we have a partialView which is shown when browser is idle for 45 minutes
<div id="signoutDialog" data-role="dialog" data-close-btn="none">
<div data-role="header" data-theme="d">
<h1 class="ui-title">Session Expired</h1>
</div>
<div data-role="content" data-theme="a">
<p>Looks like you’ve been away for a while! To keep your information safe, we’ve logged you out.</p>
<p>To log back in, please click on the button below.</p>
<p>
<a data-role="button" data-rel="back" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" href="javascript:void(0)" onClick="window.location.reload()" class="btn-green solid" id="btnSignoutDialogLogin">Log in</a>
</p>
</div>
</div>
Problem: this code works fine in dev , but not in Staging and Prod. I checked the IIS settings in all . they're the same .
I'm not sure if any cookies should be chek , and how they can be related to this problem.
Any help would be appreciated .
question : we have lots of background tasks run for user every few minutes . does it count as interaction ? does it renew session ID each time?
I am trying to implement addthisevent into my jqm application (1.4), but I have two issues.
The Link/Button doesn't appear. Looking with Firebug shows that the css class isn't loaded as hidden.
After manually activating the visibility using firebug, the link doesn't do anything.
Does anyone have experience with integrating addthisevent into a jqm app? Is there anything I have to be particularly careful of?
Many thanks in advance.
It appears that the jQM CSS interferes with AddThisEvent CSS. One solution is to add data-role="none" to the link which tells jQM to leave the link alone and not to enhance it.
<a href="#" data-role="none" title="Add to Calendar" class="addthisevent" rel="external">
Add to Calendar
<span class="_start">10-05-2014 11:38:46</span>
<span class="_end">11-05-2014 11:38:46</span>
<span class="_zonecode">38</span>
<span class="_summary">Summary of the event</span>
<span class="_description">Description of the event</span>
<span class="_location">Location of the event</span>
<span class="_organizer">Organizer</span>
<span class="_organizer_email">Organizer e-mail</span>
<span class="_facebook_event">http://www.facebook.com/events/160427380695693</span>
<span class="_all_day_event">true</span>
<span class="_date_format">DD/MM/YYYY</span>
</a>
Here is a DEMO
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I have a list which consists of two sections:
<ul data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
<a href="http://some address" ></a>
</li>
What I would like to do is when the user clicks anywhere in the left-hand section of a row I would like to play an audio file (using the html5 tag) and for the text in this section to be removed and replaced with the audio controls for the playing audio. When the user stops the audio I'd like things to return to as they were.
I'm new to JQuery and JQueryMobile and not sure where to begin with this.
Ideally if it is possible when the audio controls appear it would be great if there could be some sort of flipping animation i.e. such as that section of the row rotates and on one side is the audio controls and on the other is the text.
Is such a thing possible?
TIA
You can nest whatever you want in your li, so you can just put two div containers in there and bind to the appropiate events and show and hide them based on that.
For example:
Markup:
<ul id="parentUL" data-role="listview" data-theme="a" data-inset="true" data-split-theme="c">
<li>
<a style="padding-top:0">
<div class="txtCnt">
<h5>Text 1</h5>
<p><strong>Text 2</strong></p>
<p>Date: April 17, 2012</p>
</div>
<div class="audioCnt displayNone">
<h1>Audio Controls</h1>
</div>
<a href="http://some address" ></a>
</li>
</ul>
JavaScript:
$('#parentUL').on('click', '.txtCnt', function () {
$(this).hide().parent().find('.audioCnt').show();
});
$('#parentUL').on('click', '.audioCnt', function () {
$(this).hide().parent().find('.txtCnt').show();
});
I think it's there in jQTouch but how do I add a full screen welcome image for my iPhone web app developed using jQueryMobile?
The app is a full screen web app and it is already added in the iPhone Homescreen.
This is just a concept but you could try something like this:
Live Example: http://jsfiddle.net/yzvWy/14/
JS
$(function() {
setTimeout(hideSplash, 2000);
});
function hideSplash() {
$.mobile.changePage("#home", "fade");
}
HTML
<div data-role="page" data-theme="b" id="splash" style="background-color: #fff;">
<div class="splash">
<img src="http://jquerymobile.com/demos/1.0a4.1/docs/_assets/images/jquery-logo.png" alt="splash" />
</div>
</div>
<div data-role="page" data-theme="b" id="home">
<div data-role="content">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li>Intro to jQuery Mobile</li>
<li>Features</li>
<li>Accessibility</li>
<li>Supported platforms</li>
</ul>
</div>
</div>
</div>
iOS has its propertiary stuff for displaying a splash while app loads. I didn't use it yet (I didn't need that) but here's how they say it can be done:
<link rel="apple-touch-startup-image" href="img/splash.png" />
You might want this too:
<link rel="apple-touch-icon" href="./apple-touch-icon.png" />
See here for more:
http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
Thanks for the help. This didn't work with the current stable release of Jquery Mobile, since it doesn't yet support 1.7. I managed to combine it another solution on the matter and came up with:
$ (function(){
setTimeout(function(){
$.mobile.changePage("#home", "fade");
}, 3000);
});
Thanks!