Typeface with font-weight: bold

As a web developer knows, the problem with commercial fonts that are from the corporate design, but not as web fonts are available. Popular this are always different forms of image replacements. The disadvantages of this are obvious:

• No optimal Suchmaschinerkennung
• High amendments and administrative expenses
• Text is not copyable
• Problem of accessibility

Besides the pictures solution would sIFR be a known method. Here is the text of a specific HTML tag is read and replaced by a Flash movie with embedded font. good in theory, in practice extremely difficult due to a high configuration effort.

Following the same principle works in the js-plugin Typeface . Only it is more practical to use.
The following code binds a normal font and a later described Bold font:

  1
 2
 3

 "typeface-0.14.js" ><!-- mce : 0 --></ script > < script src = "mysrcFont.typeface.js" ><!-- mce : 1 --></ script > < script src = "mysrcFontBold.typeface.js" ><!-- mce : 2 --></ script > <Script src = "typeface-0.14.js" ><!-- mce: 0 --></ script> <script src = "mysrcFont.typeface.js" ><!-- mce: 1 --></ script> <script src = "mysrcFontBold.typeface.js" ><!-- mce: 2 --></ script> 

To the text zuzuweißen the appropriate font, you just use the CSS font-family statement.

  1
 2

  <div id="text" style="font-family: mySrc Font;">
 Lorum ipsolum ...</ div> 

The name of the attribute in the syle used fonts can be read in each of the js files.
All this has two disadvantages, as described on the site are already well. Performance problems with larger amounts of text and standard CSS Hovereffekte not work anymore.
This will be converted into a javascript file in the Font Truetype or Opentype format it one must exist. Not always in these writings, the bold version is integrated. In order to get a grip, you can export a font editing tool, only the Bold version and convert them as well. Adds one now these two JS files and assigns the Bold font a an HTML element that happened apart from an error output to the Firebug console, nothing.
The solution is simple. The font converter on the integrated Typeface website also provides information on typefaces why the CSS selector that info also needed:

  1
 2
 3
 4
 5
 6
 7
 8

  # Text (
   mySrc Font , Verdana , Arial ; font-family: mySrc font, Verdana, Arial;
 )

 # (BoldFont
   mySrc Boldfont , Verdana , Arial ; font-family: mySrc Boldfont, Verdana, Arial;
   bold ; font-weight: bold;
 ) 

So the workaround for the embedding of normal and bold fonts is perfect.

An alternative to sIFR javascript Cufón -
sIFR 3 r436 - scrolling problem in Firefox 3, ie6 / 7

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 to imagine today just a couple of times finer points to do so.

A Click Add an element handler
An element a click handler mitzugeben is probably the easiest.

  1
 2
 3

  ) . click ( function ( ) { $ ('# IdDesElements'). Click (function () (
 "Click handler ausgelöst!" ) ; alert window. ("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 chaining of the 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 ( ) { window. alert ( "neuer Click handler ausgelöst!" ) ; } ) ; $ ('# IdDesElements'). Unbind ('click'). Click (function () (window. Alert ("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 ("# testtwo"). click (function () (
    ) . parent ( ) . prev ( ) . children ( ) . filter ( ".move" ) . not ( ".not" ) . animate ( { 'paddingLeft' : '20px' } , 200 ) ; 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 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 is taken into account embedded in IE.

A small workaround for it 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 can be found at wiki of github .