I want to be able to have a logo and a title in the header of my app. Currently, my app is organised this way :
index.html that wraps the other views :
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable headerBar">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view>
</ion-nav-view>
</body>
And I have my tabs with ion-view. Before modifications, I had the parameter view-title for each tab and align-tile center in the index, and I had a title in the center of the header, but I want to have a logo on the left, and the title on the center. So what I did was this :
<ion-nav-title>
<img src='img/helpro.png' class="title-image"/> {{ 'devices' | translate }}
</ion-nav-title>
But this way, I have the logo with the text in the left too. How can I do to have the logo on the left, and the title on the center ? I tried to have the tag nav-title and the parameter view-title, but nav-title override the view-title. If I do align-title center it takes both.
This is my current page :
Thanks !
Related
I have reusable navbar with links to id/sections as follows:
<!-- Item -->
<section id="item"></section>
<!-- Link -->
Item
This works on the homepage as intended. However, when linking from another page (such as http://localhost:3000/blog) the link only takes me to the top of the landing page and not to the actual id. The window location still says it's http://localhost:3000/#item though.
Clicking again once on the landing page works.
I'm in the process of updating my website and I am trying to optimise the website as much as possible. One of the things I'm trying to do is remove excess text and duplicate text/code.
I have around 20 pages and each page includes a button that pops up my privacy policy using the function below.
The page also imports .css for the pop up which includes mark up and script.
<!-- Begin Footer -->
<div class="mainText">
//site name etc
</div>
<div class="popup" onclick="myFunction()">
<div class="privacyButton">
Privacy Policy
</div>
<span class="popuptext" id="myPopup">
<!-- Policy Content -->
//html content like <p></p> and <strong> etc</strong>.
<!-- End of Policy Content -->
</span>
</div>
<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
</script>
<!-- End of Footer -->
How can I place this in a separate file and load it from the external file to save me having so much text on every page?
I've tried THIS to use a jQuery, but it doesn't work because of the nature of the pop up.
I've also tried placing only the content (which would still be better than nothing)
<!-- Policy Content -->
//html content like <p></p> and <strong> etc.
<!-- End of Policy Content -->
...in a separate .html file using
<link rel="import" href="/movedContent.html">
...but upon loading, it doesn't adopt the css from the popuptext class.
I'm unsure where to go from here or what to include in any external file in order for importing this on each page. Thanks.
I want to put the app logo image on ionic header at center or left with vertical center align but its move to top in header.
Here following code I use to display this but issues get with this
<ion-view view-title="<img src='img/logo.png' width="44px" />">
Please help me to resolve this issue.
You can use <ion-nav-title>
Try this
<ion-view>
<ion-nav-title>
<img src="img/logo.png">
</ion-nav-title>
<ion-content>
//Your content here
</ion-content>
</ion-view>
I have a (complex) toolbar panel which can be on top or bottom of a page (it's configurable). Is there any way to avoid copy/paste the toolbar in bottom of the page?
Here is code in copy/paste way:
<div id="topToolbar" data-ng-show="configs.toolbarPosition=='TOP'">
<!-- toolbar -->
</div>
<div>
<!-- inner page contents -->
</div>
<div id="bottomToolbar" data-ng-show="configs.toolbarPosition=='BOTTOM'">
<!-- exactly copy/pasted toolbar -->
</div>
Keep the tool bar html in separate file, and include where ever you need.
<ng-include src="'views/toolbar.html'"></ng-include>
Also if you needed add a controller for all functionality. This will help you to reuse your code.
you can check how components are made
and make component <toolbar></toolbar>
I'm creating a simple personal website (using jekyll), and I have a problem in the "About Me" page. Every page of the website (including the about-me page in question) has a header on the top and a footer at the bottom. In the "About Me" page, I want the middle content section to be split vertically, with some text on the left and my picture on the right.
To achieve that, my "about-me.html" has the following two divs:
<div class='about_content' id='about_left'>
...
</div>
and
<div class='about_content' id='about_right'>
<span style="margin:0 10px; float:right">
<a href="/assets/picture.jpg" title="Gautam">
<img src="/assets/picture.jpg" width="240" height="320" alt="Gautam"/>
</a>
</span>
</div>
The about-me text that I want to show is in a markdown file called "about-me.md", but all my attempts to show those contents in the "about_left" div defined above have failed :(
One option is for me to not use markdown for the about-me text, but instead write plain HTML in the "about_left" div. I don't like this option.
Another option is to not use the "about-me.html" file at all, but instead embed an image tag inside "about-me.md" as suggested in this answer. This sort of works, but the text and the image are then not in separate divs; due to which the text extends under the image -> something I'd like to avoid.
Is there a way for me to keep my "about-me.html" file with the two divs, but still show the text from my "about-me.md" file inside the "about_left" div?
You can do something like this in your HTML file where you want the content of the Markdown file to show:
{% capture about %}{% include about-me.md %}{% endcapture %}
{{ about | markdownify }}