How to shift buttons Right bottom in list view using jquery mobile

Question

I am implementing a custom list view in jQuery mobile. My problems:

I need two buttons having their positions on right bottom. But it always displays on top.
Secondly i need these buttons are invisible .They are visible only when user clicks header button (on page).I tried a lot of things but that didnt help. Can you please help me how to do that?

DEMO

http://jsfiddle.net/ravi1989/d47ry/2/

HTML

<div data-role="page" id="DocumentScreen">
    <div data-position="fixed" data-role="header" data-tap-toggle="false"
    data-theme="b">
        <a data-inline="true" data-role="button" data-theme="b" href="#Home"
        style=
        "text-align:left;margin-left: 20px; margin-bottom: 10px;">Back</a>

        <h1 class="ui-title" id="hdr" style=
        "text-align:left;margin-left: 100px;">My Documents</h1>

        <div class="ui-btn-right" data-role="controlgroup" data-type=
        "horizontal">
            <div>
                <a data-role="button">AddORDelete</a>
            </div>
        </div>
    </div>

    <div data-role="content">
        <ul data-inset="true" data-role="listview" id="folderInside_Data"></ul>
    </div>
</div>

JS

  for (i = 0; i < 40; i++) {
      $('#folderInside_Data').append('<li  data-icon="edit" data-icon="delete" class="rowID"  id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<button class="ui-btn-right" >Edit</button>' + '<button class="ui-btn-right" >Delete</button>' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>');
      $('#folderInside_Data').listview('refresh');
  }
  $(document).on('click', '.rowID', function() {
      // $.mobile.changePage($("#realTimeScreen"));
      $.mobile.changePage($("#realTimeScreen"), {
          transition: "slide",
          reverse: false,
          changeHash: false
      });
      console.log(this.id)
  });

Any suggested solution.. – zevio rodrigues Jun 29 '13 at 04:01 — zevio rodrigues, Jun 29 '13 at 04:01

Praveen · Accepted Answer · 2013-06-29T06:49:06.497

2

To position any element in bottom right corner, you need to use the following css.

position: absolute;
bottom:0;
right:0;

Yes possible to show and hide check this Updated Fiddle.

Added css:

.positionCorner {
    position: absolute;
    bottom:0;
    right:0;
    display: none;
}

Your Script:

$('.ui-btn-text').click(function () {
                   $('.positionCorner').show();
                   // $.mobile.changePage($("#realTimeScreen"));
                   $.mobile.changePage($("#realTimeScreen"), {
                       transition: "slide",
                       reverse: false,
                       changeHash: false
                   });
                   console.log(this.id)
               });

Updates:

To prevent going to next page

 $(document).on('click', '.rowID', function (event) {
                   // $.mobile.changePage($("#realTimeScreen")); 
                   if(!($("fieldset").is(":visible"))){
                   $.mobile.changePage($("#realTimeScreen"), {
                       transition: "slide",
                       reverse: false,
                       changeHash: false
                   });
                   console.log(this.id)  
                   }
               })

edited Jun 29 '13 at 06:49

answered Jun 29 '13 at 05:03

Praveen

55,303
33
133
164

Hello you can't understand my question.Actually i need that when User click (addor Delete)Button from header .Then he able to see buttons .After selecting any button from row(edit or delete )it again invisible – zevio rodrigues Jun 29 '13 at 05:11
Yes ..You are showing buttons (edit or delete)on clicking Back it's ok.But clicking any (edit or delete buttons )it again invisible.you are 50 % correct .secondly How to how which row's(edit or delete) button is click? – zevio rodrigues Jun 29 '13 at 05:21
Actually showing (edit or delete ) buttons on row is on clicking add ordelete button on header .But you did that on back button.It's ok i will do that – zevio rodrigues Jun 29 '13 at 05:24
@zeviorodrigues Actually I used class selector to show button, now I have modified a little, take a look at [this](http://jsfiddle.net/praveen_jegan/d47ry/11/) and explain the next 50% – Praveen Jun 29 '13 at 05:39
Hello user .Button are not invisible when click on it(edit or delete) show any alert(Id's of that ) buttons .. Actually i need to do some task on clicking the buttons you give same Id as row id .but when some one click on any row or button they are invisible – zevio rodrigues Jun 29 '13 at 05:44
Hello user there is bug in your demo .user able to visbile buttons when click to row ? secondly it should be invisible when user hit any buttons of row (edit or delete). – zevio rodrigues Jun 29 '13 at 05:52
@zeviorodrigues you can use `stopPropagation()` check here your [fiddle](http://jsfiddle.net/praveen_jegan/d47ry/16/) – Praveen Jun 29 '13 at 06:33
Hi you can't understand my question.First click the header Button(Addor Delete) .It show Button on row .But if user click row it show should not go next page . but now it is going .It is going only when there is no button on the list view – zevio rodrigues Jun 29 '13 at 06:41
@zeviorodrigues If button are not visible move to next page [fiddle](http://jsfiddle.net/praveen_jegan/d47ry/17/) – Praveen Jun 29 '13 at 06:51
@zeviorodrigues still you can optimize ur code, my [final fiddle](http://jsfiddle.net/praveen_jegan/d47ry/18/) for you. Is this right? – Praveen Jun 29 '13 at 06:54
@zeviorodrigues Always brief what you're trying in the question itself, this gives your great answers sometimes ("not mine :)"). Anyway I'm glad that I was able to help. Cheers. – Praveen Jun 29 '13 at 07:08

krishwader · Answer 2 · 2013-06-29T05:43:35.913

0

You'll have to wrap those buttons in a controlgroup and the control group in a span.

<span class="ctrl">
   <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" >
      <button>Edit</button>
      <button>Delete</button>
   </fieldset>
</span>

Then, add text-align:right to .ctrl

.ctrl
{
text-align:right
}

Thats it :)

Demo : http://jsfiddle.net/hungerpain/d47ry/4/

To toggle the visibility on click of a button, you could use toggleClass

Demo :http://jsfiddle.net/d47ry/12/

edited Jun 29 '13 at 05:43

answered Jun 29 '13 at 04:46

krishwader

11,341
1
34
51

Thanks But i need these button are invisible .These buttons are only visible when header button (Add or delete) is click.is this possible.? – zevio rodrigues Jun 29 '13 at 04:57
That is awesome answer you are showing alert,But after showing alert the button should again invisible.But they are not ..:(.Please invisible that buttons whenever user click any buttons(edit or delete) of any row. – zevio rodrigues Jun 29 '13 at 05:50
You add the toggle class on addorDelete button it don't need that.. After clicking the edit or delete button it is invisible.? – zevio rodrigues Jun 29 '13 at 05:57
Why dont you take that code and paste it in there? Is it THAT hard to do? – krishwader Jun 29 '13 at 06:02
Thanks I did it thanks for support ..http://jsfiddle.net/ravi1989/d47ry/14/ Here is my Update code – zevio rodrigues Jun 29 '13 at 06:10
Is there any way handle this problem .If user able to see buttons(edit or delete) it is not able to go other page .mean actually on row click there is navigation it is only possible when there is no buttons on row? – zevio rodrigues Jun 29 '13 at 06:17
here is my update code.i need to block user to go next page if buttons are visible (list view edit and delete).how it is possible.?http://jsfiddle.net/ravi1989/d47ry/15/ – zevio rodrigues Jun 29 '13 at 06:23
I like your previous name more than this :) – Omar Jun 29 '13 at 14:38
Once a month change @Omar :-) on a serious note.. I think jQM needs some default questions abt the refresh api.. Like this "refreshing list view" n stuff gets repeated everywhere.. Needs a dupe list. And too much spoon feeding happening.. Slightly depressing :-) – krishwader Jun 29 '13 at 14:41
There is a master [answer for all types of enhancement.](http://stackoverflow.com/questions/14550396/jquery-mobile-markup-enhancement-of-dynamically-added-content). – Omar Jun 29 '13 at 14:45
Ah yes. Il direct ppl to this from now on. Thanks – krishwader Jun 29 '13 at 14:47
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32618/discussion-between-hungerpain-and-omar) – krishwader Jun 29 '13 at 14:58

How to shift buttons Right bottom in list view using jquery mobile

2 Answers2