I am trying to implement a page with tab bar in onsen UI. Where I am able to switch pages between "Tab1" and "Tab2".
But my question is how can I place the Image which will be present in both tab bar pages and only remaining part of the page will switch.
For Example as given in wire frame, "common image content" should be present when user clicks any of the tab, only content "tab1 content" and "tab2 content" are gets changed.
Please let me know any work around for this ?
Thanks in Advance...
You could place a toolbar on top of your tabbar. It is persistent, you can make it transparent and you can put an image into it.
Example from the Docs:
<ons-page>
<ons-toolbar>
<div class="center">Page Title</div>
</ons-toolbar>
<ons-tabbar position="top">
<ons-tab page="page1.html" icon="fa-square"></ons-tab>
<ons-tab page="page2.html" icon="fa-square"></ons-tab>
<ons-tab page="page3.html" icon="fa-square"></ons-tab>
</ons-tabbar>
</ons-page>
Related
I have three pages/documents in my web page. The links to these pages/documents are provided in left navigation.
I am planning to add Skip to main content in angular UI header. So this will be a common skip link for all 3 pages.
Clicking on skip link from page 1 should take me to Main content of page 1.
Clicking on skip link from page 2 should take me to Main content of page 2.
Clicking on skip link from page 3 should take me to Main content of page 3.
So I have written a condition in my .ts file which will take to the respective main-content. But clicking on Skip to main link is working only once (focus moves to main-content landmark), but from next time the link is not working repeatedly. Am I missing something to make sure that the skip link is working multiple times on enter/click.
I am new to Angular, so please let me know if you need any additional details to understand my requirement.
.ts file
goToMainArea() {
if (location.href.substring(location.href.lastIndexOf('#') + 1) != "mainarea") {
location.href += "#mainarea";
}
}
Partial required HTML code:
<div class="ABC header d-flex" role="banner">
<div class="skip-link">
<a (click)="goToMainArea()" tabindex="0">Skip to main content</a>
</div>
<div class="inventory-title">
<span>
<a [routerLink]="['/home']" attr.ngbTooltip="Home" class="showLink"><span class="titleMaximized">ABC</span><span class="titleMinimized">A</span></a>
</span>
</div>
I want to show the side navigation bar initially when the page is loaded. Please help. I have written my entire code here for reference.
Use the opened attribute as shown here
<mat-drawer #drawer opened="showFiller" class="example-sidenav" mode="side">
<p>Auto-resizing sidenav</p>
</mat-drawer
I have an angular page that has a structure like below:
<div id="topSection">
top section
</div>
<div id="bottomSection">
bottom section
</div>
From an external page (non angular), I'll need to provide a link to navigate to the bottomSection of the page. I looked at $anchorScroll() and it only appears to work for links within the same page. Thanks
I am delving into the confusing world of web accessibility and trying to retrofit my HTML code to have better accessibility with things such as aria-labels etc.
Trying to tab through my webpage app-header, I am not able to select the page title... Should I be able to, or am I worrying about nothing?
The burger menu and the search bar icon are able to be tabbed. I'm just wondering whether the text should be? Because it is not being read out either.
FYI: I am using ChromeVOX as a screen reader
<app-header class="topHeader" fixed shadow slot="header"> <!-- effects="waterfall" not needed as nothing scrolls behind header bar -->
<app-toolbar>
<paper-icon-button id="toggleDrawer" icon="menu" on-click="toggleMenu" title="Expand menu" aria-title="Expand menu"></paper-icon-button>
<div main-title>App Header Goes Here</div>
<search-bar></search-bar> <!-- This is an external element being called in -->
</app-toolbar>
</app-header>
Does clicking on it do anything (navigate to another page, open up a new set of options using DOM manipulation, etc) that isn't behaviour duplicated by some other control?
If so, then it should be possible to tab to it.
If not, that isn't needed.
(If it does nothing, then it is counter productive to allow it to be focused).
I want to script a website which will have a menu on the left side:
when clicked on an item on this menu the site slides up or down (but there should be no option to scroll up or down).
Yet now when the user interacts with something in the webpage (not the menu) the site slides right/left.
So there are no reloading of the site!
For example the menu contains home and account.
if the user is on home and clicks on acount the site slides down (but he should not have the option to scroll down by himself)!
Now on account when he clicks on a button named "Edit Account" the site slides (but not the menu) right to a page were he can edit his account no when he hits save the site slides back to account
With site I mean an inner pre defined box of course the header and footer don't move!
Here is a small example of a script I wrote on jsfiddle.
I know that this will look very cool but I don't want that the user to need to sacrifice website loading speed just for a cool sliding effect!
Now my question is: would this be good programming practice?
Right if i believe right you want something like my website "www.ohlookawebsite.com" what you will need to do is use jquery for .show and such to create the effect so for example
<div id="navagation">
<div id="home" onclick="homeClick()">Home</div>
<div id="about" onclick="aboutClick()">About</div>
<div id="account" onclick="accountClick()">Account</div>
</div>
That would be the navagation then you can set out the <div>s on the page with the ones that shouldn't be shown yet with style="display: none;" such as;
<div id="boxHome">
Welcome to the home page!
</div>
<div id="boxAbout" style="display: none;">
Welcome To the About Page!
</div>
<div id="boxAccount" style="display: none;>
You're account info!
</div>
You will need to the use jquery and javascript to show different "Pages"
function homeClick(){
$("#boxAbout").fadeOut(500);
$("#boxAccount").fadeOut(500);
$("#home").css("color", "green");
$("#boxHome").delay(500).fadeIn(1000);
}
You can see an example of this here: http://jsfiddle.net/gM4hB/4/
Hope this helps