jQuery list filtering May 3rd, 2013
So another jQuery plugin today, it’s all I seem to be blogging these days but I do enjoy a bit of jQuery. This one allows you to filter list items (or any elements with a bit of tweaking) via an input field. Here’s a demo:
- Item one – some text or content
- Item two – Lorem ipsum
- Item three – some different text or content
- Item four – some text or other content
- Item five – some text or different content
- Item six – some content
- Item seven – something else
- Item eight – dolores sit amet
- Item nine – some text or content
Type into the text input field and the list will filter itself depending on the entered text. The plugin has a couple of configurations to customise your search. These options are:
minChar : 2, // Min number of characters before filtering begins searchType : 'AND', // Search type: 'STRICT' = searches for exact phrase typed, 'AND' = searches for occurrences of all words in any order, 'OR' = searches for occurrence of one or more words searchParent : '.searchable', // jQuery selector, parent of searchable elements searchElement : 'li', // jQuery selector, individual searchable elements dataType : 'searchindex', // Data attribute placeHolder : 'Filter...' // Search field placeholder text |
The settings listed above are the default options and possible values should be fairly self explanatory I hope. The default options should be all you need to get up and running though so to start using it download the file and call the function on your input field like so:
$(function() {
$('#filter-input').filterList();
}); |
The download includes the uncompiled JS and an HTML file with a working demo so please fell free to give it a try. Use it as you like but if you’re feeling generous please do credit me.
Displaying your latest statuses from Twitter February 6th, 2013
After a couple of years at IE I’ve moved on to pastures new and started work as a technical consultant at Farringdon based tech agency Amido. This move has allowed me to finally return to the LAMP stack after a two year absence and it feels good. In celebration of that here’s a little PHP something.
Latest Tweets from @scriptic
Amazing long weekend in Bude, sun, sea and sand!
May 06, 2013
Mouse Taxidermy! The new @WeAreAmido London office mascot. http://t.co/GNnOxPMTxG
May 03, 2013
Feeling pretty virtuous after first cycle commute into central London this morning. Hope my legs are up to the return journey.
May 01, 2013
So at some point between me implementing my new theme and a couple of weeks ago the Twitter feed on this site stopped working. After a little investigation I discovered that Twitter have changed the way their APIs work so I had to rebuild the functionality in my theme. Now with version 1.1 of the Twitter API it’s nice and easy, as long as you use OAUTH, to embed tweets on your page ready formatted with all the bells and whistles in place. It looks great but I guess not everyone, including me, wants that – so, after some very brief research garnered no results in regards to returning just a block of HTML for the status rather than the whole widget, I decided to cobble something together myself. A process which I shall share with you now.
First off, I didn’t do all this alone – I used the very handy tmhOAuth library by Matt Harris to take care of the authentication stuff, so you’ll need to grab that before we begin (it’s also included in this handy download of all the code you see here ready to go). While we’re on the subject you’ll also need to do all the Twitter application prep work before this’ll work. You can learn about that here.
So once you’ve got all that sorted we need to write some code. First off you need to call the Twitter API and grab your JSON object using ‘user_timeline’. The two variables in the request are your Twitter username and count, which is the number of tweets you wish to return.
<?php // Require files from the OAuth library require 'tmhOAuth.php'; require 'tmhUtilities.php'; function getTweets(){ //OAuth $tmhOAuth = new tmhOAuth(array( 'consumer_key' => 'YOUR CONSUMER KEY', 'consumer_secret' => 'YOUR CONSUMER SECRET', 'user_token' => 'YOUR USER TOKEN', 'user_secret' => 'YOUR USER SECRET', )); // Request $code = $tmhOAuth->request('GET', $tmhOAuth->url('1.1/statuses/user_timeline'), array('screen_name' => 'username', 'count' => 3)); $response = json_decode($tmhOAuth->response['response']); } ?> |
So that’ll return a handy JSON object with everything you need to retrieve your Twitter stream, now if you want to just embed Twitters beautiful widgets you can grab the status ID from that object and use oembed but all I want is the tweet text and the date. Fortunately both of these are included in the object and can be extracted like so:
<?php foreach($response as $obj){ echo $obj->text . '<br />'; echo $obj->created_at . '<br /><br />'; } <? |
All good, except you’ll notice that all you have is a couple of raw text strings, for my purposes I’d like the time stamp to be a little simpler and obviously I’d like all the hash-tags, mentions and links to be in-tact and working. So date first – we can just write a little function to extract and re-order the bits you want.
<?php echo formatdate($obj->created_at); function formatdate($date){ $dateseg = explode(' ', $date); return $dateseg[1] . ' ' . $dateseg[2] . ', ' . $dateseg[5]; } ?> |
This just explodes the date string into separate elements and then reorders it into a nice simple ‘Jan 09, 2013’ type format. When that’s done we need to tackle the more complicated task of ensuring all the links come out intact. Fortunately that JSON object we retreived earlier contains all the information you need to do that – each hash-tag, mention and link has it’s own little array containing display text, shortened link and full link – so all we need to do is scan through our tweet and do some text replacing:
<?php echo formattweet($obj->entities->urls, $obj->entities->user_mentions, $obj->entities->hashtags, $obj->text); function formattweet($links, $mentions, $hashtags, $tweet){ $buildtweet = $tweet; foreach($links as $link){ $buildtweet = str_replace($link->url, '<a href="' . $link->url . '" target="_blank">' . $link->display_url . '</a>', $buildtweet); } foreach($mentions as $mention){ $buildtweet = str_replace($mention->screen_name, '<a href="http://twitter.com/' . $mention->screen_name . '" target="_blank">' . $mention->screen_name . '</a>', $buildtweet); } foreach($hashtags as $hashtag){ $buildtweet = str_replace($hashtag->text, '<a href="http://twitter.com/search?q=%23' . $hashtag->text . '&src=hash" target="_blank">' . $hashtag->text . '</a>', $buildtweet); } return $buildtweet; } ?> |
And now we have a nice simple block of HTML containing your tweet which you can embed and display any way you like. Which is exactly what I’ve done at the top of this post and, when I get around to it, on the sidebar of this theme. If you happen to know that there’s a much simpler, ready made, way of achieving this then please let me know so I can take this post down and save myself some embarrassment.
Thanks all!
Three Column Stretchy HTML layout November 2nd, 2012
OK first off, apologies for the delay between posts there. As I’m still working at IE at the moment I’m still not getting to do a lot of work that I can actually stick on this blog and what with the wedding this year and all I haven’t done an awful lot of work in my free time either. With that in mind I’ve decided, instead of adding some new content, I’ll just fill the gap for now with something recycled from CoderSphere. When I originally posted about the CoderSphere project I said I would transfer some stuff over so here goes.
I’ve always struggled to achieve a good stretchy layout – two static width side columns and a stretchy middle – and, until I came to accept JavaScript as an inevitability, it’s something I avoided.
You see the issue for me with this layout was that, due to the absolutely positioned sidebars, it was practically impossible to achieve properly without using some JavaScript to ensure that the heights all matched up and the rest of the page flowed correctly. For CoderSphere I decided the time had come when this was no longer an issue and so I built the HTML, added some emergency ‘no JS’ CSS and then created a little JS snippet to make sure everything worked as it should. All of this I detail below.
So first off – the basic HTML structure:
<div class="container">
<div class="left">Left Column</div>
<div class="middle">Centre Column</div>
<div class="right">Right Column</div>
</div> |
Here we have a container div and then my three stretchy columns. the left and right columns are fixed width, absolutely positioned elements and the central div will stretch to fill the rest of the space, to do this however it needs some CSS:
.container { position:relative; margin:10px; min-width:300px; } .container div { border:1px solid #999999; padding:10px; } .left { position:absolute; left:0; top:0; width:80px; } .middle { margin:0 110px; } .right { position:absolute; right:0; top:0; width:80px; } |
Here’s the result:
It’s hard to see the actual result here as I have a fixed width container around it but try it yourself and you’ll see.
So now everything’s sorted. Simple eh? unfortunately there’s a problem. Because the two side columns are positioned absolutely if the content in either of those happens to be longer than the content in the central column they will overlap anything beneath them in your page layout (for example your page footer, sitemap etc…).
I fixed this in two ways. First I put together some CSS, to be included in the event that JavaScript is disabled on the page, that will do a basic but ugly job of ensuring this isn’t a problem:
.left { max-height:600px; overflow-y:scroll; } .right { max-height:600px; overflow-y:scroll; } .middle { min-height:600px; } |
So this will ensure that the central column is always as tall, or taller, than either of the two side columns. The drawback of this as a sole solution is that you’ll have ugly vertical scrollbars on the two sidebars if their content happens to be greater than 600px high. So, as I mentioned, we only include this if JS is unavailable:
<noscript><link rel="stylesheet" href="nojs.css" /></noscript> |
And then we write some JavaScript to do a much more elegant job of it:
$(document).ready(function() { sizeColumns(); $(window).resize(function(){ sizeColumns(); }); }); function sizeColumns(){ $('.left, .middle, .right').removeAttr('style'); var hArray = [$('.left').outerHeight(), $('.middle').outerHeight(), $('.right').outerHeight()]; var maxHeight = 0; for(var key in hArray){ if(hArray[key] > maxHeight){ maxHeight = hArray[key]; } } $('.central-column').css('height' , (maxHeight + 20) + 'px'); } |
This basically loops through the three divs, checks which one is tallest and then ensures that the central, content column matches the height (and adds a little more for good measure). It also ensures it re-fires on page resize. So now we have our flexible, three column layout with everything flowing into place nicely beneath – as seen on CoderSphere.
A jQuery accordion plug-in August 23rd, 2012
Today I finished building a beautiful jQuery accordion plug-in which hopefully will end up in a suite of plug-ins and jQuery bits and pieces in the companies new product offering next year.
This is quite a long post but my other jQuery posts have all been a bit boring so I thought I’d make a bit more out of this one and add some more examples, instructions etc.
The plug-in works best when attached to a <dl> HTML element although as long as you structure your code in a similar way you can use anything you like with a bit of tweaking of the parameters.
Example 1
The list below is what you will get if you apply the plugin to a <dl> without changing any parameters.
- Item title One
- Item content One
- Item title Two
- Item content Two
- Item title Three
- Item content Three
Example 1 code
$('#list1').siAccordian();
Example 2
Now one with a few of the parameters set for a slightly fancier experience.
- Item One here’s a non clickable sub heading
- List content One
- Item Two here’s a link that wont expand the list
- List content Two
- Item Three
- List content Three
Example 2 code
$('#list2').siAccordian({
instigateElement : ' > a:first-child',
startOpen : 0,
collapseSiblings : true,
animate : true,
openClass : 'contract'
});
So there it is. There are a few more parameters to play around with, they’re all listed in the JS file. Most notably there’s a ‘save state’ parameter which will use a cookie to remember the state of the list when you navigate away from the page so that when you return the page is as you left it.
As I said at the beggining I’ve literally finished this today and it has yet to go through proper QA so there are doubtless a few bugs. Please download the files and have a play with it, but please let me know if you find any bugs and if you don’t mind, leave the credits in the JS file in-tact.
Cheers, Scriptic
Very simple jQuery news ticker July 18th, 2012
Here’s a very simple jQuery news ticker I built for a client web site recently!
- Another jQuery slider (v 2.0) December 17th, 2011
- jQuery popup plugin August 4th, 2011
- jQuery form validation plugin November 15th, 2010
The ticker can be attached to a list element and will take each list item and treat them as separate news items, sliding them in and out, horizontally, one by one.
Not too many options here. You can set it to slide in from the left or right as well as setting the speed at which the slider operates – the slide in, slide out and pause speeds are all changeable.
Feel free to grab the files and use the slider, but if you don’t mind, leave the credits in the JS file in-tact.
