JavaScript Auto Complete for Text Field

Yesterday, I had a project that required me to create an auto complete feature for a text field. I searched for an existing solution online and couldn’t find one that fit my exact needs, so I created my own.  I created this particular solution using both PHP and JavaScript, but it could easily be modified to use only JavaScript if you prefer. However, if you have a long list of words or phrases you need to use for the auto complete feature, then you too may want to use PHP to call them into the JavaScript code as I have done.

A Working Example

Let’s start off by showing you a live working example so you can see what we are creating. Here is the link to the example I made as a proof of concept for the project I was working on:

http://jafty.com/test/cities.php

Type of Auto Complete

This particular type of auto complete feature is used on a regular text input field within a form. This auto complete feature is for when you have a list of words and/or phrases that you want to be made available as input into a text field. It is up to you if you want to allow values outside of that list or not. In my case I do not restrict my text field to values from the list, but I did consider it.

Why I Created a New Auto Complete Feature

I made this solution because I was working on a site for the country of Switzerland and had a need to allow Swiss users to enter a Swiss city into a form. I soon discovered that there are well over two thousand villages, towns and cities throughout Switzerland. I found a list that is supposed to contain all of the municipalities in Switzerland online. I wanted to make a script that would use that list for the auto complete feature for the city text field in that form. My solution allows for larger sized word/phrase lists to be employed with the auto complete feature for any text field you assign.

The Solution

Finally, let’s see some code! The code is mostly JavaScript with a bit of PHP. PHP is optional in this case, so if you desire a pure JavaScript solution, simply exclude the PHP file and hard-code the word/phrase list into the JavaScript code.

The Completed Code

Here is all the code from the cities.php file which is a full working example solution when paired with the towns.txt file which has the list of cities in it. Read the instructions provided near the end of this article to learn how to recreate a working example on your own server.

<style>
#town{
border: 1px solid #ccc;
padding-left:20px;
padding-right:15px;
width:165px;
margin-left:100px;
cursor: pointer;
}
</style>
<script>
//isGood JS function checks if char is a valid letter or not:
function isGood(c) {
return c.toLowerCase() != c.toUpperCase();
}

var first = ”;//used in suggest function to hold first letter entered into text field
var second = ”;//used in suggest function to hold 2nd letter entered into text field
var third = ”;//3rd letter…
var fourth = ”;//…
function suggest(c){
//build an array of cities:
var cities = [
<?php
$file = fopen(“towns.txt”, “r”) or exit(“Unable to open towns.txt file!”);
//Output a line of the file until the end is reached:
$line_no=0;
while(!feof($file)) {
$line_no++;
$line = fgets($file);
$curcity = trim($line);
echo “\”$curcity\”,”;
}//end while reading in lines from keywords.txt file
fclose($file);
?>
];
if(isGood(c)){
document.getElementById(‘town’).style.display=”;//shows the suggestions dropdown(town div)
//if only one letter so far:
if(c.length == 1){
//get first letter of c(what was entered into text field) and save it in “first” global variable:
first = c[0].toLowerCase();
}
if(c.length > 1){
second = c[1].toLowerCase();
}else{
second = ”;
}

if(c.length > 2){
third = c[2].toLowerCase();
}else{
third = ”;
}

if(c.length > 3){
fourth = c[3].toLowerCase();
}else{
fourth = ”;
}

con = ”;//empties contents of suggestions saved previously.
cities.forEach(foreachfunction);
document.getElementById(‘town’).innerHTML = ”;//empties the suggested cities first…
document.getElementById(‘town’).innerHTML = con;//fills the town div with suggested cities
}//end if letter is good
}//end suggest JS function by Ian L. of Jafty.com

var con = ”;//init a variable to hold content of the dropdown of suggested cities
//function ran for ea. city in the cities array:
function foreachfunction(city, index){
//get first letter of city:
var f = city[0].toLowerCase();
//see if first matches 1st letter of city(f):
if(f == first){//adds city to suggestions only if first letter is entered in text input:
//if more than one letter has been entered into text field, get 2nd letter of city too:
if(second != ”){//second is blank if only 1 letter, so if it’s not blank get 2nd letter:
if(city.length > 1)var s = city[1].toLowerCase();
if(city.length > 2)var t = city[2].toLowerCase();
if(city.length > 3)var f = city[3].toLowerCase();
if(fourth != ”){//fourth is blank only if 1,2,3 letters, so if it’s not blank, get 4th letter:
if(f == fourth && t == third && s == second){
con += “<div onclick=’addItem(this.innerHTML)’>”+city+”</div>”;
}
}else{
if(third != ”){//third is blank if only 1 or 2 letters, so if it’s not blank get 3rd letter:

if(t == third && s == second){
con += “<div onclick=’addItem(this.innerHTML)’>”+city+”</div>”;
}
}else{

if(s == second){
con += “<div onclick=’addItem(this.innerHTML)’>”+city+”</div>”;
}
}
}

}else{
con += “<div onclick=’addItem(this.innerHTML)’>”+city+”</div>”;
}
}
}//end foreachfunction JS function used within above suggest JS function by Ian L.

//function ran when one of the suggested cities is clicked upon:
function addItem(x){
document.getElementById(‘city’).value=x;
document.getElementById(‘town’).style.display=’none’;
}//end addItem JS function by Ian L. of Jafty.com
</script>
<form>
<table><tr><td>
Village / Town:<input style=”width:200px” type=”text” id=”city” name=”city” onkeyup=”suggest(this.value)” /><br />
<div style=”display:none;” id=”town” name=”town”>
</div>
</td><td>
<input type=”submit” id=”s” name=”s” value=”Suche” />
</td></tr></table>
</form>

The Word and/or Phrase List

In this example we have a long list of Swiss cities as our word list. Your word list can be a list of words and/or phrases which you would like to suggest as values to be entered into the text field for which you are applying the auto complete feature to. Each word or phrase can be as long as you like and should be formatted in a plain .txt file with one word and/or phrase per line. Generally you should probably try to keep your phrases short, but there is no actual limit that I am aware of regarding how long they can be. Just remember this is a “text” input not a “textarea” input, so it is meant for short values typically of one to six words approximately. My list is of city names so they are all relatively short and I’ve formatted the .txt file to list one city per line and saved it as “towns.txt” I have uploaded towns.txt to my personal server, so if you would like to copy it to use for testing your own script, you can do so by going to the following url and simply copying and pasting the word list into your own .txt file and naming it “towns.txt”. Here is the link to towns.txt:

http://jafty.com/test/towns.txt

Instructions to recreate your own auto complete feature

Follow these simple instructions if you want to create the live example on your own server. Then you may modify the code to fit your individual needs.

  1. First, copy the entire code example above in green text and save it to a .php file. I named my file cities.php, you can name yours whatever you like as long as it ends in “.php”.
  2. follow the above link to the towns.txt file and copy and paste it into a new .txt file and name it “towns.txt”. If you choose to name it something else, be sure to also change the name in the code wherever it is used by doing a search and replace for “towns.txt” and replacing it with your new name if you so choose.
  3. Upload both the PHP file and the TXT file to your server inside of the same directory. Then finally, you can visit the cities.php page in your browser and see it work! That’s all there is to it.

Creating a Pure JavaScript Solution Instead

If you prefer to have a pure JavaScript solution and your word list isn’t too large to handle within the JavaScript, follow these simple instructions:

  1. Follow the above instructions, but while doing step no. 1 above, after copying the green text above to a blank file, find the PHP section of code and simply delete it. Delete everything from “<?php” to after the closing PHP tag that looks like this: “?>”.
  2. Then where the php used to be, add the following code but replace the “one, two, three, four” text with your own personal word and/or phrase list.
    “one”,
    “two”,
    “three”,
    “four” , so your cities variable will look like t his now:
    var cities = [
    “one”,
    “two”,
    “three”,
    “four”
    ];
  3. Then you can save your file as an HTML file now since there is no more PHP code in it, so save it as cities.html and open it in your browser and it should work even from your desktop since HTML doesn’t require a server to function like PHP does.

Summary

That’s all there is to it! Feel free to modify this code to fit your needs as you wish. I hope it helps someone else as it did me. I found it very useful myself. I used this on a WordPress site as well, so it is WP friendly FYI.

 

 

 

The Best Way to Learn Mobile App Development

If you start looking into it or have already been researching on ways to learn mobile app development, you come to find out that there is a wide variety of options and decisions you have to make regarding how to learn Mobile App Development. I wrote this guide to help you get started in hopes that it will save you some time and get you coding your own mobile applications faster.

The Many Paths to Learning Mobile App Development

As I mentioned above, there are many different options when it comes to learning mobile app development. Here are just some of the decisions that you will have to make when first getting started with the development of mobile applications:

  • Android, IOS or Cross-Platorm – Do you start out learning to program for Android, IOS or both? What about other Operating Systems? Well the truth is, there really isn’t any other significant Operating Systems, Android and IOS hold about 98% of the market share right now, a mobile development team from UK finds. Worldwide, Android holds 75.22% of the market, while IOS controls 22.76% for a combined market share of 97.98%. So are we worried about the missing 2%? No, not as beginning developers breaking into the market, we’re not. The ratio of Android to IOS users varies significantly from country to country, so if you want to learn more about individual countries, you can go to https://deviceatlas.com/blog/android-v-ios-market-share and read all about it.  U.S. market share is a little bit unclear since I’ve read reports for the end of 2018 that put Android on top and conflicting reports that put IOS on top, so lets just say  it’s roughly 50/50 in the U.S. IOS usage is higher in countries with better economies. As most people know,  iPhones do not come cheap! I just read online that the new iPhone XS is selling for over $1500 dollars! That is much more than I ever care to pay for a phone, but it is impressive with 512gb storage and 4gb of ram. That’s almost as powerful as the laptop I use, amazing! In my opinion, that’s more than most of us need though. There are times when it would be nice, but most of the time I don’t think we need that much power in our cell phones. Surely not the average user at least. So, all arguments aside, Android is the clear winner to me because they have the largest market share world-wide and all of the multi-platform method of mobile app development I’ve seen and tested so far have not been good enough to build commercial applications with yet. So i think you should either pick Android or IOS to start with and eventually learn to develop for both since there is no viable cross-platform option available yet that I’ve seen.
  • What IDE, Framework or coding platform do you use? This question is heavily reliant upon the previous question because it mostly depends on what Operating System you have chosen to develop for. In my case, I’ve chosen to develop for Android first, so after checking out most available options, I’ve decided to go with Android Studio. I selected Android studio because it seems to be the most intuitive and it is very well documented. There’s nothing worse than downloading a new program and finding out that there is hardly any documentation on the web regarding how to operate that program. You won’t have that issue with Android Studio. It came out in May of 2013, so it’s been around for over 6 years now and has built quite the reputation in that short amount of time. I don’t think any of the choices available today are going to have been around for anymore than ten years or so just because the technology is so new. I did try a few other IDEs first and Android Studio was the one that I was able to build a working app the fastest on and it didn’t leave me scratching my head and thinking “Wow, I created an app, but I have no idea how I did it” as some of the other IDE options left me thinking. It’s also important to note here, I feel, that I have no reason to endorse any of the decisions I’ve made in this guide. No one paid me to write this and I do not endorse any products unless I truly think they are the best, but I have not been paid by anyone to endorse anything. So, if I say something is the best, I truly believe it is the best option. It’s as simple as that. That’s hard to believe sometimes in today’s fast paced economy, but it still holds true with me.
  • What coding languages do you learn? Again, this answer is dependent on how you answered both of the questions above, so my choice will only be relevant to your situation if you also choose to develop for Android. The official language for Android development is Java. There is also Kotlin for Android Studio users. Kotlin apps will run on any machine that supports the Java runtime environment and because most machines can, Kotlin is a relatively easy way to create android applications. If you chose to go with IOS on the other hand, Objective-C and Swift are the two most commonly used programming languages for IOS app development. My first choice was Java because it’s been around the longest for use with Android and seems to be the most documented of the two. Kotlin is newer and may have some neat new features, but for now, I’m going with old reliable…

Okay, so that about covers it, the three bullet points above cover the three most important questions you have to ask yourself when you first get into mobile application development. I took my time making the decisions I made to go with Android Studio IDE and the Java programming language to start building mobile apps with, but I can also learn the alternative methods after I perfect these Android application development methods. A true developer is always learning. They say you will need to know about seven different programming languages to be an expert mobile application developer. That sounds about right to me because that’s how many languages I had to learn to be an effective web developer. Speaking of which, I did look into using the languages I already know as a web developer for mobile application development. While there are platforms that make it possible, such as Cordova, in the end they are mostly using techniques to convert the code you write into Java anyway, so I figure it’s faster and more productive in the end to just start learning Java for Android Mobile Application Development. I may look into ways to convert my Java Apps into IOS apps when I am done making some mobile apps with Android Studio, but I suspect I will eventually learn to develop separate apps for IOS in the end.

How to Install NodeJS on Linux Server

In this article, I will cover how to very easily install Node.js on just about any Debian, Ubuntu or other Linux web server. I created this article to fill a great need for accurate information on this subject because I spent the better part of a full day getting Node.JS to work on the first server I had to install it on. Now that I’ve installed it on 3 or 4 different servers, I finally found a quick and easy way to make it work. I also had to make it so node could be called from PHP using the exec command, so it goes one step beyond just installing Node.js.

Here are the Four Quick and Easy Steps for Installing Node.JS on Linux Servers:

(use sudo in front of the command line commands if you are  not root user)

  1. Confirm that Curl is installed using “which curl” from command line and if it doesn’t return the curl location, then install curl before continuing.
  2. Confirm that Node isn’t already installed with the command line command “node –version”. if it doesn’t print a version no. then it needs installed.
  3. Using instructions from https://github.com/nodesource/distributions/blob/master/README.md#debinstall and If on a Debian server, go to command line and run(use sudo if not root user):
    curl -sL https://deb.nodesource.com/setup_8.x | bash –
    …and hit enter….then go to step 4.
    NOTE: if you’re not on a Debian server, follow the relative instructions for your particular server by scrolling to it in the above github URL instead of steps 3 and 4 here.
  4. then run this command from the command prompt(use sudo if not root user):
    apt-get install -y nodejs

Then you can verify that NodeJS works from the command line with:

node –version

and it shold return something like:

8.4.0

 

What Programming Language is Best for Mobile App Development?

If you’re a web developer and are considering getting more into mobile application development for IOS and/or Android operating systems for mobile phones, then you are likely go ask the question, “What Programming Language is Best for Mobile App Development?”.

The answer is somewhat complicated because there are many answers. To narrow down the possible options, I am going to make a couple assumptions. I will assume that you, like myself, like to stay away from platforms and drag and drop type UI tools to program with. I will also assume that you want to develop something for both Android and iPhone, not just one or the other.

Considering the above assumptions, there are still many options, so what makes it such a complicated choice? In my opinion the main factor that makes it so difficult to pick a coding language to specialize in for mobile app development is the fact that there are two main and competing mobile platforms that have chosen to use different languages with their operating systems. Of course I am speaking about Android Vs. iOS.

Android Vs. iOS, Which is More Popular?

A quick Google search shows me that just over 85% of smartphones are Android, while most of the remaining 15% are Apple iOS phones. According to an article I read on 9to5mac.com, Android and iOS together account for 99.1% of all smartphones in use today, which makes any other devices almost pointless to develop for. It is worth mentioning that of the 0.9% of devices that are not running Android or iOS operating systems, are mostly running Windows operating systems. Windows OS accounts for  0.6%, while 0.1% are Blackberry and the remaining 0.2% are various other operating systems that are not popular enough to be worth even mentioning here.

Best Languages for Android OS

JAVA

Since Android controls the majority of the market for smartphones today, let’s look at them first. If you are going with the most popular answer, than Android wins by far! Android operating systems use Java. If you are coding an app for Android phones, Java is most likely going to be your best programming language to choose as the base language for your app. In reality, many apps use a combination of several different languages. However, in my experience your language of choice will make up the majority of the app’s code.

Kotlin

Kotlin, a second app development language option, was designed and developed by JetBrains. They are a Czech company known for the popular IDE, IntelliJ IDEA. Google’s Android team recently announced that they are officially adding support for the Kotlin programming language. Kotlin was created to address some of the Java issues. Some say the Kotlin syntax is clean, simple, and leads to less code bloat.

Best Languages for iOS

While Apple’s iOS operating system only accounts for roughly 15% of the smartphone market, that is still a significant number of devices out there. Smart developers create apps for both Android and iOS, whether it be with separate apps for each or some sort of platform used to create a mashup that will allow a single app to function on both operating systems.

Apple iOS apps primarily use SWIFT or Objective-C

SWIFT

SWIFT is a quickly growing open source language popular with many starting out with app development today. Apple has heavily promoted the use of SWIFT making it clear that they intend for SWIFT to be the leading language choice for iOS application developers.

Objective-C

Objective-C was the original language of the iOS operating system, but is being phased out apparently since Apple is making it clear that SWIFT is the future, then that leaves Objective-C stuck in the past. While it is still a viable option, I would suggest using it only on an as-needed basis for iOS application development purposes.

Cross -Platform Mobile App Language Options

For some of you, particularly those of you who don’t want to make two separate apps, a cross-platform language option might seem more attractive. A cross-platform language in this context, is one that will allow a mobile application to function on both Android and iOS without the need to make two applications, one for each OS.

JavaScript

If you started out as a web developer as I did, then you are surely familiar with JavaScript. Not to be confused or associated with Java, JavaScript is it’s own language despite the similar name. JavaScript is very versatile in that you can complete many different types of tasks using the language. It is probably one of the most popular cross-platform options because it is effective and rather light-weight.

Several JavaScript frameworks exist today that target the mobile application development market. While I am not a huge fan of most frameworks in general, some of these deserve some serious consideration none-the-less. Some of the well known JavaScript frameworks popular today include PhoneGap by Cordova, Angular.js, jQuery Mobile and React. There are many more that are worth researching if you are looking for a cross-platform JavaScript framework or library to help build your next mobile application for Android and iOS. Actually, JavaScript apps will also work on the other less used Operating Systems as well such as Windows OS and Blackberry.

Understanding ARIA Click Button to Show or Hide Content Example Code

Understanding ARIA

ARIA stands for “Accessible Rich Internet Applications”. Also known as the WAI-ARIA standard, it is a standard developed to help coders to provide proper semantics for custom widgets and to make them accessible, usable, and interoperable with assistive technologies for people with disabilities. To be clear, ARIA doesn’t add functionality to an object. It adds roles and states that assist in identifying the intent and state of an object. However, usually JavaScript code is still needed to add any dynamic action to that object. I state this clearly at the top of this post because at first, I was under the impression that ARIA also added certain functionalities to HTML objects and was seriously disappointed when I found out otherwise. For example, when ARIA is used on a button that hides and shows content in a div, it only defines the roles and states of the button and corresponding div. JavaScript is still needed to do that work of hiding and showing the div in question.

Example Code

Here is an example of correctly implementing ARIA controls when making a button that hides and shows a div on the click of your mouse. It also binds the space bar and enter key to the div as well, so pressing either of those keys toggles the visibility of the div as well. Without any further ado, the code:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Aria Examples</title>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<style>
div.topic {
    display: none;
    margin-bottom: 1em;
    padding: .25em;
    border: black thin solid;
    background-color: #EEEEFF;
    width: 40em;
}
</style>
</head>
<body>

<p class=”button”>
    <button id=”button1″ class=”buttonControl” aria-controls=”t1″ aria-expanded=”false”><span>Show</span> Topic 1</button>
</p>

<div id=”t1″ class=”topic” role=”region” tabindex=”-1″ >
    Topic 1 is all about being Topic 1 and may or may not have anything to do with other topics.
</div>

<script>
$(document).ready(function() {

   var hs1 = new hideShow(‘button1’);
  // var hs2 = new hideShow(‘button2’);
  // var hs3 = new hideShow(‘button3’);
  // var hs4 = new hideShow(‘button4’);
 
}); // end ready()

//
// function hideShow() is the constructor for a hideShow widget. it accepts the html ID of
// an element to attach to.
//
// @param(id string) id is the html ID of the element to attach to
//
// @return N/A
//
function hideShow(id) {

   this.$id = $(‘#’ + id);
   this.$region = $(‘#’ + this.$id.attr(‘aria-controls’));

   this.keys = {
               enter: 13,
               space: 32
               };

   this.toggleSpeed = 100;

   // bind handlers
   this.bindHandlers();

} // end hidShow() constructor

//
// Function bindHandlers() is a member function to bind event handlers to the hideShow region
//
// return N/A
//
hideShow.prototype.bindHandlers = function() {

   var thisObj = this;

   this.$id.click(function(e) {

      thisObj.toggleRegion();

      e.stopPropagation();
      return false;
   });
}

//
// Function toggleRegion() is a member function to toggle the display of the hideShow region
//
// return N/A
//
hideShow.prototype.toggleRegion = function() {

      var thisObj = this;

    // toggle the region
    this.$region.slideToggle(this.toggleSpeed, function() {

      if ($(this).attr(‘aria-expanded’) == ‘false’) { // region is collapsed

        // update the aria-expanded attribute of the region
        $(this).attr(‘aria-expanded’, ‘true’);

        // move focus to the region
        $(this).focus();

        // update the button label
        thisObj.$id.find(‘span’).html(‘Hide’);

      }
      else { // region is expanded

        // update the aria-expanded attribute of the region
        $(this).attr(‘aria-expanded’, ‘false’);

        // update the button label
        thisObj.$id.find(‘span’).html(‘Show’);
      }
    });

} // end toggleRegion()
</script>
</body>
</html>

Thank you oaa-accessibility.org for providing me with enough knowledge to create and use the above example! They have the best example code for ARIA usage that I could find online after many Google searches. See their complete list of example ARIA examples at http://oaa-accessibility.org/

ARIA and WordPress

I noticed ARIA controls for the first time in the header.php file for my WordPress theme. I was trying to fix a mobile navigation menu and thought couldn’t find the code that makes the menu appear on mobile devices when the button is clicked and thought ARIA had something to do with it. I was basically wrong. ARIA code was only present to mark the navigation menu and make it’s role and states readily accessible. It is after all an accessibility feature.

Summary

So ARIA and the WAI-ARIA standard are used to enable more accessible HTML markup for disabled people. While it is a great initiative, it doesn’t add much dynamic functionality to your HTML objects, JavaScript is still needed for that. ARIA combined with HTML, CSS and JavaScript can be used to make accessible web pages more user-friendly.

Including Responsive Videos in WordPress Posts

I’ve done a lot of things with WordPress to-date, but one thing I haven’t done much with is videos. I was commissioned to build a plugin to embed responsive videos into WordPress posts. Naturally I started trying to figure out how to embed a simple Vimeo video into a post, this post right here in fact. I went to Vimeo.com and got the link for one of the videos my client is using. I am going to post just that plain text link on the next line below:

…and presto-magico! WordPress did most of the work for me! As you can see the video showed up just from me copy and pasting the Vimeo URL in the post! For example, I posted “https:// vimeo.com/ 155235235” without the quotes or spaces. I just added spaces so WordPress wouldn’t make it a video like it did above.

Therefore, the only task left to me is to make the videos responsive.

How to make videos responsive in WordPress

The most basic method, which you may want to use if you only need to apply this fix to one or two videos on your site,  is to add a wrapper div to your video url when you insert it int o your blog post like this:

<div class=”video-wrap”> VIDEO URL GOES HERE! </div>

Then add the following CSS to your theme’s main style sheet, style.css:

.video-wrap{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrap iframe, .video-wrap object, .video-wrap embed, .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

That’s all you have to do if you don’t mind making manual edits each time you add a video to your blog.

Making a Simple WordPress Plugin to Make Videos Responsive

The logical option to use if you regularly embed videos in your WordPress site, is to create a very simple plugin that hooks into WordPress while it embeds videos and automatically wraps the embed code inside of a div and then applies style to that div to accomplish the same effect we did above without having to make changes each time we add a new video. Here is how:

Add the following code to a new php file and name it whatever you want to call your custom plugin or call it jafty-responsive-video-embedder as I did here:

<?php
/*
Plugin Name: Jafty Responsive Video Embedder
Plugin URI: http://jafty.com

Description: Adds a wrapper div around embedded videos and applies mobile style to them so they are responsive at all times regardless of the surrounding HTML.

Author: Ian L. of Jafty.com
Author URI: http://jafty.com

Version: 1.0.0

License: GNU General Public License v2.0
License URI: http://www.opensource.org/licenses/gpl-license.php
*/

//Code to make Videos more responsive:
function make_video_responsive( $html ) {
    return ‘<div class=”video-wrap”>’ . $html . ‘</div>’;
}
 
add_filter( ’embed_oembed_html’, ‘make_video_responsive’, 10, 3 );
add_filter( ‘video_embed_html’, ‘make_video_responsive’ ); // Jetpack

function add_video_css(){
wp_enqueue_style(“videocss”, “/wp-content/plugins/outer-gain-engine/video.css”);
}

add_action(‘wp_enqueue_scripts’, ‘add_video_css’);

?>

Then create a file named video.css and copy and paste the follocing CSS code into it:

.video-wrap{
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-wrap iframe, .video-wrap object, .video-wrap embed, .video-wrap video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Summary

That’s all there is to it. A simple, yet handy, plugin or fix for your WordPress videos. Feel free to modify the code to fit your individual needs. Good Luck!

Building a Custom WordPress Navigation Menu Plugin

This is a semi-advanced WordPress tutorial so you should have a little bit of existing knowledge of WordPress if you want to be able to understand the concepts involved. I will try to make it as easy to follow as possible none-the-less.

We are just going to dive right in a create a new Plugin. I’ll be calling the plugin Jafty-Nav, you can follow suit if you wish to keep things simple or give it your own name if you feel comfortable making such changes.

Create a New Plugin

<?php
/**
* Plugin Name: Jafty Top Nav Plugin
* Plugin URI: http://jafty.com/blog/?p=9813
* Description: A Plugin that adds a custom top navigation menu to WordPress.
* Version: 1.0
* Author: Ian L. of Jafty.com
* Author URI: http://jafty.com
* License: GPL2
*/

Register a New Menu Location with WordPress

Add this PHP code to your plugin file you created above:

<?php
add_action(‘after_setup_theme’, ‘register_jafty_menu’);
function register_jafty_menu(){
  register_nav_menu(‘jafty-top-nav’, __(‘Primary Jafty Menu’, ‘jafty-top-nav-plugin’));
}
?>

Now that is actually enough to create a simple plugin. The plugin will add a menu location to wp-admin and that’s it, but we’ll build on it after we install it. So go ahead and install the plugin by putting it into a folder named “jafty-top-nav-plugin” and naming the file “index.php”. Then upload to your WordPress plugins directory. Activate the Jafty Top Nav Plugin then go to your admin and click on “Appearance/Menus” then select the “Manage Locations” tab and you’ll see the new menu location your plugin as added to the admin like in the image below.

menuLOC

Placing a new top nav in your theme

The next task is to edit your current WordPress theme to work with the Jafty Top Nav Plugin. You’ll need to create a new header file and edit your page, post and/or home page templates to contain your new top navigation menu. Here is how:

  1. Go into your current theme’s folder and download a copy of the header.php file to your desktop and rename it header-jafty.php.
  2. open header-jafty.php in notepad and find the section that looks something like this:<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
    <button class=”menu-toggle” aria-controls=”primary-menu” aria-expanded=”false”><?php esc_html_e( ‘Primary Menu’, ‘outer-gain-dev’ ); ?></button>
    <?php wp_nav_menu( array( ‘theme_location’ => ‘menu-1’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
    </nav>
  3. Inside the code within the Nav tag in your header-jafty.php file, change the theme_location value to ‘jafty-top-nav’ and save the file.
  4. Now upload your header-jafty.php file to your active theme’s folder.
  5. Next you’ll want to add the new header to your template files, Some templates you might want to do this too are front-page.php, single.php, page.php and any custom page templates in your theme or child theme you might have. The process is very similar for adding the new header to any of the files, so I’ll just demonstrate on the home page template file, front-page.php. Open the template file in your notepad and near the top of the code you should see something like this:
    get_header();
    or you may have something like this instead:
    get_template_part(‘templates/header.php’);
    Regardless which you have, replace the line with:
    get_header(‘jafty’);
    and that will call your new header.jafty.php template into the page template so your customized header will be shown.
  6. Save and upload your altered template file and repeat for all necessary page and post templates until you have your new top nav menu at the top of all desired pages and/or posts throughout your entire WordPress site.

Now that we have more control of it, let’s customize that ugly top nav!

Customizing the WP Navigation Menu

It’s time to get down and dirty with some real-world customization of the top navigation menu in WordPress. We are not just doing some simple CSS changes here, we are talking about a complete rewrite of the navigation system. This is why I went with a plugin for this. Now I had to find what WordPress core functions I could use to alter the menu completely. My goal is to make a menu similar to the one at Stripe.com, which is not a WordPress site by the way. I just love the dynamic drop downs that fade in and out and their use of icons in the sub-menu items. I’ll get to how I duplicated all of that later on, first we need to know how to rebuild the entire menu structure because the stripe.com style menu is nothing like a standard WordPress menu. Here’s what I figured out:

 

First we need to be able to retrieve our custom navigation links from the WordPress backend. Remember earlier we created a menu location? Well, we need to retrieve the menu assigned to that particular location in WordPress. Therefore the first thing we want to do is make sure there is a menu assigned to the “Primary Jafty Menu”. You could pick one from the drop down, but we want to make a new one that is sure to have both main menu items and sub menu items so we can adequately test our menu when it’s complete. Therefore we locate the “Primary Jafty Menu” and click the link to the right of it that reads “Use New Menu” as I’ve circled in red in the below image:

menuLOC2

When creating the new Primary Jafty Menu, give it a name of “Jafty 1”. It’s best to do everything exactly as I have done just to be sure you don’t have any conflicts. You can always change names and such after you have a completed working plugin. When creating the menu, make sure to add at least 2 main menu items with at least 2 sub menu items each so we can test the drop down effects. Here is an image of the one I made for testing. If you don’t have enough pages or posts to make that many links, don’t worry, just use two real links for the main menu items and click on “custom links” and create outside links for all of your sub menu items as I have done in the below image:

menustructure

In the above image, “site settings” and “Hello world!” represent our two main menu items and the sub links rest below them indented to show their sub-link status. Notice I have “Primary Jafty Menu” checked under “Menu Setings” too. Once you have your menu, be sure you save it. Now we can return to developing our plugin!

Retrieve Menu and Sub Menu Items from WordPress Admin

It is time to develop some custom WordPress code to extract out menu items and sub-menu items from the database. Lucky for us, WordPress has some built-in core functions to assist us. Here is the code I come up with to extract all menu and sub-menu items for the “Jafty Primary Menu” from the database to display them on the front-end:

<?php
      $menuLocations = get_nav_menu_locations(); // Get nav locations
      $menuID = $menuLocations[‘jafty-top-nav’]; //menu assigned to Jafty Primary Menu
      $theNav = wp_get_nav_menu_items($menuID);
                
                    foreach ($theNav as $navItem) {
                        //get the url for the link:
                        $navURL = $navItem->url;
                        //get the nav link text/title:
                        $navTXT = $navItem->title;
                        //Get the nav link’s ID:
                        $navID = $navItem->ID;
                        //Get menu item parent(will be 0 if main link or parent ID if it’s a sub link):
                        $navParent  = $navItem->menu_item_parent;
                        echo “ID: $navID, $navTXT, $navParent, $navURL<br />”;
                    //echo ‘<li class=”has-dropdown gallery” data-content=”about”><a href=”‘.$navURL.'” title=”‘.$navItem->title.'”>’.$navTXT.'</a></li>’;
                    }
 ?>

The above code will go in out header file named header-jafty.php. Lets examine the code so you understand what it does.

The first line:

$menuLocations = get_nav_menu_locations(); // Get nav locations

as the comment says afterwards, it gets the navigation menu locations stored in WordPress. We added one of these in the beginning of the tutorial using the register_nav_menu function.

The second line reads:

$menuID = $menuLocations[‘jafty-top-nav’]; //menu assigned to ‘Primary Jafty Menu’

This line fetches the ID of the menu currently assigned to the menu location we created in the plugin file, “Primary Jafty Menu”. We then use the id in the next line that reads:

$theNav = wp_get_nav_menu_items($menuID);

We now have a WordPress menu object stored in $theNav. If you do a print_r($theNav) command in PHP, you would see that the menu object holds all sorts of information about the menu we created earlier. However, we only need four key pieces of information from the menu object. We need to get:

  1. The Link URL
  2. The Link Text
  3. The Link ID
  4. The Link’s Parent ID in case it is a sub-menu item.

We can get the four pieces of information we need using a foreach loop on the $theNav object like so:

     foreach ($theNav as $navItem) {
                        //get the url for the link:
                        $navURL = $navItem->url;
                        //get the nav link text/title:
                        $navTXT = $navItem->title;
                        //Get the nav link’s ID:
                        $navID = $navItem->ID;
                        //Get menu item parent(will be 0 if main link or parent ID if it’s a sub link):
                        $navParent  = $navItem->menu_item_parent;
                        echo “ID: $navID, $navTXT, $navParent, $navURL<br />”;
                    //echo ‘<li class=”has-dropdown gallery” data-content=”about”><a href=”‘.$navURL.'” title=”‘.$navItem->title.'”>’.$navTXT.'</a></li>’;
                    }

We now have all the information we need about the menu items after running the above foreach loop on the menu object. We have the link text, URL, ID and Parent ID. It’s important to note that the parent ID will always be 0 if the link is a main menu item and we can determine if the link is a sub-menu item if the parent ID is anything other than zero. Then we know which link to put the sub-link under by matching the sub-link’s parent ID to the ID of the main link item. Pretty simply really, once you get accustomed to it.

Now we need to open our header-jafty.php file and find the line that reads something similar to:

<?php wp_nav_menu( array( ‘theme_location’ => ‘jafty-top-nav’, ‘menu_id’ => ‘primary-menu’ ) ); ?>

And replace it with the code we wrote above:

<?php
$menuLocations = get_nav_menu_locations(); // Get nav locations
$menuID = $menuLocations[‘jafty-top-nav’]; // Get the *primary* menu ID
$theNav = wp_get_nav_menu_items($menuID);

foreach ($theNav as $navItem) {
//get the url for the link:
$navURL = $navItem->url;
//get the nav link text/title:
$navTXT = $navItem->title;
//Get the nav link’s ID:
$navID = $navItem->ID;
//Get menu item parent(will be 0 if main link or parent ID if it’s a sub link):
$navParent  = $navItem->menu_item_parent;
echo “ID: $navID, $navTXT, $navParent, $navURL<br />”;
//echo ‘<li class=”has-dropdown gallery” data-content=”about”><a href=”‘.$navURL.'” title=”‘.$navItem->title.'”>’.$navTXT.'</a></li>’;
}
?>

Now save your header-jafty.php file and upload it to your active theme’s folder and refresh your home page. You should see the following information printed in the header area of your site instead of a top nav now:

ID: 47, Site Settings, 0, http://dev.outergain.com/site-settings/
ID: 49, Jafty Interactive, 47, http://jafty.com
ID: 50, Jafty Blog, 47, http://jafty.com/blog
ID: 48, Hello world!, 0, http://dev.outergain.com/2016/12/30/hello-world/
ID: 51, Yahoo Search, 48, http://yahoo.com
ID: 52, Google Search, 48, http://google.com

As you can see my site returned 6 lines of text in the header, one for each of the two main menu items and one for each of the four sub-menu items in the menu I created in wp-admin. Each of the lines above contains the main ID first, followed by the link text, then the parent ID and finally the link text. I highlighted the parent IDs in blue so you can see how the two main menu items have a parent ID of zero while the other four have parent IDs equal to the two main menu items with zero for parent ID. Make sense? I hope so:-)

For all you professional WordPress plugin developers, I can probably stop there. Now you have enough to make your own custom top navigation menu for your WordPress theme. You clearly don’t need to do this as a plugin, in fact, it would normally done by adding the plugin code to functions.php in the current theme instead. I am making it a plugin just as a learning exercise.

You can use the information it printed in your header to figure out how to add in the HTML and CSS for any type of custom nav you desire, or you can read on to see how I recreated the stripe.com-like top nav for one of my clients.

Make a Static Top Navigation Menu as a Demo

Before we go about coding the menu into WordPress, I like to create a static version first. I created mine based on looking at the top nav found on Stripe.com. You can click the link to see what I mean. I didn’t copy it by any means, but I did use it as a model for creating a similar one with similar transition effects. In the static demo, I didn’t create great detail in the drop downs. Instead I concentrated on getting the transition effects and infrastructure perfect. I can worry about making the content of the dropdown boxes look pretty when I code it into the actual WordPress site. Here is my static demo: http://jafty.com/nav_demo

I won’t post all of the code to my static navigation menu demo here but you may feel free to use the link provided and use your browser’s view source option to see how I made it and copy it if you so desire.

 

 

 

How to Share Your Internet Connection in Windows 10

So I’ve used a couple different methods to share internet connections on several different computers. What’s a real pain is that some methods only work on some PCs and some PCs don’t have all the components or programs needed to run ICS(Internet Connection Sharing) properly. So, I finally may have found a great, easy to use solution. It does require installing a simple app in Windows, but it doesn’t seem to have any adware or nonsense in it. I will update this post if I do find any malicious content from the app later on though.

Using an App for Internet Connection Sharing

Some peope are against using an app for this, but let me tell you, it is easier if you have to deal with this issue regularly. The app is called Virtual Router and can be downloaded from: https://virtualrouter.codeplex.com/downloads/get/621827.

Screenshot (11)

Using CSS Media Queries in Responsive Web Design

That’s right! The post of the day is going to be on how to use CSS media queries to make a responsive web page or application. The project I’m working on requires me to create a responsive events calendar application that looks good in all sized browser windows as well as mobile devices including iPhone and Android phones and tablets. This can be done very well with CSS media queries and a basic understanding of HTML and CSS. Making today’s task a little more challenging is the fact that we will be using HTML table elements. If you have any experience with HTML tables, you probably know that they can be tricky to size according to specific requirements most times. We will overcome the table cell sizing limitations in this article however.

Common Screen Sizes

One of the most important things to take into consideration when developing a fully responsive web application for both computers and mobile devices is your users screen size. What are your users likely to be using? Some will be on a PC, some on a tablet, others on an iPhone and yet others will be on an Android or other device. The ugly truth is that there are a lot of possibilities. I have found from experience that it’s best to take into consideration the most commonly used screen sizes. I program for the most common and try to make it work resonably well in the uncommon sized screens as well because roughly up to 3% of your users could be using an odd sized screen that you haven’t programmed for. While 3% may not sound very significant, think of it like this: If your site has 1000 visitors a day like mine does, then that means up to 30 people a day are viewing your site on a less-common screen size. 30 is 3% of 1000. Here are some of the latest statistics I could find on common screen sizes used:

First I want to show you common screen sizes of Mobile Devices since they are probably the fasting growing segment of 2016:

2016 Total iOS* Android Windows Others
February 5.15 % 1.08 % 3.49 % 0.42 % 0.16 %
January 5.38 % 1.17 % 3.69 % 0.37 % 0.15 %

The above information was collected by the website w3schools.com. The data represents the users of their website according to information collected by thier servers. It shows that only slightly greater than 5% of thier website viewers view thier site on a mobile device, but your site could have more because I think the w3schools website is one that developers reference a lot and developers do their work on a computer more often than on a mobile device. That may account for some of the low figures for mobile users. Now lets look at the most commone screen sizes according to rapidtables.com:

Common screen resolutions of rapidtables.com visitors (2/2014):

Screen resolution Display
ratio
Usage Screen size / type
1366×768 16:9 19.1% 14” Notebook / 15.6” Laptop / 18.5” monitor
1920×1080 16:9 9.4% 21.5” monitor / 23” monitor / 1080p TV
1280×800 8:5 8.5% 14” Notebook
320×568 9:16 6.4% 4” iPhone 5
1440×900 8:5 5.7% 19” monitor
1280×1024 5:4 5.5% 19” monitor
320×480 2:3 5.2% 3.5” iPhone
1600×900 16:9 4.6% 20” monitor
768×1024 3:4 4.5% 9.7” iPad
1024×768 4:3 3.9% 15” monitor
1680×1050 8:5 2.8% 22” monitor
360×640 9:16 2.3%
1920×1200 8:5 1.7% 24” monitor
720×1280 9:16 1.6% 4.8” Galaxy S
480×800 3:5 1.1%
1360×768 16:9 0.9%
1280×720 16:9 0.9% 720p TV

If you study the numbers above, they suggest that rapidtables.com visitors are much more likely to be on a smaller screen size device or mobile device than are w3scools.com users. I guess from reading the above data that their website has roughly up to 12% of their users using smaller screened devices such as iPhones, Androids and other mobile devices. Start working with a Seattle web developer to obtain custom and unique designs.

CSS Media Queries

I choose to use one simple type of CSS media queries in this challenge. I like to call it the max-width technique for sizing web pages at various sizes. This is due to the fact that the technique uses ony the max-width media query as you will see with the demonstration code below.

From studying the more common screen sizes, I’ve come up with a simple plan to make my calendar application look good on just about any possible screen size. Here is my rudimentary logic:

I plan to set the maximum with of the calendar to 1000 pixels and centering it on the page. By doing this I eliminate the need for any media queries for screens over 1000 px wide! As you can see from the charts above,  there are 17 screen sizes represented and 11 of them are over 1000px wide! We have already made our work a lot easier since we only have 4 other screen widths to worry about(because 3 of them have 320px wide screens). Obviously 320px is of great concern as it is one of the most common widts on mobile phones, but I’ll also take into considertion the widths of 360px, 480px, 720px and 768px. However, some will be taken care of by the same media queries as you’ll soon discover. Here are the basic rules we will go by when making out calendar application:

  • web page will be no wider than 1000px and centered.
  • first media query will be set for max-width of 800px meaning that if the page size is under 800px wide the styles inside of the media query definition will be altered.
  • A second media query set for a max-width of 500px will apply changes for any screen size under 500px down to the next media query.
  • A third media query set for a max-width of 400px will account for any screen between400px and the next media query.
  • A forth and final media query set for max-width of  320px will account for the common screen sizes of 320px and under which are the smallest group of mobile phones, so no other media queries after this one will be required.

I have outlined my logic above, now I can add my media queries to my CSS style sheet as follows:

/*add styles for screen sizes of 800px and up. These don't need to be inside of a media query because the table's width for the calendar will be set to 1000px and centered. Tables are generally flexible enough to be reduced from 1000 to 800px without any problems given it is styled and tested correctly.*/

@media(max-width: 800px) {
//add styles for screen sizes from 500 to 800px:
}

@media(max-width: 500px) {
//add styles for screen sizes from 400 to 500px:
}

@media(max-width: 400px) {
//add styles for screen sizes from 320 to 400px:
}

@media(max-width: 320px) {
//add styles for screen sizes 320px and under:
}

The above is a good way to start your CSS style sheet for a resposive design. You may find that you may not need to use one or more of the media query definitions. You may also find yourself adding one or two media query definitions. None-the-less, this is a good start.

Writing and Testing your CSS Code

When I make a responsive web page, I first make the basic page with basic CSS and no media queries. Then when the basic page is complete, I start testing it at different screen sizes by making my browser window smaller and larger and seeing how the page looks at every possible width and height. Then I add styles to media queries and edit them until the page looks good at every possible size. Finally I test on actual devices such as an iPhone, Android phone and a tablet while making final adjustments according to how the page looks on the actual devices.

How to Make an Image Cover the Entire Webpage Background with CSS3

CSS3 includes many fabulous new tricks. One of those is the background-size attribute which I will demonstrate below. This is what I have found to be the best way to make a background image cover the entire webpage background regardless of the screen size or browser window size. Also, this is a nice new modern cross-browser method that works in most modern browsers including:

  • Safari 3 and above
  • Firefox version 3.6 and higher
  • Internet Explorer 9 and above
  • Chrome
  • Opera 10 and above

CSS3 Style to Make Image Cover Whole Page Background

Here is the css style to add to any webpage to add a background image that covers the entire page background:

<style>

html{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>

Conclusion

This method works great for almost every site I’ve used it on, so give it a chance. I know CSS3 still scares some people, but using it is a pretty safe bet these days. It’s been around long enough now to be considered the standard in my opinion. Some of you may have noticed that I have SEO as a category for this article. Why? That is because proper mobile development is beginning to effect search results in  Google as of April of 2015, so sites with correct mobile optimization will get ranked better! So optimize your website for mobile devices today or you may lose your Google rank!

Related reference: Do You Need Google My Business Photos?

How to Create an iPhone App

This is a starting point for anyone wanting to know how to start developing iPhone apps. There is really only one way to correctly develop apps for iPhones and that is the method we will explain here. Unfortunately, iPhone and Android Apps must be created somewhat differently, although there are some things you can do to minimalize development if you have to create an app for both. However, in this guide, we will only discuss the iPhone app since it is clearly a different beast from Android apps.

As you can imagine, iPhones, Macs and anything Apple are very proprietary in nature, so the number one requirement for developing applications for iPhones is that you must have access to a Mac computer!

CodeLobster All-in-One Coding Software

CodeLobster PHP Edition Software Review

Written by Ian Lincicome of Jafty Interactive Web Development – Jafty.com

For the past couple of weeks, I have been evaluating CodeLobster’s latest release of “CodeLobster PHP Edition” which I’ll refer to as simply “CodeLobster” from here on out in this review. The current edition at the time of writing this review was CodeLobster PHP Edition Professional Version 5.4. I am reviewing CodeLobster because I am looking for a tool I can use for my web development business, Jafty Interactive Web Development. Also I was given a break on purchasing the pro version of CodeLobster in exchange for writing a product review on my site, Jafty.com. Please note that I am under no obligation to write a positive review. I will be as brutally honest as ever, I assure you. This review will include both the pros and cons of using CodeLobster rather than a one-sided review like many company’s probably hire writers to write. In fact, if that was my intention, I wouldn’t have mentioned that the someone had asked me to write this review. My ulterior motive for writing the review is to find the perfect program to do my work for my business. I am also evaluating other products as well because I want to work with the best.

I’m looking for an application that will allow me to seamlessly edit several types of code on several different servers without having to use a separate code editor, FTP program, web browser and Language reference material. To this date, I have been using three separate applications to accomplish my day-to-day work. I used FileZilla to copy files from a client’s web server to my desktop. I used Notepad++ to edit the code files. Finally, before using FileZilla again to upload the files back to the client’s server, I viewed the file in Firefox to see how it looks in a browser. That is if it is not a server-side language like PHP which I use the most. If I had to edit a PHP file, I had yet another couple of steps to perform because I’d have to upload the file to the server to view it and then repeat the whole entire process again if I had more changes to make to get it perfect. So I used FileZilla, Notepad++ and Firefox mostly up until now. I figure I could probably almost double my productivity with one good tool that does it all.

Technologies CodeLobster Supports

CodeLobster supports a wide range of technologies including:

  • PHP
  • HTML
  • JavaScript
  • CSS
  • SQL
  • MySQL
  • Version control systems such as SVN, Git etc.
  • CakePHP
  • CodeIgniter
  • WordPress
  • Drupal
  • Joomla
  • Facebook
  • jQuery
  • Smarty
  • Symfony
  • Yii

CodeLobster also has a very wide assortment of features including all the standard components you would expect in a code editor and many extras. I found a helpful built-in Help feature that also links to online help if you can’t find what you need in the built-in documentation. The online documentation is surprisingly complete for a newer product.

Installing CodeLobster

The installation went smoothly and was very easy and comprehensive. Simply download and click the set up file and the installer will guide you through the simple set up process. Here is the Download Link: http://www.codelobster.com/download.html

When I first installed CodeLobster, it allowed me to select what languages/technologies I wanted to install. I only deselected two that I knew for sure I would most likely never use. I figured if there was even a small chance that I might use one of the items listed, then I should leave it checked. That way I will be prepared in case I need that particular technology in the future.

Pros and Cons

Once I began using CodeLobster I noticed both good and bad points regarding the program. I loved how versatile the program was right out of the box. I did not like the way the word wrap feature worked(View/Word Wrap). It breaks up words rather than splitting lines by the nearest space. I’d prefer it to not break up words at all or at least do so in a more logical manner(by syllables with hyphens for example). From what I understand from reading the forums and talking with my contact, CodeLobster plans to add an option between soft and hard word-wrap. Hard wrap is how it is now and soft wrap would be a word-wrap technique that doesn’t break up words. I do hope they add it soon because it was one of the of the first things I noticed.

One of the first features I noticed and liked was the completely configurable hot-keys. You can configure any hot-key by going to Tools/Preferences/IDE/Hot keys. Another nice feature is the Find and Replace feature that is very much like that of Notepad++ including regular expression search and the ability to search and replace text in files, folders and sub-folders. This can be a huge time-saver for coders.

One of the first things I noticed and did not like was the lack of a decent spell checker. I know notepad++ has the option as a plugin, but not as a built-in feature. Either way would be great, but I think it should be a standard built-in feature. I realize that auto-complete helps with this, but not if you are writing a plain text file such as I am doing right now while writing this review. I talked to my contact at CodeLobster Software about this and he assured me that they plan to add a robust spell-checking feature in the near future. He mentioned that they plan on making several additions to the software and will be releasing future editions with new features and improvements ASAP. So, while CodeLobster may not have everything I would like it to have at the moment, I was assured that they are heading in the right direction with future expansion plans.

Another nice feature I also noticed right away was CodeLobster’s tool bars. The tool bars are completely configurable and have a nice drag and drop feature to move tool bar items around as you please. The same can be said for the man different windows that can be added or removed from the work area.

CodeLobster is a code editor first & foremost and it does a wonderful job at editing PHP code which is my code of choice. If you are looking for a word processor, CodeLobster probably won’t fit the bill, but it is a very robust code editor that can handle all of the languages I use for web development and several others.

CodeLobster’s plugin ability is great to have in a code editing program. The pro version of CodeLobster comes with many plugins that the free version does not include from what I understand, so I think the pro version is definitely worth the cost for those of you who work with frameworks such as WordPress, Joomla, CakePHP, CodeIgniter, etc. I currently own the Pro version and I am happy with its performance so far and will be much happier once some of the additions are made in the near future.

Even the free version would be great for coders who use many different coding languages regularly but don’t need the extra plugin abilities that require the pro version. As a full-time web developer, I mostly use PHP, HTML, CSS, JavaScript, WordPress and MySQL. I also occasionally use Joomla, XML, Perl, Python, Drupal, Smarty, Laravel, CakePHP and others, so I require the Pro version of CodeLobster myself. If you only use the most common languages such as PHP, HTML, CSS and JavaScript, you can probably do fine with the free version. Some of the things I require the Pro version for include WordPress support, Smarty, Laravel and CakePHP. Honestly there are to many features to list here. You should visit their web page at http://www.codelobster.com/details_phped.html to figure out which version is best for you. They also have a Lite version which you can read about on their site since I won’t be covering CodeLobster Lite here.

As I continue to evaluate the software I am finding there are more and more features that I like. As a web developer, I need a tool that allows me to quickly edit code, test it and upload it to the client’s server. So far, CodeLobster seems to be meeting my three main requirements quite well in most cases.

FTP Feature

CodeLobster’s FTP ability is a very powerful feature. The FTP feature allows you to set up as many FTP connections as you need. I was able to copy all of my client’s FTP connections from FileZilla into CodeLobster. Now I am able to click on a connection, edit a server file, preview it and upload it back to the server seamlessly from within a single application! This is huge for me because I used to use at least three different applications to do the same thing without CodeLobster. I can see that my work will get done a lot faster by using CodeLobster. In fact, I am already getting work done faster after only two days of using it.

The FTP feature is very functional, but for a guy like me who hates to read instructions, it took a little bit of fooling around using trial and error methods to get it set up for the first time with all of my client’s 20+ FTP connections and configuring basic settings. Everything I needed to accomplish my FTP tasks is in CodeLobster, but the FTP system does need some improvements. For example it gave me trouble when trying to connect to a SFTP connection. It worked great with all non-secure FTP connections however. As luck would have it, out of over 20 current clients I work with, only one uses SFTP rather than FTP, so I am unable to test it on other secure SFTP servers to see if the problem is just with this one server or not. Unfortunately this is one of my regular clients so it is going to be a problem for me. It did connect using SFTP, but had issues when trying to edit files on the server which I was able to do fine with regular FTP connections. I did bring this issue to the attention of my CodeLobster contact however and he assures me it will be looked into ASAP.

Regarding the GUI set-up for FTP, in my personal opinion, the way the windows are organized in the work area could have been done a little better. For example, when I use FTP, I have to go to Tools/FTP to open the explorer window that lists FTP connections. That alone will allow you to open your FTP connection but won’t allow you to see what’s going on. If there was an error and the only window you had open in your work area was the explorer window, you wouldn’t see that error. This is where I think it could have been done better. I would have programmed it so that when you open the FTP window, the output window opens along with it, right above it, similar to how FileZilla allows you to view console output. Of course this is just my opinion, it may not bother others and actually I am starting to get used to it so it doesn’t bother me as much as time passes.

Search Features

The “Find in Files”(Search/Find in Files…) feature is great for finding text in open files. It could be improved to allow file search on the local directory tree files as well, but it is sufficient the way it is. Also I love the regular expression search as I mentioned earlier.

Also, I often use the incremental search feature when I edit code. While I am glad it has this feature, a small nuisance for me is that the incremental search box is not persistent across different views. I think it would be nice if the incremental search box would stay at the bottom of all view tabs once it is opened. I don’t think it should close unless you manually close it. Again, this is just my preference, not a bug.

Nice-to-Have Features

One more thing I liked while test driving CodeLobster is that when editing .html and .css files I could hover over class names in the HTML or CSS code and it would show me the associated style declaration. Also when hovering over items in a .css file, it shows me information regarding the browser compatibility of the CSS code.

The HTML preview feature works very well. It is a built-in browser that shows the results of your code live without having to open a separate browser window. All you do is click on the “preview” tab. I did notice that sometimes you have to hit the refresh button to see your changes, but that is to be expected.

I also enjoyed the code formatting features very much. I tested them on an HTML file that I copied from an online web page. At first the HTML code was ran all together with no line breaks or indents. I simply went to the tool bar and clicked “Tools/Code Format/Format” and it formatted it perfectly. I am sure it will work with other supported languages equally well.

When you double-click on a variable name in the PHP editor, it highlights the variable and the dollar sign, so you can copy the whole thing and paste or search for it easily. Notepad++ wouldn’t include the dollar sign and it was a bother to me.

CodeLobster has what they call a “Map” feature(View/Windows/Map) that I’ve never seen before. It is basically a small window with a tiny view of the document you’re working on. It allows you to click anywhere in the Map to quickly jump to a section of the file that you need to work on. It is a great feature for working with large files.

Conclusion

I have concluded that CodeLobster will indeed fill a need in my current web development process. It is not yet developed enough to be the only tool I use simply because of that one SFTP connection it will not work correctly with. However I found that I can combine it with another tool, CyberDuck, as a work-around until the developers of CodeLobster work out the final kinks in the software and add some more nice-to-have type features such as spell-check and . In the end it still gets a thumbs up for all the wonderful features it has and for its robustness in general. Eventually I believe it will make the perfect all-in-one coding tool for my company. The other contender for my new all-in-one coding tool was CyberDuck and I can honestly say that CodeLobster has much more potential. CyberDuck is also in its early stages of development and it needs several improvements to be truly useful. CyberDuck fails in comparison to CodeLobster when it comes to Features. CodeLobster is truly made to be an all-in-one coding solution while CyberDuck is missing many of the necessary features to be a real competitor.

If you are interested in how I combined CodeLobster with CyberDuck to make up for CodeLobster’s short-coming when connecting by SFTP, I’ll quickly go over how to do it. Create a bookmark(that’s what CyberDuck calls their FTP/SFTP connections) in CyberDuck to the SFTP server. CyberDuck allows you to set it up so you can use your own code editor with it in a way that allows you to click on a file from a remote server and open it in that editor. Then when you save it in that editor(CodeLobster), it saves it to the server. That way I still have a seamless process even though I have to combine two tools to get what I truly want.

How to Make a Completely Responsive Website Quickly

In today’s blog post, I’m going to show you one way you can make a completely responsive web site with six pages while only coding one HTML file and one CSS file! I will also demonstrate how to make a horizontal responsive navigation menu for your site. If you want a vertical responsive menu, you can adapt the code accordingly yourself. This tutorial also demonstrates an alternative to using image maps as I believe the method I use here for navigation menus with images works better than image maps. The advantage to using an image or several images for your navigation menu is that they respond better at different screen sizes than text does.

Here’s a link to the final product. Note that I used a very plan image for the navigation text, but you can use any type of image you want for yours. I also used a single image where you could use one for each navigation link with a little modification of the code. I am trying to say that this demonstrates the code only and the look and feel you will need to make your own because mine is ugly as it is for demonstrating code only:

http://jafty.com/ResponsiveSite.html

Using Divs Instead of Image Maps

While this tutorial is technically about doing a responsive website with a image for a navigation menu, this exact same method can be used in place of image maps because, if you’ve tried to make a responsive page that has an image map in it, you know it doesn’t work well.

Building a Responsive Navigation Menu

Starting at the top of our page, the first thing we will do is build our .html file with a top navigation menu. Okay, lets’ start our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So “topnav0map.png” refers to the following image:

topnav0map.png:
topnav0map

Again, if you’re following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you’ll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the “page” div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won’t go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I’ll include a short description for each CSS declaration after “page” which I just explained:

  • header_menu_overlay – is used to position the overall navigation menu where you want. You’ll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that’s what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap – is the div that wraps the other divs we will use for our links. we set it’s position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap – wraps around the individual menu items and has a margin of “0 auto” so it centers the group of menu items to the rest of the page nicely.
  • nav_item – this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a – is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set “position: relative”, width and height for this to work.
  • nav1 – nav6 – the next six CSS declarations are used to set each individual menu item’s width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<div id=”page”>
<div id=”header_menu_overlay”>
<img src=”topnav0map.png” style=”width:100%;” border=”0″ alt=”top navigation menu”/>
<div class=”navwrap”>
<div class=”nav_item_wrap”>
<div class=”nav_item nav1″><a href=”#pg1″></a></div>
<div class=”nav_item nav2″><a href=”#pg2″></a></div>
<div class=”nav_item nav3″><a href=”#pg3″></a></div>
<div class=”nav_item nav4″><a href=”#pg4″></a></div>
<div class=”nav_item nav5″><a href=”#pg5″></a></div>
<div class=”nav_item nav6″><a href=”#pg6″></a></div>
</div>
</div>
</div>

<div class=”pg”><a name=”pg1″>page 1</a>
<h1>Place all of your page 1 content here…</h1>
</div>

<div class=”pg”><a name=”pg2″>page 2</a>
<h1>Place all of your page 2 content here…</h1>
</div>

<div class=”pg”><a name=”pg3″>page 3</a>
<h1>Place all of your page 3 content here…</h1>
</div>

<div class=”pg”><a name=”pg4″>page 4</a>
<h1>Place all of your page 4 content here…</h1>
</div>

<div class=”pg”><a name=”pg5″>page 5</a>
<h1>Place all of your page 5 content here…</h1>
</div>

<div class=”pg”><a name=”pg6″>page 6</a>
<h1>Place all of your page 6 content here…</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! All you need to do is go back and add page code to each page’s section. Simply replace the existing code inside of the H1 tags to make your page headers and add more content below each to build out your content. If you followed the tutorial to the tee, your page should look like my finished example page here:

http://jafty.com/ResponsiveSite.html

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

 

Edit Files Live on the Server

I’ve been a web developer for many  years now and I must say I feel a little foolish for not thinking of this earlier. I’ve been wasting countless amounts of time waiting for files to upload and doing the mundane tasks involved in updating files and uploading them to a server when I didn’t really have to. Here’s why.

Today I got fed up with editing my file in Notepad++, switching to Filezilla,  finding the file in a folder on my desktop, uploading the file by dragging it to Filezilla and finally testing my online website or app. I decided to Google the term “Edit files live on server” and found https://cyberduck.io/ that has an amazing product which allows you to type in your FTP details, just like I used to in Filezilla, and open a connection to my server. Then it gives me a directory tree on my server. CyberDuck allows me to click on any file on my server and open it in Notepad++ on my desktop, edit it and save it right back to the server without having to click and drag it to another program like I used to do for so many years.

This is the best program for a developer I have found in years. Traditionally I do not favor fancy programs to help you write code or frameworks to make things “easier” because I found that they only complicate matters in the long run, CyberDuck is the exception however. It is great so far, but I’ve only been using it for an hour now, so if I find any flaws, I will report them here asap. I just wanted to share this. If you are interested in downloading the CyberDuck app for yourself, simply CLICK HERE or the link above and look for the two download links on the left side of the page. Do not use the first download link you see at the top of the page because it is a sponsored ad and will try to trick you into downloading something else. I hate those types of ads, but none-the-less, I still recommend CyberDuck!

Like I said, it’s great when used with Notepad++, so if you’d like the experience I had, download Notepad++ too. Just google it, it’s easy to find.

How to Use Firefox for Mobile and Responsive Web Design

Today I found a nice trick that I wish I would of realized years ago. I figured I’d post it here in case anyone else is missing out on this great Firefox feature for mobile developers and responsive web design. Firefox as a mobile screen display which you can get by using the shortcut:

CTRL + SHIFT + M

It’s that easy.

To use this feature of Firefox, simply open the browser, hit the key combo, control+shift+m and type in any web address in the address bar like normal. Here’s what it looks like:

Snap 2014-11-20 at 21.39.23…and what’s really nice is that you can use developer tools while at this size and be able to read them easily with little scrolling. I used to try to use the tools while the browser window was very small and I couldn’t read more than a line at a time but now it is easy. Here’s a picture of the same website as above with developer tools opened:

Snap 2014-11-20 at 21.39.45Nice huh? By the way, there is an icon in the top right corner of the tools window that allows you to reposition the toolbox in the side of the window instead of at the bottom as it is by default.

The Basic Strategy of Responsive Web Development

Okay, as the title indicates, this is an instructional article about responsive development, not design. We assume at this point, you have a PSD Photoshop design already made and your goal is to DEVELOP that design responsively and responsibly. No pun. So the keywords here are DEVELOP and RESPONSIVE. I like to say that adding the responsive factor into a webpage is the developer’s job and not always the designer’s job so much. In some cases, where the developer is also the designer, it is definitely both. First let’s talk about how the designer can assist in developing a responsive webpage.

How the Designer can Help with RESPONSIVE Designs:

At the very least, the person doing the Photoshop design of the webpage should be aware of the need for a responsive page. That way he or she can assist the developer by not including elements that are difficult to make responsive such as many layers stacked on top of each other or text in inconvenient places. Let te designer know that the PSD image should look as good as possible at every possible zoom level from 10% to 150% and that will give them some figures used in Photoshop to play with.

How Web Developers Go About Making a Responsive Webpage:

Certainly most of the extra work lies on the shoulders of the developer when it comes to responsive web pages. He or she is the one who has to make the page function at every possible screen-size and every possible device type including desktop PCs, laptops, net-books and mobile phones at least. Testing and Debugging is key here, but first you should learn to think in percentages instead of Pixels, which is what most of us developers used in the old days before responsive development was so important. I often get away with checking on a PC, laptop and phone myself, but the more different types of devices you check your responsive design in, the better it will be in the end. I like to start by making the page using percentages instead of pixels for divs and images mostly and always for width of images for sure. Images should usually be inside a containing div with the image width set to 100% so that the image scales down nicely when the screen size changes. Let’s say for example you want an image to be 500px wide at 100% zoom and when the screen is wider than 500px. You would crop the image to 500px place that image in the div you want then set it’s width to 100%. Then to move the image around in order to get it exactly where it should be in the page layout, instead of playing with pixels, use percentages for margin-top, margin-left, etc. An important part to remember is that you’ll often need to set elements position CSS attribute to “relative” in order for margins to work as you want them to. In some more rare cases, you’ll use the absolute position, but only for more advanced layouts. To sum it up and give you a better visual representation of what I am saying here, these are the steps to creating a responsive web page:

Steps to Responsive Development:

  1. Have a designer create a PSD who is informed of the need for a responsive design.
  2. Slice the PSD and create your first-draft of the web page using images and divs with percentages instead of pixels and be sure to user relative positioning when declaring margins in CSS.
  3. Once you have a first draft with some or all elements of the design in place, start manipulating the browser window to decrease and increase the window size from around 2000 pixels wide down to as small as 300 pixels wide making sure it looks proper at each size in between.
  4. Zoom in and out using your browsers zoom hot keys which are cntrl/- and cntrl/+ on Windows machines. make sure all your elements and images look good at all possible zoom levels.
  5. Once you have the site looking good and responsive on your development machine, it’s time to look at it and tweak it some more using other devices such as net-books, iPad, iPhone, Android phones, Laptops and Desktop computers. A truly responsive design looks great on any device at any screen-size and zoom level.
  6. After each round of changes on one device, go back and make sure you didn’t break your layout on the other important devices. I know it’s a tedious process, but that’s why you have to charge more money for mobile and responsive design techniques. I generally charge twice as much for a fully responsive design as opposed to one that is only partially responsive such as a default WordPress install might be.

Summary:

There you have it, my views on responsive web development as I have learned from nearly 20 years working as a full time freelance web developer. Good luck with your next responsive design and I hope this article helps you!

Building a Responsive Navigation Menu

In today’s blog post, I’m going to demonstrate how to make a horizontal responsive navigation menu anywhere on your webpage. This tutorial also demonstrates how to make a completely responsive web site if you follow it through. Here is a link to the final product:

http://jafty.com/ResponsiveSite.html

If you want a vertical responsive menu, you can adapt the code accordingly yourself. I am posting this here for reference because it seems like every time I have to do this for a responsive website, I have to relearn it. Now myself and anyone else that needs the technique can find it right here. Another appropriate title for this tutorial could have been how to make a responsive image map since that is what led me to doing this in the first place.

Using Divs Instead of Image Maps

While this tutorial is technically about doing a navigation menu, this exact same method can be used in place of image maps because, if you’ve tried to make a responsive page that has an image map in it, you know it doesn’t work well.

Building a Responsive Nav

First, lets’ build our HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<div id="page">
<div id="header-menu-overlay">
<img src="topnav0map.png" style="width:100%;"  border="0" alt="top navigation menu"/>
<div>
    <div>
        <div><a href=""></a></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>
</div>
</div>
</body>
</html>

To follow along with the tutorial, copy and paste the above code into a new notepad document and save it as test.html. The first div includes an img tag in it as you can see above. Here is the actual image to give you a better idea of what I have done here. So “topnav0map.png” refers to the following image:

topnav0map.png:
topnav0map

Again, if you’re following along, right click on the above image and save it to the same directory as your test.html file. I put the image in a blue background here so you can see it because it is mostly white over a transparent layer done in Photoshop. The reason I use an image here is because it is responsive when you set the width to 100% and height to auto. This is about when I got the idea for an image map to link the items in the nav as you see them in the above image, but quickly found out that image maps do not resize well when changing either the page size or the zoom level when looking at the page live. therefore I used divs as they are more responsive when used properly with percentages as you’ll see below when I get to the CSS part.

Responsive CSS Layout

The most important part is probably the responsive CSS code. Here is what I used:

#page{
position:relative;
width:100%;
max-width:900px;
background-color:#222288;
margin:0 auto;
min-height:1200px;
margin-top:25px;
}

.header_menu_overlay{
position: absolute;
top: 100px;
left:0px;
width: 100%;
min-height: 30px;
text-align: center;
z-index: 99999;
}
.navwrap{
top:-20px;
min-height:27px;
position: relative;
}

.nav_item_wrap{
position:relative;
width:100%;
max-width:1125px;
height:27px;
border: 1px solid brown;
margin:0 auto;
}

.nav_item{
position: relative;
border: 1px solid red;
height: 33px;
display: block;
float: left;
z-index: 999;
}

.nav_item a{
width: 100%;
height: 100%;
position: relative;
display: block;
}

.nav1{
width: 7%;
margin-left: 9%;
}

.nav2{
width: 10%;
margin-left: 1%;
}

.nav3{
width: 10%;
margin-left: 1%;
}

.nav4{
width: 20%;
margin-left: 1%;
}

.nav5{
width: 19%;
margin-left: 1%;
}

.nav6{
width: 10%;
margin-left: 1%;
}

.pg{
position:relative;
width:100%;
max-width:900px;
min-width: 225px;
background-color:#8a1734;
margin:0 auto;
min-height:600px;
margin-top:125px;
}

First, I used the “page” div as a page wrapper by setting a standard 900px width which you may adjust to your needs. I also set width to 100% which is very important for responsive designs, but also notice the max-width is set to 900px this is so your page won’t go crazy-wide when you open a large browser window on a PC. If you want to always cover the width of the screen regardless, then you could remove this, but I recommend using a maximum width myself for most scenarios. Next I’ll include a short description for each CSS declararation after “page” which I just explained:

  • header_menu_overlay – is used to position the overall navigation menu where you want. You’ll see I decided to put it a hundred pixels from the top of the page, but you can put yours wherever you need it even at the bottom of the page for a footer menu if that’s what you need. the header-menu-overlay div is the one that holds the image as well as the rest of navigation divs. Be sure to set the width only of the image in this div and set that width to 100% so it is responsive.
  • navwrap – is the div that wraps the other divs we will use for our links. we set it’s position to relative and top to a negative number to force it on top of the image above it.
  • nav_item_wrap – wraps around the individual menu items and has a margin of “0 auto” so it centers the group of menu items to the rest of the page nicely.
  • nav_item – this class is set to all of the navigation item divs and is used to set their height, display and to float them left which is important for responsiveness.
  • nav_item a – is a style definition for the anchor/link tags inside of the nav_item div. Without this the links will not work. It sets the width and height to 100% of the containing element. You have to set “position: relative”, width and height for this to work.
  • nav1 – nav6 – the next six CSS declarations are used to set each individual menu item’s width and margin-left properties since they can all be different.

Add CSS Classes & Content to HTML:

Okay now we just need to add the classes above in the proper spots in our original HTML code and add some content for each page so that your new HTML page  looks like this:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>
<body>
<div id=”page”>
<div id=”header_menu_overlay”>
<img src=”topnav0map.png” style=”width:100%;”  border=”0″ alt=”top navigation menu”/>
<div class=”navwrap”>
<div class=”nav_item_wrap”>
<div class=”nav_item nav1″><a href=”#pg1″></a></div>
<div class=”nav_item nav2″><a href=”#pg2″></a></div>
<div class=”nav_item nav3″><a href=”#pg3″></a></div>
<div class=”nav_item nav4″><a href=”#pg4″></a></div>
<div class=”nav_item nav5″><a href=”#pg5″></a></div>
<div class=”nav_item nav6″><a href=”#pg6″></a></div>
</div>
</div>
</div>

<div class=”pg”><a name=”pg1″>page 1</a>
<h1>Place all of your page 1 content here…</h1>
</div>

<div class=”pg”><a name=”pg2″>page 2</a>
<h1>Place all of your page 2 content here…</h1>
</div>

<div class=”pg”><a name=”pg3″>page 3</a>
<h1>Place all of your page 3 content here…</h1>
</div>

<div class=”pg”><a name=”pg4″>page 4</a>
<h1>Place all of your page 4 content here…</h1>
</div>

<div class=”pg”><a name=”pg5″>page 5</a>
<h1>Place all of your page 5 content here…</h1>
</div>

<div class=”pg”><a name=”pg6″>page 6</a>
<h1>Place all of your page 6 content here…</h1>
</div>
</div>
</body>
</html>

Now you should be done and you have a completely responsive website in no time at all! You should go back and remove the borders from the navigation menu’s CSS as those were just for demonstration.

Summary

So if you followed this tutorial, you should have learned quite a bit about responsive design. Not only should you be able to grasp how to develop a navigation menu from this article, but you should now be able to understand how to replace an inline image map with responsive divs and even how to make an entire responsive website using the techniques demonstrated here. Remember to use percentages instead of pixels for widths and even heights wherever you can and your design will be responsive and evenly laid out for all devices. Congratulations, you are now a responsive developer if you understood all of this. Good Luck!

View outcome of tutorial here:

http://jafty.com/ResponsiveSite.html

 

 

How to Get Free Internet Hotspot from your Android Phone

Okay, all of you cheapskates out there(myself included ha ha) will love me for this one if you have an Android phone and your carrier charges you extra to use a hotspot with your laptop of PC. In my case, I have a T-Mobile Android, Prism II cell phone. I have the $30/month plan that has unlimited data and text, but only 100 minutes of call time. I’ll also give you a hint on how to get around that later.

Why Pay for Internet When You Already Have it?

If you have a cell phone with internet service and you are considering getting home internet service with WiFi or without, think again! You already have a potential mobile hotspot on your phone! You can use your phone’s hotspot to connect any laptop or PC in your home, or anywhere your phone is, to the internet using the phones built-in internet.

Visit the following to learn about The Impact Of DAS on Joint Use Assets – Advanced Telecom Systems.

How to Use your Phone’s Hotspot for Free

This is the semi-tricky part, using your hotspot without paying extra for it. If you fork out the extra $15 per month or whatever it is for your phone company, you can get it easy and hassle free, sure, but this work around is pretty easy and hassle free as well and won’t cost you a dime. Here is how:

  1. On your Android phone, go to Google Play Store or whatever app store you use and search for “PDA Net”. Then download and install the PDA Net app for Android.
  2. Now go back to the app store and search for “FoxFi” hotspot and download the FoxFi hotspot and tethering app for android. Install it as well.
  3. Go into your phone’s settings under Settings/All/Mobile Networks/More…/Data Usage and turn “Mobile data” ON. You should also go to Settings/Mobile Networks and make sure “Data enabled” is checked.
  4. Open up FoxFi and place a check mark after “Activate USB Mode” under the PDA Net settings.
  5. Download PDA Net for the computers you want to use internet on and install it. If you haven’t figured this out from doing the above steps yet, just Google “PDA Net for PC download” or something similar and you will find it easy enough.
  6. Once everything is installed, tether your phone and PC together with the Phone’s USB connector and you can now open up a browser on your PC and enjoy your new free internet connection.

Pros:

This service is often a lot faster than broad band and often close to as fast as cable internet if you have good 4g service or at least 3g service in your area. If you have T-Mobile’s “Unlimited Internet” service, it is only unlimited with 2g, they will cap you off and lock you into 2g mode after you use 5GB of data with 4g or 3g running. It will work in 2g mode, it is just really slow. Custom Software Development | Tech Fabric specializes in web and mobile application development.

Cons:

You do have to use a tether with this method. If anyone knows how to make the hotspot work without tethering and without paying the extra $15 for hotspot service, please post a comment.

If your business is aimed at mass market,  web applications can help you develop your business and attract more customers. You would also need Technical Recruiting as hiring the right staff  is critical to your business.