I am using jquerymobiles 1.4.2.
In my page i have used
<div data-role="collapsible" data-collapsed-icon="carat-r" data-expanded-icon="carat-d" class="ui-nodisc-icon ui-alt-icon" data-inset="true">
<h3>¿Cuánto tiempo puede estar publicado un anuncio?</h3>
some text
</div>
When i run this code it converts this to
<div data-inset="true" class="ui-nodisc-icon ui-alt-icon wr ui-collapsible ui-collapsible-inset ui-collapsible-themed-content ui-collapsible-collapsed ui-first-child" data-expanded-icon="carat-d" data-collapsed-icon="carat-r" data-role="collapsible">
<h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a class="ui-collapsible-heading-toggle ui-btn ui-icon-carat-r ui-btn-icon-left ui-btn-inherit" href="#">
Estoy interesado en una propiedad
<span class="ui-collapsible-heading-status"> click to expand contents</span> </a></h3>
<div class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed" aria-hidden="true">
some text<b>"Solicitar más Información"</b> del anuncio que le interesa.
</div></div>
It automatically adds the
<span class="ui-collapsible-heading-status"> click to expand contents</span>.
Is it possible to remove this?
Remove what?
If you want to remove just inner text: "click to expand contents" then add data-expand-cue-text="" attribute to your data-role="collapsible" <div>.
If you want to remove whole span you need to do it programatically like this:
$(document).on('pagebeforeshow', '#index', function(){
$('.ui-collapsible-heading-status').remove();
});
Working example: http://jsfiddle.net/vds2U/59/
Third solution would require direct changes in framework.
Related
I have a search results screen showing 10 results (locations in the world) per page. If a result has an image available, the image will show, otherwise it shows the location on an OpenLayers map.
I'm just trying to upgrade this page using Bootstrap carousel to allow users to cycle between the map and the image (if available).
I got carousel working fine using 2 test images. However when I swap in the OL map, although the image/photo shows OK, when you cycle to the next item (the map), the map just shows a white screen / nothing shows.
Code is below. (FYI the map works fine when I pull it out of the carousel code.
Any ideas?
Happy to share the Ol.map code, although as mentioned it runs OK outside of carousel, so I assume it might be some sort of formatting/CSS issue.
<div class="carousel-inner">
<div class="carousel-item active">
<%= image_tag(#phototouse, class:"map img-responsive", style:"display:block;height: 100%;max-height:350px") %>
</div>
<div class="carousel-item">
<div id="<%= location.location_id %>" class="map" style="display:block;height: 100%;max-height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls<%= location.location_id %>" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Update:
I thought I had got this working by adding in the updateSize event (below) but weirdly the map only shows when I resize the window. If I don't touch the window, the map doesn't show and I get the following java error: 'map1.updateSize is not a function'.
Any ideas?
<div class="container-fluid normaltextblack" style="background-color: #F3F3F3;">
<div class="row" style="height:350px">
<div id="sidel" class="col-0 col-sm-0 col-md-0 col-lg-5 col-xl-5">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/assets/image1.jpg" alt="First slide" style="height:350px">
</div>
<div class="carousel-item">
<div id="testmap" class="map img-responsive" style="height:350px"></div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev" onclick="resizemap();">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next" onclick="resizemap();">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script>
function resizemap() {
setTimeout(function(){
var map1 = document.getElementById("testmap");
map1.updateSize();
}, 1000);
}
</script>
I'm trying to align multiple icons at the header.Please suggest me where i'm going worng. Thanks in advance. Below is my code.
I want bars icon , header, search icon and then back button
<div data-role="header">
<a href="#mypanel" data-rel="popup" data-transition="slideup" data-icon="bars" data-iconpos="notext" class=" buttonbg" style=" background-color:#D3D3D3;" >Bars</a>
<h1>My Training </h1>
<a href="#" data-icon="bars" data-iconpos="notext" >Bars</a>
Back</div>
Environment
jQuery Mobile 1.3.0
Ruby on Rails 3.2.12
Chrome and Firefox latest or close to latest builds (can get exact versions if needed)
OS X Lion 10.8.2
Problem
Using jQuery Mobile with Rails on the back end, I am getting an odd hover effect for only list view items. The picture below shows what a listview item looks like while hovered on. If I add an icon/button to the right of the listview item, only the left has the issue as shown in the second picture. All other elements with hover effects work fine.
Evidence
Without icon, on hover (listview item):
With icon, on hover (listview item):
With icon, on hover (listview item right icon):
Question
Why, on hover, do my listview items turn an ugly black instead of being the nice hover gradient that everything else seems to handle without issue (including an icon/button on the listview itself)?
Code
The following is my HAML template code for the listview.
%ul{"data-filter" => "true", "data-inset" => "true", "data-role" => "listview"}
- #item.subitem.each do |item|
%li{"data-theme" => "c"}
%a{"data-prefetch" => "", "data-transition" => "slide", href: edit_item_subitem_path(#item, subitem), :rel => "external"}
= item.text
- if item.set
%span.ui-li-count.ui-btn-up-c
✓
And this is what Rails/HAML generates:
<ul data-filter='true' data-inset='true' data-role='listview' data-split-icon='gear' data-split-theme='b'>
<li data-theme='c'>
<a data-transition='slide' href='/items/5' rel='external'>
Testing
<span class='ui-li-count ui-btn-up-c'>
2
</span>
</a>
<a data-theme='c' href='/items/5/edit'>
<span class='ui-icon ui-icon-gear ui-icon-shadow'></span>
</a>
</li>
And here is the resulting "computed" source that jQuery Mobile generates (I left out the search/filter code):
<ul data-filter="true" data-inset="true" data-role="listview" data-split-icon="gear" data-split-theme="b" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li data-theme="c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="div" data-icon="false" data-iconpos="right" class="ui-btn ui-btn-icon-right ui-li ui-li-has-alt ui-li-has-count ui-first-child ui-last-child ui-btn-up-c">
<div class="ui-btn-inner ui-li ui-li-has-alt">
<div class="ui-btn-text">
<a data-transition="slide" href="/items/5" rel="external" class="ui-link-inherit">
Testing
<span class="ui-li-count ui-btn-up-c ui-btn-corner-all">
2
</span>
</a>
</div>
</div>
<a data-theme="c" href="/items/5/edit" title="" class="ui-li-link-alt ui-btn ui-btn-icon-notext ui-btn-up-c" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="false" data-iconpos="notext">
<span class="ui-btn-inner">
<span class="ui-btn-text"></span>
<span data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="gear" data-iconpos="notext" data-theme="c" title="" class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">
<span class="ui-btn-inner">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-gear ui-icon-shadow"> </span>
</span>
</span>
</span>
</a>
</li>
</ul>
Thanks
Thanks in advance, let me know if you need any additional information. Also, I didn't tag this Rails as I don't think it relates to Rails, but if I should, or if it does end up being the root cause, I will tag it as such.
Well, as it turns out, I had accidentally left the scaffolds.css.scss from when I was initially prototyping the app using the rails scaffold cli command. That was causing the issue.
I have a list I am creating dynamically. The content looks good BUT each link points to the same page link:
I start with an empty list:
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
</ul>
</div>
I use $('#profile2').append to build the list and use $('#profile2').listview("refresh"); to refresh the list after each new link is inserted.
Here is a sample of code after the list has been generated:
<div data-role="content" class="ui-content" role="main">
<ul data-role="listview" data-theme="b" data-inset="true" id="profile2" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
<li><div class="ui-btn-inner ui-li">
<div class="ui-btn-text"><a href="#/demo?a=53&b=-7&ui-page=profile2-0" class="ui-link-inherit">
<h3 class="ui-li-heading">Headin1</h3>
<p class="ui-li-desc">Content 1</p></a><
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div>
</li>
<li><div class="ui-btn-inner ui-li">
<div class="ui-btn-text"><a href="#/demo?a=53&b=-7&ui-page=profile2-0" class="ui-link-inherit">
<h3 class="ui-li-heading">Headin2</h3>
<p class="ui-li-desc">Content 2</p></a><
</div>
<span class="ui-icon ui-icon-arrow-r ui-icon-shadow"> </span></div>
</li>
</ul>
</div>
NOTE the href for both links refers to profile2-0
Interestingly, the pages generated for the child links have the same tabindex (0), as well as the same data-url. This is the code for both pages:
<div data-role="page" data-url="/demo?a=53&b=-7&ui-page=profile2-0" tabindex="0" class="ui-page ui-body-a">
CONTENT.....
</div>
I use listview("refresh") to refresh the styling, should this also take care of ensuring the page items are uniquely labeled?
Of course, this should be taken care of by JQM, but I cannot see a way to programmatically set a sub page link when creating the list item to ensure the links are unique.
As it has already been pointed out by Taifun, you probably have a problem in the code generating the list items (that you did not provide).
I tried this code, and did not face any issue:
<script>
$(document).on("pageshow", function(){
for(i=0; i<10; i++) {
$("#profile2").append('<li>test ' + i + '</li>');
}
$("#profile2").listview('refresh');
});
</script>
Hope that helps.
I want to use some collapsible elements inside a listview in jquery mobile. I can set well the collapsible adding a inside the corresponding part, but when the collapsible is not collapsed, the info of collapsible is not inside the collapsible bubble, how can I fix that to have a bubble that include title and description?
Thanks
<div id="dispositivo" data-role="page" data-theme="c" data-cache="refresh">
<div data-role="content" role="main">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role='list-divider'>Titulo</li>
<form id="form_disp" name="form_disp" method="post" action="test.php">
<li data-role='fieldcontain'>
<a id="estado" name="estado" href="#" data-theme="b" data-role="button" data-inline="true">Boton</a>
<div data-role="content" data-inset="true">
<div data-role="collapsible" data-inset="true">
<h3>Info1</h3>
<p>Ahora estamos viendo el info 1</p>
</div>
<div data-role="collapsible">
<h3>Info 2</h3>
<p>Ahora estamos viendo el info 2</p>
</div>
</div>
<button data-theme="b" id="b_conf_disp" data-role="button" data-inline="true" type="submit">Boton 2</button>
</form>
</ul>
</div>
</div>
I think you missed </li> tag.
For something similar you can try using the plugin I wrote that allows certain listview items to be opened inline within the listview.
The Github Repo