Archive for the ‘Web Development’ Category

SimpleMegaDrop v1: SimpleDrop + Mega-Dropdown Menus, with SimpleMegaButtons on the side!

Posted by

I have been a fan of the SimpleDrop dropdown menu from JavaScript Array for a while. Basically, once I found it, it became my standard dropdown menu package. The simplicity is what originally drew me—it has a tiny footprint beyond jQuery. Of course, the name SimpleDrop was well-chosen. It has no frills, but it works on all major browsers, including Internet Explorer 6. IE6 is almost extinct, but I have a client that doesn’t have the money to update their infrastructure, and are therefore limited to IE6.

I have made some improvements to what I now call SimpleMegaDrop, and it now offers these features:

  • Standard dropdown menus (single-level) in a navbar
  • Mega-dropdown menus integrated with dropdown menus
  • Free-standing Buttons that invoke dropdown or mega-dropdown menus.
  • All of the menu items use hoverIntent to reduce the overall twitchiness.
Proceed to the demo—download links are at the bottom.

My Working Set of jQuery Plugins (and some Other Hacks) by DFF

Posted by
Here’s the second installment in my Working Set series: my standard set of jQuery plugins. I’ll also include a few other bits of code I use occasionally that are not in plugins. I make no claims about these being the best or anything like that, but this is a really useful, robust set of plugins that will be useful in any Web site.

Fall Cow by DFF

jQuery

www.jQuery.com

The source of jQuery.

jQueryUI

www.jQueryUI.com

The source of jQuery’s user interface modules.

AjaxContactForm

http://midmodesign.com/news/coding/jquery-ajax-contact-form-with-honeypot/

A straightforward Ajax Contact Form that can be dropped into a sidebar anywhere. You can see this in action at www.kelleyhousemuseum.org.

Cycle Plugin

http://malsup.com/jquery/cycle/

I use this all the time. It’s a very easy way to cycle images or HTML content. There’s even a light version that eschews the flashy kinds of transitions.

DataTables

DataTables.net

This is an amazingly full-featured table plugin. Filtering, striping, searching, and more.

HighSlide

Highslide.com

HighSlide is a superb Javascript library for displaying images and slideshows. This well-supported module has a minimal charge for commercial usage, but it’s well worth it. Tremendous flexibility and stability! It’s been in continuous development for many years, and it really shows in the feature set. They have lots of excellent examples of the library in use.

hoverIntent

jquery.hoverIntent.html

This wonderful little plugin helps smooth out user interactions. Instead of immediately invoking the onmouseover handler on links, this waits for a settable threshold before firing the onmouseover event. If you slide the mouse over a row of menu items, this will suppress all the random firings along the way to wherever you were moving the mouse. It can really make a big difference in reducing the jerkiness of the interface.

jkMegamenu

www.javascriptkit.com/script/script2/jkmegamenu.shtml

This little module from JavascriptKit is a straightforward implementation of a mega-dropdown menu. You can see this code in action on MendocinoFun.com.

SimpleDrop

javascript-array.com/scripts/jquery_simple_drop_down_menu/

Simple jQuery-assisted dropdown menu code. It only does a single level of dropdown, which is plenty— that’s why mega-dropdowns were invented! This code is simple to use and to style with CSS, and it’s robust because it’s so simple. And it works reliably on IE6, too.

Equal Column Heights

(hack)

This is a little hack I use a lot, and it ensures that selected columns are the same height. One of the great advantages of absolute positioning is that you can place sidebar material after more important content in the file for search engine spiders. The disadvantage is that absolute positioning removes the object from the flow, and the sidebar can therefore overlap the footer below if the sidebar is taller than the main content on the page. Note that this can equalize heights among multiple columns, not just 2. Place this code in the bottom of your HTML, just inside the /html tag.


<script type=”text/javascript”> // this sets all columns to the tallest height of the selected elements…. var max = 0; $(“#content, #leftnav, #sidebar”).each(function() { max = Math.max(max, $(this).height()); }).height(max); </script>

This code will equalize the heights of columns with IDs “#content”, “#leftnav”, and “#sidebar”.

There’s my working set. There are other modules I use occasionally, so I’ll get to those in a subsequent post.

My Working Set of WordPress Plugins

Posted by
One of the real strengths of WordPress is the incredible ecosystem of plugins that extends the platform in all directions. You see the articles daily—yet another review of plugins of some type, oftentimes overlapping or suspiciously similar. I suspect I’m like everybody else, since I go and check them out. I’ve gotten pretty efficient at scanning, but it still takes time. My experience with WordPress helps plow through the lists pretty quickly, at least. And that’s what I value most in survey articles: the power of editorial opinion. Don’t list them all—tell me why you use what you do! Here’s my first installment in my Working Set series: my standard set of WordPress plugins. Future articles will cover special-purpose WP plugins; standard jQuery plugins; special-purpose jQuery; jQuery hacks I use; Firefox plugins for Web development. I make no claims about these being the best or anything like that, but this is a really useful, robust set of plugins that will be useful in any WordPress installation.

Akismet

http://codex.wordpress.org/Plugins/Akismet

Akismet comes standard with WordPress, and it’s absolutely necessary. A high-traffic blog will generate a vast amount of spam, and this drops it to a trickle. All WordPress installations should use this!

All in One SEO Pack

http://wordpress.org/extend/plugins/all-in-one-seo-pack/

This excellent plugin handles the primary tasks related to optimization of your pages for the search engines. Titles, keywords, etc. Very comprehensive.

Auto Thickbox

http://wordpress.org/extend/plugins/auto-thickbox/

I am personally a fan of Highslide for displaying images and galleries, but this is very low overhead: Thickbox is already built into WordPress, and this enables support transparently when you insert images into posts and pages. Hard to argue with the ease!

CMS Tree Page View

http://wordpress.org/extend/plugins/cms-tree-page-view/

If you use a lot of pages in your site, then this plugin is really handy. It provides a collapsible outline view of the pages in your site. You can expand and contract any branch of the outline by clicking, and can open the editor for any page at will.

Contact Form 7

http://wordpress.org/extend/plugins/contact-form-7/

Easy to use and versatile plugin for creating contact forms. It’s easy to have as many forms as you want. Plugins exist that enhance CF7 to save the results in the database instead of emailing the results. Very elegant because of the ease of use.

Google Analyticator

http://wordpress.org/extend/plugins/google-analyticator/

Simple to use: plug in your Analytics ID, and you’re ready to go. You can tell it where to place the code (head or foot), or just use the defaults.

Google XML Sitemaps

http://wordpress.org/extend/plugins/google-sitemap-generator/

Generates an XML sitemap of your site every time you make a change, and publishes the change to the major search engines. Lots to tweak, but it works pretty much right out of the box.

Post Snippets

http://wordpress.org/extend/plugins/post-snippets/

I’m relatively new to this plugin, but it opens up some great possibilities. Basically, you define named fields along with the HTML code for using them. When composing a post or page, you can ask to insert any of your predefined snippets. After choosing one, it will prompt you for the named fields, and then insert the modified HTML text into your post. This table of plugins was created using a pre-defined box layout, with Post Snippets to prompt for specific fields. It seems like a nice way to reduce formatting errors when typing new stuff into a page, especially for non-technical people using the WordPress backend. The WYSIWYG editor gets confused occasionally, and non-techies occasionally whip the underlying HTML into a frenzy—this may provide an easy way to maintain the formatting.

TinyMCE Advanced

http://wordpress.org/extend/plugins/tinymce-advanced/

Extends the TinyMCE editor in a lot of ways, making the thing usable. The best enhancement is a dropdown menu for classes defined in your theme, allowing you to style spans of text.

WP-Ads

http://thesandbox.wordpress.com/wpads/

A simple plugin for putting ads in your site. The neat thing is that it drops custom code into your pages wherever you want, whether containing ads or other code. You can set up multiple ads to rotate in the same place, of course. It also tracks impressions (but not clicks). This basically gives you a shortcode that can drop an arbitrary unit of code into the given location.

WP-DBManager

http://wordpress.org/extend/plugins/wp-dbmanager/

Absolutely necessary to have this. It lets you schedule backups for archiving or emailing, schedules optimizing the MySQL database, and lets you run limited SQL queries.

WP Simple Paypal Donation

http://www.tipsandtricks-hq.com/wordpress-paypal-donation-plugin-942

I’ve used this simple interface to making donations to an organization using PayPal. You can see this in action at www.kelleyhousemuseum.org.

WP Simple Paypal Shopping Cart

http://wordpress.org/extend/plugins/wordpress-simple-paypal-shopping-cart/

I’ve used this simple interface to the PayPal shopping cart in several places. You can see this in action at www.kelleyhousemuseum.org.

So there’s my Working Set of WordPress Plugins. I have some others I use occasionally, but this is the set that I grab pretty much every time I create a new WordPress site.
Back to TOP Page UP Page DOWN