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

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.

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.

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.

This week I launched a shorter URL tool to reduce the length of your long, permalink URL. It will make a short url like http://rant.cc/JPh

Rant.cc is a tool for creating shorter URLs for promoting your ranting, or charged content using your favorite micro blogging platform like Twitter, Plurk, Identi.ca, Tumblr, Jaiku, Pownce, or whatever flavor you enjoy. When a Rant.cc URL is click the visit is tracked and ranked by most visits, checkout the popular links. And, stay tuned into “charged” conversations on Rant.cc

 

 Winning the #1 Search Engine Result for Your Key Phrase [0:07:30m]: Play Now | Play in Popup | Download

Internet Marketing Report and Social Media Highlights Newsletter – July 2008

This newsletter will mail out the first week of each month, please visit the link below to opt-in http://lists.pixelhandler.com

‘Bill’s Internet Marketing Report’ - Winning the #1 Search Engine Result for Your Key Phrase

-  Strategies and topics relating to the happenings I experience in the race of marketing, publishing and selling on the web.

Having the top result on Google for your main key phrase just feels great! Seriously, in this time of uncertainty, being number one even for a short time is pretty cool. It is also nice when a competitor enters the market and previously held the #1 search result which you now hold.

Search engine optimization : the search query is : noninvasive neuromodulation

• We’re number one! Results 1 – 10 of about 92,500 for noninvasive neuromodulation.
• Mid month the decision is made to update the web site with new terminology
• Take a vacation and violá the search crawler does it’s magic and the result is favorable
• the competitor who previously ranked #1 for the search query was bumped down but still on page one of Google

Recent changes in Google’s search engine results pages (SERPs) for google account holders:

• While logged in to google the SERPs vary based on the same search query
• Fresh/new content ranks higher then seems to drop as newer posts assume the search query’s freshness
• Holding the #1 ranking in the SERP will required continued link building, hence this post!

Sites referenced:

• google.com
• vqorthocare.com

‘Highlights in Social Media’ - Online Networks for Web Designers and Developers

- The Internet is bringing people together and making connections for personal and professional development. Being involved socially online is a way to build new relationships with like-minded individuals.

Last month I created a Ning network, at refreshoc.ning.com, and as a results was invited to join dezumo.com ; there I joined the conversations on web design and posted a forum topic "What are your favorite sites for inspiration on the topic of Web design?" Dezumo has about 293 members and has been around for about a year while the RefreshOC started a month ago and only has about 18 members. Dezumo is has a larger audience while RefreshOC is targeting a local metro area. Both were kicked off right here in Orange County. I enjoy the conversations on dezumo and am hoping the RefreshOC group will become more active as social networks become more of a source for making connections locally.

On the subject of inspiration for web design I did receive a few responses from the group, I visited the links and found some fresh sites to add to my del.icio.us bookmarks on the topic of design . While a couple people were eager to share links for inspiration sake one designer posted a note to creating new design without being tempted to follow the pack; along with this response were no links but a tip on seeking inspiration from the world around you. I am very fond of this concept of being inspired from life itself, but also find it very valuable to examine successful design concepts. Design techniques that work well should be mimicked, especially for the sake of user experience and usability.

Sites referenced:

• refreshoc.com
• dezumo.com
• del.icio.us

Found on the PodSafeMusicNetwork:
Listen the track titled, The Pain Of Numbers by Get Three Coffins Ready – at the end of the broadcast!

 

 Reasons for Business Blogging and Kicking Off a Local Socal Network [10:36m]: Play Now | Play in Popup | Download

Internet Marketing Report and Social Media Highlights Newsletter – June 2008

This newsletter will mail out the first week of each month, please visit the link below to opt-in http://lists.pixelhandler.com

‘Bill’s Internet Marketing Report’ - Another good reason for businesses to blog

-  Strategies and topics relating to the happenings I experience in the race of marketing, publishing and selling on the web.

I’m currently employed by a medical equipment manufacturer and distributor (I freelance too) and last month some very interesting news was broadcast on news radio and the internet about the LA Laker’s own Kobe Bryant and his back injury.

From latimes.com — May 13, 2008

"I tried to play and make drives to the basket where I could kind of withstand the pain without the back completely spasming and then put the next game really in jeopardy," Bryant said.

On Monday he addressed reporters while standing, as he did during Sunday’s postgame news conference. Bryant said he would receive round-the-clock treatment.

His regimen includes ice, heat, massage and stretching. Bryant also held his electrical stimulation device by his side, saying he would basically sleep with it the next couple days.

The reason why this news was inspiring for my employer is that the company’s main product offering does just what Kobe’s medical device does and more. This news became a great way for the company to share with clients about just how good their technology really is; also sharing the story about Kobe saying “he would basically sleep with it the next couple days.” In following up on the report, Kobe did not miss a game during this series and continued to score very well, while the Lakers moved on to the next playoff series.

The reason why this news was so valuable to blog about is that it allowed the company’s news blog to add valuable content supporting the site’s search engine optimizations (SEO) objectives. The general public may use different variations of the words that a business uses to describe its offerings. The blog format allows for a very quick response to optimizing the companies Web site with the terms used by the general public and reporters. The best benefit is that the reported did report on Kobe talking about a medical condition that my employee has a solution for, back spasms!

Once the blog was posted, the same day as multiple news agencies reported on the injury I sent off an email to a targeted group of clients that would be very impressed with the technology and hearing that a professional basketball player and NBA MVP says so. That perspective was a lot better than I could say, even though I used the technology after a broken leg and shoulder and loved how well the medical device blocked my pain.

The return on investment for this blog and email blast was that conversation were opened up with key clients who needed to learn more about the technology and how it fit in within the sports profession.

Sites referenced:

• http://www.latimes.com/sports/
• http://www.vqorthocare.com/blog/

‘Highlights in Social Media’ - Starting up an online social network with NING

- The Internet is bringing people together and making connections for personal and professional development. Being involved socially online is a way to build new relationships with like-minded individuals.

Recently I became interested in social media and networking with other like minded Internet professionals. My favorite online social networks are linkedin.com and twitter.com, I use facebook.com and a few others less often. When I read about ning.com in FastCompany magazine and also heard about ning.com again during a local meetup in OC. This got my created juices flowing and since I enjoy networking with other professionals, and also have spent much of my career flying solo (as an in-house person or working from home), I was inspired to kick off a new network, refreshoc.com in alignment with the ‘Refreshing Cities’ concept… Refresh is a community of designers and developers working to refresh the creative, technical, and professional culture of New Media endeavors in their areas. Promoting design,technology, usability, and standards.

I am interested to find out how many other Orange County Internet professionals would be interested in networking and building a local community for sharing experiences on creating the Web that we surf on. At the end of 2007 I attended a PodCamp in Ontario (SoCal); there I was very interested in how people gather around a common interest or passion. I was able to learn from others who are doing what I wanted to learn, just by attending and participating in the unconference style of gathering.

One concept that I would like to discuss on Refresh OC is the possibility of growing a community of OC Internet professionals who would like to attend a facilitated, participant-driven gathering centered around building the Internet; where professionals share, learn and grow in an open environment. Perhaps this will happen once discussions begin on the topic of planning events and organizing discussions, demos and interaction from participants right Here in OC. Perhaps each event could have a 50/50 raffle or a more creative way of raising funds to benefit a local cause.

Sites referenced:

• http://refreshingcities.com/
• http://refreshoc.com
• http://www.linkedin.com/in/billheaton
• http://twitter.com/pixelhandler
• http://www.facebook.com/ (you may need a facebook account)

Found on the PodSafeMusicNetwork:
Listen the track titled, Surfin the Blast Wave by Nony Zero – at the end of the broadcast!

Why post with the category or ‘tag’, flipside? I chose this tag to be a collection for everything else, comments or trackbacks on other blogs, my twitter feed, and so on. In the same fashion as an indy band publishing a new hit on vinyl and been forced to put a track on the flipside, I dedicate this tag for all my other musings that inevitable keep me focused on my main topics for my podcast. So, enjoy the abstract side of micro blogging here on my blog’s flipside.