Pixel Handler

This is my first post of social code using the github repository at :
http://github.com/pixelhandler/jQuery-MenuTree-Plugin/

A JavaScript plugin based on jQuery library that builds an expandable/collapsable menu tree from a list element

• Requires JavaScript library: jQuery

• Developed using jQuery version 1.4 … Plugin page

• Demo of the plugin behavior showing both lists and definition list… Demo

• Status : New plugin, give it a try!

• Tracer plugin added and featured with demo.

• Blog post for MenuTree plugin on my blog… Blog

How to build a menu tree that is expandable with jQuery

Your html will need to link to the jQuery plugin in the head element

Your html markup needs to use a list like…

Tree Menu - toggle OR slideToggle animation

Top Parent - Tier 1

Child - Tier 2

Pixelhandler - Tier 3
jQuery - Tier 3




Lower Parent - Tier 1

Child - Tier 2

Grandchild - Tier 3 - One
Grandchild - Tier 3 - Two







Definition list - Term 1
Description not targeted,
    uses CSS classes to collapse/expanded view

Term 2
Description 2 with links listed

Pixelhandler
jQuery


Term 3
Description 4
Term 4
Description 4 with unordered list

One
Two

menuTree plugin plugin uses a few CSS classes for visual design…

#myTree .menuTree:before {
	content: "[+] ";
}

#myTree .expanded:before {
	content: "[-] ";
}

#myTree .collapsed {
	display: none;
}

At the end of your html markup, before the closing body element use a script to setup the function…

$(document).ready(function() {

	$('#myTree').menuTree({
    	animation: true,
		handler: 'slideToggle',
		hrefBegins: '#',
		trace: true
	});

});

This plugin has default options which you may override. The animation option may use jQuery toggle or slideToggle methods, or just use the default css option to show/hide the child list(s).

When called with the animation: true option the plugin uses the handler option to select slideToggle or toggle method to add effects to the display of child menu(s). You may set the speed as you please, e.g. speed: ’slow’. Also, you may indicate what the child menu(s) are marked up with, e.g. listElement: ‘ol’ instead of the default listElement: ‘ul’

The default options:

$.fn.menuTree.defaults = {

	// setup animation
	animation: false,
	handler: 'css',
	speed: 'fast',
	// setup hooks in markup
	listElement: 'ul',
	hrefBegins: '#',
	// uses 'tracer' plugin
	trace: false
};

If you have any questions, please feel free to ask them on the jQuery
meetup site, found here:
http://meetups.jquery.com/group/jquerylosangeles

This weekend I celebrated my 10 year anniversary by taking a day trip to San Diego with my bride. Along the coast was a street performer showing his talent of balancing rocks. We happened to stroll by as the sun dipped toward the ocean and I took a quick picture with my iPhone. © 2009, Bill Heaton.

This year I set a goal to learn Adobe Flex 3. I have found the help of other professionals and the OCFlex.org user group. Besides the Flex Video Training, I found that the best source of understanding ActionScript using the MXML library is by reading and coding the examples in the book “First Steps in Flex”. To keep myself accountable to this goal, I agreed to train my cousin in learning Flex programming; is who is on the road to becoming a web developer. It turns out that my cousin’s friend is a top-notch programmer and loves the Flash platform. He challenged us to just start building a simple application, a calculator. So, this is our first iteration of a calculator programmed with Flex 3:

Documenting process becomes promotion of small business website sales…

In the past couple weeks I decided to focus on small businesses by making a goal to create a program that will help their website be findable. Beginning in 2004 I began to sell website design to local companies and still build websites for local medium size businesses in Orange County. I began to document the process of working together with business owners and managers. The first step was creating an offer, Recession SPECIAL: Custom ‘Brochure’ Web Site for $440 . Next, I build out a demonstration site http://demo.overhaulindustries.com for previewing how to use WordPress as a business website publishing tool. These two task formed my product offering of a templated business website ; basically an online brochure. Second, I created a brochure website guide on how to prepare content; my goal was to establish a fast turnaround, with content up front or early the project can avoid being held up for content. To speed up the process and get the business owner engaged I added a form to capture the conent online; adding a few links to push visitors to send my their content. Third, I added a PayPal button for the deposit/payment; this gets me engaged in delivering a site quickly. The fourth step was to document the process of delivering the website project; an effort to help the client get to know how to work with me. Finally, to close out the five step process… I set expectations on what a winning project should result in – creating free leads online; basically generating free listings on search engine results pages.

This process of documenting the experience of designing template solutions for small brochure website projects lead to creating marketing materials to promote sales. This content is a result of conversations I’ve had repeatedly over the years; why not use the product myself? The results was the best layout and design I’ve had on my business website in years, and using the platform I enjoy, WordPress. Being excited about this discovery, I sent out an invitation my email to friends, family and clients; I even had a good response. I expect that I may complete 3-4 brochure websites in the next couple weeks. I look forward to measuring the results. So now, I’m following up with the leads using this 5 step approach:

Documentation to help you get started with your website projects

Below are the links and outline of the process of working together with Overhaul Industries in order to help you design your website to be found…

Step 1: Getting started guide – to prepare your brochure website

Step 2: Partner with an expert – send us your content

Step 3: We start working on your project with a small deposit

Step 4: The process of delivering your website

Step 5: Review the results, your free listing in search engine results pages

One thing I really enjoy about Twitter is the conversations that happen during an event. So, while attending An Event Apart this week, I took most of my notes on my iPhone. My powerbook is 7 years old, and I refused to take my PC to this event. Surprisingly, the iphone worked out great. At times the wireless was faulty; but the iPhone fell back on the edge network. I spent two days of tweeting while marking clever, funny and informative comments as favorites (generated by the crowd, on twitter.com). At the finish of the conference I ended up with 278 noteworthy entries [ twitter hashtag: #aea09 ]. I viewed the favorites on twitter and copied the ordered list (source) into an HTML presentation (S5) template by Eric Meyer. Check out the presentation at aea09.pixelhandler.com. Much of the conversation was centered around the topic of User Experience (UX).

Update (5/10/09) – I added an iPhone CSS stylesheet to the presentation to make it mobile friendly for Apple enthusiasts.

Check out my #aea09 conference notes, I used twitter’s favorite star to group think my note-taking. Then I copied the html and pasted into Eric Meyer’s S5 HTML presentation template.

Also, my pics and the AEA group pics on flickr.

5/4/2009

Jeffrey Zeldman on Redesign, session 1

Be a strategic design partner, or else you will not influence the design …do the research. —@Zeldman

Read more »

I’m working on a new social prayer site at PrayerLife.NET feel free to visit, create an account and share/manage your prayers online.

PrayerLife.NET is social media web service, a tool for users to connect & prayer with others. Features: prayer and list sharing (pubic or private). This site is currently an alpha release, proof of concept. Visit the about page here.

I am looking for people to test the concept, who would like to use the internet to connect and pray for others.

How I did it: First, I searched for tutorials online; then I used scripts from a project I found called pressConnect. I installed a fresh installation of WordPress on my local machine running MAMP. I configured the pressConnect script to work with my MySQL database, then I tested the XML output. Next I had to review ActionScript, learning to work with XML in Flash. I used a couple other scripts and a menu offered at http://tvwonline.net/lab/ – I built a test Flash file, importing an external CSS stylesheet and ActionScript file. Once the test file worked fine with pages, posts and menus for both, I integrated the code into a flash template. Finally, I set up a sandbox for the client to explore the dynamic publishing tool for the Flash-based website.

Need tips? For a sample file with scripts, contact me.

Resources: http://tvwonline.net/lab/

Demo of test file.

Live Site Harvest Landscape Enterprises, Inc.

To most of the world, the day after Thanksgiving is known as Black Friday. However, about 130 or so web standardistas showed their support for Web Standards; wearing blue beanies and updating their online profiles and avatar photos with images of themselves sporting a blue beanie. The Designing with Web Standards facebook group promoted the online event, Blue Beanie Day 2008, and set up a photo gallery on Flickr. So, I purchased a blue beanie from thinkgeek and posted my mug.