Archive for the ‘php’ Category

ID that Body - Clean CSS Navigation

Monday, December 8th, 2008

Just like cop dramas, the first step to a good navigation is the same as it is in solving a crime. You have to ID the body.

If you assign an ID on the body tag then you have a simple way to target items on any particular page. If you want the paragraph text on your contact page to be 16px tall then you have a simple way of targeting that text, assuming you ID the body on that page with contact:

#contact p {font-size: 16px;}

However, you get to understand the true power of IDing the body tag with using it for navigation. Assign each link in your navigation a class, then create a style for when the body’s ID and the link’s class match.

Your Navigation:

<body id="home"> <ul id=”nav”> <li><a class=”home” href=”#”>home</a></li> <li><a class=”about” href=”#”>about</a></li> <li><a class=”contact” href=”#”>contact</a></li> </ul>

Your CSS:

ul#nav { background: #000; list-style: none; font-family: Tahoma, Verdana, Arial, Sans-Serif; } ul#nav li { float: left; margin: 0 15px; } ul#nav li a, ul#nav li a:visited { text-decoration: none; color: #fff; } ul#nav li a:hover { color: #666; } /* here is the magic, when the body ID and the link Class are the same, this style is applied. */ #home .home, #about .about, #contact .contact { color: #ccc; }

This is pretty straight forward, but it works really well. The best application is when you use a dynamic language like PHP to include the menu on every page, so you have only one or two files to update in the event something changes with the navigation (the included file and/or the CSS file).

Tags:
Posted in CSS, php | 3 Comments »

Geocoding with jquery, php, and google maps

Thursday, November 13th, 2008

Simple Demo

I haven’t played much with the Google Map API, but I’m in need of using it for a project for a construction/commercial leasing company. So, I started playing around with it this morning and found a couple of excellent tutorials. The attached files are a little rough, but this just playing around. The final product is going to simply have variables passed to it from the database - so that means the user will just see a map with a marker.

The first one from Nettuts.com. The second from a site that I can’t seem to find again. (If you see this, and you recognize your code - let me know)

Anyway, like I said, the code isn’t necessarily the prettiest, but I just started working on it today. I’ll be passing the variables from a database to map property locations, but this takes inputs, for testing while setting it up.

I couldn’t decide on whether to convert the address to latitude and longitude and save them in the database, or just get the lat & long when the details page is opened for a piece of property. I went with the latter, because I heard Google won’t allow more than a couple hundred connections from your API per hour, then they’ll shut you down for the day. When they’re adding a bunch of properties (like during the initial set-up) this could be a problem. Though I guess I could just have them get the lat and long and manually enter it. Anyway, from what I’ve seen, the conversion of address to latitude and longitude is dead on.

Get your own API at Google. I have my API to use the domain name of localhost right now for local testing, I’ll just get one for the actual domain name when the site goes live.

download

Tags: , ,
Posted in javascript, php | No Comments »

Simple Form Handling with PHP

Saturday, October 25th, 2008

I’ve seen some requests lately on how to handle form data. It’s pretty easy, and here is the most basic way of doing it. There isn’t any validation, or styling with CSS - just three separate files. You could actually do this with a little javascript/css and some php and do everything in one file - but like I said, this is the most basic way of doing it.

Your HTML Form

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd”> <html> <head> <title>A simple form</title> </head> <body> <h1>A form</h1> <form action=”mail.php” method=”post”> <label for=”theName”>Name:</label><br> <input type=”text” name=”name” id=”theName”><br> <label for=”theEmail”>Email Address:</label><br> <input type=”text” name=”email” id=”theEmail”><br> <label for=”theMessage”>Message:</label><br> <textarea name=”message” id=”theMessage”></textarea><br> <input type=”submit” value=”send”> </form> </body> </html>

Your php file

<?php //enter the address to send the form to $toAddress = “someone@somewhere.com”; //enter the subject of the email you recieve $subject = “Contact from Web”; //enter the path to the file where the user gets sent to after submitting the form $thankYou = “thanks.php”; $name = $_REQUEST['name']; $email = $_REQUEST['email']; $message = $_REQUEST['message']; $body = “ $name $email $message”; mail($toAddress, $subject, $body, “From: $email”); header(”Location: $thankYou”); ?>

download

Tags: , ,
Posted in forms, php | 1 Comment »