I have 2 navbar's, a header and a footer. When I select a button on header, it highlighted. But when I select another button on footer, a new button on footer is also highlighted. How do I unselect the button on the header navbar when selecting this new button and vice versa?
<div data-role="navbar" data-id="mynavbar" id="myheader">
<>...buttons<>
<div data-role="navbar" data-id="mynavbar" id="myfooter">
<>... buttons<>
Related
I use the Material Tab example. I select in all the three tabs the last tab. When I resize the width of the panel the selected tab scrolls out of view.
As seen in the picture the third is NOT visible. Is there a way to scroll the third automatically into the view? (e.g. with an action of a button)
Use case: I have a layout which changes the width of a component with an users click and than the selected tab is on the far left side - contrary to the sample here where it is on the right side. In my use case the user hardly knows that there is a tab pane - unless (s)he knows the meaning of the arrows.
==> So I want to scroll the tabs into view. How to do it?
I would say most users would understand the meaning of the arrows.
If you really want to do something about it:
Option 1
The first thing comes to mind is using the native scrollIntoView method on the tab you want to show.
<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<span id="header"> Third </span>
</ng-template>
Content 3
</mat-tab>
</mat-tab-group>
Then in your component:
(document as any).getElementById('header').scrollIntoView({behavior: "smooth", inline: "end"});
Option 2
You can also trigger click on either left or right arrow until tab is visible.
// Click left arrow
document.querySelector('.mat-tab-header-pagination-before').click()
// Click right arrow
document.querySelector('.mat-tab-header-pagination-after').click()
I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>
You can use popup widget to simulate dropdown menu.
As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.
Arrow:
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
HTML
<div data-role="popup" id="popupID" data-arrow="t">
<!-- content -->
</div>
Add data-rel="popup" to button to call popup.
Menu
To modify arrow's size, check this link.
Demo
I want to place some buttons in the top of my webapp that works like a toolbar. For this purpose I use the controlgroup widget.
Now I have the problem that the button widths are too big for the display so I decide to set the mini attribute to true.
But can anybody explain me the difference between setting mini to every button or only set it to the div? Which scenario should I use for my toolbar?
Example 1:
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal">
Button 1
Button 2
Button 3
</div>
</div>
Example 2:
<div data-role="content">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
Button 1
Button 2
Button 3
</div>
</div>
Thanks in advance!
They are the same because the buttons inherit from the container. You should just set mini on the DIV in this situation.
If you had many controls in one container and only some needed to be "mini" you would then set those individual elements to mini.
I use JQuery layout feature to build skeleton of my app.
Layout has north-panel i.e header which can be hidden so that content area has more space.
Since header panel also contains icon bar, I only want icon bar to be visible when header is hidden.
Is there a way to achieve this by setting any property while creating layout using UI Layout.
Here is the image of layout where on hiding header should still show icons but only hide blue bar at the top.
Regards,
Satya
If I understand you correctly, the markup you have would like something like this:
<div id="north-panel">
<div id="header">
<div id="icons"></div>
</div>
</div>
If this is the case, maybe the following may help:
Can you seperate the icons panel to be a direct child of the north-panel? If you can, you could just hide the header and the icons panel would still be visible.
<div id="north-panel">
<div id="header"></div>
<div id="icons"></div>
</div>
Otherwise, hiding an element without hiding its children is not possible (as far as I know). What you could try too, is to make the header have the same dimensions as the icons panel and hide anything else inside the header. This would somehow fake the effect you wanted.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.