JQM version: 1.0b1

Issue: After open and close first time, on the second time the box is not closed properly.

Reason: In the open function the wallpaper DIV append with jqm-content. This append content stored in the hash history, after hit the close button second time the immediate wallpaper div removed but the one from history stays on.

Solve: Create the wallpaper at initiation and keep it hidden [Check the changes on my fork.]

While the actionsheet is displaying on screen, I am still able to scroll down the content. And when I scroll down, the actionsheet moves up just like its position relative to the page content itself.
Does anyone know how to fix this? It is better to lock the scrollbar while the actionsheet displays on screen so that its position is fixed.

A) Is this project still alive?

And...

B) How do you open the action sheet programmatically?

This is a really nice plugin but I am wondering if it is possible to change the look of the button. To tell you the truth, I don't want the text that calls the popup to look like a button. I want it to be plain text. I looked at the css sheet but cannot find where to change it. Is it in the js file? If it is, how can I change that?

This is working beautifully for me.

Here is where I can use some help if possible.

I have a navbar with 4 buttons in the footer, 2 of them launch a dialog but I would like to have only one open at a time.Which means that one of the overlays is active (displayed), I would like it to hide when the other overlay is activated by clicking on the a data-role="actionsheet". I have tried a few things without success. Thanks!

    a href="#home">Home
    a href="#groupdata">Groups
    a data-role="actionsheet" data-sheet='map_filter_overlay' id="filter-a">Map Filter
    a data-role="actionsheet" data-sheet='holeselector_overlay' >Go to Hole

Hi, some licencing Information would be great!

One of my actionsheet buttons navigates to a new page. When I return to the page that hosts the actionsheet, after any period of time, I see it disappearing (presumably the remaining close animation).

Is there a way to "clear it out" - or cleanly close it down before leaving the original page?

when i use login sample on android pad , it jumped not smooth, please tell me how to fix it,3q

I see in your example that you can include a cancel button in the actionsheet, but when I try I get an unbind error.

Here is my actionsheet (still in development)

     <a href="#" data-role="button" data-theme="c">Delete</a>
     <a href="#" data-role="button" data-theme="c">Copy</a>
     <a href="#" data-role="button" data-theme="c">Move</a>
     <a href="#" data-role="button" data-theme="c" data-rel="close">Cancel</a>

here is the error
jquery.mobile.actionsheet.js:72 Uncaught TypeError: Cannot call method 'unbind' of undefined

Do you have any ideas?

JQM 1.1.0 RC1 introduced zooming issues for me (no longer respected viewport), thus I disabled zooming using $.mobile.zoom = "disable"; but this also disabled JQM-actionsheet.
Reenabling zooming, reenables actionsheet.

It seems to have an issue, the actionsheet buttons are not rendered at all when placed in a jqm datagroup

I think that the turn of Background and Content is reverse.

Background are coming above Content.

I am developing iPhone App using jQuery Mobile 1.0 Final & PhoneGap.

'top':(height / 2 - this.content.height() / 2),
'left': (width / 2 - this.content.width() / 2)

I am building my page with ajax and it is not linking the actionsheet to the link. I assume this is because your code is running before my page is done building. So I need to know how to call this code after I am done building my page with ajax?

I tried to put the actionsheet trigger into a JQM listview. Did not work as-is.

I got it to work by doing the following:

• also check for parents(li) before applying button markup to not get a list-item-button
• replace data-role="actionsheet" with data-trigger="actionsheet" to preserve data-role (for buttons or other)
• add an id to the trigger link and same class to the corresponding action sheet and replace next(div) with a query for class with id of trigger
• this way you can put the action sheet div anywhere you want, as placing it right after a list elements link will also break the script

If you want I can make a commit of the modified version. Maybe something you can use.

Sonst ein super Plugin!

@hiroprotagonist this project is really great. I started using it for the second time in a project for a client and discovered that the fadeIn/fadeOut support had been removed. I was able to add the old fadeIn/fadeOut code to my application's CSS (by SCSS) but wonder if this support should be standard? Also clear directions on how to change the transition in an application, such as: add the following to your application's CSS to use fade transitions:

.ui-actionsheet-animateIn {
    -webkit-animation-name: actionsheet-open-fade;
}
.ui-actionsheet-animateOut {
    -webkit-animation-name: actionsheet-close-fade;
}

data-role='actionsheet' ,,the face will change to button, so how can i use this actionsheet on the other controller?? like the list view ?

possible fix

css

.ui-actionsheet-wallpaper {
background-color: black;
opacity: .3;
width: 100%;
height: 100%;
display: none;
z-index: 10;
/* added the following */
position:absolute;
top:0;
}

js

/* made changes to the open method, close method, and added to private methods (_positionContent, _resizeWallPaper)*/

open: function () {

        var currentContent = this.content.parents(':jqmData(role="content")');

        this.element.unbind('click'); //avoid twice opening

        this.wallpaper = $('<div>', {
            'class': 'ui-actionsheet-wallpaper'
        });

        this._resizeWallPaper(currentContent);

        this.wallpaper.appendTo(currentContent);

        $(window).bind('orientationchange.actionsheet',$.proxy(function () {
            this._resizeWallPaper(currentContent);
            this._positionContent();
        },this));

        this.wallpaper.show();

        window.setTimeout(function (self) {
            self.wallpaper.bind('click', function (event) {
                self.close();
            });
        }, 500, this);

        this._positionContent();

        this.content.animationComplete(function (event) {
            $(event.target).removeClass("ui-actionsheet-animateIn");
        });

        this.content.addClass("ui-actionsheet-animateIn").show();
    },
    close: function () {
        var self = this;
        this.wallpaper.unbind('click');
       /* only change here*/
        $(window).unbind('orientationchange.actionsheet');
        if (!$.support.cssTransitions) {
            this.wallpaper.remove();
            this.content.fadeOut();
            this.element.bind('click', function () {
                self.open();
            });
            return;
        }
        this.content.addClass("ui-actionsheet-animateOut");
        this.wallpaper.remove();
        this.content.animationComplete(function (event) {
            self.reset();
        });
    },
    _resizeWallPaper: function (currentContent) {

        var paddingLeft = currentContent.css('paddingLeft');
        var paddingRight = currentContent.css('paddingRight');
        var paddingTop = currentContent.css('paddingTop');

        this.wallpaper.css({ marginTop: '-' + paddingTop, marginLeft: '-' + paddingLeft, marginRight: '-' + paddingRight });
    },
    _positionContent: function () {

        var height = $(window).height();
        var width = $(window).width();
        var scrollPosition = $(window).scrollTop();

        this.content.css({
            'top': (scrollPosition + height / 2 - this.content.height() / 2),
            'left': (width / 2 - this.content.width() / 2)
        });

    }

Hey there!

I am using your plugin with the latest version of jQM and I wanted to have a plain button that opens the actionsheet. I have no idea how jQM < final have solved it but it's not enough to specify the data-icon attribute on a normal link (anymore?).

You are using "data-role='actionsheet'" but that doesn't allow me to style it like a button because jQM expects the element to have a data-role of "button".

I found a temporary fix by changing the selector in your file to
$( ":jqmData(role='actionsheet')", this ).each(function() {
to
$( ":jqmData(action='actionsheet')", this ).each(function() {

It's not the best solution but it allows me to use a button as an opener.

Maybe you got a better idea on how to solve it?

– Dominik

Hi, thank you for creating jquery.mobile.actionsheet it's definitly a very useful plugin that I'm planning to introduce in an open-source jquerymobile game I'm developing for android.. but, it seems to me that is too ios oriented, which is good, but I'll appreciate some config options to turn it more like android action sheet, if you ask me how android action sheet looks like I would say pretty much like this:

http://dev.sencha.com/deploy/touch/examples/kitchensink/ (Go to User Inferface -> Overlays -> Action Sheet)

so the two only things I'm missing are:

1. the popup be positioned at footer of page, with the background taking all the width of the screen.
2. A way to programatically open the action-sheet, without any need for the <a link, because I want the user to open the sheet when he presses the settings button on android, and so no user interface is needed to open it.

I think 1) could be activated in some "android mode" setting..

I would like to know if you think these features are interesting and consider to implement them or accept patches about them..

Thank you!

I am trying to use actionsheets with a split list, but it is converting the lists into buttons. This messes up the look. Is their a way to apply an action sheet without it converting the link to a button?

I think there's a mistake in the _init code that moves external actionsheets into the current page's content.

var currentContent = this.content.parents(':jqmData(role="page")').children(':jqmData(role="content")');

It should rather be:

var currentContent = this.element.parents(':jqmData(role="page")').children(':jqmData(role="content")');

/ Fredrik

wallpaper's size is the whole page size. on some phone (i tested in webkit on HTC One X)it is slow to renderer the wallpaper. I have tried to set the wallpaper size the same as visible window size, the performance is better.

Hi

Thanks for this great tool, I am using it extensively on my page.

This actionsheet works perfectly and looks like it should:

    </div>

This plugin is exactly what I was looking for however unfortunately it doesn't seem to work with Webkit browsers (tested on iPhone and Chrome). Any ideas why or plans to fix?

Missing css keyframes

Hi,

thanks so much for creating this - is exactly what I was looking for.

I was finding a two problems when testing this in IE9. I seem to have found fixes for both which I thought I'd share. Please note that I'm a bit of a js novice so apoligies if I say anything dumb;

Firstly, IE doesn't seem to like function parameters passed to the window.setTimeout callback. I applied afix, which appears to have resolved it - see http://der-design.com/javascripts/cross-browser-settimeout

Secondly, I get null passed in to the event parameter in this.content.animationComplete. I'm guessing that this is due to IE's lack of support for css transitions? Anyway I fixed it like this:

if ($.support.cssTransitions) {
this.content.animationComplete(function (event) {
$(event.target).removeClass("ui-actionsheet-animateIn");
});

            this.content.addClass("ui-actionsheet-animateIn").show();
        }
        else {
            this.content.fadeIn();
        }

thanks again

It is sometimes necessary to not be performed close transitions, for example to avoid flicker when deriving to other elements with animate.
For this, I propose change within the close method (see internal 'if'):

if( $.support.cssTransitions ) {       ...       }

new 'if' conditions (taking advantage of event param):

if( $.support.cssTransitions && event!==false ) {       ...      }

so you can call to close without transition :

$('#sheet').actionsheet('close',false);

I have 3 different action sheets in my footer. If I click one it works just fine, except that the footer is not part of the "wallpaper" that closes the actionsheet. This leads to my problem, since if I have one action sheet open, I can still click a different actionsheet in the footer and then this one pops up over the existing one.

I would either like to have the wallpaper extend into the footer (so I can't select a new sheet until I cancel the existing one) or learn how to close the open sheet before opening the new one.

I was playing around with your examples and I noticed that it is not disabling the footer buttons. Since they are still clickable it causes multiple actionsheets to appear. Is this something that is fixable in the template or does it have to be fixed in the plugin code?

You need to re-bind your click events to vclick for it to work in beta 1. Just a heads up.

Thank you for this marvelous JQ Mobile plugin .... I'm trying to use it but I found that when I have a link with rel='external' the link doesnt work on Android phone. Its working fine in Chrome for example but not on my mobile phone. Without rel attribute it works fine ... is this something known or how to make this work properly for this case?

Thank you !!!
David

Hi,
I am having two separate html pages which contains just the content part of action sheet. I have one main html page which calls these two html pages. but tats not working. When i have all 3 files in a single page, it works fine. Can anyone help me out in it