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 :)
Related
I have been trying to make a basic header for the homepage, for my webapp for some time now, I want to use mat-toolbar, but it will not set the way that I want it to. My code is as follows.
.maintooly {
background-color: rgba(0,0,0,.7)
}
<mat-toolbar color="primary" class="main-tooly">
<span id="product-name">
HOMEPAGE
</span>
<div class="vertical-line title-line">
|
</div>
</mat-toolbar>
This is a watered down example but essentially I am trying to add a header to the to top of the page so it would look like this:
But instead it is looking like this:
Summmary: cannot get items in header to display side by side and cannot get the color of header to change or really do anything.
What exactly am I doing wrong here and how can I make this work?
The solution was to put import the tool into app.module.ts file.
The following code has been added to my webpage and should render the live CodePen image, but instead it shows displays a link:
<p>Fitness app</p>
<div class="w3-half w3-grayscale-max">
<p data-height="364" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
</div>
Any ideas about why the CodePen isn't fully rendering? Thanks!
The CSS you'll also need to convert. Its in SCSS, not plain CSS. Luckily Codepen has options to view compiled HTML and CSS in the little arrow dropdowns so that helps. The other bit missing is, you are going to have to hook it up with some actual programming logic to make the animation advance with the steps.
On your CodePen page, click the Embed button in the lower right corner. From there you can select how you want the pen to display as it's embedded on your webpage. Then select the Copy & Paste Code.
It looks like the snippet in your question doesn't have the necessary data attributes:
<p data-height="265" data-theme-id="0" data-slug-hash="Njmvae" data-default-tab="js,result" data-user="seyicole" data-embed-version="2" data-pen-title="Fitness app" class="codepen">See the Pen Fitness app by seyi (#seyicole) on CodePen.</p>
You can read more about embedding pens on CodePen's blog.
I have
<button> More </button>
and I have <div id="x"> </div>
But when I click on link, my page before going to desired div reloads(
I can't reproduce this behaviour on jsfiddle because there it works fine.
Can this be because I am using rails an turned turbolinks off?
If you need I can deploy the code to the server but I haven't done this yet.
Try to set data-turbolinks as false for that href tag.
data-turbolinks="false"
Trying this might solve the issue.
I really feel like this is a therapy because I wouldn't post here if I wasn't seriously struggling. I can't figure out what's going wrong but my menu title and icon seem to start overlapping randomly when I switch views. In addition, sometimes even the main content in the view disappears making the app useless.
I cannot click on the icon once this happens.
Screens:
in my menu.html, I believe this is the relevant part
<ion-side-menu-content drag-content="false">
<ion-nav-bar align-title="center" class="header" ng-show="isInApp()">
<!-- Hamburger Menu Button -->
<ion-nav-buttons side="left">
<button class="c-hamburger" menu-toggle="left" ng-class="{'is-active': isActive === true}">
<span>toggle menu</span>
</button>
</ion-nav-buttons>
<!-- Settings -->
<ion-nav-buttons side="secondary">
<img src="icons/settings.png" alt="Settings Icon" class="nav-button-icon" ng-click="goToSettings()" ng-class="{'settings-button-is-active': settings_isActive === true}" ng-if="isUsersOwnProfile()">
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="mainView">
</ion-nav-view>
</ion-side-menu-content>
I then define the view name in separate template files like so
<ion-view view-title="CMON NOW">
Any advice what might be happening here? I tried copying laborously the same menu code into each view and defining the view there as well through ion-nav-title but the result was the same.
Thanks
The original question was posted on the Ionic forum. Since then, I have removed all but one ion-content elements as I found a similar question with the marked answer saying to not ddefine new ion-content directives inside of my view html, but no luck still.
I had a similar problem with an app I'm developing. The title alignment was initially working on all pages at app launch. I have the title alignment set globally with
$ionicConfigProvider.navBar.alignTitle('center');
Found from the ionic documentation: http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
The default value should be centered anyway.
After some long hours trying to figure out this problem I noticed that the title alignment problem always started with one particular page in my app. After visiting this page the title alignment was wrong randomly - not even always happening and happening in random pages of the app. I noticed in the development tools console that I was getting an error in this particular page (with $ionicNavBarDelegate stuff). After fixing this error the title alignment issue was fixed.
So in your case I would make sure there are no other errors in the code itself and this could fix and hopefully fixes your problem.
This is just a long shot and might not be the case in your app but hey, it could help debugging this problem for you and hopefully you get it fixed.
EDIT: Also came across this discussion which might be a cause to the problem and plausible fix.
https://github.com/driftyco/ionic/issues/2881
From the discussion I made a solution which ultimately solved the issue.
$scope.$on('$ionicView.afterEnter', function (event, viewData) {
$timeout(function() {
$ionicNavBarDelegate.align('center');
}, 100);
});
Try it out! Unfortunately this seems to be an angular issue rather than a ionic problem.
SECOND EDIT:
If nothing else helps you can disable the translate3d css attribute which is used to animate in the titles since it seemed that this was sometimes broken in my app. (there could be a better solution to disable the animation but I did not investigate since I was in a hurry with the fix). The css:
.title {
transition-duration: 0ms !important;
transform: translate3d(0px, 0px, 0px) !important;
text-align: center !important;
}
This ultimately solved the problem for me.
Ionic link for doc
http://ionicframework.com/docs/api/provider/$ionicConfigProvider/
You can set it using application config
appname.config(function($ionicConfigProvider)
{
$ionicConfigProvider.navBar.alignTitle('center');
});
You can use z-index property, for you button.
.button {
position: relative;
z-index: 9999;
}
I try to make a duplicate of the share button on the following site (it's at the bottom):
WARNING! THE IMAGES ON THIS SITE CAN BE VERY DISTURBING!!!
http://www.bbc.co.uk/news/special/2014/newsspec_8702/index.html
If I click from there it looks like this:
If I copy the code:
<a href="https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=http://www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News&picture=http://newsimg.bbc.co.uk/media/images/67373000/jpg/_67373987_09f1654a-e583-4b5f-bfc4-f05850c6d3ce.jpg" target="_blank"><span>Facebook</span>
</a>
And put it in a html or jsfiddle:
https://jsfiddle.net/clankill3r/6oufc1pL/
Then instead of a popup I get a new window and the image is gone:
Why is that? And how can I change this behavior.
edit:
If I click the popup on the original site the link changes to this for some strange reason:
https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News%20Magazine&picture=http://www.bbc.co.uk/news/special/2014/newsspec_8702/static/img/fb.png
Change the picture= to image= like this:
<a href="https://www.facebook.com/dialog/feed?app_id=58567469885&redirect_uri=http%3A%2F%2Fwww.bbc.co.uk%2Fmodules%2Fsharetools%2Fcallback%3Fst_cb%3Dfacebook%23state%3Dfeed&display=popup&link=http://www.bbc.co.uk/news/magazine-29205427&name=Voices%20from%20the%20mall%20-%20remembering%20the%20first%20terrifying%20hours%20of%20the%20Westgate%20attack%20a%20year%20ago%2C%20via%20%40BBCNewsMagazine&description=Shared%20via%20BBC%20News&image=http://newsimg.bbc.co.uk/media/images/67373000/jpg/_67373987_09f1654a-e583-4b5f-bfc4-f05850c6d3ce.jpg" target="_blank"><span>Facebook</span>
</a>
Does this work for you?