jQuery Forum

When opening panel current position on page is lost.

1. Goto http://jquerymobile.com/test/docs/panels/index.html

2. Scroll halfway the page to section "Opening a panel"

3. Click the "Default panel" in this section

Result: panel is opened but calling page is back to top

This functionality is more or less implemented in http://jquerymobile.com/branches/slide-panel/docs/panels/index.html via a listview in the panel.

The first listitem has some tweaking (margin-top and color).

I've implemented something similar and hosted it at: http://jsfiddle.net/ZnuwT/2/

It uses similar listview and the tweaking.

The difference I need is to put a header on the panel with a close item.

I've used the technique of the listview, but (and this the important part) I want the panel only to be closed with the close button not with clicking the title (= list item). 

I wonder how I can solve this best.

In 1.2.0 this works as expected but in 1.3.0-beta.1 not.

See 2 simple fiddle's below:

1.2.0: http://jsfiddle.net/3rMSu/

1.3.0-beta.1: http://jsfiddle.net/4gnkx/1/

Clicking on the list item in 1.3.0 navigates to other page which should be prevented.

Cheers,

Marcel

So basically what I want is the jqm ajax navigation, loading widget and (touch) events.

I noticed http://jquerymobile.com/download-builder/ but I'm not sure what the status is as it's mentioned not to use it for production code.

And even if it was production ready, I'm not sure which components to pick for what I want.

Is it easily possible to use what i stated above without a hacky approach? This also means easily upgrade process to future jqm versions.

Kind regards,

Marcel

Basically what I want is a navigation page and whatever choice you make is that another page will side over the menu.

From these pages there will left header button which will open the menu page again.

I looked into the current slide transitions and they can help a lot already.

For showing the menu page I can use data-transition="reverse slide" >> slide right

And for showing the other pages I can use data-transition="slide" << slide left

However the only thing that I don't how to implement is that basically the menu page it self should not slide, so creating the effect that the 'other' pages only slide.

Basically this craeted the effect that when you click the menu that the page will slide to right and menu page become available as it would sit under the page.

And when clicking a link in the menu, that particular page will slide in from the right over the menu (without the menu moving itself).

I wonder if this is possible with tweaking the transition css or not.

E.g. http://jquerymobile.com/test/docs/forms/forms-all.html contains all sort of form elements which seem to align to the same width; except the horizontal radio button set.

<li><a href="#" data-icon="plus">New line</a></li>

As in above sample code I tried with data-icon but this has no effect.

In some cases I would like to have a different icon in a particular listview item.

Is this possible?

I'm using this markup currently:

The default css gives the label 20% width and the input 60%. The other 20% seems not to be used.

I tried to change the width for inputs and selects to 80% but that's to wide which make the field to be displayed on the next line. I also tried something like 77% which seems to work on my desktop, but depending on the width of my browser it is again displayed on the next line. This actually never happens with the default 60% width.

I wonder if somebody bumped against this as well and has an idea how to solve it best?

and you can see that default text input is wider than e.g. search input and selects.

Would be nice if they would have the same width.

I also wonder why there is a empty 20% block on the right.

Label = 20%, inputs = 60%, wherefore is the other 20%.

Note that the buttons below the forum span the full 100% of the page.

Just wondering...

This works great, the only problem I have is showing the loading message.

I'm searched this forum and more uses have problems with showing the loading message (even without Backbone) but there is no real explanation how the loading message works and why it not behaves simply as a on/off.

Part of my coffeescript code:

Basically it's a simple list view. While building the page a loading the collection of customer it would be nice to show a loading message.

But with above setup it's not displaying.

I also removed the hidePageLoadingMsg and than after page is displayed the loading message is displayed (and is not hidden). But that timing is way to late, after requesting the json data from the server.

Hopefully somebody can shed some ligh on this as it's rather frustrating (and should be basic functionality).

For what is worth I'm using 1.1 rc.1.

I'm using

for adding automatic back buttons.

Now I wonder if I can change it's icon and use something similar like data-iconpos="notext"

At a given point I want to reset the values programmatically using: 

However the styling of the radio buttons is not changed.

E.g. is MALE was selected it still appears selected.

Should I do some kind of refresh?

Cheers,

Marcel

E.g. take an invoice creation screen.

It would contain the invoice date, customer and a list invoice items.

I would like to present the invoice items as a tabular form containing line number, description, quantity, prize and total line prize.

Has somebody an example of more advanced forms in jQuery Mobile used for tablets.

I don't mind phones with smaller screen width as application will be developed for tablets only as internal application.

Cheers,

Marcel

One part of the app is some CRUD functionality to create customers.

After submitting a form to create a new contact I end up on the contact list page.

This list page is just a complete html fragment containing the data-role="page" so it's not loaded using json.

What I would like to to is add a disappearing message to the list page noting 'Contact has been created' just like a message is displayed in case of a loading error.

Is this possible, and maybe even including html markup in the list page?

I would like to intercept the event these additional pages are loaded so tried the following.

The additional page looks like:

<div data-role="page" id="productlist">..</div>

Now in the main page I have this code:

The problem is this event is now called also for othe pageinit e.g. a page with id 'customer-list' and 'main'.

Now when I change the id to 'productlist' and also reflecting this in the mobileinit then it works perfectly.

The pageinit is then only called for the productlist page.