Search jQuery

jQuery Forum

Screen name:
ollibruening

ollibruening's Profile

18 Posts

532 Responses

2 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

ThemeRoller - change themes on the fly in your jqm web application
[0Replies]
- 27-Nov-2011 08:48 AM
- Forum: jQuery Mobile
please take a look at this demo:

http://obruening.github.com/projects/customthemechanger/custom_theme_changer.html

probably not the most elegant approach and not the most elegant javascript, but it seems to work.

have fun!

angular and jquery mobile. adding a listitem works without listview('refresh'). why?
[0Replies]
- 24-Nov-2011 01:03 PM
- Forum: jQuery Mobile
i have this example: http://jsfiddle.net/olli/kuLN2/
i would expect that i would have to call listview('refresh') on the ul
element after a new phone is added. this step is usually required to
enhance a newly added list item.
in the example the list item is enhanced without a call to
listview('refresh'). i wonder why :-)

Thomas Hooker Brewery mobile website
[0Replies]
- 19-Oct-2011 11:27 AM
- Forum: jQuery Mobile
i found this very stylish mobile website on jqmgallery, see http://www.jqmgallery.com/2011/10/11/thomas-hooker-brewery/

it has very cool custom made headers and footers and lists without rounded corners. there's a lot to learn from this site, take a look.

$.mobile.page.prototype.options.keepNative not working

[1Reply]

03-Oct-2011 10:06 AM
Forum: jQuery Mobile

the value of $.mobile.page.prototype.options.keepNative is not applied in the jquery mobile code. has somebody managed to solve this problem?

in my view

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){

 $( $.mobile.textinput.prototype.options.initSelector, e.target )
 .not( ":jqmData(role='none'), :jqmData(role='nojs')" )
 .textinput();

});


should be

//auto self-init widgets
$( document ).bind( "pagecreate create", function( e ){

 $( $.mobile.textinput.prototype.options.initSelector, e.target )
 .not( $.mobile.page.prototype.options.keepNative )
 .textinput();

});

icons in navbars
[0Replies]
- 09-Sep-2011 01:04 PM
- Forum: jQuery Mobile
is there a way to postion icons in navbars in any other way than "top" (attribute data-iconpos) ?

scrollstart / scrollstop - is there any practical use for these events?
[1Reply]
- 26-Aug-2011 04:11 PM
- Forum: jQuery Mobile
i don't see any yet.

how to create a jquery mobile plugin?
[1Reply]
- 21-Aug-2011 01:47 PM
- Forum: jQuery Mobile
i'm looking for an example/tutorial for programming a jquery mobile plugin. i'm aware of this https://gist.github.com/1071960, but it is only a scaffold.

example for create event
[10Replies]
- 07-Aug-2011 10:23 AM
- Forum: jQuery Mobile
hi,

we all know that page() is evil and that we should use the new create event to enhance the content of an element.

here is some working example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Example</title>
5. <meta name="viewport" content="width=device-width, initial-scale=1">
6. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
7. <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
8. <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
9. <script>
10. $('#mypage').live('pagecreate',function(event) {
11. $('#addNewList').bind('click', function(event) {
12. $('#list_container').append($('<ul data-role="listview"><li>Entry 1</li></ul>'));
13. $('#list_container').trigger('create');
14. });
15. });
16. </script>
17. </head>
18. <body>
19. <div id="mypage" data-role="page">
20. <div data-role="header">
21. <h1>
22. Add New List
23. </h1>
24. </div>
25. <div data-role="content">
26. <a data-role="button" id="addNewList">Add New List</a><br/>
27. <div id="list_container" />
28. </div>
29. </div>
30. </body>
31. </html>

inline buttons / error in the online documentation
[0Replies]
- 16-Jul-2011 05:47 AM
- Forum: jQuery Mobile
this doesn't work:

<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

the inline attribute must be in the a/button/input tags. seems to be only an error in the current version of the online doc. it's correct in the github repository. see http://jsfiddle.net/olli/27bND/ for an example.

how does inline buttons work ?
[1Reply]
- 15-Jul-2011 02:44 PM
- Forum: Developing jQuery Mobile
i was asking myself how inline buttons work.

from the doc:

<div data-inline="true">
<a href="index.html" data-role="button">Cancel</a>
<a href="index.html" data-role="button" data-theme="b">Save</a>
</div>

i can't find the place in the jquery mobile codebase where the data-inline attribute is detected.
the div must be removed, too. where does it happen? and how can i create inline buttons on the fly?

jQuery template plugin / page() method
[0Replies]
- 15-Jul-2011 05:30 AM
- Forum: jQuery Mobile
i want to generate some content of my page with the jQuery template plugin, see http://jsfiddle.net/olli/Xv7Wt/

the generated content is not enhanced. i could call page() on the content div, but that will trigger the pageCreate event. in my project, this is not an option.

there should be a method to enhance some content without side effects. i guess many folks here struggle with this issue in one way or another. it complicates programming with jquery mobile in many ways, especially when it comes to client side operations with frameworks like knockout or backbone.

processingjs + jQuery mobile
[0Replies]
- 14-Jul-2011 03:41 AM
- Forum: jQuery Mobile
processingjs (http://processingjs.org/) is the javascript port of the processing programming language. it makes use of the the canvas element.

processingjs works fine together with jquery mobile. it also supports touch events, iOS only, unfortunately.

here is a working example:

<!DOCTYPE html>
<html>
<head>
<title>Processingjs</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="http://processingjs.org/content/download/processing-js-1.2.1/processing-1.2.1.js"></script>
</head>
<body>
<div data-role="page" id="master">
<div data-role="header">
<h1>Processingjs</h1>
</div>
<div data-role="content" id="content">
<canvas data-processing-sources="anything.pjs"></canvas>
</div>
</div>
</body>
</html>

anything.pjs
=========
// source: http://www.bradchen.com/blog/2011/04/processing.js-touch-events

void setup() {
size(400, 300);
background(255);
}

void touchMove(TouchEvent touchEvent) {
// empty the canvas
noStroke();
fill(255);
rect(0, 0, 400, 300);

// draw circles at where fingers touch
fill(180, 180, 100);
for (int i = 0; i < touchEvent.touches.length; i++) {
int x = touchEvent.touches[i].offsetX;
int y = touchEvent.touches[i].offsetY;
ellipse(x, y, 50, 50);
}
}

void touchEnd(TouchEvent touchEvent) {
noStroke();
fill(255);
rect(1, 1, 400, 300);
}

jsFiddle Template for example code
[0Replies]
- 24-Jun-2011 11:31 AM
- Forum: jQuery Mobile
hi.

i posted a template on jsFiddle for example code. i find it easier to follow if i see a live example of a problem.

it uses jquery mobile beta 1.

you can fork it and use it for your submissions to the forum.

http://jsfiddle.net/olli/HFbpE/

what cms do you use for your jquery mobile site?
[2Replies]
- 14-Jun-2011 01:35 PM
- Forum: jQuery Mobile
most cms systems are optimized for non-mobile websites. i found that flexible and simple cms are best suited for jquery mobile. for example radiant or silverstripe. what cms do you use? and why is it the right choice?

demo for tap / swipe / orientationchange events
[2Replies]
- 02-Jun-2011 04:47 AM
- Forum: jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<title>Events</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

<script type="text/javascript">

function addToQueue(queue, entry) {
while (queue.length >= 10) {
queue.pop();
};
queue.unshift(entry);

var ul = $('<ul/>');
$.each($(queue), function(i, val) {
ul.append('<li>' + val + '</li>');
})

$('#eventLog').html(ul);
}

$(document).ready(function () {
var eventQueue = new Array();

$("a[data-role='button']").live('click', function() {
resetButton($(this));
});

$('#touch').bind('tap', function(event) {
addToQueue(eventQueue, event.type);
});

$('#touch').bind('taphold', function(event) {
addToQueue(eventQueue, event.type);
});

$('#touch').bind('swipe', function(event) {
addToQueue(eventQueue, event.type);
});

$('#touch').bind('swipeleft', function(event) {
addToQueue(eventQueue, event.type);
});

$('#touch').bind('swiperight', function(event) {
addToQueue(eventQueue, event.type);
});

$(window).bind('orientationchange', function(event) {
addToQueue(eventQueue, event.orientation + ' ' + orientation);
});

});

</script>
</head>
<body>
<div data-role="page" id="master">
<div data-role="header">
<h1>Events</h1>
</div>
<div data-role="content" id="content">
<p>
handles tap, taphold, swipe, swipeleft, swiperight and orientationchange events.
</p>
<div id="touch" style="border-width: thin; border-color: black; border-style: solid; padding:10px; margin-bottom:10px">
touch area
</div>

<div id='eventLog'>
</div>

</div>
</div>
</body>
</html>

predefined html fragment vs. button() method
[0Replies]
- 28-May-2011 12:01 PM
- Forum: jQuery Mobile
i wanted to add buttons dynamically. there seems to be several ways to do that.

i noticed in firebug that button() method creates dom wrapped in a div. i wondered why the button() method doesn't create the more intuitive version with the <a> tag. both versions work, see http://jsfiddle.net/olli/HTSsz/

knockout.js and jquery templates with jquery mobile
[2Replies]
- 14-May-2011 03:07 PM
- Forum: jQuery Mobile
i want to use knockout.js with jquery mobile.

i use the jquery templating plugin to add list items dynamically. unfortunately, the generated markup is rendered as is, it is not enhanced by jquery mobile. how can this be done?

best regards
oliver

Theme Explorer for JQuery Mobile
[0Replies]
- 03-May-2011 04:10 PM
- Forum: jQuery Mobile
Please take a look at http://fierce-mist-608.heroku.com/

It lets you experiment with swatches that are provided with JQuery Mobile.

Have fun.

Oliver

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend