Lewis Hill - Web Enthusiast, Design Junkie, Terrible Magician.

Filta jQuery Plugin

Thursday, June 27th, 2013

During a recent project I needed to to be able to search through a list of list items, without reloading the page.

I tried using isotope.js, which is a fantastic plugin for filtering with cool effects, but we found it was crashing our app when used on an iPhone, basically it was too resource intensive.

So I wrote my own one. Simple and easy to use.

Download filta.js or view a live demo.

Usage

Using filta.js is very simple, you just attach it to an input element on your page and optionally give it the id attribute of a specific ul or ol element you want it to target.

First you’ll need to include the plugin in your page.

 HTML |  copy code |? 
1
<script src="inc/js/filta.jQuery.js"></script>

Your HTML input and list will look something like this..

 HTML |  copy code |? 
1
<input name="search" type="text" id="search" placeholder="Search for Name"/>
2
 
3
<ul id="names">
4
 <li>Lewis</li>
5
 <li>Steve</li>
6
 <li>Shelley</li>
7
 <li>Lucie</li>
8
</ul>
9

You just need to grab the input ID as the selector, in this case “search” and add filta to it like so..

 Javascript |  copy code |? 
1
$("#search").filta();

Options

filta.js accepts one option, list. It allows you to target a specific ul or ol on the page, the syntax is as follows..

 Javascript |  copy code |? 
1
2
$("#search").filta({
3
 list: "#names"
4
});
5

Have fun

I learned a lot writing filta.js, not least of which was how to write a jQuery plugin, this is my first. I hope you find some use for it! 🙂

Posted in Coding | No Comments »

Redirect HTTP to HTTPS

Friday, June 7th, 2013

Recently I needed to secure a project I’ve been working on for a Packaging Equipment company. To do this, it was necessary for me to change the site from http protocol, to https.

Buying the secure certificate and the hosting for the domain is easy enough, but when it’s all in place, I essentially have 2 websites on my hands.

 Apache configuration |  copy code |? 
1
http://mydomain.com

and

 Apache configuration |  copy code |? 
1
https://mydomain.com

I personally had no use for the non-secure connection, so I needed to find a way to redirect http to https.

After about an hour of failed attempts with StackExchange, I asked on my favourite web design forum, and my prayers were answered by DigitalSquid, who provided the following code to place in a .htaccess file.

 Apache configuration |  copy code |? 
1
RewriteEngine On
2
RewriteCond %{HTTPS} off
3
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

That’s all there was to it.

Posted in Coding | No Comments »

Find & Replace Text in MySQL Database

Sunday, April 14th, 2013

Recently, I needed to find variable text inside a MySQL database and manipulate it; in my case, delete it.

For example, I had this string of text saved in a field:

1
red, blue, yellow, green, purple, orange
(more…)

Posted in Coding | No Comments »

Learning PHP: Loops

Tuesday, March 12th, 2013

Following Jeffrey Way’s PHP Fundamentals training course, I’ve hit loops. Loops are at the core of programming, useful for a multitude of purposes, cycling through an unknown number of items in an array for example, or returning a result from a MySQL query, to determine whether to display any information.  (more…)

Posted in Coding | No Comments »

Learning PHP: Arrays Pt 2

Sunday, March 10th, 2013

Part 2 of learning about arrays in PHP. Here we will talk about adding and removing items to the end, and start of an array using PHP’s build in functions array_push(), array_pop(), array_shift() and array_unshift(). That last one is named ridiculously.

We will also cover returning a specific number of items from within an array, using array_slice(). (more…)

Posted in Coding | No Comments »

Learning PHP: Arrays

Sunday, March 10th, 2013

Trying to learn the fundamentals of PHP, I thought it would be helpful to my learning process to write up what I’d just been taught as a way of committing it to memory.

This post is all about Arrays in PHP, it’s really basic stuff but you might puck something up from my comments. (more…)

Posted in Coding | No Comments »

Learning PHP: Variables

Sunday, March 10th, 2013

I’m currently running through Jeffrey Way‘s PHP Fundamentals tutorial on TutsPlus Premium. I apologise for this series of posts, they will be incredibly useless for the most part, but I figure if I write this stuff down, no matter how basic, it will help me remember.

Enjoy! (more…)

Tags: ,
Posted in Coding | No Comments »

jQuery .keyup() Method

Monday, February 4th, 2013

I’m currently looking at the way we do things in the office, evaluating whether we could do it better, more effectively, and with less effort.

One of the ways I hope to achieve this is by building a series of simple ‘apps’ that will take the laborious work out of every day tasks we perform here at Packer. (more…)

Tags:
Posted in Coding | No Comments »

Image Check & Create in PHP

Friday, February 1st, 2013

A short script I wrote to check whether specific images exist on a web server, if not, an ‘image coming soon’ jpg is created in place, which allows the website to remain professional. (more…)

Posted in Coding | No Comments »

I'm into comics, I thought it a shame that they get delivered, read once and hidden away in a box. I built a database to track and view them. My Comic Collection.

I collaborated with Michael Dean on an idea I had to play Rock, Paper, Scissors over the internet. I handled the design. Go to Settlr.

I illustrated the Marvel Character Cyclops and it got picked up by the Executive Editorial Director for Marvel.com. I'm so proud :)

Custom built WordPress website for High Beech Primary School in Loughton.