jQuery plugin virtual keypad

Just twittering me an info about a beautiful new jQuery plugin into the house which I would like to introduce you here.

When jQuery Keypad is a plug with which it is possible to secure inputs through a "similar panel keyboard make" too. The plugin adds a text box or other mouse-controlled entry to the popup.
The values are to be displayed in the panel can easily be set, which only allows numbers, foreign, etc. Buschstaben view.

The keypad comes with a variety of settings. Thus, as the show with "fade down in" or "slide" is possible. But there are still a lot of other settings such as:

• isRTL : The text is illustrated by vonrechts left.
• clearText : removes all content from the text box.
• keypadClass : The CSS class with which you just the look of the keypad to adjust.
• etc. ..

A simple example

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

  ) . keypad ( ) ; $ ('# DefaultKeypad'). Keypad (); 

 ) . click ( function ( ) { $ ('# ViewKeypad'). Click (function () (
     'The current value is: ' + $ ( '#defaultKeypad' ) . val ( ) ) ; alert ('The current value is:' + $ ('# defaultKeypad'). val ());
 )); 

 ) . toggle ( function ( ) { $ ('# RemoveKeypad'). Toggle (function () (
         ) . text ( 'Re-attach' ) ; $ (This). Text ('Re-attach');
         ) . keypad ( 'destroy' ) ; $ ('# DefaultKeypad'). Keypad ('destroy');
     ),
     function () (
         ) . text ( 'Remove' ) ; $ (This). Text ('Remove');
         ) . keypad ( ) ; $ ('# DefaultKeypad'). Keypad ();
     )
 ); 

All other information, as well as demos and the files for download are found on the official site in the documentation or on the project page at jQuery directly.

How to use MooTools?

Inspired by an article by "chromasynthetic" I want to introduce some best practices for dealing with MooTools and explain them briefly.

• Elements to address
^? View Code JAVASCRIPT

1 2 3 4

/ / Javascript method "someID" ) ; document. getElementById ("someID"); / / With Mootools ) ; $ ('SomeID');

With Mootools much shorter and, above all in order to easily CamalCases.

• "Edit Value
^? View Code JAVASCRIPT

1 2 3 4

/ / Javascript method document. getElementById ( 'input' ) . value ; var val = document. getElementById ('input'). value; / / With Mootools $ ( 'input' ) . getValue ( ) ; var val = $ ('input'). getValue ();

Mootools provides several methods to change object properties, or read.

• Chaining methods
^? View Code JAVASCRIPT

1 2 3 4 5 6 7 8

/ / Javascript method ) . style . height = '100px' ; $ ('Div'.) Style. Height = '100px '; ) . style . background = '#ffc' ; $ ('Div'.) Style. Background = '# ffc'; / / With Mootools ) . setStyles ( { $ ('Footer'). SetStyles (( , height: '100px ', background: '# ffc' ));

Simple example of a concatenation of functions.

• Discontinuation of an AJAX-Requests
^? View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10

/ / Wrong method 'eine.php?var1=test&var2=request' ) ; new Ajax ('eine.php? var1 = test & var2 = request'); / / Better 'eine.php' , { new Ajax ('eine.php', ( data: ( , var1: 'test', var2: 'request' ) ));

Both possibilities lead to the same result. However, the clarity of the latter is significantly larger. For non-static variables such as the 'test' string can be at this point, of course, also use selectors.

• Event Handling
^? View Code JAVASCRIPT

1 2 3 4 5

/ / Wrong way ) . onclick = doSomething ; $ ('Container'). Onclick = doSomething; / / Better ) . addEvent ( 'click' , doSomething ) ; $ ('Container'). AddEvent ('click', doSomething);

The second option is far more secure, since it takes care of the Mootools Core to the implementation at the respective browsers.

• Simple iteration over element groups
^? View Code JAVASCRIPT

1 2 3 4 5 6 7

/ / Wrong way ) . each ( function ( el ) { $ $ ('Div.collapsed'). Each (function (el) ( 'click' , expand ) ; el addEvent ('click', expand); )); / / Better ) . addEvent ( 'click' , expand ) ; $ $ ('Div.collapsed'). AddEvent ('click', expand);

Both versions of select in this case, each div with the class of "collapsed" and put out a Click event. The "$ $" gives back elements in the form of an array, so that one iteration of each function is no longer necessary.
The same applies to:

^? View Code JAVASCRIPT

1 2 3 4 5 6 7

/ / Wrong way ) . each ( function ( el ) { $ $ ('Div.hidden'). Each (function (el) ( 'hidden' ) ; el removeClass ('hidden'); )) / / Better ) . removeClass ( 'hidden' ) ; $ $ ('Div.hidden'). RemoveClass ('hidden');

I hope one or the other starter is so clear to what extent different from the standard javascript using MooTools and how to use this Zusatzfunkionalitäten.

jQuery plugin translation SundayMorning

Yesterday I found a nice new plugin for jQuery.
SundayMorning jQuery plugin which allows site visitors to their content of a (string or DOM object) simply by clicking in more than 30 languages to translate one.

SundayMorning uses for it, the Google Translate API .
The translation can be applied to individual words, sentences run on with the menu for different languages or by event. The whole thing is available as a bookmarklet.

A simple example:

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

  / / Calling
 'bonjour' , { '$. SundayMorning (' bonjour ', (
     , source: 'fr',
     destination: 'en'
 function ( response ) { ), Function (response) (
     response. translation ) ; alert (Response.End translation);
 ));

 / / The result as an object
 response = (
     , translation: 'hello',
     , source: 'fr',
     destination, 'en'
 ) 

The vulnerability of the whole process will be the accuracy of Google's translation.
A demo and more information and to download the files you find on the official website .

jQuery Debugger

When developing a deeper look into the Prgrammcode object structure is often essential. A good debugger can save one hours of looking for errors. Therefore, I will briefly introduce a jQuery debugger. You can download it to you as a jQuery plugin on: jQuery Debugger
Once the plug is mounted (as usual with script tag and src attribute), you can invoke it with the following code:

  1
 2
 3

  new jQuery. debug ( ) ; var debug = new jQuery. debug ();
 / / ...
 Object ) ; . Debug dump (Object); 

Now a small example of this:

  1

  <input name="LieferName" value="" class="validate['required','length[6,-1]']" type="text" id="LieferName" /> 

The code is closer to this object might look like this:

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

  jQuery. debug ( { debug = new jQuery. debug ((
	 x : 'right' , y : 'bottom' } , Posto: (x: 'right', y: 'bottom'),
	 , width: '480px ',
	 , height: '50% ',
	 , itemDivider: '<hr>'
	 'tagName' , 'id' , 'innerText' , 'href' , 'value' ] listDOM: ['tagName', 'id', 'innerText', 'href', 'value']
	 ));

 showMeDebug function () (
   $ ( 'LieferName' ) ; var input = $ ('Delivery Name');
   input ) ; debug. dump (input);
 ) 

This would now showMeDebug after calling the function are on the lower right side of the screen a box in which all attributes of all "listDOM" for the object "input" is displayed.
For a form field, this function is only partially interesting. Reason to use the debugger for complex objects, most of all class instances.

It should be noted that prior to "debug = new jQuery.debug" may see the "var" declaration of JavaScript are available and "jQuery" must be replaced by $. The above script has been in the fashion of jQuery noconflict running.

Beautiful Multi-level Context menu on MooTools (right menu)

In the JonDos every morning of my blogroll I am today met with a nice multi-level Context Menu you that I will describe here.

The MooTools ContextMenu plugin , as in the original states, was by David Walsh in CSS, XHTML and written using MooTools.
This plugin allows you to create beautiful and functional context menus.
The plugin comes with an abundance of options:

• actions: (probably the most interesting) This will give various functions with the click on a link in the menu item.
• menu: The ID of the element that represents the menu XHTML
• Event stop: Stops the standard action of the item when the menu is selected.
• onShow: Calls a function when the menu is displayed.
• onHide: Calls to a function when the menu disappears.
• onClick: Calls a function when the menu is clicked.

A complete overview of the opportunities you find in the blog post from David .
A DEMO of it all is, of course.

And who the menu by David still not entirely convinced, which can also like to take a look at the Mif.Menu throw.
The Mif.Menu comes with rounded corners, drop shadows and more so.
Beipspiele and documentation can be found here.

So if you looking for a right-click or context menu, and for the MooTools is the first choice was to these two menus look more accurate.

MooTools removeClass problem

Hi,

on the weekend I have a few desperate attempts a CSS class of an input field with the method Objekt.removeClass ("CSSKLASSE remove).
After a long fruitless search on the net and browse through the documentation, it could not even figure out why it did not work, especially as the addClass function caused no problems.

In the end I found a whole easy way to bring the whole thing to run. I'd say, almost too easy to immediately come out.
Here's my workaround:

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

  / Using your own script selector object create /
 $ ( 'LieferName' ) ; var input = $ ('Delivery Name');

 / / Hide a DIV, after which the validation script by removing the CSS are disabled.  Reiner JavaScript syntax, you would also Mootools code can use it ..
 'liefer' ) . style . display = 'none' ; document. getElementById ('Delivery'). style. display = 'none';

 / / The following function remained inconclusive
 / / Input.removeClass ('validate [\' required \ ', \' length [6, -1] \']');

 / / Workaround, just the object attribute as an empty string simply define
 "" ; input. className = "";

 / / Changes to the validation script to make known
 input ) ; MyCheck. register (input); 

This can now be used in the popular browsers, simply remove a CSS class at runtime.

GX - Javascript Framework animations to jQuery

Riccardo Degni which one or possibly by other moo.rd known, has a new super slim (10kb), cross-browser compatible-framework published on jQuery animations.
With GX, complex animations, with all W3C konfromen create CSS elements.

GX is not just a simple library to create his animations. Riccardo wants to go on with GX and it will be a FULL-FEATURED-NET Framework with which the soft, custom and create complex animations with easing leave.

Were important in the development Riccorado two main objectives:

• "Write Less, Do More" by jQuery. With the GX one should ever have to write as little code as possible in order to achieve the best results.
• "Do not Repeat Yourself". If a functionality more than once used by GX, this is reused internally without duplicating them.

The beautiful of the whole of history is the ease of implementation. Where previuos various scraps script needed now were a few simple lines are sufficient to create complex animations.

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

  / / Simple animation
 ) . gx ( { 'width' : '+=200px' , 'height' : '4em' , 'opacity' : 0.4 , 'color' : '#ff0' } , $ ('Element'). Gx (('width': '+ = 200px' 'height,': '4 em ',' opacity ': 0.4,' color ':' # ff0 '),
 ; 4000);

 / / Queue animations
 ) . gx ( { width : 0 } , 200 ) $ ('Element'). Gx ((width: 0), 200)
             width : 200 } , 4000 ) . Gx ((width: 200), 4000)
             width : 0 } , 'verySlow' ) . Gx ((width: 0), 'verySlow')
             width : 100 } , 'slow' ) ; . Gx ((width: 100), 'slow');

 / / "Complete 'callback
 ) . gx ( { width : 200 , height : 200 } , 2000 , 'Bounce' , function ( el ) { $ ('Element'). Gx ((width: 200 height: 200), 2000, 'Bounce', function (el) (
   'The animation is completed!' ) ; el html ('The animation is completed');
 ));

 / / 'Start' and 'Complete' callbacks
 ) . gx ( { width : 200 , height : 200 } , 2000 , 'Bounce' , $ ('Element'). Gx ((width: 200 height: 200), 2000, 'Bounce'
   : function ( el ) { el. html ( 'The animation is started!' ) ; } , ('Start': function (el) (el html ('The animation is started');)
    function ( el ) { el. html ( 'The animation is completed!' ) ; } } 'Complete': function (el) (el html ('The animation is completed');))
 ); 

For more information, examples and documentation are available on the official website .

Selectors in jQuery

I want to start a series in the piece by piece, the handling of its elements jQuery, selectors, plugins, etc. is described. .. I will begin with a description of the various selectors

Basic selectors

• $ ('Code')
• $ ('# SomeID')
• $ ('. SomeClass')
• $('*')

  1

  "border" , "3px solid red" ) ; XXX. Css ("border", "3px solid red"); 

XXX for just one of the above selectors will be used. In particular, the form with *, which is applied to all elements in the document.

Simple filtering

• $ ('Li: first')
• $ ('Li: last')
• $ ('Li: not (li: first)')
• $ ('Li: even')
• $ ('Li: odd')

These selectors select elements under a certain conditions. "Li-first" example is a reference to the first item in an unordered list. "Li: not (li: first)" are references to all points except the first list, and allows a desired manipulation of these objects.

  1

  ) . css ( "background-color" , "#bbbbff" ) ; $ ("Tr: even"). Css ("background-color", "# bbbbff"); 

This code would change in a table for each even-numbered index, the background color using the CSS property to a new color.

Content Filter

• $ ('Li: contains (' stringXXX ')')
• $ (': Empty')
• $ ('Li: has (a)')
• $ ('P: parent ")

"Contains" would change here all the list elements in which the string phrase "stringXXX" occurs.
"Empty" examine all the elements that whether a child node in the DOM tree is available. Even a simple text in a p-day would not be returned.

  1

  ) . text ( "Was empty!" ) . css ( 'background' , 'rgb(255,220,200)' ) ; $ ("Td: empty"). Text ("What empty!"). Css ('background', 'rgb (255,220,200)'); 

Visibility Filter

• $ (': Hidden')
• $ (': Visible')

See also: 3-simple-tips-for-the-adjustment-to-jquery-1.3

Attribute filter

• $ ('Li [class]')
• $ ('A [rel = "self"]')
• $ ('[Class ^ = "my"]')
• $ ('A [title $ = "blog"]')

An interesting possibility is to filter elements using an attribute. "Li [class]," says the one or more element (s) that have a class attribute.
"A [rel =" self], "" indicates link to elements of tags which the attribute "rel possess" the value of self ".
The third point list shows all the node elements in their class attribute with "my start."
The last point is a way to search for items that have at the end of an attribute a specific string as a value.

  1

  ) . val ( "news here!" ) ; $ ("Input [class ^ = 'my']"). Val ("news here!"); 

Forms

• $ (': Input')
• $ (': Text')
• $ (': Radio')
• $ (': Checkbox')
• $ (': Submit')
• $ (': Image')
• ...

This can be specified in HTML forms of address form fields.

Form Filter

• $ ('Input: enabled')
• $ (': Disabled')
• $ (': Checked')
• $ (': Selected')

These filters can be derived from various properties of the elements reference the form fields. So can can use with the above selectors for example, all fields are currently the property address and manipulate have disabled.

  1

  ) . val ( "this is it" ) ; $ ("Input: disabled"). Val ("this is it"); 

sIFR 3 r436 - scrolling problem in Firefox 3, ie6 / 7

Yesterday I had one of my projects in sIFR 3 revision 436 installed and have a problem with the scroll-behavior encountered it.
The problem is to get there while scrolling the mouse over a sIFR text produced by the side of the scroll element loses focus and stops.
What leads to an unacceptable service for the user of the site. The problem is well known, however, can be found on the net is not really a solution.
So I wanted to show you this short workaround withheld.

You get out there while the whole that in Firefox 3 is working smoothly, but there it makes the Internet Explorer problems.
And fixed it all so it runs in IE, who would have thought it, the whole thing in Firefox no longer.
Firefox may be required for the smooth running of a "wmode: 'transparent'," which, however, not at all the IE.
For the IE must also be set background-color.

The solution:
sIFR comes from the outset with a function for the user-agent therefore see that for themselves to solve the problem here can be used perfectly.

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

  futura ) ; sIFR. activate (futura);

 { src : 'futura.swf' } ; futura var = (src: 'futura.swf');

 sIFR. ua . gecko ) { if (sIFR. others. gecko) (
	 futura , { sIFR. replace (futura, (
		 , selector: 'h1',
		 , wmode: 'transparent',
		 , Fixed focus: 'true',
		 css: [
			 '. SIFR-root (background-color: # FFFFFF; color: # 000000; text-transform:; margin uppercase: 0;)'
			 , 'A (color: # 000000; text-decoration: none;)'
			 , 'A: hover (color: # 000000 text-decoration: underline;)'
		 ]
	 ));
 { ) Else (
		 futura , { sIFR. replace (futura, (
		 , selector: 'h1',
		 , Fixed focus: 'true',
		 css: [
			 '. SIFR-root (background-color: # FFFFFF; color: # 000000; text-transform:; uppercase margin: 0;)'
			 , 'A (color: # 000000; text-decoration: none;)'
			 , 'A: hover (color: # 000000 text-decoration: underline;)'
		 ]
	 ));
 ) 

This is a simple example how to differentiate from other browsers such as Firefox.

Can distinguish the following browsers:
opera, konqueror, ie, ieSupported (for Smartphones), ieWin, windows, ieMac, macintosh, safari, webkit, khtml, gecko.
In addition to query and operating system versions and so on. Who's want to know exactly easy sometimes to look at the starting line sifr.js 354th

Even a small tip regarding sIFR and umlauts. Before you publish your swf in Flash is the font palette, character embedding and to give additional ""''... & _ have yet to integrate with äöüÄÜÖß to these characters.

3 simple tips for adjusting to jQuery 1.3

A few months ago came the Realease jQuery 1.3. Many scripts were based on the previous versions are still decent. But here and there, but problems occur when you upgrade. These problems can be classified according to Karl Swedberg in three levels:

1st Update of the "selector" attribute

Probably the most common errors caused by the redefinition of the selector attributes. In previous versions of the attributes of an element with the XPath expression "@ attributes were addressed and changed. 1.3 and the response is based on the CSS syntax. For this purpose a small example:
Former syntax:

  1
 2

  ) ; $ ('A [@ href ^ = http]');
    ) ; $ ('[@ Title = foo]'); 

News in jQuery 1.3:

  1
 2

  ) ; $ ('A [href ^ = http]');
       ) ; $ ('[Title = foo]'); 

2nd Review their own selectors

Will create their own selectors used, it is now and again to errors when the second argument of the new object is a String.

  1
 2
 3

  jQuery. expr [ ':' ] , { jQuery. extend (jQuery. expr [':'], (
         hasSiblings: "jQuery (a). siblings (m [3]). length> 0"
       )); 

This can be remedied simply by an anonymous Javascript function which has a return value to the string.

  1
 2
 3

  jQuery. expr [ ':' ] , { jQuery. extend (jQuery. expr [':'], (
     ( a , i , m ) { return jQuery ( a ) . siblings ( m [ 3 ] ) . length > 0 ; } hasSiblings: function (a, i, m) (return jQuery (a). siblings (m [3]). length> 0;)
  )); 

Third Notation to "Hidden" and "Visible" set elements

When one before version 1.3.2, an element with the property "display: block" was that within another element with "display: none" was, then the inner elements were still issued with a query in the code visible.

  1
 2
 3
 4
 5

  <div id="outer1" style="display:none">
         <div id="inner1">
             Not visible div
         </ Div>
       </ Div> 

Before version 1.3.2 of the call $ ('# inner'1). Would have is (': visible return to ') and held true $ (' # inner1: hidden ') would have returned 0 items.

As of 1.3.2 does $ ('# inner'1). Is (': visible false ') to the value and $ (' # inner: hidden ') is a suitable element.