JQuery UI supports a really handy feature called content via AJAX whereby when you click/display a tab, it will create a div element to load your content into, then perform the AJAX call and drop it in. But what happens when you want to specify the element to load the AJAX request into? Thankfully after a bit of digging around it’s not only possible, but pretty easy.

Here’s an example of AJAX load with JQuery UI Tabs:

1
2
3
4
5
6
7

<div id="tabs">
    <ul>
        <li><a href="ajax-content-1.html">Tab 1</a></li>
        <li><a href="ajax-content-2.html">Tab 2</a></li>
        <li><a href="ajax-content-3.html">Tab 3</a></li>
    </ul>
</div>

And here’s how you can specify the panel elements. Simply add an aria-controls attribute to your tab LI element that points to the ID of your target panel element:

1
2
3
4
5
6
7
8
9
10
11

<div id="tabs">
    <ul>
        <li aria-controls="my-first-tab"><a href="ajax-content-1.html">Tab 1</a></li>        <li aria-controls="my-second-tab"><a href="ajax-content-2.html">Tab 2</a></li>        <li aria-controls="my-third-tab"><a href="ajax-content-3.html">Tab 3</a></li>    </ul>
 
    <div id="my-first-tab"></div>    <div id="my-second-tab"></div>    <div id="my-third-tab"></div></div>

Demo

Read More »

If you refresh or come back to a site often, it’s handy to have JQuery UI tabs remember which tab you were last on as you left. This simple script will handle that for you:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

jQuery(function($) {
    var index = 'qpsstats-active-tab';
    //  Define friendly data store name
    var dataStore = window.sessionStorage;
    var oldIndex = 0;
    //  Start magic!
    try {
        // getter: Fetch previous value
        oldIndex = dataStore.getItem(index);
    } catch(e) {}
 
    $( "#tabs" ).tabs({        active: oldIndex,
        activate: function(event, ui) {
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            //  Set future value
            try {
                dataStore.setItem( index, newIndex );
            } catch(e) {}
        }
    });
});

No other code is necessary. Add your tab markup as you normally would (Remember to give it a matching ID):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<div id="tabs">	<ul>
		<li><a href="#tabs-1">Tab 1</a></li>
		<li><a href="#tabs-2">Tab 2</a></li>
		<li><a href="#tabs-3">Tab 3</a></li>
	</ul>
	<div id="tabs-1">
		first tab
	</div>
	<div id="tabs-2">
		second tab
	</div>
	<div id="tabs-3">
		third tab
	</div>
</div>

Demo

Read More »

If you have a bunch of MP4 files and want to convert to MKV without needing to reencode each file, this can be done with a super handy little tool called avconv.

Install avtools

You’ll need homebrew for this step.

1

brew install avtools

Do the conversion

I have a folder of MP4 files. To bulk convert them:

1

for f in *.mp4; do avconv -i "$f" -codec copy -map 0 "${f%.mp4}.mkv"; done

The above will create identically named MKVs next to your MP4s. Once you’re happy, just delete all your MP4s.

Bonus: Bulk merge ASS subtitles

If you have identically named ASS subtitle files next to your shiny new MKVs, you can bulk merge them using mkvmerge from mkvtoolnix with:

1
2

brew install mkvtoolnix
for f in *.mkv; do mkvmerge -o "./muxed/$f" "$f" "${f%.mkv}.ass"; done

Thanks to user MestreLion for his answer on AskUbuntu.

Read More »

Welcome back to my simple to-do application tutorial for Laravel 5. This tutorial is relatively long so I’ve broken it up into multiple posts.

1. Part 1 – Installation, Database and Routes
2. Part 2 – Listing Projects and Tasks
3. Part 3 – Create/Edit/Delete
4. Part 4 – Validation

The source for each part can also be found on GitHub.

So far we’ve learned how to install and set up Laravel, set up some project and task nested resources and display them to the user. Create, edit and delete functionality has also been implemented. In this chapter we’ll finish things off by adding form validation.

Read More »

Welcome back to my simple to-do application tutorial for Laravel 5. This tutorial is relatively long so I’ve broken it up into multiple posts.

1. Part 1 – Installation, Database and Routes
2. Part 2 – Listing Projects and Tasks
3. Part 3 – Create/Edit/Delete
4. Part 4 – Validation

The source for each part can also be found on GitHub.

So far we’ve learned how to install and set up Laravel, set up some project and task resources and displayed them to the user. In this chapter we’ll learn how to set up create, edit and delete pages/actions.

Read More »

Welcome back to my simple to-do application tutorial for Laravel 5. This tutorial is relatively long so I’ve broken it up into multiple posts.

1. Part 1 – Installation, Database and Routes
2. Part 2 – Listing Projects and Tasks
3. Part 3 – Create/Edit/Delete
4. Part 4 – Validation

The source for each part can also be found on GitHub.

So far we have a working database complete with seed data and a bunch of routes for displaying, editing and deleting our projects and tasks. In this second chapter I’ll cover controllers, models (with relationships), views (including the blade templating language and layouts) and route model binding.

Read More »

With the release of Laravel 5, there have been a bunch of backwards incompatible changes, new features added as well as the usual influx of new users so I thought I’d take the time to redo my basic to-do application with Laravel 5. The app covers a wide range of concepts, links to relevant learning material where possible and should make for a great introduction to the framework.

This tutorial is relatively long so I’ve broken it up into multiple posts.

1. Part 1 – Installation, Database and Routes
2. Part 2 – Listing Projects and Tasks
3. Part 3 – Create/Edit/Delete
4. Part 4 – Validation

The source for each part can also be found on GitHub.

Today will cover installation, configuration, artisan, migration, seeding and routes.

Read More »

Laravel 4 contained a Form helpers package called HTML but it was removed from 5 to cut down on cruft. HTML is still available as a first party package though so below are instructions on getting it back.

First require it in:

1

composer require "illuminate/html":"5.0.*"

Next up add the service provider and aliases. Open /config/app.php and update as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13

'providers' => [
	...
 
	'Illuminate\Html\HtmlServiceProvider',
],
 
'aliases' => [
 
	...
 
	'Form'=> 'Illuminate\Html\FormFacade', 
	'Html'=> 'Illuminate\Html\HtmlFacade',
],

That’s it. To confirm it’s working use the following:

1
2
3

php artisan tinker
> Form::text('foo')
"<input name=\"foo\" type=\"text\">"

Read More »

Today I had a folder of files like so:

1
2
3
4
5
6
7

My Video - 01.ass
My Video - 01.mkv
My Video - 02.ass
My Video - 02.mkv
My Video - 03.ass
My Video - 03.mkv
...

I wanted to add the .ass subtitle files to my .mkv containers but I had about 100 videos and didn’t want to do each one manually.

Using mkvtoolnix you can combine the video and subtitles like so (courtesy of Super User):

1

mkvmerge -o output.mkv input.mkv subs.srt

Because our files are all nicely named we can use a for loop to iterate this command over them all simply replacing the .mkv extension with .ass in the third argument (See How can I rename all my *.foo files to *.bar, or convert spaces to underscores, or convert upper-case file names to lower case?):

1

for f in *.mkv; do mkvmerge -o "./muxed/$f" "$f" "${f%.mkv}.ass"; done

and that’s it! The fixed up files will be in your muxed subdirectory.

Read More »

One of the most annoying things about SABnzbd is it’s failure to correctly repair broken downloads – especially when you download multiple repairable files in a single combined NZB. This often stems from SABnzbd not including all relevant par2 and part files during its repair – so the par2 command assumes far more missing files than there actually are. Below I’ll explain a method for easily including all relevant files for a (hopefully) more successful repair.

The Par2 Command

First let’s look at the par2 command:

1
2
3
4
5
6
7
8

$ par2
...
Usage:
 
  par2 c(reate) [options] <par2 file> [files] : Create PAR2 files
  par2 v(erify) [options] <par2 file> [files] : Verify files using PAR2 file
  par2 r(epair) [options] <par2 file> [files] : Repair files using PAR2 files
...

Based on the above we need to call

1

par2 r <list of par2 files> <list of mkv parts>

But how do we get those lists?

Your Download

Let’s say I’ve (legally) downloaded of episodes 8 and 9 of MyShow!. My failed download folder might include the following files:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

MyShow! - 08 [720p].mkv.001
MyShow! - 08 [720p].mkv.002
MyShow! - 08 [720p].mkv.003
MyShow! - 08 [720p].mkv.par2
MyShow! - 08 [720p].mkv.vol000+01.par2
MyShow! - 08 [720p].mkv.vol001+02.par2
MyShow! - 09 [720p].mkv.001
MyShow! - 09 [720p].mkv.002
MyShow! - 09 [720p].mkv.003
MyShow! - 09 [720p].mkv.004
MyShow! - 09 [720p].mkv.par2
MyShow! - 09 [720p].mkv.vol000+01.par2
MyShow! - 09 [720p].mkv.vol001+02.par2
MyShow! - 09 [720p].mkv.vol003+04.par2

We want to repair one episode at a time starting with episode 8. Here’s how I’d retrieve lists of just par2 then just the part files:

1
2
3
4
5
6
7

# Episode 8
ls *"- 08"*.par2 # Par2 files
ls *"- 08"*.[0-9][0-9][0-9] # Part files
 
# Episode 9
ls *"- 09"*.par2 # Par2 files
ls *"- 09"*.[0-9][0-9][0-9] # Part files

Putting it All Together

Combining par2 with my above lists results in:

1
2

par2 r *"- 08"*.par2 *"- 08"*.[0-9][0-9][0-9] # Ep 8
par2 r *"- 09"*.par2 *"- 09"*.[0-9][0-9][0-9] # Ep 9

You may also need to include *.mkv if that file exists but more often than not I’ve found it doesn’t.

Hope your repairs go a little smoother with this quick tip!

Read More »