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
Related
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 created and ionic project using the command
ionic start sideMenu http://codepen.io/vialware/pen/ypoxd
I expected the app to be like what is shown below.
Nevertheless, when I run it something is missing, the menu button. It is being created I guess using in the header using this tag:
<ion-view title="'Welcome'" hide-back-button="true" left-buttons="menuButton">
I'm able to build and emulate the project without any errors and so I'm wondering whether I might have done something wrong and if anyone might have a hint on how to solve this problem (I'm new to both Ionic and AngularJS).
You can also use this :
<ion-header-bar align-title="left" class="bar-positive">
<h1 class="title">Title!</h1>
</ion-header-bar>
But don't forgot to put has-header to your content or your content will be behind this header bar
<ion-content class="has-header">
// Content
</ion-content>
In order to have that specific header, here's what your code should look like:
<div class="bar bar-header bar-positive">
<button class="button icon ion-navicon"></button>
<h1 class="title">Welcome</h1>
</div>
Note that the bar-positive class is only setting the blue color background on the header.
In my case, the change I made is, added attribute enable-menu-with-back-views="true" as below. Then sidemenu button and content is shown in all views.
<ion-side-menus enable-menu-with-back-views="true">
Please refer below link:
http://ionicframework.com/docs/api/directive/menuClose/
How are you running your app? If you are just opening your index.html plainly on a browser it most probably won't work... Try running it using localhost (local web server).
Assuming this is true... You need to turn IIS Server on and run your site there
If you don't know how, you can try this tutorials below.
http://www.iis.net/learn/install/installing-iis-7/installing-iis-on-windows-vista-and-windows-7- https://www.youtube.com/watch?v=dZAbdmPrU4g
HOPE THIS HELPS :)
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>
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?
I'm using Inspect Element in Google Chrome to figure out what is controlling the size of the slideshow controller buttons underneath the slideshow of this template website:
http://themefuse.com/demo/html/Medica/index-slider-2.html
When I click Inspect Element over the button "Cardiology" I see a line in the HTML code saying:
<li style="width: 192px; overflow: hidden;">Cardiology</li>
However, when I view source code of the page, no such line exists! This is a problem for me because I would like to edit the size of the button and the text inside it.
Please help! Thanks!
"Source code" is what the browser received from the server. It can be changed by JavaScript; the "Inspect Element" always shows the current shape of the document.
EDIT: Then again, sometimes things are not complicated. Look what I found in the source code:
<li>
<div class="textHolder">
<h3>Cardiology</h3>
<p><span><strong>Cardiac Rehabilitation Center</strong> We helped Glade Inc. design their latest fragrance for household perfumes </span></p>
</div>
<img src="images/temp/slider_img_01.jpg" alt="" />
</li>
It is then further modified by JS.
This list generated by JS. Check js/playSlider.js starting from line #335.