Perhaps I'm missing the obvious, but I'm searching for an option to change the value of a count bubble in js code. I've seen many solutions in building up the html of the Unsorted List in JavaScript, but that is not what I'm looking for.
In the html I have (simplified)
<ul data-role="listview" id="mainPageSelection" data-inset="true">
<li><img src="ca.png" class="ui-li-icon">Browse Catalog</li>
<li><img src="se.png" class="ui-li-icon">Search</li>
<li><img src="sh.png" class="ui-li-icon" >Shopping Cart<span class="ui-li-count" id="test"></span></li>
</ul>
I want to change the value of the count bubble of the ListView entry "Shopping Cart".
I know that if I place a number just between the opening and closing tags of span, I see the count bubble number.
What I'm looking for is a way to dynamically add the number here. If I use for example
$(#"test").attr("value", 42)
it doesn't work. I can see in the Element Inspector on Safari that value="80" is added within the opening tag of span but I want to add a value between the opening and closing tag of span so that it shows on the bubble...
Any help or ideas here?
Text elements like span doesn't have value, so attribute value has no special meaning. You should set a text of the span with text or html methods:
$("#test").text(42);
Demo: http://jsfiddle.net/nsczgo96/
Related
With Reveal.js, I would like to use flexbox and/or grids to layout slides. Unfortunately, it seems Reveal.js always overrides the display property of section tags with block as part of its slide show/hide logic. Viz:
<section class="mylayout">
<div>...</div>
<div>...</div>
</section>
section.mylayout {
display: flex;
}
Has no effect, because Reveal.js adds a style="display: block" attribute to the section tag.
Is there any way around this? It works to put a nested div inside the section and have that be grid/flex, but it just feels clunky and gross to have an extra layer in there that adds no other value than a workaround.
Has anyone else found a different way to address it?
You can set it to use flexbox in the initialization settings now. See this update on the documentation.
I need to parse a large document that has elements arranged as a series of headings followed by a div, something like this:
<h2> Section Title </h2>
<div> Section Content</div>
<h2> Section Title 2</h2>
<div> Section Content2</div>
<h4> Section Title 3</h4>
<div> Section Content 3</div>
So basically in the dom, I need to group together an <h> with the next following <div>. The dom doesn't seem to be an element for the child / sibling / parent functions, and I need to allow for inconsistencies in the input file as well so don't want to do something like find all the h elements, find all the divs, and walk through each list in a loop assuming the elements are the correct matches. Is there any way to get the dom set up so I can walk through it using the child functions, or some other clean means of walking through the dom to do this?
Easiest way I figured out is to access the element 'root'to get to the top of the dom as an element.
From there it is still tricky to figure out how to walk through the sequence of child elements but in this case, search on the divs and prev_sibling() appears to work, if the content is predictable, but my content might be
I'd like to place an icon inside a list-divider, but it seems that jQuery Mobile lets me apply data-icons to normal list items only and not to list items with data-role='list-divider' assigned.
Simply enough, I want the list-divider to display an info button for providing the user with more information about this category, which should look like so:
The point is, I'd like to place the info icon (with data-icon='info' or class='ui-icon-info') within the list-divider, while maintaining consistency in the overall style, i.e.:
The category is headed by a list-divider, and not by a list-item that is just styled to look like the list divider.
The icon is displayed on the right side, like the arrows in the list items below. The icon has to have the same style of appearance like the arrows, which means that it should not look like a button or have an extra frame around it.
The list-divider, or at least the icon, should be clickable, so the user is able to get the information about this category.
I'd preferably like to achieve this without any CSS customizations or JavaScript fiddling, using data-attributes only.
This is what I got (using jQuery Mobile 1.3.2):
List-item with data-icon:
<li data-theme='a' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Correct appearance of info-icon
Wrong appearance of category, because a normal list-item is used instead of a list-divider
Using a list-item with data-role='list-divider' assigned:
<li data-role='list-divider' data-icon='info'><a href='#' onclick='alert("Some info...");'>Category: A</a></li>
Result:
No icon at all
Wrong title appearance and only text is hyperlinked instead of the whole list-item
List-divider with info-button inside:
<li data-role='list-divider'>Category: A<a href='#' data-role='button' data-icon='info' data-mini='true' data-iconpos='notext' data-inline='true' data-theme='a' onclick='alert("Some info...");'>Category: A</a></li>
Result:
Info button has wrong appearance
The button has a border which I like to remove for consistency, so the icon is shown in its usual disc appearance. Removing data-role='button' doesn't help, because the button wouldn't be rendered at all and would therefore not show the icon.
The icon's position is not on the right side. I know it would be possible using data-iconpos='right', but I used this attribute for the icon-only (notext) layout already.
Category appearance is not pleasing, as the button increased its height. Even data-mini='true' didn't help.
I know there are a dozen of easy ways doing it the normal, less jQuery Mobile fixated way, but after 3 approaches, I'm eager to find out how this could be done with jQM.
This works, including the click, i just test it
<li data-role="list-divider">Test<div onclick='alert("Some info...");' class="ui-icon ui-icon-info" style="color:white;float:right"><div></li>
if the icon doesnt align with the rest of the icons add the below to the style
margin-right: -5px;
and change the pixels size to match the other icons
Is possible to make a standard jquerymobile listview without the right arrow image that apears on the rigt of the li object?
Standard list view
Thanks
In versions of jQuery Mobile >= 1.0, use the data-icon attribute:
<li data-icon="false">Your Text</li>
data-icon="false" attribute removes the arrow.
Another way of doing this will be by adding data-icon="false" to the ul instead of li as indicated by Jacob above.
<ul data-role="listview" data-icon="false">
This way, all child objects within the listview will by default carry no icons.
If icon still persist just remove a tag or wrap it with a div.
e.g
<div>
<a> //your stuff here </a>
</div>
add data-icon-"false" on the li tag
I want to add thumbnails to my list items as per the example here.
I've followed the instructions, eg:
To add thumbnails to the left of a list item, simply add an image
inside a list item as the first child element. The framework will
scale the image to 80 pixels square.
but the thumbnail image is appearing above my text, rather then beside it to the left.
My HTML is:
<li><img src="img/facebook.png"/><a id="facebook" href="#">Facebook</a></li>
Would anyone know the proper way of doing this?
Try to include your image inside a tag.
like that...
<li><a id="facebook" href="#"><img src="img/facebook.png"/><h2>Facebook</h2></a></li>
I'm only adding this here since it appears you can't format in comments. If you do "open source" on the page you mentioned, you will see the following:
<li><a href="index.html">
<img src="images/album-bb.jpg" />
<h3>Broken Bells</h3>
<p>Broken Bells</p>
</a></li>
Just pointing out it helps to check source on the samples you want to emulate.