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.
Related
So I'm trying to hide a navbar when on the login page. I've put the navbar inside a nav-element, and putted a "ng-if" in the element to only render if the user is in the application(and not the login page).
<!DOCTYPE html>
<html lang="en" ng-app="demoapp">
<head>
<!-- Angular & jQuery -->
<script src="js/jquery-3.2.0.min.js"></script><!-- load jquery -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script><!-- load angular -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script><!-- load ngRoute -->
</head>
<body>
<nav ng-if=false>
/... nav elements inside here
</nav>
<!-- to load ngRoute-->
<div ng-view></div>
</body>
But when I'm on the login page, the navbar still shows up for a second, and then disappears. Why is it doing that? How do I stop it?
According AngularJS documentation "The ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading. Use this directive to avoid the undesirable flicker effect caused by the html template display.
The directive can be applied to the element, but the preferred usage is to apply multiple ngCloak directives to small portions of the page to permit progressive rendering of the browser view."
Please refer https://docs.angularjs.org/api/ng/directive/ngCloak
This is what ngCloak is for:
<nav ng-cloak ng-if=false>
/... nav elements inside here
</nav>
Add ng-cloak to your body tag, this will prevent glitching for ALL elements that have an ng-if attribute attached to them.
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!
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.
I am trying to add a smart app banner for users viewing through their mobile browser. I've been looking at some examples that use Javascript/CSS to work with other browsers besides Safari.
However, just dealing with Safari and iOS 6, when I add the meta tag for the smart app banner, it is displayed but cut half way off at the top of the page.
Here is a screenshot of what I'm talking about:
http://i6.photobucket.com/albums/y201/WNxFiveStarKiller/ScreenShot2014-02-27at115725AM.png
I've tried adding Javascript which scrolls to the top of the page like this:
<script type="text/javascript">
$(document).ready(function () {
window.scrollTo(0,0);
});
</script>
But that doesn't do the trick, seems like it thinks the top of the page is where it initially loads.
Any ideas how to get around this? Thanks!
This meta tag placed in the head tag of you're HTML page should work:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
I would generally stay away from sliding the page up and down manually because the smart app banner usually slides down the whole page after the page has finished loading.
Ok - first of all I know this isn't ideal - however we have inherited a problem and some badly thought out SSI html.
So some background: We have implemented a responsive site which has to include some SSI code from the client for global top nav and footer - so far so good. However the SSI needs to change from DESKTOP to MOBILE as the site is resized/loaded on a mobile device. We do all this client side at the moment. We have a trigger at break points to alter the dom to do all the responsive stuff.
A similar example is here http://www.conrandesigngroup.com. (Resize the browser to see what happens.)
Normally we would load the SSI into holding pages and AJAX the code in to the appropriate place using some kind of selector.
The problem: The SSI is not fully formed HTML, it looks something like this:
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
Then the SSI we have for the mobile site is:
<!-- mobile ssi -->
<script>some script...</script>
</head>
<body>
Whole bunch of mobile html...
<div class="content">
So you will notice there is a closing</head> and an opening <body> and at the end there is an opening <div>. So there is no way we can select this and replace using the DOM. We were thinking of using comments either side of the code and using a javascript regex to replace the code. Im not sure if this would actually update the browser.
So in desktop mode the whole page will look like this:
<html>
<title>my page</title>
<head>
...all the head stuff
<!-- START of ssi -->
<!-- desktop ssi -->
</head>
<body>
Whole bunch of desktop html...
<div class="content">
<!-- END of SSI -->
...all the page HTML
</div>
</body>
</html>
So thats fine - the HTML is all put together serverside and we can open and close the tags correctly. The problem is how would we change the HTML INSIDE the comments using client side code <!- START of ssi -->...<!-- END of SSI -->
In the end its not really a SSI question - rather a way to change a bit of HTML which is not wrapped up nicely in an element.
Anyone come across this issue before or have any suggestions?
The common denominator is this:
The body element contains the content
Both the mobile and desktop content start with the first child of the body
The code to empty the first element would be the same for both versions:
document.getElementsByTagName("body")[0].firstChild.innerHTML = "";
Wrap the code in a pre element to make it easy to modify.
References
W3C DOM4