Tag Archives: plugin

jQuery UI Slider Pips: Enhancing jQuery Sliders with Labels and Pips Software & Sites 25 MAR 2015

The jQuery UI user interface library, built on top of the excellent jQuery JavaScript library, includes a pretty neat slider control that allows users to select a numeric value by dragging a handle with either the mouse or keys.

However, it is missing a few important things if you want to start using sliders in a little more user friendly, complex way – what it needs is pips (point dashes to indicate length/distance/value range) as well as labels.

Which is exactly why Simon Goellner (aka slimeydotme, or more accurately, slimey.me) went ahead and created the fantastic jQuery UI Slider Pips plugin to, as he puts it:

A plugin to extend the jQuery UI Slider control. This plugin adds “pips” to the slider for visual aid, as well as “labels” which the developer can customize.

It is full featured, well written, and particularly easy to add to any existing slider declaration. More importantly, it is very configurable, making it a must if you want to implement sliders in a more meaningful way.

Installation is as easy as downloading both the .js and .css files, and then running the code is little more than:

<div class="slider"></div>
$(".slider").slider().slider("pips");

(The default way to use the plugin – as shown above – is to call the pips method on an initialised slider. This will add the markers along the slider, and place the min/max values to the beginning/end of the slider).

Well worth a look in other words.

jquery ui slider pips example

Related Link: http://simeydotme.github.io/jQuery-ui-Slider-Pips/

WordPress: How to Replace an Image in the Media Library Tips, Tricks and Tutorials 01 JUL 2014

Every now and then I mistakenly hit upload on the wrong image whilst crafting a post. Annoyingly, I then have to upload the correct version of the image, which automatically gets assigned a new identifier instead of giving me the option of just simply replacing the file I just mistakenly uploaded.

WordPress doesn’t have a native way of doing this, but that of course then opens the door for the rest of us developers, and so Mans Jonasson stepped up and crafted the nifty Enable Media Replace WordPress plugin.

As the description says, “This plugin allows you to replace a file in your media library by uploading a new file in its place. No more deleting, renaming and re-uploading files!”

It has two replace options, namely:

...

How to Password Protect Your WordPress Site Tips, Tricks and Tutorials 28 MAY 2014

Sometimes it is quite useful to password protect your whole wordpress website. Maybe it contains sensitive information meant only for your team, or perhaps as a designer you don’t want to hand over the site to the client before payment, but you do need to show them how it looks so that you can get paid!

Enter a fantastic plugin by Ben Huson simply entitled Password Protected.

Essentially, once enabled, your entire site gets hidden behind a login page which asks visiting users for a password. Not for individual pages, or certain post types, or a certain section, but the whole site!

It is important to note that this plugin only protects your WordPress content, and as such it does not protect images or uploaded files – so if you enter the exact URL to in image file it will still be accessible. (In other words, this isn’t intended to prevent hot-linking of your files).

Nevertheless, pretty damn useful overall.

Install as per usual via the Admin panel, and activate. You’ll be asked to select a password and well as what types of users should be able to view the content with or without a password. As a bonus, the plugin does give you the option as to whether or not you want to password protect RSS feeds.

Nifty.

password protected wordpress plugin

Related Link: http://wordpress.org/plugins/password-protected/

How to Set a Cookie using jQuery Programming 27 AUG 2013

jquery-logoIf jQuery is your javascript manipulation library of choice, then you would be pretty pleased that developer Klaus Hartl took the time and whipped up his excellent jquery-cookie plugin, thereby making the act of setting or retrieving browser cookies in your jQuery JavaScript a snap!

To set the value of a cookie is pretty simple, just pass along a key and a value, and as expected, you can make it a little more verbose by including a selection of all the standard cookie stuff like expiry date, path, or domain.

In action:

$.cookie("mycookie", "on!");

//Additionally, to set a timeout of a certain number of days (10 here) on the cookie:
$.cookie("mycookie", "on!", { expires : 10 });

Note, if the expires option is omitted, then the cookie becomes a session cookie, and is deleted when the browser exits.

This snippet covers most of the options in setting up a cookie that are available to you:

$.cookie("mycookie", "on!", {
   expires : 10,           //expires in 10 days

   path    : '/',          //The value of the path attribute of the cookie 
                           //(default: path of page that created the cookie).

   domain  : 'jquery.com',  //The value of the domain attribute of the cookie
                           //(default: domain of page that created the cookie).

   secure  : true          //If set to true the secure attribute of the cookie
                           //will be set and the cookie transmission will
                           //require a secure protocol (defaults to false).
});

To read back the value of the cookie:

var cookieValue = $.cookie("mycookie");

//You may wish to specify the path parameter if the cookie was created on a different path to the current one:
var cookieValue = $.cookie("mycookie", { path: '/view' });

To delete a cookie:

$.removeCookie("mycookie");

Right, that should now be enough to get you up and running!

Related Link: https://github.com/carhartl/jquery-cookie

WordPress: Force Contact E-mail before Allowing a File Download CodeUnit 25 SEP 2012

The other day one of the WordPress sites I was asked to help out on (http://www.portsevolution.com) needed a solution whereby they first needed to receive some contact details before allowing a reader to download an associated PDF file.

Digging around the WordPress plugin repository I came across a great solution in the form of a plugin by M&S Consulting, entitled “Email Before Download”, which basically combines the functionality of the excellent WordPress plugin “Contact Form 7” with that of “WordPress Download Monitor” to achieve the required functionality.

Taken from their official description: Email Before Download presents your users with a form where they submit information, like their name and email address, prior to receiving a download. This plugin integrates with the popular Contact Form 7 and WordPress Download Monitor plugins, allowing you to create any form you like and manage/monitor your file downloads. You can also export a list of users that have downloaded files from the plugin’s settings page.

As an option, you can configure Email Before Download to:

...

Highlight Your PHP Code Syntax with the WordPress Plugin, SyntaxHighlighter Evolved! CodeUnit 06 JAN 2012

A website like this one involves the posting of a lot of code snippets and examples in a variety of development languages. Because code often looks a lot like a plain old bunch of textual gibberish, the ability to syntax-highlight the entry immediately makes it recognizable and thus useful to a programmer reading the entry.

WordPress.com has a useful feature built into it where it can automatically syntax-highlight code when placed within special shortcode markers, based on work by Alex Gorbatchev. Plugin author Viper007Bond together with the official Automattic company have taken this a little further, wrapping it up in a WordPress plugin form and releasing it to the public at large as SyntaxHighlighter Evolved!

Featuring support for a wide variety of languages, highlighting your code syntax is as easy as writing

[ php ]code[ /php ]

The plugin takes care of html entities and all that sort of encoding stuff, meaning that you don’t have to manually change your snippet in order for WordPress to properly display it! In addition, there are plenty of options you can employ within the shortcode blocks in order to extend the display functionality, like adding highlighted rows, line numbers, etc.

Powerful (and really useful) stuff! :)

Related Link: http://wordpress.org/extend/plugins/syntaxhighlighter

jQuery DataTables: Simple Row Highlight Example CodeUnit 17 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can quickly and easily implement a visually helpful hover-based row highlight on any of your datatable objects.

First off, you will need to define a highlight rule to be applied to your table in your CSS declarations. In the simplest form, all you really want to do is define a unique background-color to the element wish you wish to highlight.

In CSS, this could look something like this:

.datatablerowhighlight {
	background-color: #ECFFB3 !important;
}

The next step is then to add our new highlight class to the row when the mouse hovers over it and then to remove it again when the mouse moves away. To do this we need to add bindings for the mouseenter and mouseleave jQuery events, where we add and remove the highlight class accordingly.

To do this, we piggyback into the handy fnDrawCallback function that is defined when initializing your datatable and which gets executed each time the datatable gets drawn.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"fnDrawCallback": function(){
      $('table#activitylog td').bind('mouseenter', function () { $(this).parent().children().each(function(){$(this).addClass('datatablerowhighlight');}); });
      $('table#activitylog td').bind('mouseleave', function () { $(this).parent().children().each(function(){$(this).removeClass('datatablerowhighlight');}); });
}
} );

Note how we grab the whole rows contents y first grabbing the parent element of the element we are currently hovering above, and then expanding to all that parent’s children elements – in other word the entire row. A simple addClass and removeClass call handles the actual attaching and detaching of the highlight CSS class.

Nifty, and pretty damn effective to boot! ;)

Related Link: http://datatables.net/

jQuery DataTables: How to Force Specific Column Widths CodeUnit 16 AUG 2010

I’ve mentioned the wonderful jQuery plugin DataTables a number of times before, the awesome little trick that instantly transforms any HTML table fed to it into a fully sortable, paginated, searchable and zebra-striped table, requiring the most minimum of coding to implement.

Today’s tip looks at how you can specify what column widths to use in your DataTables implementation, instead of relying on the default auto column widths assigned by the plugin.

Firstly, you need to turn off DataTable’s built in auto column width calculator by feeding it a false value for the bAutoWidth switch when initialising your DataTable object. Next, you need to feed the column widths you wish to use directly into the initialization by means of the aoColumns definitions, making use of the sWidth switch to specify the width.

Looking at this in code, you should now have:

$('#activitylog').dataTable( {
"bAutoWidth": false,
"aoColumns": [{"sWidth":"60%"},{"sWidth":"20%"},{"sWidth":"20%"}]
} );

Nifty.

Related Link: http://datatables.net/

jQuery Color Picker Plugin: Convert RGB to HEX CodeUnit 08 JUL 2010

I’ve written on the excellent jQuery Color Picker plugin from eyecon.ro before, but a question was recently raised on how to use its RGB output in code. Well actually it turns out that most browsers return its value as a standard HEX color value, but one browser in particular (and I’m not naming names here but it is the one who everyone who think themselves better than the average home user seems to love) returns the value as a RGB color string.

Annoying.

So how to deal with this then?

Well the solution is to run whatever is returned by the color picker on change through a RGB to HEX function, but a function that only fires when working on a RGB string and not a HEX string.

So lets have a look then:

//actual converter function called by main function

function toHex(N) {
	if (N==null) return "00";
	N=parseInt(N); if (N==0 || isNaN(N)) return "00";
	N=Math.max(0,N); N=Math.min(N,255); N=Math.round(N);
	return "0123456789ABCDEF".charAt((N-N%16)/16) + "0123456789ABCDEF".charAt(N%16);
}

//function called to return hex string value
function RGBtoHEX(str)
{
	//check that string starts with 'rgb'
	if (str.substring(0, 3) == 'rgb') {
		var arr = str.split(",");
		var r = arr[0].replace('rgb(','').trim(), g = arr[1].trim(), b = arr[2].replace(')','').trim();
		var hex = [
			toHex(r),
			toHex(g),
			toHex(b)
		];
		return "#" + hex.join('');				
	}
	else{
		//string not rgb so return original string unchanged		
    return str;
	}
}

And there you go. Simply run all returned color values by the plugin through RGBtoHex() first, and you should be good to go with all your little DOM color style manipulations! :)