Monthly Archives: June 2014

How to change password from Mysql

This is a simple fix for any of you that may be locked out of any type of site admin that uses a mysql database. If you have PHPMyAdmin, this solution will work for you.

Usually you can't simply replace the password in the database because most site admins use a password hashing algorithm like MD5.

Well that doesn't have to stop you! Just log into your PHPMyAdmin and go to your users table. Then click on "edit" to edit the row in your table where the password is stored. The trick is to select MD5 in the first box and then put the un-hashed password in the second like in the image below:

pwfix

Create a .CSV File with PHP

In todays post of the day, I will demonstrate to my readers how to write a CSV file using PHP.

PHP Code to Create a .csv File

Simply copy and paste the following code into your file editor and save it as PHPcsv.php. Note, sometimes when you copy and paste from the web you will have to replace single quotes, double quotes and possible some other characters with basic versions in notepad or another file editor of your choice. If you have problems look for fancy quotes in your file first and replace them with plain ones. Here is the code for PHPcsv.php:

<?php
$csv = "ID,Name,Email".PHP_EOL;//creates 1st line of CSV file with column headings
$csv .= "1,Ian,linian11@yahoo.com".PHP_EOL; //add a few data rows
$csv .= "2,Jafty,jafty11@gmail.com".PHP_EOL;
$csv .= "3,Marc,linmarc@yahoo.com".PHP_EOL;
$fname = 'data.csv';//give the csv file a name
$fp = fopen($fname,'w');//open csv file
fwrite($fp,$csv);//write csv data to data.csv
fclose($fp);//close data.csv
echo "<p style='color:green'>Data written to $fname</p>";//Let's us know it is done.
?>

Open the above file in a web browser and you'll see this in the browser window:
Data written to data.csv

Also, in the directory you uploaded the code to in order to open it in your browser, you will find a new file named data.csv after running the PHPcsv.php script. Yes, the script created the data.csv file as long as you now see the new file in the same directory as PHPcsv.php. Download the file and the contents should look like this when opened in notepad:

ID,Name,Email
1,Ian,linian11@yahoo.com
2,Jafty,jafty11@gmail.com
3,Marc,linmarc@yahoo.com

PHP_EOL

Notice the each line of the CSV file is held in the $CSV variable in the code above and ends with PHP_EOL appended to the line. That is the PHP End Of Line constant and it is what keeps your file all nice and organized for you. The PHP_EOL statement basically works as a newline in PHP.

 

Summary,

I did leave some things out. The code ultimately should declare the proper headers for CSV file, but this works. If you open it in Excel, it will mention it is not in the proper format, but will open none-the-less and then you can save in the correct format, so this is functional and simple, the way I like things!

How to Delete Duplicate Data in Mysql Database

Today I had a client with a database that has a table named companies that had duplicate email addresses in it that needed to be removed. Here is the SQL query I used to delete the doubles. I will explain below.

DELETE e1 FROM companies e1,companies e2 WHERE e1.email = e2.email AND e1.id > e2.id

Okay, first, I did this from PHPmyadmin, you may shoose to do it from a PHP script if you do not have access to PHPmyadmin. All you have to do is edit the query to look like this:

<?php

//include your database connection first:

include 'db-conn.php';

mysql_query("DELETE e1 FROM companies e1,companies e2 WHERE e1.email = e2.email AND e1.id > e2.id") or die(mysql_error());

?>

Either way it does the same thing. The e1 and e2 you see are simply temporary variables used to perform the actions needed to delete all rows with emails that are the same as another row's email while keeping the one with the lowest ID number.

When I ran the query from PHPMyAdmin, on a table with 28k rows, i took several minutes to run, so this may cause problems if you run it from a PHP script and you have a table that is as large or larger than mine was.

How to Include .mp4 Video in Webpage

Including a .mp4 video in a webpage has become very easy with recent advances. Here is the simplest way to do it:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<video width="320" height="240" controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>
</body>
</html>

You can make the above HTML code work without making changes to it if you save it a video.html inside the same folder as your .mp4 video file. rename the video file to video.mp4 and open the page in a browser to test it and you should see the video in a blank webpage. Simple.

Insert .mp4 Video in a WordPress Post or Page

The same basic method also works quite well in WordPress I discovered today. The only difference is you only need the video part of the HTML to paste into the WYSIWYG editor. Make sure you click the "Text" tab in the upper right corner of your editor to put it in text mode and copy and paste the following code into your post or page from the WordPress admin:
<video width="320" height="240" controls autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

Summary

As you can plainly see, it is very simple to include a video in any webpage with this method even in WordPress! Be sure to include the correct path to where you saved the video when using WordPress however. I like to use the current template folder myself, but you may use the uploads folder or any other folder you wish that you know the complete path to.

How to Create Dynamic PHP Variables

When I speak of "dynamic" variables or "variable" variables, what I mean is to create a variable name using PHP so that variable names are created dynamically. It sounds confusing and it sometimes hurts to think about things like this, so let's just break it down and make it simple because it's really not too complex at all. The best way to explain is with a PHP code example. Consider the following PHP code:

<?php

$v = 'new_var';

$$v = 'variable contents of new_var...';echo $new_var;

?>

The above PHP code will output:

variable contents of new_var...

Pretty neat huh? You might be asking yourself how this could come in handy or, more likely, you came here because you aready have a use in mind. I'll continue to explain some common usage cases below.

Why Use Variable Variables or Dynamic Variables:

Imagine that you have 6 people's ages stored in php variables like this:

<?php

$age1 = 20;
$age2 = 50;
$age3 = 21;
$age4 = 63;
$age5 = 18;
$age6 = 19;

?>

Okay, now lets pretend you want to call these variables from age1 to age6 in a loop. Using the concept of variable variables, you could do this:

<?php

$age1 = 20;
$age2 = 50;
$age3 = 21;
$age4 = 63;
$age5 = 18;
$age6 = 19;

for($i=1; $i < 7; $i++){

$v = "age$i";

$cur_age = $$v;

echo "$i - $cur_age yrs old<br />";

}

?>

The above snippet will print:

1 - 20 yrs old
2 - 50 yrs old
3 - 21 yrs old
4 - 63 yrs old
5 - 18 yrs old
6 - 19 yrs old

Good so far. You can also use curly brackets so considering the code above, you could replace:

$cur_age = $$v;

with:

$cur_age = ${$v};

which may in some cases make things easier.

Summary

There are all sorts of uses for Dynamic or Variable PHP Variables. After you have written enough code, you will surely come across all sorts of problems where the solution is a dynamically created variable name. Sometimes for more complex generated names, curly brackets come in handy. Good luck with your next project using variable variables and happy coding!

How to add Keyword Meta Tags to Woocommerce Product Categories

Today I spent hours trying to figure out the best way to add keyword meta tags to product category pages in Woocommerce without adding yet another plugin to slow my site down. Here is the final solution I ended up doing to add meta keyword tags to product category page in WordPress.

Product categories use a special WooCommerce page template located in wp-content/plugins/woocommerce/templates/ in a file named archive-product.php. If you open that file you'll notice the get_header WordPress function looks like:

get_header('shop');

Okay so if you understand the WordPress get_header function you'll know this indicates that there is a special header file involved here.  The get_header function appends what's in the parenthesis to the prefix: "header-" then appends ".php" to the end in order to create the file name of the header file for the template it's called within. That means in this case it points to a file named "header-shop.php". Therfore the first thing you need to do is check your active theme directory for a file named header-shop.php. Most themes do not have this file and by default, it calls the header.php file if header-shop.php does not exist.

Edit or Add header-shop.php File:

If you found the header-shop.php file, great, simply edit it to your needs and done. In my case if I had found one, which I didn't, all I would have had to do would be to add meta tags under the title tag in the head section of the file.

If you did not find header-shop.php, then make a copy of header.php and name it header-shop.php and upload it to the same directory as header.php. Then you can edit header-shop.php to only make changes to pages that use that header tempalte such as the product category pages. In my case, I wanted to add custom meta tags to the product category pages, so I added the following inside of the head tags in header-shop.php and uploaded it to the current theme folder:

<meta name="description" content="insert your custom product category description here." />
<meta name="keywords" content="your keywords go here, separate with commas" />

archive-product.php

How to get Latest File Name from a Directory with PHP

Here is the code that will return the last file name uploaded to a directory using PHP:

<?php
//get the lastest file uploaded in excel_uploads/
$path = "uploads";
$latest_ctime = 0;
$latest_filename = '';    
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
//Check whether the entry is a file etc.:
    if(is_file($filepath) && filectime($filepath) > $latest_ctime) {
    $latest_ctime = filectime($filepath);
    $latest_filename = $entry;
    }//end if is file etc.
}//end while going over files in excel_uploads dir.
echo $latest_filename;
?>

How to Get All File Names for a Directory with PHP

I fought with this for a while. I had to use PHP to return all file names in a directory with their respective size and types. I also had to return only files and not directories, but this guide will show you how to do both just in case you might need directories too.

Here is what the following code will return for a directory with three files in it:

files

Now here's the code that finally worked for me when I put the code in a file named get_file_names.php in the html directory which also held the "uploads" directory which it reads from :

//get the lastest file uploaded in uploads/
$path = "uploads";    
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
//Check whether the entry is a file etc.:
    if(is_file($filepath)) {
    $latest_filename = $entry;
    $file_type = filetype($filepath);//get file type.
    $file_size = filesize($filepath);//get file size.
    echo "$latest_filename<br />Type: $file_type<br />Size: $file_size<hr />";
    }//end if is file etc.
}//end while going over files in uploads dir.

Wrap that in PHP tags and you got your get_file_names.php script.

How to Get Both Files and Directories:

To get both files and directories, the script is even simpler, simply take out the last if statement so your final code looks like:

//get ELEMENTS in uploads/
$path = "uploads";    
$d = dir($path);
    while (false !== ($entry = $d->read())) {
    $filepath = "{$path}/{$entry}";
    $latest_ctime = filectime($filepath);//like: 1402783996 that is timestamp so highest is latest.
    $latest_filename = $entry;
    $file_type = filetype($filepath);//get file type.
    $file_size = filesize($filepath);//get file size.
    echo "$latest_filename<br />Type: $file_type<br />Size: $file_size<hr />";
    }//end while going over files AND DIRECTORIES in uploads dir.

Running the code above will get the following results:

files-with-dirs

How to show Files and only Directories with Names and not dot or dotdot:

Notice the "." and the ".." those are directories in which you may not wish to show that represent the current directory and the parent directory respectively. To get redi of the dot and the dotdot, simply check for them like in the following code example:

<?php
//get the lastest file uploaded in uploads/
$path = "uploads";    
$d = dir($path);
while (false !== ($entry = $d->read())) {
$filepath = "{$path}/{$entry}";
//Check whether the entry is a file etc.:
$latest_filename = $entry;
    if($latest_filename != "." && $latest_filename != "..") {
    $latest_filename = $entry;
    $file_type = filetype($filepath);//get file type.
    $file_size = filesize($filepath);//get file size.
    echo "$latest_filename<br />Type: $file_type<br />Size: $file_size<hr />";
    }//end if is file etc.
}//end while going over files in excel_uploads dir.

?>

The above code returns:

without_dots

 

How to Show Only Certain File Types:

In the next code snippet, I show you how to only show .html files from a specific directory. Here is that PHP code:

//path to directory to scan
$directory = "uploads/";
 
//get all files files with a .html extension.
$files = glob($directory . "*.html");
 
//print each file name
foreach($files as $filename)
{
echo $filename;
echo "<br>";
}

Using JavaScript with WordPress

Tips on Using JavaScript in WordPress

The use of JavaScript in WordPress is a bit of a grey area for some. More advanced users of course know that JavaScript can and is normally used in themes, child themes and template files. We will touch on that in this tutorial and also cover the more uncertain techniques of using JavaScript in posts and pages. Some say it can't be done. Some people say to use a plug-in and others just don't know. I will discover a technique that does work for including some JavaScripts in posts and pages. the technique is meant to be used sparingly, but it is a good solution for people who don't really want to get into making their own templates, themes or child themes just to include some JavaScript in their WordPress blog.

Using a JavaScript Plug-in

HTML JavaScript Adder is one WordPress plugin targeted at people who have a need to include more complex JavaScript's in their WordPress blog. This plugin is for including HTML, JavaScript, Flash and shortcodes within the sidebar of your blog, so may not be perfect if you need it for the main content area. Some practical uses of the HTML JavaScript Adder plug-in include:

 

  • Advertisements from such companies as Add Bright, Adsense and Buysellads.

  • Embedding flash  - for example: YouTube videos, Video players and games.

  • Installing shortcodes.

  • Share Icons/widgets such as facebook, linkedin, twitter, etc.

 

You can try pretty much any Javascript, Flash or HTML snippet with the plugin and most should work in your sidebar. Of course I haven't tested it with every type, so feel free to experiment and let us know. you can get the HTML JavaScript Adder plug-in free of charge from http://wordpress.org/extend/plugins/html-javascript-adder/.

 

The Inline JavaScript plugin is the name of another plugin specially developed for using JavaScript in WordPress. The Inline JavaScript plug-in has one major advantage over the HTML JavaScript Adder from above. It allows you to place JavaScript directly in both posts and pages via the WYSIWYG editor. You are not restricted to sidebars as with the previous example. Some of the things the Inline JavaScript plug-in could be used for are:

  • Including almost any dynamic JavaScript code in the midst of a post or page.

  • Making use of built-in JavaScript functions, variables and attributes without hard coding into a template or theme.

  • Printing dynamic content to the screen such as dates, times, user names, etc.

Just about any inline JavaScript code you can come up with is likely to work with this plugin, but it's not meant for really long scripts and some scripts designed to be in the head section of an HTML page.

 

This is an easy to use plug-in with common install instructions and very easy operating instructions. Basically all you do is install the plug-in and then insert your JavaScript between inline tags as in the following example:

 

[inline]

<script type="text/javascript">

document.write("hello world!");

</script>

[/inline]

Do you want to try it for yourself? Simply go to http://www.ooso.net/inline-js and download it. It doesn't get much easier than that and using the tags like above.

Inserting JavaScript Without a Plugin

Now as controversial as including JavaScript in a post or page without using a plug-in is, it actually can be done in many cases. Some code will not work because the WordPress WYSIWYG editor will tear it to shreds, but if it's done right and within reason, it is very possible. One trick I have learned over the years while working with WordPress is that if you don't go back and forth from the WYSIWYG view to the HTML view, it often won't mess up your code, but that is not always practical and it usually means you have to use only the HTML view and if you even switch to the WYSIWYG view, it destroys your JavaScript code. You can also go to your WordPress dashboard and turn off the rich text editor by going to Users then Personal Options. That's just a tip in case you are desperate enough to try code that really isn't supposed to work in WordPress.

Back to using JavaScript in posts without a plug-in, it even says in the WordPress Codex that it can be done, so lets discuss how. The codex does caution you to use this method sparingly however, so if you have more than a few lines, it's not recommended to use this method. If you just have to print a line to the page from a variable or something similarly simple, then this method should work fine in most cases. Here are the steps you want to take to include javascript in a post or page:

First wrap everything in functions. If you have to use more than one or two functions, then you probably want to consider an alternative method for employing the scripts in your posts or pages such as a template file or child theme. More advanced users will more likely chose those alternative methods most of the time anyway.

Second, place your one or two short JavaScript functions into an external JavaScript file.

Upload your script with your functions in it to a scripts directory in your main WordPress directory. That will be the same directory that holds the wp-content and wp-admin folders among other stuff. If you don't have a scripts directory, create one there.

Insert the code to include the JavaScript file in the spot where you want to call the JavaScript from within your post or page like this:

<script type="text/javascript" src="/scripts/updatepage.js"></script>.

Finally insert the function call on the next line in your post or page. It should look something like this:

 

<script type="text/javascript">

<!--

yourFunction();

//--></script>

Now that's pretty simple, but beware, it doesn't always work. The simpler the code, the better chance you have, but if you want to avoid problems and you are a little more on the advanced side of coding, just use a child theme, thats what I would normally do. It only takes a few minutes to figure out if you have enough knowledge of PHP, JavaScript and HTML to understand the code. In fact, read my other tutorial right here on WPHUB about child themes and it will guide you through the process rather quickly!

Summary

That's it! I hope this short JavaScript guide for WordPress helps you to understand the ins and outs of using JavaScript. Yes, it's true that WordPress isn't very friendly to the non-coder for using JavaScript snippets in posts, you will have to use some workarounds as I have explained above, but for the determined beginner it shouldn't be impossible and for the advanced user, it should be a breeze. Good luck with your WordPress project and including JavaScript in your next post or page.

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

 

 

Set Timezone for getDate PHP function

When I went to set the timezone for use with the getDate function in PHP today, I couldn't fine documentation for exactly that so I used what I did find to piece together the correct way to set a timezone within a PHP script for the getDate function. Here is how:

Example PHP Code:

<?php

//Set timezone:
date_default_timezone_set('America/New_York');

//format date:
$start = getdate();
$smon = $start['mon'];
$sday = $start['mday'];
$syear = $start['year'];
$shr = $start['hours'];
$smin = $start['minutes'];
$ssec = $start['seconds'];

$formatted_date =  "$smon-$sday-$syear"."_"."$shr-$smin-$ssec";

echo $formatted_date;

?>

The above PHP code will output:

 6-2-2014_11-24-23

For June, 2nd 2014 at 11:24:23am

By the way, the above format, 6-2-2014_11-24-23, I use for file names in applications that save data to a .txt file so I know when the file was saved by the PHP application and also so the file name will always be unique(as  long as it doesn't run faster than one per second in which case you will need to use milliseconds). Of course, you may change the format in the code above to format your date/time however you like.

List of U.S. Timezones to use with date_default_timezone_set function:

Eastern ........... America/New_York
Central ........... America/Chicago
Mountain .......... America/Denver
Mountain no DST ... America/Phoenix
Pacific ........... America/Los_Angeles
Alaska ............ America/Anchorage
Hawaii ............ America/Adak
Hawaii no DST ..... Pacific/Honolulu