I use Ionic for my iOS hybrid application,
I want to create a custom header and use a background image for all pages.
I want to know is there any way to create a master page in Ionic + AngularJS for using in another pages?
The answer varies depending on how you've already setup your app. Probably the simplest approach is to use a background image with CSS on the body of the page. That is just one line of CSS, but you'll have to consider how that image works or displays on various device sizes or if your app is in portrait or landscape mode.
Related
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
I have an ionic 1 app that uses $cordovaCamera to retrieve a photo from the user. Oddly, after the camera is opened (doesn't matter whether the user takes a picture, cancels, or picks one from library) the app renders incorrectly once it's closed. The status bar overlays the top of the view, and the bottom of the view overflows off the viewport. However, if you re-orient the device (go from portrait to landscape) it will fix itself.
Is there any way to force the app to repaint manually?
Extra info regarding the bug itself: I created a new ionic 1 app separately and copied the camera code over exactly and it does not have the same problem. Same versions of ionic, angular, ngCordova, and the camera plugin. So I believe the actual rendering problem is specific to my app. However, after a full day of messing around I can't figure out for the life of me what's happening.
We had the same issue with the cordova-plugin-statusbar version: 2.2.1
The solution was pretty simple. We downgraded this dependency to version 2.2.0 and everything worked as expected again.
To use an exact version of a cordova plugin, specify it in the config.xml of your project as in example below:
<plugin name="cordova-plugin-statusbar" spec="2.2.0"/>
Don't forget to remove ./platforms and ./plugins folders and to run cordova prepare after downgrading the plugin versions.
take a look at this plugin:
cordova-plugin-hidden-statusbar-overlay
just install it, and after calling the camera, run this code:
window.plugin.statusbarOverlay.hide();
The answer ended up being pretty easy: REMOVE the status bar plugin.
I was under the impression that the status bar plugin was needed to make it appear at all but this is not the case. The StatusBar plugin only lets you style it - but since iOS 9 you can only choose from 2 options anyway.
Remove the status bar plugin completely. Don't forget to edit your bower.json, config.xml, the initialization code in your ionic app that sets StatusBar defaults, etc.
Add padding or margin to the top of your app when the body element has the class platform-ios. Per the Apple Developer Docs:
Obscure content under the status bar. By default, the background of the status bar is transparent, allowing content beneath to show through. Keep the status bar readable and don’t imply that content behind it is interactive. There are several common techniques for doing this:
1) Use a navigation bar in your app, which automatically displays a status bar background and ensures that content doesn’t appear under the status bar.
2) Display a custom image, such as a gradient or solid color, behind the status bar.
3) Apply a blur to the content behind the status bar.
What you should end up with is the exact same appearance without the plugin.
I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);
I developed a web site using Drupal 7. I use Nivo Slider and it works perfectly for me. I used Nivo Slider for the front page of the site. When I configured the Nivo Slider it's settings are displayed under structure in the Drupal CMS menu. Basically, I have to update images and set transitions and etc.
I have another page where I nee to add a new slideshow, but I don't know how to make another instance of Nivo Slider and use it. I would guess there should be an easy way to handel this.
You can create another instance of the nivo slider block with the MultiBlock module, but the other instance will have the same settings and same images of the original slider block.
You can use the Views Nivo Slider module to create another slider block.
I want to make a javascript image gallery
(with 6 thumbnails in a row and as many rows as fit the page.
clicking the thumbnails will bring up a popup box with images and a video)
At the bottom of the page there is a numbered pagination.
However, I would like to make it so that on a mobile platform (android/iphone)
the user can paginate by swiping the pages to go forward or backward.
How do I adjust the pagination for a mobile platform?
Should I use a specific crossplatform tool like sencha to make this gallery?
Have you thought about using JQuery Mobile ?
http://jquerymobile.com/