I built a listview using jquery mobile. However, I would like to have a little more body text than what fits on a typical mobile screen.
<article id="military_list">
<ul data-role="listview" data-inset="true">
<li><a href="barracks">
<img src="../img/structure/barracks.png"/>
<h3>Barracks</h3>
<p>Fearless fighters weilding with shield and sword</p>
</a></li>
<li><a href="mage">
<img src="../img/structure/mage.png"/>
<h3>Mage Quarters</h3>
<p>Where magical folk live</p>
</a></li>
</ul></article>
It takes the <p></p> tag and abbreviates it automatically. Is there a way to instead simply jump down a line? There appears to be a lot of space left over in the block.
Heres an example:
As you can see in the yellow area, it cuts off the string and adds 'grant you...' rather than going to the next line.
Use this css:
.ui-li-desc {
white-space: normal !important;
}
Here's an example: http://jsfiddle.net/Gajotres/3ZVeN/
Related
I have a listview with the count indicator, and I would like that the long text would enshort before the count.
It works fine without the "ui-li-count" property, the text get "cut" correctly with the "..." at the end, but with the count, it gets not cutted before.
Page JQM 1.4.2:
<div data-role="page" id="addresses" data-theme="b">
<div data-role="header" data-position="fixed"><h1>izigo.mobile</h1></div>
<div class="ui-content" role="main">
<li>Client name and very long description #1<span class="ui-li-count">3 km</span></li>
<li>Client name and very long description #2<span class="ui-li-count">3 km</span></li>
</div>
</div>
Any idea how to cut the text bedfore the count?
Thanks.
Looks like you can just increase the padding on the text container. Try something like this:
.ui-listview >.ui-li-has-count>.ui-btn-icon-right {
padding-right: 5.5em;
}
Here is a DEMO
I want to have 2 buttons in the footer, one on the left side and the other on the right side.
With dataposition fixed, however right side button going little outside the page view.
Here is the code.
<div data-role="footer" data-theme="d" class="ui-bar" style="height:30px" data-position="fixed">
<a class="ui-btn-left" data-role="button" data-theme="a" id="approvetm">
Approve
</a>
<a id="sendback" data-rel="popup" data-theme="a" class="ui-btn-right" data-role="button" data-inline="true">Send Back</a>
</div>
Can you please tell me what is wrong in above code.....?
As per jQuery Mobile documentation footer is different than header in terms of buttons accommodation.
The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers
However, this can be fixed by overriding ui-btn-right style (right position).
.ui-footer .ui-btn-right { right: 35px !important }
Demo
Here is the link to existing sortable http://jsfiddle.net/bcAH2/5
Just copying the code,
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
<li class="ui-state-default four">4</li>
<li class="ui-state-default">5</li>
<li class="ui-state-default">6</li>
<li class="ui-state-default">7</li>
<li class="ui-state-default">8</li>
<li class="ui-state-default">9</li>
<li class="ui-state-default">10</li>
...
</ul>
Script
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$("#sortable .four").css("height","190px");
});
What I am trying to achieve is to fill spaces below cells 1 2 3 with cells like 5 6 7 8... Is it not possible by drag and drop?
There's a jQuery plugin called gridster that might do what you want (see the demo in the front page). A simpler but less flexible alternative, as explained in more detail in this answer, is to create several columns and make each one sortable, connecting them to allow dragging from one to another. Here's an example close to yours, but not with some caveats:
You can have tiles with greater height, but not with greater width, without messing the layout (gridster does not have this limitation);
You can't have "empty spaces" between two tiles in one column (gridster has less limitations on that);
If you remove all tiles from one column, it will disappear (unless you style it to have a fixed width, with or without contents; gridster does not have this limitation).
The problem here is not in drag and drop, but the flow of the floated elements.
All the elements after "four" will align to it, and since it's higher - it takes more space. So the space in the second row in front of "four" is actually not the part of the "grid".
Actually, there is no grid here, since you're working with floated elements.
Hope this helps you to understand why it can't be achieved with the current styling and scripting.
I found this elegant plugin, ShapeShift which does the job nicely
There is another forked version of gridster, thought worth sharing here, gridster.js Forked
In order to add a fade transition to addClass/removeClass I am using jQuery UI:
$(document).ready(function(){
$('header nav a').hover(
function(){
$('header').stop().removeAttr("style").addClass('header-pink', 'slow')
},
function(){
$('header').stop().removeClass('header-pink', 'slow')
}
)
});
My goal is: to change (with a fade animation/effect) the background-color of the parent element (header) when :hover the child element (hover nav a). The css class is very simple:
.header-pink { background: pink; }
The HTML:
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
</header>
Of course, I am calling jQuery and jQuery UI with no errors:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>
The jQuery script does not work properly because:
The class is added (onmouseover) but with no transition (fade) effect.
The class is added in a undesired way: <header style="background:
pink;"> I use .removeAtrr("style") to avoid this odd behavior.
The class is not removed (onmouseout).
Using .animate() to animate colors with jQuery UI is something I prefer to avoid because I am using variables with LESS and, of course, I want the style only to be modified by the stylesheet.
Please, check my project to get an idea. As you can see, my intention is to replace the background color of the fixed <header> with the color of the links when you place the cursor over the links. In other words, the background color of the <header> turns with a transitional fade animation/effect as blue or pink as soon as the pointer is :hover the link "Posts." or "Links." but it recovers its original state (with no css class, .removeClass()) as soon as the pointer is out with the same transitional fade animation/effect. Please note that my project is still in development and I am currently testing the effect with same properties for all the links; when I accomplish the desired result I will apply the individual properties (background-color) for every link.
I need to add the button on the right hand side of the footer. I am adding it like this
<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>
I am getting the button but it is coming at the start of the next line. If I change the role to header, the button positions perfectly. Even if I add class="ui-header" in footer div, it comes ok but then it simply doesn't get its position fixed. ('coz it has now both the style ui-footer and ui-header)
How can I put the button on footer on extreme right without sacrificing the data-position? (I need the data-position fixed also)
the footer has a right margin set to 90px by default. You need to override it and make the two controls float, like so:
<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain"
data-position="fixed">
<h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
Copyright 2011</h4>
<a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a"
data-ajax="false" href="/login.php?mode=logout">
Logout</a>
</div>
P.S. From usability point of view, I would have placed the "Logout" button in the top-right corner of the page rather than in a footer.
I found Tsar's answer helpful, though it doesn't seem like most of that markup is necessary. I get the same effect with
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
<a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
<h3>Copyright 2011</h3>
</div>
(I have only tested this in my desktop browser so far.) Looks like the magic is in the ui-btn-right class. There is also a ui-btn-left.