npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cordova-plugin-webviewcolor

v2.2.0

Published

This plugin allows you to change the default PhoneGap background color (black). Especially on iOS7, when you use the native date picker or a html selectbox, the text is hard to read against the black background (so that's the only currently supported plat

Downloads

220

Readme

PhoneGap WebView background color plugin for iOS

by Eddy Verbruggen

Non-PhoneGap Build users, please read this!

On PhoneGap Build it is not possible to specify the webview background color (hence this plugin), but on local build, you can. Just change this line in MainViewController.m to anything you like: theWebView.backgroundColor = [UIColor blackColor]; For example: theWebView.backgroundColor = [UIColor clearColor];

That being said, you can still use this plugin to get the same results of course.

0. Index

  1. Description
  2. Installation
  3. Usage
  4. Testing

1. Description

This plugin allows you to change the background color of the iOS WebView. Created because I can't read the contents of the native <select> picker (see screenshots below).

  • Compatible with PhoneGap 3.0.0 and up.
  • Supports all colors, just pass a valid hex value like #FF0000.
  • Supports alpha channel, just pass a valid ARGB value like #FF112233 (where FF - alpha channel).
  • Compatible with Cordova Plugman.
  • Pending official support by PhoneGap Build.

iOS 7 screenshot - original:

ScreenShot

iOS 7 screenshot - color changed to #FFFFFF (white):

ScreenShot

iOS 7 screenshot - color changed to #FF0000 (red):

ScreenShot

2. Installation

$ cordova plugin add cordova-plugin-webviewcolor

3. Usage

You can change the background color immediately after ondeviceready, but you may also want to do it by, for instance, a click of a button:

  <button onclick="window.plugins.webviewcolor.change('#FF0000')">change to #FF0000</button>
  <button onclick="window.plugins.webviewcolor.change('#00FF00', function(){alert('color was changed!')})">change to #00FF00</button>
  <button onclick="window.plugins.webviewcolor.change('#880000FF', function(){alert('color was changed!')})">change to semi-transparent blue</button>

.change() has three argument

  • A valid RGB or ARGB color, formatted like: #FF00FF or #FF112233 (including the #).
  • (optional) successcallback, so you know when the color has been changed.
  • (optional) errorcallback, but this is never called, since changing the color technically never fails. If the passed color is not valid, the color is simply not changed, but the successcallback is invoked. I didn't find an easy way to change this behaviour, but it shouldn't hurt anyone. I've added the errorcallback argument for possible future compatibility.

4. Testing

The background color change can best be seen by allowing overscroll (rubber banding), so when you swipe up and down, the WebView background is shown.

Another possibility is adding a <select> or <input type="date">. When clicked, the background color shines through the native picker UI.