Tag 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',
);

Should I do Something Only Because Crockford Says So?

web development, , , , , , ,

Crockford says: “Don’t do that, please stop doing it!?” It may be related to JavaScript, YUI, CSS or whatever. PPK recently posted about browser prefixes with the same intonation. OK, fine, it’s difficult to maintain, it’s ugly but my job is to make the site look as nice as possible.

I agree with Crokford that only with copy/paste now JavaScript has the reputation of badly standardized language with no programmers that understand it at all. It’s true, but however this maybe made JavaScript so popular, now all the libraries come with that abstraction in mind and this gap seems to be smaller.

In addition I’ll say that’s fine if Crockford or PPK say something like that, but the primary goal of every web developer is not to be in good relations with Crockford, but to satisfy clients! I’d like to repeat – clients!

jQuery: what about this.title?

javascript, micro tutorial, , , , , ,

In my last post I was talking about the short way to access the id attribute:

this.id;
this.attr('id'); // this is the same but slower

Beside the most important thing that this is the slower notation, you get also larger notation, which in JavaScript is really pain.

What’s interesting is that you can access almost every attribute of an element with that notation. Take a look at the following example:

<img src="image.jpg" title="test" />

and than

$('element').title

This is much faster and quite nice in place of

$('element').attr('title');