I'm using this, Angular-UI Bootstrap Popover
And below is my code snnipt:
<a href=""
popover-placement="{{$index < 4 ? 'bottom' : 'left'}}"
popover-trigger="outsideClick"
uib-popover-template="'popover_table.html'">
Click me
</a>
When I click the link, it will show the popover_table.html content in page, it's a table which shows the data returned from backend. When there are too much data returned, The popover_table will show many records, and user need to scroll down inside the table. So They are asking if we can fixed the table header in the popover dialog top when scroll. Screenshot added below
So if there are more than 4 records, I need to add scroll-y and keep the table header fixed in the popover top so user can see it all the time when scrolling.
How to implement this feature? position fixed does not work in this case.
and also, if I add ng-click for <a>, then is there a way to execute the ng-click function after the popover shows? I tested and found that ng-click function execute first..
If you are using ng-click then it suppose to be worked if its still fails use $scope.$apply() inside click function
Related
is it possible to navigate between two listview or even two view which has its own listview inside with slide motion in jQuery mobile, now as i implement the first sample when i click on a listview it does not have any motion, it just refresh and the other view come to browser. my purpose is to navigate between two view as like as native ios application which second view slide into first view from right to left.
is this possible with jQuery mobile?
thanks
solution without changing pages
if you don't want to change your page, a possible solution would be to wrap each listview in a swipable <div />.
There are some plugins out there like:
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library
http://www.idangero.us/sliders/
solution with changing pages
If you're looking for standard page-transitions, take a look #
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
data-transition="slide" like #Omar said would fit your requirements.
try this
<li data-transition="slide"></li>
I am using primefaces 3.5, the latest release for our development work! In our homepage, we display the rows of data. When we click a row onRowSelect (SelectEvent) event we navigate to the next page with the Navigation Handler. On this landing page, I have a dataTable with expandable rows which has data in it. When I click the rowToggle icon the data is displayed in row expansion section (as it should normally).
What I need is to show the data automatically when page is loaded, with the rowToggler displaying down.
How can I achieve this?
This can be achieved using a bit of JavaScript (jQuery). All you have to do, is as your page loads call the click action of the RowExpander.
Something like this would work :
jQuery('.ui-row-toggler').click()
You can place this in your body onLoad attribute.
Source
http://forum.primefaces.org/viewtopic.php?f=3&t=8537
I'm trying to add a delete button to a custom div. However when the page is loaded, the jquery mobile button does not take the format of jquery and displays it like a hyperlink.
var currDelButton = $("<a>").attr("href","#").attr("data-role","button").attr("data-icon","delete").attr("data-iconpos","left").text("حذف");
anyone has an idea about this issue?
Best Regards
Ali
If you are adding the button after the page is loaded then you need to refresh the element for example $("#mybutton").button(); should work.
here is a working example with the code you provided: http://jsfiddle.net/ashanova/RQVd8/1/
call the .page for the main wrapper where new buttons are added.
$("#content").page();
I just started working with JQM a little while ago. I used the default VS2012 asp.net mobile project to start with. I like how the mobile pages work, but wanted a fixed area at the top of each page that essentially has 3 columns one of which is a logo. I've done that (with a basic table to start with) in the _layout.cshtml, and right below that is where I start the JQM Page layout. This is all working well, and I like how the page transitions happen while keeping a fixed header area at the top.
However, I would like to add a button to my fixed area at the top that is styled similar to the other JQM buttons. This doesn't work because the buttons are not within a valid Page or Header data-role I presume. Is there a way to take advantage of the JQM styles for HTML that is outside of those data-roles?
As an example, I'd like to use the anchor tag for a Log In button and have it styled the same as it is with a gear-icon when it's within a div that has data-role = "header". I'm not sure I have a deep enough understanding to drill down through all the elements that are used in the .css file and was hoping there are other individual classes or something I can take advantage of.
This is the line I am trying to display as a button, but I am only getting text (does work as anchor tag though):
<a data-role="button" data-transition="pop" href="/Vision/Account/Login">Log in</a>
Also, I am using jquery.mobile-1.1.0 and jquery-1.7.2.
You can style any element as a button by calling the jQuery Button Widget on the element:
$('.login-button').button();
The button function also accepts options such as the icon and theme:
$('.login-button').button({
icon: 'gear'
});
See also: http://jquerymobile.com/test/docs/buttons/buttons-options.html
Try adding data-role="button" to your anchor tag.
I'm currently using a script for a popup window, where when you hit the link, a nice graphic popup window will appear. My problem is, that in it's current form it's a text link, which are working fine. But I want the entire row, that being the row the link is in, to be pushable, and open the popup window, instead of just the link.
Some will say I should use an onlick command of some sort, but my problem is, that my current link is defined as:
Link
And I have no idea how to add the rel and class to an onclick command for the row fx.
So is there some smart way to do this?
you can use this trick to make a whole cell a link
simply, add the text you want to link it in a <div> and set both width and height 100%
HTML:
<td><div>link</div></td>
CSS:
td>a>div {width:100%; height:100%}
you can see an example at JSfiddle (the second row):
http://jsfiddle.net/w8W4L/