I have the following code:
<ion-view view-title="Dashboard">
<ion-content class="padding">
<h2>Welcome to Ionic</h2>
<p>
This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the Ionic Market.
</p>
<p>
To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
</p>
<p>
If you need help with your app, join the Ionic Community on the Ionic Forum. Make sure to follow us on Twitter to get important updates and announcements for Ionic developers.
</p>
<p>
For help sending push notifications, join the Ionic Platform and check out Ionic Push. We also have other services available.
</p>
</ion-content>
</ion-view>
Generated from ionic tabs starter project (https://github.com/driftyco/ionic-starter-tabs) and I wantd to change the header from saying "Dashboard" to just show an image.
I tried this (how to add a logo to header -bar in ionic) but it does not work inside ionic view.
So I tried adding:
<h1 class="title"><img class="title-image" src="http://www.ionicframework.com/img/ionic-logo-white.svg" width="123" height="43" /></h1>
after:
<ion-view view-title="Dashboard">
but does not work
You could try something like this in your controller:
$scope.navTitle="<img class='title-image' src='http://www.ionicframework.com/img/ionic-logo-white.svg' width='123' height='43' />";
If not work, remove your view-title and let just the above line!
Or try this:
<ion-view>
<ion-nav-title>
<img src='http://www.freeiconspng.com/uploads/multimedia-photo-icon-31.png' width='123' height='43'/>
</ion-nav-title>
</ion-view>
The second option works for me! Don't forget to remove your view-title!
Good luck!
Related
I need to embed a marketo form onto a github page, essentially host it there, then iframe it into another piece of software I'm using. The iframing in afterwards is striaght forward as the software does that. But I cant work out how to actually embed it on github.
Go to the Marketo form
Grab the form embed code
Grab the munchkin tracking code too. Not 100% essential but needed if you want web page tracking on the Github page the form will live on.
Drop code in a Div section.
From my code example you could replace 132 (with your actual form ID)
And replace 111-AAA-111 wit your Munchkin ID.
Example
<div data-role="page" id="page_1">
<div data-role="header">
<h1>Test form. Embedded</h1>
</div>
<div data-role="main" class="ui-content">
<script src="//app-abj.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_123"></form>
<script>MktoForms2.loadForm("//app-abj.marketo.com", "111-AAA-111", 123);</script>
</div>
<div data-role="footer">
<h1>Footer: text</h1>
</div>
</div>
I have been working on large angularJs application which have multiple modules. Problem is that now I have to include static website in that application and that website have whole different layout than my application.
I did some R&D and found some answers which were mostly dependent on angular.bootstrap
https://docs.angularjs.org/api/ng/function/angular.bootstrap
but my application's ng-view is declared in html tag not in body and further my layout is like mentioned below.
<div ui-view="header">
</div>
<div class="clearfix">
</div>
<!-- BEGIN CONTAINER -->
<div class="page-container">
<!-- BEGIN SIDEBAR -->
<div class="page-sidebar-wrapper" ui-view="sidebar">
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
<div class="page-content" ui-view="content">
</div>
</div>
<!-- END CONTENT -->
</div>
but website structure is totally different from this structure so can anyone please suggest how tackle this situation
should I use two ng-views in my index.html if yes than how can I use two ng-views while declare in html tag.
Thanks
What you're describing is like nested views? which the default router does not support so if you want to use of nested views for that you have to use third-party module.
I have a cordova/phonegap project and I want to navigate in the same index.html but give the impression to the user that he opened a new page? (Without ionic framework)
I put the following code in index.html but it does not give that impression:
<div id="page_01">
Press for Next step>
</div>
<div id="page_02">
<p>New page for the user but it is in the same index.html</p>
</div>
I am trying to achieve the same effect as this website.
You will notice that the url changes and the content changes when you scroll, however when I inspect the requests being made in the console I cannot see a new AJAX request being made to get the new html content. I cannot figure out how this content is being loaded.
It appears the "page change" is just a javascript scrolling effect, and the javascript also changes the URL. If you notice, go to the about section and refresh that url, and the page isn't found.
Any guidance on how this can be achieved would be greatly appreciated. I have read through the javascript source code on the page, but as it is minified I am still struggling to understand how it all works. Perhaps I should be using html5's history state.
My current project is set up like this:
The index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Home page</h3>
<div class="bgImage"></div>
</div>
<footer>
Footer
</footer>
</body>
the tress/index.html file looks like this:
<body>
<header>
<img src="homeLogo.png">
</header>
<div id="scene">
<h3>Trees</h3>
<div class="bgImage trees"></div>
</div>
</div>
<footer>
Footer
</footer>
</body>
urban/index.html is the same as tress/index.html apart from the div within the div with id scene.
Based on how the project is set up I am wondering how I can update the content page with the different html files.
Take a look at the History API, specifically at the function:
window.history.pushState({ your_data:"whatever"}, "title", newUrl);
https://developer.mozilla.org/en-US/docs/Web/API/History_API
There are excellent third party libraries that can help you easily build a cross-browser solution, although modern browsers follow the standard decently.
The rest of your problem is just dynamically adding content, that may come from an ajax request or not.
Hello everybody !
I have a Phonegap projet with the Ionic Framework and AngularJS.
I want to show a web page in my app but keep the navigation bar too.
The nav bar is a Ionic component ion-nav-view.
Here is my code :
<ion-view title="Web page">
<ion-content class="has-header">
<!-- suppose to show the web page here -->
</ion-content>
</ion-view>
I tried to use <iframe> but I'm not able to scroll on the web page, tried to use <object>, same problem.
Any help please?
Thanks
Had the same issue. Think this is an issue with whitespace between css blocks. I removed the whitespace between the tags it worked.