kevinleary.net » PHP http://www.kevinleary.net Portfolio & blog of Kevin Leary, a Boston based WordPress CMS & jQuery designer & developer. Tue, 24 Aug 2010 17:54:40 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Check out Fresh Tilled Soil: Web Resources!http://www.kevinleary.net/check-out-fresh-tilled-soil-web-resources/ http://www.kevinleary.net/check-out-fresh-tilled-soil-web-resources/#comments Wed, 04 Feb 2009 02:42:30 +0000 kevin http://www.kevinleary.net/blog/check-out-fresh-tilled-soil-web-resources/ Some people may have noticed that the frequency of my articles has died down a bit over the past month or so. I’ve been adding posts at a new location now for work.

Many of the topics are the same, if your interested in checking it out head on over to Fresh Tilled Soil: Web Resources and take a look.

I’ll continue to post on kevinleary.net as well, but not as often. I’d say that I plan to average 2–3 new posts per month.

Thanks again for reading!

]]> http://www.kevinleary.net/check-out-fresh-tilled-soil-web-resources/feed/ 0 Highlighting The Current Page With CSS & jQueryhttp://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/ http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/#comments Wed, 10 Sep 2008 21:47:57 +0000 kevin http://www.kevinleary.net/blog/?p=92 Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.

XHTML

<ul id="navigation">
	<li><a href="about-us.html">about us</a></li>
	<li><a href="our-products.html">our products</a></li>
	<li><a href="blog.html">blog</a></li>
	<li><a class="active" href="login.html">login</a></li>
	<li><a class="active" href="contact.html">contact</a></li>
</ul>

JavaScript / jQuery

<script type="text/javascript">
$(function(){
	$page = jQuery.url.attr("file");
	if(!$page) {
		$page = 'index.html';
	}
	$('#navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});
});
</script>

Usage

You’ll need a copy of jQuery, along with a copy of the jQuery URL Parser plugin.

After you include jQuery, and the URL Parser add the JavaScript snippet above to the <head> section of your document.

How it works

What we do here is simple, we grab the current name of the page, for example about.html. Then we check out ul.navigation <ul> to see if any of the anchors contain an href attribute with that value. If any of the links are a match we flag the parent of the anchor with a CSS class. In this case I’ve chosen current to keep things self explanatory.

Notes

In this case I chose to add the “current” class to the <li> rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.

Resources

]]> http://www.kevinleary.net/highlighting-the-current-page-with-php-jquery/feed/ 64 True Seperation of Presentation & Content with XMLhttp://www.kevinleary.net/true-seperation-of-presentation-content-with-xml/ http://www.kevinleary.net/true-seperation-of-presentation-content-with-xml/#comments Wed, 27 Aug 2008 02:23:25 +0000 kevin http://www.kevinleary.net/blog/?p=34 Web standards books praise the idea of separating presentation from content. Unfortunately doing so is harder said than done in the professional world. When I begin working on a re-design I usually find myself spending countless hours re-formatting content, so what’s the point? If a client wants specific information laid out as an unordered list (or outline) one day and tabular data the next you’ll find yourself rebuilding the pages structure.

The best solution to this ongoing probably is to utilize XML to describe the content as best as possible. The one problem with this approach is that parsing that XML into usable code is usually a big pain in the ass. With PHP5’s implementation of the SimpleXML object parsing XML is finally as simple as it should be.

This is the best way to handle web content in my opinion. The advantages as I see them are:

  • Store your content in one central location, even it is used in multiple places throughout a site
  • Write your content once using the most semantic markup of all, XML
  • Loop through tags to make styling repeated content a breeze (e.g. Press Releases page)
  • Use your content with different technologies. Create RSS feeds, supply it to other domains or use it with Flash

Using the SimpleXML object

Let’s get our hands dirty and see how to parse an XML file with SimpleXML.

XML

1
2
3
4
5
6
7
8
9
10

<?xml version="1.0" encoding="utf-8" ?>
<press>
	<article>
		<date>August 26</date>
		<year>2008</year>
		<link>pdf/consumer-brochure.pdf</link>
		<title>New press release!</title>
		<description>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</description>
	</article>
</press>

PHP

1
2
3
4
5
6
7
8
9
10

<?php 
$press = simpleXML_load_file("press.xml"); 
foreach($press as $articles) { 
?>
<div class="article">
	<h2><a href="<?= $articles->link ?>"><?= $articles->title ?></a></h2>
	<p><?= $articles->description ?></p>
	<p class="date"><strong>Published</strong> <?= $articles->date ?>, <?= $articles->year ?></p>
</div>
<? } ?>

XHTML (generated by SimpleXML)

1
2
3
4
5

<div class="article">
	<h2><a href="pdf/consumer-brochure.pdf">New press release!</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	<p class="date"><strong>Published</strong> August 26, 2008</p>
</div>

Download source

Download the SimpleXML Source Code for the example above.

Recommended Reading

I was introduced to the SimpleXML object while browsing PHP 5 Recipes: A Problem-Solution Approach True Seperation of Presentation & Content with XML. I would recommend this book to professional developers looking for a great desk reference resource. As best put by the author, “This book is a source of instant solutions, including countless pieces of useful code that you can just copy and paste into your own applications, giving you answers fast and saving you hours of coding time.” That said, it’s big, long, and definitely not something you sit down and actually read. It provides a well documented reference of PHP 5 that includes some of the newer additions such as SimpleXML.

Resources

]]> http://www.kevinleary.net/true-seperation-of-presentation-content-with-xml/feed/ 2