jQuery Forum

play notification sound with jquerymobile on mobile devices
[1Reply]
- 18-Dec-2012 10:23 AM
- Forum: Using jQuery Plugins
Hello,
i develop a page with jquerymobile 1.2 .
i want to play a notification beep sound(format not important) when page open. i searched forums and didn't find any clear solution for this. i think playing sounds on mobile browser have problems.
sound sould play all browsers and in any mobile platform
i tried html5 audio tag and some jquery mobile plugins they don't work in android 2.1

What is your suggestions?

google maps not full screen after upgrade to jquerymobile 1.2
[3Replies]
- 12-Dec-2012 05:39 PM
- Forum: jQuery Mobile
Hello,
i have a basic google maps example 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/

jquerymobile 1.2 google map full screen problem
[3Replies]
- 06-Nov-2012 10:35 AM
- Forum: jQuery Mobile
Hello,
i use google maps in jquerymobile. after upgrade to jqm 1.2 , maps not shown in full screen.(in mobile & desktop browsers). But when i resize browser window, it turns into full screen(that i want at first screen opened).
i search problem in internet and try most of them but none of them helpful for me.

What is you suggestions?


<div data-role="page" id="map" data-add-back-btn="true" data-fullscreen="true" style="width:100%; height:100%;">
<div data-role="header" data-position="fixed">
<h1 id="mapHeader">Konum</h1>
<a href="#menu" data-role="button" data-icon="grid" class="ui-btn-right" data-theme="e" >Menu</a>
</div>
<div data-role="content" id="map_content" style="width:100%; height:100%; padding:0;">

<div id="map_canvas" style="position:absolute; width:1024px; height:768px; min-height:100%;"></div>

</div>
</div>

which tableview & charting plugin for jqm
[7Replies]
- 16-Jul-2012 06:05 AM
- Forum: jQuery Mobile
Hello Everyone,

i need tableview and charting plugin for jqm.

Tableview must has visual design for mobile, can able to sort-filter-sum-dynamic add/remove columns and export data to pdf/excel.

i found this ( http://stokkers.mobi/jqm/tableview/demo.html ). it looks very nice and can sort-filter-dynamic add/remove columns but there isn't any documentation.

i decided to draw chart according tableview data dynamicly. maybe jqplot is a good alternative but i wonder that Is there any charting plugin for jqm?

In addition, sigma widget plugin has specifications that i look for but it is not open source and not have a visual design for mobile..
http://www.sigmawidgets.com/products/sigma_grid2/demos/example_master_details.html

waiting for your suggestions..
Thank you

Dynamic listview loses it's data when back from dynamic detail page
[4Replies]
- 10-Jun-2012 06:35 AM
- Forum: jQuery Mobile
Hello Everyone,

I am an abap developer and working on a project in jquery mobile.

i want to create listview and details dynamicly in SEPARATE html pages.(i want to separate all the pages into different htmls because of the future maintenance needs)

i have two JSON web service to list and detail. i can create listview without problem. Problem begins when request for detail page. after user click an item on listview, detail page was opened.(ın fact i plan to use detail.html as a draft and fill its content dynamicly, but when i put each page into separate htmls i can not achieve this, if i have only one html, there is no problem )

When user want to return listview page all listview data has gone, there is only header on the page,

i search the web but can not find any solution. Nearly all of the example codes is on ASP and PHP.
i think there is a blog need on that topic: creating listview and detail page dynamicly from JSON in separated html files:)

Thank you for your help..

Here is my pages and javascript:( without second web service call)

list.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="user-scalable=no,width=device-width, initial-scale=1"/>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

<script type="text/javascript" src="/js/list.js"></script>

</head>
<body>

<div data-role="page" id="list" class="list" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>List</h1>
</div>
<div data-role="content">
<ul data-inset="true" data-role="listview" id="posts" data-theme="e">

</ul>
</div>
</div>
</html>

list.js

//this called from menu page
function fillList() {
var listdata;
$.ajax({
url: 'myservice link',
type: 'POST',
contentType: "application/json; charset=utf-8",
data: ''
dataType: 'json',
timeout: 10000,
cache: false,
beforeSend: function(xhr, settings){
$.mobile.showPageLoadingMsg();
},
complete: function(xhr, textStatus) {
$.mobile.hidePageLoadingMsg();
},
success: function(response){

listdata = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;

$('#posts').empty();
//setup an array (or string) to buffer the output
var output = [];

for (var i = 0; i < listdata.length; i++) {

output.push('<li><a data-index="' + i + '" href="javascript:showDetail("+ listdata [i].id+")" data-rel="dialog">'
+'<img src="img.png" alt="img" class="ui-li-icon">'
+ '<p><strong> ' + listdata [i].CategoryName + ' ' +
   listdata [i].Header + '</strong><br /> ' +
   listdata [i].Text + '<br /> ' +
'</p>'
+ '</a></li>');
}

$('#posts').append(output.join('')).listview('refresh');
},
error: function(xhr, textStatus, errorThrown) {
alert(textStatus);
}
});
}

function showDetail(id){

var newPage = $("<div id='category-items' data-role='page' data-add-back-btn='true'><div data-role='header'><h1></h1></div><div data-role='content'></div></div>");

newPage.appendTo($.mobile.pageContainer);

// Get the page we are going to dump our content into.
var $page = $( pageSelector ),

// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),

// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),

markup = "<p>" + "my detail text" + "</p>";

$header.find( "h1" ).html( "my detail Header" );

$content.html( markup );
$page.page();
$.mobile.changePage( $page);
}

Response title

Attachments

jQuery Forum

Activity Trend