Category Archives: javascript

Flowplayer and Captions (Subtitles)

javascript, web development, , , , ,

Actually I couldn’t mange to make it work with a non-javascript approach, but however with the .js help it works. I’ll paste here this code, hopefully this will help.

Note that you’ve to change plugins/javascripts/videos/captions path!

<html>
<body>
<div id="player" style="width:480px;height:360px"></div>
<script src="Flowplayer.Captions/flowplayer-3.2.2.min.js"></script>
<script>
 
$f("player", "Flowplayer.Captions/flowplayer-3.1.5.swf", {
    clip : {
        url : "Flowplayer.Captions/bach.flv",
        captionUrl : 'Flowplayer.Captions/bachen.srt'
    },
    plugins:  {
        captions: {
            url: 'Flowplayer.Captions/flowplayer.captions-3.2.1.swf',
            captionTarget: 'content'
        },
        content: {
            url : 'Flowplayer.Captions/flowplayer.content-3.2.0.swf',
            bottom: 5,
            height: 50,
            backgroundColor: 'transparent',
            backgroundGradient: 'none',
            border: 0,
            textDecoration: 'outline',
            style: {
                body: {
                    fontSize: 15,
                    fontFamily: 'Arial',
                    textAlign: 'center',
                    color: '#ffffff'
                }
            }
        },
        controls: {
            url : 'Flowplayer.Captions/flowplayer.controls-3.1.5.swf'
        }
    }
});
 
setTimeout(function() {
    $f('player').getPlugin('captions').loadCaptions(0, 'Flowplayer.Captions/bachbg.srt');
}, 3000);
 
</script>
</body>
</html>

Detecting Pressed Key with e.which in JavaScript

javascript, , , , , , ,

You have definitely decided to get which key has been pressed with JavaScript? This is very common when it comes to an Enter key press over a form element. Actually this should be automatically done by the browser, but when it comes to a default prevented form you’ve to check it for yourself.

The job can be done with a event’s which check. Let me show you some JavaScript/jQuery code:

$('.selector').click(function(e) {
	console.log(e.which);	
});

Note that this can be checked under Firefox and/or Safari like browsers which support the console object. This will give you the idea which key is pressed in a number value. The Enter is usually 13!
If you don’t have such browser, you can replace that code with something like:

$('.selector').click(function(e) {
	alert(e.which);	
});

JavaScript Objects Coding Style

javascript, micro tutorial, PHP, web development, , , , , , , , , , , ,

JavaScript vs. PHP

Continuing from my post about PHP arrays coding style and following the comments of that post, I’d like to write a bit about JavaScript objects’ coding style.

You perhaps know that the term object is quite undefined or under estimated in the JavaScript world, but I’d speak about the key/value pairs in JS commonly formatted like that:

var obj = { key : 'value' }

Here you can add more and more key/value pairs, but what’s different from the PHP associative arrays and what’s the same and should be cosidered.

The Same as PHP?

I wrote about the alignment in PHP and hashes. Than I showed how I align them:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val'
);

In JavaScript you should use the same technique of alignment:

var obj = {
   'short'   : 'val',
   'longkey' : 'val'
};

Some Differences

Yes, there are more differences, which is normal. First of all you don’t have the => notation in JavaScript and a : is used. Second and most important you cannot add a trailing comma after the last key/value pair. Note that in PHP that’s fine!

// that will throw an error in MSIE
var obj = {
   'short'   : 'val',
   'longkey' : 'val',
};

while this is OK in PHP and it’s encouraged:

$arr = array(
   'short'   => 'val',
   'longkey' => 'val',
);

The Difference Between .live() and .delegate and Which One Should be Used

javascript, web development, , , , ,

There are so many posts about that topic out there, but I’d like to be rather breve! The delegate() method comes with the last major version of the jQuery – 1.4 and it gives a context to the event. So please use delegate() instead of live(), just because not everything’s attached to the document element, but to the selected object.

Inline Scripts with Zend_View_Helper_InlineScript

javascript, micro tutorial, PHP, zend framework, , , , , , , ,

Once I’ve posted about Zend Framework and script injections into the view of the app. However back than I didn’t mentioned the way the scripts can be injected on whatever place into the markup. This job’s done by Zend_View_Helper_InlineScript and that’s only an abstraction over the HeadScript.

However thus the PHP code goes quite clean and maintainable.

$scripts = $this->view->inlineScript();
$scripts->appendFile('/scripts/production.js');

This is quite interesting because in the case of multiple scripts you can chain them into this:

$scripts = $this->view->inlineScript();
$scripts->appendFile('/scripts/production.js')
            ->appendFile('/scripts/development.js')

But that’s not everything. Although it looks very pretty and clean, PHP gives you the correct syntax of something like this:

$scripts = $this->view->inlineScript();
$scripts
            ->appendFile('/scripts/production.js')
            ->appendFile('/scripts/development.js')

And that’s particularly good when it comes to fast switching between production and development scripts includes.

$scripts = $this->view->inlineScript();
$scripts
 //        ->appendFile('/scripts/production.js')
            ->appendFile('/scripts/development.js')

You’d ask why I’d to comment my script includes. Because as it appears to be fashionable the JavaScripts are concatenated and compressed. This gives you performance benefits on the client side when downloading and executing the script. So it’s usual to have one compressed/minified and several development scripts. That’s why this commenting strategy is very useful.