PhoneGap: Black Bars On iPhone 5 Only

PhoneGap When I tested out a PhoneGap app I was helping to create, I noticed that there were black bars on the top and bottom of the iPhone 5 screen. It looked like the iPhone 5 was pulling in an app in an iPhone 4 frame. Luckly, there is an easy fix to this problem. After implementing the code, when the app pulls the splash screen from the config.xml file at those same 1136px x 640px dimensions, the app will know to stay at those dimensions on your iPhone 5 device. Simply add the following code to the config.xml screen and you will see the results:

<gap:splash gap:platform="ios" height="1136" src="res/screen/ios/screen-iphone5-portrait.png" width="640" />
Advertisements

Animated Gifs Are So 1999!

Animated Gifs are in. I don’t know if they’ve peaked already or they’re still getting bigger but they are pretty awesome. It’s a technology that’s been around for about as long as the internet but only within the last couple of years have we seen them being used as much as we did fifteen years ago. What makes them so beneficial to use is their low file size, video like appearance, browser capability and fun, repeating art style. I found this site that lets you easily search for animated gifs (and it’s not google!). It’s called Giphy. If you post to a blog or website, you may want to consider using animated gifs in your articles more often. Users can’t seem to get enough of them. Just don’t overdo it and perhaps have a one per article limit. I for one will be including them in my blog much more now that I found this site.

Dragdealer JavaScript Slider Component

Dragdealer

Recently I implemented a pretty cool JavaScript component called Dragdealer. Dragdealer is a slider that looks really cool and is very customizable and well documented. Drag and tap this slider around with your mouse or finger to see how much fun it is. Installation is simple. Add the 12KB minified JavaScript file to your js folder, create functions for your sliders and add some style to the dragdealer css file. There are a few examples you can work from when you download the package but the sky is the limit for the actual use of this component. I’m excited to see the final product implemented for the calculator that I’m working on. Be sure to check out some of the demos.

JavaScript Email Validation

Yesterday I needed to find a way to fix an issue where participants who were signing up for an enewsletter were getting an unfriendly error if they didn’t fill out a valid email in the email field before they submitted the form. The unfriendly notification actually took them to a new webpage from our email campaign company. It looked sloppy and wasn’t a seamless user experience. I thought about a way to fix this and came up with a simple solution. Instead of just trying to figure out a way to get the user to stay on our site, I figured with email validation the user would stay on our site and get reminded that they input an invalid email address. The code I found was located on w3schools and looks like this:

<script type="text/javascript">
function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
{
alert("Not a valid e-mail address");
return false;
}
}
</script>
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>

The top JavaScript should go in the <head> of your document but it will probably work as long as you stick it on the page somewhere. That is the JavaScript code that is making sure that the email address is in the correct format and is in the layout x@x.xxx. You can change the pop up text” Not a valid e-mail address” to say whatever you want it to but watch out for putting quotes in there.

The bottom part is the form fields. The important thing to have there are form name=”myForm”, onsubmit=”return validateForm();” and name=”email”. You can see where those text calls match in the JavaScript up top.

After I implemented the code on the page and tested with a non-valid email address, I got a nice friendly pop up error telling me that I needed to enter a valid email address. No more awkward site visits to our email campaign company.

Google Web Fonts

As Google continues to make the web an amazing experience, they’ve now created an easy way for web designers and developers to get many different fonts to display on their websites using Google web fonts. You can browse their catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on your web page. The fonts in the directory are all released under open source licenses so you can use them on any non-commercial or commercial project.

Using Google web fonts is easy. First figure out which fonts you’d like to use by choosing them here.

To embed the fonts into your web page you will need to copy a similar code to the following in your html document.

<link href='http://fonts.googleapis.com/css?family=Over+the+Rainbow' rel='stylesheet' type='text/css'>

The API will generate the necessary CSS specific to the user’s browser so you can use the font on your page. Simply use the font Over the Rainbow in your CSS font stack like any other font, for example:

h1 { font-family: 'Over the Rainbow', arial, serif; }

JavaScript indexOf() Method Example

In JavaScript, the indexOf() method returns the position of the first occurrence of a specified value in a string. This method returns -1 if the value to search for never occurs. Below is a simple web application using the indexOf() method. The user is prompted to input character(s) to search for. They are then prompted to input a string of text. This program will find for them at what character count in their text that their first character(s) input appears.

<script type="text/javascript">

var word = prompt("Please enter the word you'd like to find.");
var text = prompt("Please enter the text you'd like to find it in.");

if (text.indexOf(word) == -1){
document.write("'" + word + "'" + " was not found.");
}

else{
document.write("'" + word + "'" + " was found at character # " + text.indexOf(word) + " in the text.");
}

</script>

The Website That Looks Different

Browser Shots

A frustrating thing about designing and developing websites is that sometimes they look different on different computers. Some variables to consider when thinking about why they look different are the visitor’s operating system, the visitor’s display resolution and the visitor’s web browser. Usually operating systems don’t play a huge role in how a website visually appears unless it’s a handheld device, and as long as your site isn’t wider than 1024 pixels, you shouldn’t have to worry much about the resolution issue. Web browsers however are usually the main reason why websites can look different. You can try to download all the latest web browsers and load your site separately on them but what about the older versions of browsers that you can’t install anymore? Those treat your code different as well.

The solution that I found helps with the browser issue is working with a fantastic website called Browsershots. Browsershots will simply let you type in the URL of the website that you want to check and then give you a series of screenshots with the results of how it would look in different browsers. Browsershots covers all of the basic browsers (Firefox, Internet Explorer, Safari & Chrome) and also shows examples of sites in some of the more obscure web browsers (Dillo, Iceape, Minefield & Avant). After using Browsersshots, I go in and tweak the code until it looks correct across browsers and then check it again. Browsershots is free to use.

More @ Browsershots.