Multiple count bubbles in list view item

[dankh]

I'm not able to insert multiple count bubbles in list view. If I try :
<div id="content" data-role="content"> <ul data-role="listview"><li> <a href="pages/nodeview.html"> <h3>Latest headlines</h3><p>by the Economy Department</p> <span class="ui-li-count old-content">12</span> <span class="ui-li-count new-content">3</span> </a></li></ul> </div>
The second bubble overlaps the first. I tried to apply some css hacks to fix it but without success. The problem comes from the variable size of the bubble content (arbitrary value). Any ideas ?

[tehraven]

Figured since I was looking at this, I'd create the JSFiddle for it.

http://jsfiddle.net/tehraven/qxR9T/5/ (click 'Fix Bubbles')

Any reason why you have two? The docs show that each listitem can only have one bubble. These bubbles would each have the same "right" css property values, so of course they would overlap.

You can grab my JS fix for this if you'd like... Check out the link above.

[toddparker]

We're only going to officially support a single bubble but the whole idea is to just have a few common presets and have people write whatever custom CSS they want for a project. Writing the CSS for two bubbles shouldn't be too hard but you'll need to do a lot of testing to make sure things look good everywhere.

[tehraven]

@dankheu

I managed to get this done in both ways -- Javascript and CSS.

I recommend using the CSS version -- http://jsfiddle.net/tehraven/qxR9T/ (Tweak as needed)

*Edit : This doesn't solve your the variable sized bubbles, but it is the nicest way to make JQM do "two bubbles". If you can limit the size of the bubbles by using number-words like "1K" instead of "1000", you might be able to do it like this.

[jakeboone02]

@tehraven That's a useful trick. I wonder if you turned that fiddle into a blog post, if we could add it as a "tutorial" in the resources page. That way it's not lost in the flood of issues in this tracker. @toddparker what do you think?

[toddparker]

Sure. Blog it, tweet it and we'll RT and add it to resources.

[tehraven]

@jakeboone02 I don't keep a personal blog anymore. I would be more than willing to write up a post as a guest writer on someone else's though, or you could take lead on that. I'm glad you think it's worthwhile.

[jakeboone02]

I don't have a blog either. I'll just tweet about the fiddle and jQM can RT it.

So kids, reason # 5,649 you should never talk to your parents about technology is this: they get very uncomfortable when you say things like "tweet about the fiddle."

[dankh]

Thank's guys works great, I'll use the CSS hack. The bubble content is estimated max 2 digits so 2.5em margin does the job.

@toddparker Support multiple bubbles or icons is a good idea. This way in the list view user can have visual information about content available deeper. It's very common UI design and quite useful for mobile, because of the visual space limits. The variable sized bubbles problem can be resolved by getting the content length (disclaimer : I'm JS newbie).

@tehraven The reason I need two is to visually alert the user about the new content available on the server (first bubble) and the unread content he has already downloaded (second one).

[cristoh]

Thanks for the script idea. Here's my version.

Edit: http://jsfiddle.net/qxR9T/109/ - removed some useless shit.

[liuhan829]

I want new listview that user can select multi items using Jquery mobile.
How can I make it?
Thanks for your advance!

[dotnetwise]

If used along with KnockoutJS, I have updated @R34ct 's code to use this binding:

ko.bindingHandlers['jqmRefreshList'] = {
        'init': ko.bindingHandlers.template.init,
        'update': function (element, valueAccessor, allBindingsAccessor, viewModel, context) {
            ko.bindingHandlers.template.update(element, valueAccessor,
                    allBindingsAccessor, viewModel, context);
            //allow containerless-binding inside of the <UL> tag
            element = element.tagName == "ul" ? element : element.parentNode;
            element = $(element);
            try {
                $element.listview('refresh');
            } catch (e) {
                element.listview().listview('refresh');
            }
            element.find(".ui-li-has-count").each(function () {
                if ($(this).find(".ui-li-count").length > 1) {
                    var first = $(this).find(".ui-li-count:first");
                    var second = $(this).find(".ui-li-count:nth(1)");
                    var shiftFirst = (second.position().left - first.outerWidth() - 5);
                    first.css("left", shiftFirst).css("right", "auto");
                }
            });
        }
    };

usage:

Assuming this is the template

<script id="tplSession" type="text/html">
                    <li><a href="session.html?sessionId=${Id}" data-bind="text: trackAndTitle"></a><span
                        class="ui-li-count" data-bind="text: speakersNames"></span></li>
                </script>

*1 As a containerless template

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search sessions...">
       <li data-role="listdivider" data-theme="b">Now</li>
                <!-- ko jqmRefreshList: {name: 'tplTrack', foreach: Tracks, 'theme':'c'} -->
                <!-- /ko -->
 </ul>

*2 As a direct binding on the ul

<ul data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="Search sessions..." data-bind="jqmRefreshList: {name: 'tplTrack', foreach: Tracks}">
</ul>

Hope it will help someone!

[jeffbarclay]

@tehraven - any way to show 5 bubbles? I have a need for fix number of bubbles!

[tehraven]

@jeffbarclay I've been on GitHub hiatus for a few months -- Do you still want FIVE bubbles? My head is spinning thinking of five!

[cosmopolit]

I also had to think all the time at the 5. Like my mentally disabled brother in law, who was in an accident with five. He always answers five.

how much clock is? FIVE
how many mentally disabled people there are in the world? FIVE
how high is the perceived mental age of urban computer scientists? FIVE

Therefore i improved @tehraven 's version to adjust n bubbles and my bil answers now always zero.

http://jsfiddle.net/pyq8m2e2

Reverse order:
http://jsfiddle.net/5hgbmkvj