Hopefully, I am posting in the correct forum. Sorry if not. I have spent hours and hours looking on forums and reading other tutorials to no avail. I have come across Modernizer and YepNope and think these two scripts will get me where I need to be but I need a bit of help. Here is what I want to do...

I have a restaurant site that I wish to provide easy directions to for mobile users. I also want to display the phone number for desktop PC's but display a button version that will provide easy instant dialing for users with device capability. My objective is to show the correct directions and reservations output depending on device capability. I have media queries in the style sheet that are part of a WordPress template. (The website may be found at www.forkintheroadrestaurant.com.)

I have two buttons for "Get Directions." Let's call them GET DIRECTIONS 1 AND GET DIRECTIONS 2.

I have two buttons for "Call for Reservations." Let's call these GET RESERVE 1 AND GET RESERVE 2.


I am not sure how to write up this scenario. Here it is.

For Get Directions," I want to first determine whether the device is geolocation aware.

If Yep - should launch a new page with a map with my restaurant location marker in place and should pre-fill the get directions field with the user location. The user should be able to edit this of course.

If Nope - should direct the user to the contact page where I will offer up the usual map with marker and the get directions link or fields.

For "Call for Reservations," I want to first determine whether the device can dial a phone.

If yep, I want to allow the device to be able to touch and dial.
If nope, I want the button to simply display the phone number.

Here is my psuedo code...

If device is geo aware
GET DIRECTIONS 1
Can/should the map be launched in a modal window or is this a bad idea on mobile? If we have to go to another page, how is the location passed?

Else
GET DIRECTIONS 2
Go to (a href="../contact/")

If device is phone capable
GET RESERVE 1
Go to dialer or dial the number directly?

Else
GET RESERVE 2
Go to (a href="../contact/")

Can anyone help me sort this out? I am new to Modernizr and am quite rusty with my coding skills. I can see that it should work but am not sure how to work it into my html. I have the Modernizr and yepnope scripts in place in my header and all html classes are present. Just need to get the correct tests working.

Is it best to modify the HTML or the PHP functions file?

Thank you soooo much!