Things From the Net » Web Development

8-Tile Puzzle Game

Jonathan Volks — Sat, 14 Jan 2012 07:29:47 +0000

I just created a 8-Tile Puzzle game in jQuery and Javascript. Check out the link below.

http://www.thingsfromthenet.com/games/tile/

Snake – The Classic Arcade Game in jQuery

Jonathan Volks — Fri, 06 Jan 2012 23:08:28 +0000

I just finished creating the classic arcade game Snake in HTML5, CSS3, jQuery and Javascript. Check out the link below.

http://www.thingsfromthenet.com/games/snake/

WordPress: Featured Image

Jonathan Volks — Fri, 16 Dec 2011 05:55:57 +0000

Many of the designs I develop into WordPress Themes require that each page have a unique image. Often the image is separate from the content so I need to use Featured Image. Once this is added, a new editing block will be added to both your “pages” and your “posts”.

To get this in your theme, open your functions.php file and add the following PHP script.

if ( function_exists( ‘add_theme_support’ ) ) {
add_theme_support( ‘post-thumbnails’ );
}

Once added both pages and post areas will have a new editing block called Featured Image. (If you do not see it then press the “Screen Options” and select Featured Image checkbox to display it).

To use it click on the “Set Featured Image” link and upload your image. Once uploaded, be sure to click “Use as featured image” within the image uploader and the image will be added Featured Image block.

So now that you have a feature image with your post or page, you’ll need to output it on your theme. Where you are looking to add your image, place the following PHP code.

if (has_post_thumbnail( $post->ID )) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘single-post-thumbnail’ );
}

This will give the variable $image (an array) with the location of the image. So then you will just need to add your html code for image.

” border=”0″ />

Now you will be able to add a featured image to your website. Enjoy.

Skype Toolbar within Website

Jonathan Volks — Fri, 09 Sep 2011 03:37:02 +0000

I ran into an issue today where Skype was overwriting the telephone number on a site and it caused the layout to drastically change. Not happy about this I did a little research and found that as a website developer, you can tell Skype not to change the phone number on a site. To do this you need to add this within your tag.

COMPATIBLE” />

WordPress Navigation Menus

Jonathan Volks — Fri, 19 Aug 2011 02:28:58 +0000

While working on a large project today at work, I came across something that I have not done before within WordPress, create a navigation menu where the client (with no programming experience) would be able to easily add, update or delete navigation links. Previously I have always just hand coded a navigation menu within the header.php file and if something needed to be changed then I would just change it in the code. But now the client will be adding their own pages and needed this ability.

Spending a half hour or so on WordPress Codex site, I figured out the very easy to implement navigation menu system. Below is a very quick, very basic how to, if you have any questions leave them in the comment field and I’ll see what I can do to answer them.

Step 1) Register the menus with the theme. In your functions.php file add:
add_action('init','register_my_menus');
This will tell your WordPress theme it should be using Menus and will add “Menus” link under “Appearance”.

Step 2) Register menu(s) with the theme. Also in functions.php file add:
function register_my_menus() { register_nav_menus( array( 'header-navigation' => __( 'Categories Menu' ), 'pages-menu' => __( 'Pages Menu' ) ) ); }
This is going to add 2 menu options to your theme locations, Categories Menu and Pages Menu.

Step 3) Add menu output to your theme code.
'header-navigation' ) ); ?>
This goes to your header.php, footer.php, etc. By default it will output in an unordered list.

Step 4) Create your menus and assign them to your theme locations. Creating a menu if simple, just go to the menu link within the admin and follow the forms. There is many options to add navigation links. Also assign the menu you created to the correct theme location.

That is it. There is a lot of options that can be done with menus, for a full list of them visit the WordPress Codex.

Adobe Edge Preview

Jonathan Volks — Thu, 11 Aug 2011 03:22:01 +0000

You may have heard of Adobe Dreamweaver and Flash but Adobe is coming out with a new product called Adobe Edge. The easiest way for me to explain it is that its very comparable to Flash except the output is HTML5/Javascript. This is awesome news for me as a web developer as it gives me a visual tool to create a section of a site and if I need to go in and modify the code a little bit, I’ll be able to understand it.

Recently I attended The Expressive Web HTML5 Tour put on by Adobe in New York City. They showed off a preview of Adobe Edge and how simple it was to make some animations. Some examples of what they came up with are located here. Now Edge is still only in preview mode and won’t be released until 2012. You can download the trial of Edge here from Adobe Labs. Currently it has limited functionality as Adobe wanted to release it to get it in developers hands to start playing with. From the reaction I had plus everyone I went with, we are all extremely excited about it and will bugging our boss to purchase a license as soon as it comes out.

Its free right now to test with, just don’t get discouraged with the limited functionality, I am sure that Adobe will have more releases in the future with additional functionality.

Creating a Mobile Website

Jonathan Volks — Sun, 12 Dec 2010 08:35:39 +0000

A few months ago I was tasked with building a mobile website for a client at work. Even though I have been building websites for many years now, I haven’t had the opportunity to build a mobile website. Now the site I was building wasn’t a full replica of the main website but just a small portion that only had a search function. So I didn’t need to mess around with different style sheets.

After talking with co-workers and doing some research online, I actually found out that it is much simpler than I had thought. Now the biggest thing is to create a site that works in all major phones, iPhone, Android and Blackberry. All three major phones have different widths and how do you accommodate when you turn the phone sideways. The first part to handling this is a simple meta code within the tag.

Adding this to your mobile website will allow for your site to auto adjust to the correct size. Without this code, you will have to use the zoom button in order to look at the site. With the code it will appear to look normal.

Now that is just the first step, after that comes the hard part. Playing with your CSS to make it look nice. I’m not going to go into a lot of detail on it but some things that you will need to keep in mind is that a lot of your widths will need to be 100%. If you specify a certain width, especially the main layout then it will look different on different phones. Good luck and have fun.

Wilderness Down Town

Jonathan Volks — Thu, 16 Sep 2010 21:50:15 +0000

As a web programmer, I’ve been excited for HTML 5 since I first heard about it. Although it is still a ways off before the official launch, Google Chrome has began implementing some features. I stumbled across a new HTML 5 website which mixes in Google Maps and video. Its well worth the check out.

Note: You will need to download Google Chrome in order to view this. If you haven’t already downloaded then what are you waiting for.

http://www.thewildernessdowntown.com/

Keeping Session Alive with jQuery

Jonathan Volks — Fri, 12 Feb 2010 05:16:22 +0000

A while ago I wrote a Coldfusion application that essentially was just a multi-page form. A scenario popped up where users might sit on a page for a long time to answer questions. Specifically more than 20 minutes. Unfortunately, I was unable to change the session timeout within the Application.cfc file due to other conflicts it may cause.

I was stumped on what to do until a colleague just happened to stumble across a blog posting by Brandon Purcell. To resolve my dilemma, jQuery is going to be used to keep the session open as long as the user keeps the page open.

The first step is to create an empty Coldfusion page. Why empty? Just to be sure nothing on the page causes it to hang up. Next, we setup jQuery to call this page every X amount of seconds (just make sure its under your session timeout). The only thing you will need is jQuery. Note that some people like to refresh variable into their scripting language variable but I left it out of this as I wanted to make it friendly to any programming language.