jMediaelement - jQuery HTML5 Audio-Video Kit

After a long time I have now again a trifle for you.
In my opinion, the moment probably the best HTML 5 Media Player.
jMediaelement plays both audio and video files, and has from all the browser any HTML-5 required support fallback to Flash and VLC.

The player is about CSS and fully supports all major file formats stylebar such as: ogg (theora / vorbis), mp4/mov (h.264), Webm (VP8/vorbis), flv, Youtube videos and more.

The implementation of the player is very easy and well documented .

Practice Tip - jqTransform bug in input in Firefox> 3.5.2

Who you jqTransform of uses is possibly the last Firefox update user id to have the text in the inputs no longer sits neatly in the middle.
Applies to Firefox 3.5.2.

The whole is donated to the new rendering engine that Firefox has received.
To get the problem under control without sideeffects to get your browser makes it easy for others following.

Your jqtransform.css on, in line 90 (. JqTransformInputInner div input () changeable now the height of 31px on your auto.

That's it ....

jQuery load function - the simple way Ajax (Part 1)

The load function can be simply HTML elements of a file in the current insert. This function is primarily for the "import" of HTML code in thought and therefore does not correspond to the typical Ajax request in the example a PHP script is accessed, the data from the database reads and / or knock against other server processes.

So much for the first theory, the function call is as follows:

  1

  ) . load ( '/someFile #mydiv' ) ; $ ('# SomeElement'). Load ('/ somefile # myDiv'); 

So short that simple. In the element with id "someElement" divs, the entire contents of the "myDiv" loaded id. The ingenious thing is that "myDiv" not at all in the current document is, but in the file "somefile".
The second parameter, the load function also data as so-called Key / value pairs passed it.

  1

  ) . load ( 'someFile.php' , { 'param' : 'someValue' } ) ; $ ('# SomeElement'). Load ('someFile.php', ('param': 'someValue')); 

This corresponds, however, now more like the normal Ajax request. The one or more key / value pairs are passed to the php script as a post parameter. Of course, one loses the advantage of the previous example to other HTML elements from a script to get DOM simple. But if you request a single direct without any further processing would result in an element of the insert, which is a very easy and comfortable option.

The next part will then progressed to other variants such as get jQuery Ajax, getJSON, etc. go.

jQuery - Click handler and remove elements to assign

Click handler functions are probably one of the most used when working with jQuery. Rarely get there without them.
I want you today to present briefly a few times finer points to do so.

Click an item to add a handler
An element a click handler mitzugeben is probably the easiest.

  1
 2
 3

 ) . click ( function ( ) { window. alert ( "Click handler ausgelöst!" ) ; } ) ; $ ('# IdDesElements'). Click (function () (window. Alert ("Click triggered handler!");)); 

Mehrer Click Add a handler element
An element can account more than just a Click handler assigned.
The item is clicked, any handler in turn exported to.

  1
 2
 3
 4
 5
 6

 ) . click ( function ( ) { window. alert ( "Click handler 1!" ) ; } ) ; $ ( '#idDesElements' ) . click ( function ( ) { window. alert ( "Click handler 2" ) ; } ) ; $ ('# IdDesElements'). Click (function () (window. Alert ("Click a handler!");)), $ ('# IdDesElements'). Click (function () (window. Alert ("Click handler 2 ");)); 

Click remove handler
Click again to remove handlers a simple enough unbind.

  1

  ) . unbind ( 'click' ) ; $ ('# IdDesElements'). Unbind ('click'); 

Click Add handler and also remove
Since we have the wonderful with jQuery so the chaining method for disposal, we can avoid an element of a previously assigned to him all the Click handler and simultaneously add a new one.

  1
 2
 3

  ) . unbind ( 'click' ) . click ( function ( ) { $ ('# IdDesElements'). Unbind ('click'). Click (function () (
     "neuer Click handler ausgelöst!" ) ; alert window. ("Click handler triggered new!");
 )); 

Click handler and anchor
When you click a link to an anchor handler calls, but not the will of the browser follows the link, after the handler is called false must also simply a return;

  1
 2
 3
 4

  ) . click ( function ( ) { $ ('# IdDesElements'). Click (function () (
 "Click handler" ) ; alert window. ("Click handler");
     ; return false;
 )); 

jQuery HowTo: Traversing

Travesi belongs to the basic tools, if you would like to make animations using jQuery advanced. Here's a little guide to find specific items.

What happened here? Basis, this HTML structure:

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

  <div id="someParent" style="border: 1px dotted #ccc"> Parent
 <div>
  Child1
 </ Div>
 <div class="move">
  Child2
 </ Div>
 <div>
  Child3
 </ Div>
 <div class="move not">
  Child4
 </ Div>
 </ Div>

 <div id="someWrapper">
 <a id="testone" href="#"> Move all </ a>
 <a id="testtwo" href="#"> Move filtered </ a>
 </ Div> 

The following JavaScript code performs the animation. Based on the link with the methods of the parent "someWrapper" selected div, prev item selects the previous one with the "someParent" and finally id be with children all the elements within "someParent selected.
The id's in the example are illustrative only. The animated elements to be exclusively on the structure of DOM found.

jQuery code for "Move all":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# Testone"). (() (jQuery (this). parent (). prev (). children (). animate (('paddingLeft: "'20px'), 200) return false function click;) ); 

Now for the advanced version. They are based on the jQuery function, filter and not.
jQuery code for "Move filtered":

  1
 2
 3
 4

 ) . click ( function ( ) { jQuery ( this ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; return false ; } ) ; jQuery ("# testtwo"). click (function () (jQuery (this). parent (). prev (). children (). filter (". move"). not (". not"). animate (( 'paddingLeft': '20px '), 200;) return false;)); 

jQuery presentations for a better understanding

Time and again I stumbling on interesting presentations about jQuery in the network.
Today I want to introduce a few of my favorites.

read more

Suggestion: button width set jqTransform

So nice and beautiful the jqTransform plugin is, it makes iA but a few small problems. In addition to the different interpretation of the width of text boxes in FF and IE, can also set the width of the standard buttons do not own the set of CSS.

If you want to do this and can not find the appropriate setting, which was called for a little help here. Therefore you jqtransform.css the open and in the selector Z.36 "button.jqTransformButton span span" the new width property to assign.
This can for example be as follows:

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

 background : transparent url ( img/btn_left.gif ) no-repeat top left ; color : #333 ; padding : 10px 4px 0px 8px ; font-weight : normal ; font-size : 12px ; line-height : 13px ; display : block ; text-decoration : none ; height : 33px ; width : auto ; min-width : 100px ; } button. jqTransformButton span span (background: url (img / btn_left.gif) no-repeat top left transparent; color: # 333; padding: 10px 0px 4px 8px; font-weight: normal; font-size: 12px; line-height : 13px; display: block; text-decoration: none; height: 33px; width: auto; min-width: 100px;) 

Practice Tip - jqTransform width bug

Who jqTransform used once already will surely have found that Internet Explorer and the Firefox browser, the text fields in a different width of the display.
This is due to the size attribute that, even if not in the input field anchored in IE is taken into account.

A little workaround for this is the size attribute in the js code to remove the calculation. Of course, with the result that this attribute can be no longer used for this purpose. What I personally consider as not so bad as to Best Practice is one of the web programmer to define the setting of surface properties on the CSS.

Now for the workaround:

  1
 2
 3
 4
 5

 ( $input. attr ( 'size' ) ) { inputSize = $input. attr ( 'size' ) * 10 ; $input. css ( 'width' , inputSize ) ; } / / Z. 107 in the jquery.transform.js if ($ input. Attr ('size')) ($ input = inputSize. Attr ('size') * 10, $ input. Css ('width', inputSize) ;) 

This piece of code you can delete it simply because it leads to incorrect calculation of the width of the text boxes. I could not detect any unwanted side effects. If you find something, I would be grateful for comments.

jQuery - Accessible-RIA - Widgets for everyone

This morning I found something nice and I wish to mention briefly.
jQuery - Accessible-RIA is a collection of several easy-to-deploy widgets, which are all 100% WAI WCAG 2.0 and WAI ARIA compliant.
Especially for the whole front end developer is interesting. Does it make a page but fully accessible to everyone.

The whole is based on jQuery UI Widgets and included the following:

• Lightbox ( Demo )
• Form ( Demo )
• Tabs ( demo )
• sortable tables ( Demo )

All information about the project, as well as demos, documentation, etc are found in the wiki of github .

jCryption - HTML-Form Encryption Plugin

Which of you, especially in the commercial area, which security of forms, the deals with the familiar.
Not every Web package, the provider has SSL and if so, then it is not always easy to establish.

This is where jCryption, which as a small plug-in to a certain basic security in the transmission of form data will provide easy install.
jCryption is certainly not a replacement for SSL but just are not 100% security-related things, a practical solution.

jCryption client side encrypted data and decrypts it to connect to the server (PHP).

In order to bring the whole run you have to do is to embed as the download. Js and jCryption on your form and then forward.

  1

  ) . jCryption ( ) ; $ ("# Normal"). JCryption (); 

For further details, examples, documentation, etc but visited the official website.