Inspiration

These are working examples of widgets and applications that you can include in your site.  They are designed to spur your imagination!

Date Picker Demo

Date fields should always have a datepicker associated with them.  While a datepicker makes it easier to choose a date, it also formats the date to make it easier when processing the form.

Checkbox Styles

The default checkbox style is a little bland – here are three easy styles to add pizzazz to your checkboxes!


 

Button Hover Effects


Althought there are only a few examples right now, I’m collecting hover effects for buttons in this demo. If you see effects you like, let me know so I can deconstruct them and add them to my list!

Notification with Background Blur

Some nifty CSS and Javascript creates a notification box with the background slightly blurred.  You can see the effect in this image (or the demo) with an obnoxious background.  The effect is far more subtle on a more neutral background, of course.

Background Slider

This slider accommodates images that are portrait rather than landscape.  It would be great in the sidebar of a site, or as a pull-quote style block  in a long article with links to similar articles or supporting information.

Adding Functionality to CoDrops’ Responsive Grid Design

Dammit Jim, I’m a coder not a designer.  ~Dr. Bones as a programmer

I’m terrible with design.  My strength is taking other people’s design ideas and writing the code that makes the design work in the real world.  Today’s demo is from Codrops and they call it a “responsive grid design”.  I loved it right away and decided to code some back-end functionality.

The first thing I did was create a JSON file featuring all of the shirts and the sizes and colors available to each (JSON file here).  In a live environment this would be pulled from a database.  This also makes it very easy to manipulate the items – for example arrange by price or filter by available sizes.  I used the standard jQuery .getJSON() call.

If you hover over the size box a list of available sizes appears. I added code to show the selected size in the box once a size is chosen.

While I loved the tool-tip type popup for the colors, users want to be able to select a different color.  Having the shirt image change to match that color is a bonus feature.  Click on the upper-right arrow to see the back of the shirt, this image changes to match the selected color as well.  Finally, the color displaying in the box should always match the color of the shirt, making it easy to grab the color information for the shopping cart.

I coded the change for the “like” heart – now if you click on it the heart will toggle on and off.

The icon on the left was meant by CoDrops for comparison shopping, but I coded it to bring up a lightbox window to show additional information about the item.

Finally I coded a hook for the add to cart icon, collecting the color, size, name and price of the item and displaying it in a popup.  It would be simple to add this to a real shopping cart – for example Pay Pal.

There are a couple more things I intend to add, including the JSON change I noted above:

  • Filtering:  The ability to filter the displayed items by price or size availability.
  • Ability to have different prices and colors for different sizes
  • Integration with CoDrops’ Horizontal Slide Out Menu.  I do a lot of small ecommerce projects and if you had a limited number of items in distinct categories, this would make a cool store solution.

The post Adding Functionality to CoDrops’ Responsive Grid Design appeared first on Sophrosyne Life.

Background Slider

CSS-Tricks had a nice little slider based on  Yahoo! Weather app for iOS where the background and text seem to slide separately.  It was set up for manual use – users need to click on buttons or use the slider to advance, so added some code to auto-scroll, fast scrolling to the beginning when the end is reached and starting all over again.

This would be a great way to highlight new articles on your front page, using the featured image for the post as the background.  It would be easy to implement in WordPress.

The post Background Slider appeared first on Sophrosyne Life.

Custom Block Quote Plugin

I’ve created a WordPress plugin for the styled blockquote featured in this post.  To use:

  • Upload the zip file by logging into your WP admin and clicking on Plugins->Add New
  • Click on Upload
  • After installation is complete click on “Activate”

To use the plugin, put the following code wherever you want the blockquote to display:

The Quotation Body
  • the_image_url.jpg is the complete URL of the image you’ve already uploaded to WP
  • the title is the name of the book or publication.
  • the_source.html is the URL of where the quote came from (can be left blank).
  • The Author is (strangely enough) the author or originator of the quote.
  • The Quotation Body is the actual quote

And this is what you get:

The Quotation Body

The Author

the title

 

 

Download Plugin:  bp_custom_block_quotes

Thanks to CoDrops, from whom the original CSS came.


jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = “www.sophrosynelife.com”;
var entity_decoded_nr_mp_url = jQuery(”).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F02%2Fcustom-block-quote-plugin%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Custom Block Quote Plugin appeared first on Sophrosyne Life.

Adding Lat/Long Picker to Admin

This post is slightly out of order, but here is a screen shot of how I implemented the latitude/longitude in yesterday’s post into my standard admin interface:

detail

The user can manually enter the lat/long, click on the map – which moves the marker to the new point and fills in the lat/long fields, or enter a street address. When “find” is clicked, the map marker changes to the street address location and the lat/long fields are automatically filled in.


jQuery(‘.nrelate_default’).removeClass(‘nrelate_default’);

/* <![CDATA[ */
nRelate.domain = "www.sophrosynelife.com";
var entity_decoded_nr_mp_url = jQuery('‘).html(“http://api.nrelate.com/mpw_wp/0.51.4/?tag=nrelate_popular&domain=www.sophrosynelife.com&url=http%3A%2F%2Fwww.sophrosynelife.com%2F2013%2F01%2Fadding-latlong-picker-to-admin%2F&nr_div_number=2&maxageposts=5256000&increment=0”).text();
nRelate.getNrelatePosts(entity_decoded_nr_mp_url);
/* ]]> */

The post Adding Lat/Long Picker to Admin appeared first on Sophrosyne Life.

Getting Map Coordinates

I do a lot of map applications where an admin can enter information about a location, business or event and have it appear on a map. In the past I’ve simply coded in a module where the admin enters the address of the location and the latitude/longitude are added to the database for that location. In some cases, however, there isn’t an address. For example, the White Pass Byway displays scenic view information along the highway.

In my newest iteration of the admin interface I’ve added a module that allows user to set the latitude/longitude three ways: by street address, by manually entering the latitude and longitude or by clicking on the location on a map.

All of Google Maps usual functions are available such as zooming in or out, move the map around, and using the satellite view.

While not particularly difficult to implement, it is nice to have all these components in one module that can be added to an application easily.

The post appeared first on Sophrosyne Life.