Original Question

Is there a well tested and preferably mature library out there for creating forms in PHP with both client side (this is where the jQuery comes in) and server side validation?

Ideally the form would either be generated from PHP classes or written as plain HTML and parsed ala Agavi. The correct jQuery hooks would then automatically be created by the library so that the included jQuery client side validation can run.

One of the jobs I do regularly is some variation on the good old contact form and I would like to standardise this work so that I can trot out the same best practice code each time. With this in mind the HTML generated by the PHP classes should be good enough so that extra CSS hooks can be added where needed etc.

Any suggestions gratefully received.

---

Update

I have been combing through and reviewing the options that I have found and that others have suggested below and at the moment I would rank the projects in the following order for quality from the small amount of testing and research I have done on all of them.

1. ValidForm Builder
2. jFormer
3. HTML_QuickForm2 (if you can get the client side validation working then this should jump higher than jFormer!)
4. php-form-builder-class
5. Use Symfony! (a whole MVC framework for form rendering and validation is overkill)

I am still unconvinced by any of the options to be honest and I am left wondering why people who embark on these projects do not start with some solid and well tested components. For example I would have thought a combination of:

• jQuery Tools (client side validation, datepickers, etc)
• Symfony form component perhaps
• Perhaps with Respect Validation

Would give you a good stable base to work from and produce a nice library on top of tested components.

Also if you are interested in a library that parses your HTML rather than generating the HTML from a PHP class I have found a project called Minacl. Like the Agavi option I mentioned in the original question.

You can use ValidForm Builder. It matches perfect to your requirements: With it you can define Forms with validation rules in PHP, and it generates the Forms with jQuery and client side validation.

Feature List (taken from their site):

• the API generates XHTML Strict 1.0 compliant code.
• Field validation on the client side to minimize traffic overhead.
• Field validation on the server side to enforce validation rules and prevent tempering with the form through SQL injection.
• Client side validation displays inline to improve user satisfaction. No more annoying popups that don't really tell you anything.
• Easy creation of complex form structures.
• Uses the popular jQuery Javascript library for DOM manipulation.
• Completely customizable using CSS.
• Automatic creation of field summaries for form mailers in both HTML and plain text.
• it's open source and therefore completely free!

I'm looking for the best solution to adding both "doubletap" and "longtap" events for use with jQuery's live(), bind() and trigger(). I rolled my own quick solution, but it's a little buggy. Does anyone have plugins they would recommend, or implentations of their own they'd like to share?

It has been reported to jQuery as a bug, but as doubletapping isn't the same as doubleclicking, it does not have a high priority. However, mastermind Raul Sanchez coded a jquery solution for doubletap which you can probably use! Here's the link, works on mobile Safari.

It's easy to use:

$('selector').doubletap(function() {});

-edit-

And there's a longtap plugin here! You can see a demo on your iPad or iPhone here.

I have a blank <a> tag that content is loaded into via an external piece of javascript. I want to observe the <a> and when its content changes perform another task. The content will only ever change once.

Can this be done?

I am using also using jQuery.

Thanks in advance

You can use a mixture out of jQuery && DOM Level 3 events (see browser support below).

If you want to check for any changes within the content, you could do this:

var $a = $('a');

$a.one('DOMNodeInserted', function(e) {
    console.log('content changed!: ', e);    

    console.log('new content: ', $(this).html());   
});

$a.one('DOMAttrModified', function(e) {
    console.log('attribute changed!: ');        

    console.log('attribute that was changed: ', e.attrName);
});

See this code in action: http://jsfiddle.net/wJbMj/1/

Reference: DOMNodeInserted, DOMAttrModified

---

While the above solution is actually pretty convinient to me, it'll only work in browser that support those events. To have a more generic solution, you can hook into jQuerys setter methods. The downside in this solution is, that you will only catch changes that were done through jQuery.

var _oldAttr = $.fn.attr;
$.fn.attr = function() {
    console.log('changed attr: ', arguments[0]);
    console.log('new value: ', arguments[1]);
    return _oldAttr.apply(this, arguments);
};

You could hook into .text() and .html() the exact same way. You would need to check if the this value within the overwritten methods represent the correct DOMnode.

Hello,

To begin with, I believe I know jquery basics quite well. I want to learn more and be able to make more complex things (like live chat with many features or something like that).

So, can anyone suggest me good jQuery books or tutorials online to help me become really advanced in this field.

I have an idea and I want to make it as optimal and clever as possible.

Thank you very much.

• Ajax (programming) - ^Read
• Comet (programming) - ^Read
• The AJAX response: XML, HTML, or JSON? - ^Read
• Quick and Dirty AJAX (Ajax vs Haha) - ^{Read & Screencast}
• The myth of "real time" - ^{Read & Tutorial}
• Writing a JavaScript/PHP Chat Server - ^{Read & Tutorial}

---

• 5 Ways to Make Ajax Calls with jQuery - ^Tutorial
• The jQuery Cross-Domain Ajax Guide - ^Tutorial
• jQuery Ajax – Handling unauthenticated requests via Ajax - ^Tutorial
• Detect duplicate user sessions via AJAX with jQuery + PHP - ^Tutorial
• Ajax Content Type Handling in jQuery - ^Tutorial
• PHP jQuery AJAX Javascript Long Polling - ^{Read & Tutorial}
• JQuery PeriodicalUpdater (AJAX long polling/server polling) - ^Plugin
• Implementation of Bayeux protocol for jQuery - ^Plugin

---

• Building a jQuery/PHP Powered Chat Room - ^Tutorial
• JQuery + PHP + MySQL- AJAX Chat Box - ^Screencast
• Making an AJAX Web Chat - Demo - ^Tutorial
• How to Create A Simple Web-based Chat Application - ^Tutorial
• Gmail and Facebook Style jQuery Chat - Demo - ^Tutorial
• Create a shoutbox using PHP and AJAX (with jQuery) - Demo - ^Tutorial

I am a JS programmer and I have been experimenting with jQuery a lot but have run into a couple puzzling aspects.

I feel like people use jQuery for much more than necessary. I really just want to know why picking jQuery may be better than using just pure JS.

I know it makes sense for webfx like the animate and fades but for things like adding event listeners it seems just as easy to use

obj = document.getElementByID(_ID_);
obj.addEventListener("mousedown"...);

An example of this is the answer I found on StackOverflow earlier today about performing an action for highlighted text. jQuery: get the highlighted text

In the example linked in the answer at http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html

The guy uses the bind function to the document. Why use bind rather than addEventListener. Also with jQuery everything needs to be included in the .ready() method how is this better than (or why choose it over)

document.addEventListener('load', function () { ... }, false);

There are other times I have seen jQuery used that puzzled me, I hope you guys can shine some light on it for me.

People use jQuery because it's simpler, easier, and more powerful, and because it helps them forget about IE.

To answer your specific questions:

1. Otherwise, you need to call attachEvent for IE.
   Also, jQuery event handling has simpler syntax, and supports live events.

2. jQuery does not require you to put everything in a ready handler; it's actually better to move your code to the bottom of the page and execute it immediately.
   Unlike document.addEventListener('load', ...), jQuery's ready event will not wait for images to load.
   Also, it works in IE, and it will still run your code even if the document already loaded.

I've been researching for a few hours now and couldn't find any real sources for this. I'm building a site in ASP.NET MVC 3 and would like to take advantage of the Markdown editor that StackOverflow uses. Does anybody have a good tutorial?

Where do you download the latest markdown? What language is it written in? Where would I start in integrating this into an MVC 3 project? Even after all the searching and reading I've done I'm still pretty confused.

I came across one site. http://daringfireball.net/projects/markdown/ But this seems outlandishly old and it would seem I would have to learn a little something about CGI and PERL which I have absolutely no experience with. A javascript/jQuery version would be splendid. Any ideas, links, references are much much much appreciated.

UPDATE

I noticed this question is getting a fair amount of views so I decided to update it with some helpful references. I managed to get a Markdown editor working nicely on CodeTunnel.com and I wrote a few blogs about it. Hopefully they help anyone who comes across this question.

• MarkdownSharp and Encoded HTML
• JQuery WMD Plugin
• Finding and implementing the WMD editor

Stackoverflow open sourced their version of Markdown to the world. Its called MarkdownSharp and is written in C#.

Somebody wrote a HtmlHelper here: http://blog.dantup.com/2011/03/an-asp-net-mvc-htmlhelper-extension-method-for-markdown-using-markdownsharp

If you are looking for how to implement a javascript editor there is an existing question: Integrate Markitup text editor to ASP.NET MVC project

Alright, I've search the jQuery docs (needs somebody devoted to maintaining), I've searched SO, and I've searched Google. I can't find the answer to this question.

---

In Words

In the past, I remember jQuery working like this:

$('#myObj').width() returns the computed width of #myObj.
$('#myObj').css('width') returns the width as it is entered into the CSS stylesheet.

Now, any jQuery package I use returns the exact same number no matter which method I use.

$('#myObj').width() returns the computed width of #myObj as an integer (float?).
$('#myObj').css('width') returns the computed width of #myObj as a string with px on the end.

---

In Pseudocode

#myobject{
    width: 14em;
    height: 14em;
}

<div id="myobject">Has Text</div>

<script type="text/javascript">
    $( '#myobject' ).click(function(){
        alert($(this).css('width') + "\n" + $(this).width());
    });
</script>

//Always alerts "224px [newline] 224"
//Expected to alert "14em [newline] 224"

---

These pixel-based return values are almost completely useless, as I need to do calculations based on what's actually in the CSS. For example, I want to do math on the left position of an element, but I can't because it keeps returning pixel values, which are worthless in an em-based design.

Is there any way to get the actual values out of the CSS in jQuery?
Is this a jQuery bug, or am I missing something?

Here's a jsfiddle: http://jsfiddle.net/yAnFL/1/.

---

Resolution

Apparently, this is the intended result.
I have decided to use this plugin to do conversions for me.
Taking away control of CSS seems like a poor choice in the jQuery design.

This is not a complete answer to your question but it may be a working solution to caclulate the em values. I adapted this function from here. And here is the updated fiddle.

$.fn.emWidth = function(){
    var wpx = this.width();
    var temp = $('<div />').css({
        width:'1em', 
        position: 'absolute'
    });
    this.append(temp);
    var oneEm = temp.width();
    temp.remove();
    var value = wpx/oneEm;
    return Math.round(value*100)/100;
};

I am currently trying to figure out what click event handlers have attached to my div. There should only be one handler attached, but there appears to be at least one. I'm using FireBug but Chrome could be an option as well. I don't like IE so I'd prefer not to use that.

The best case scenario is that I can inspect my div using FireBug, and see a list of event handlers.

Visual Event is a nice javascript bookmark you can run on a page to see all the events that are attached to a control.

I'm able to detect the cut, copy, paste events with the following code

$('#searchInput').bind('cut copy paste', function (e) {
  setTimeout("handleMouseEvents();", 10);
});

Is it possible to detect the following events

1. delete input box text with mouse
2. drag text to input box
3. drag text away from input box
4. undo action from mouse context menu or form 'Edit' menu

I tried binding on mousedown and mouseup, but not working

$('#searchInput').bind('cut copy paste mousedown mouseup', function (e) {
  setTimeout("handleMouseEvents();", 10);
});

I was able to get binding to work for these events cut copy paste mousedown mouseup focus blur

which should cover you on delete, drag out, drag in circumstances but you won't necessarily know that much detail just that the field has changed and which bound event caused the change, I think you'd also have to keep tabs on the current/previous value of the input field between events.

Here's the jsfiddle I was playing with http://jsfiddle.net/9aRxb/1/

I'm working on a project and I'm really trying to write object-oriented JavaScript code. I have just started reading Douglas Crockford's JavaScript: The Good Parts and I'm quickly beginning to realize that writing Java-esque OOP in JavaScript will be a difficult task.

Thus far, I've written something like the following...

// index.html
$(document).ready(function() {

   $().SetUpElements();
});

// this is in a different js file
$.fn.SetUpElements = function() {

    // do stuff here
    $().UpdateElement();
};

// this is in yet another different js file
$.fn.UpdateElement = function() {

   // do stuff here
   var element = new Element(id, name); // continue doing work
};

function Element(id, name) {

   var id = id;
   var name = name;

   // other stuff
};

... the idea being that I want objects/functions to be refactored and decoupled as much as possible; I want to reuse as much code as I can. I've spread a lot of my code across different .js files with the intention of grouping specific relevant code together, much like if you would write different classes in Java.

As I've been learning more about jQuery, I realized that the notation $.fn.foo = function() { ... }; is actually adding this foo function to the prototype of all jQuery objects. Is this something I should be doing? Am I misusing jQuery somehow?

I would appreciate suggestions on how to improve my approach to OOP in JavaScript and I would love to see references to sources/tutorials/articles/etc... that discuss this topic. Please feel free to provide feedback even if an answer has been selected. I am looking for your advice... this is why I posted :)

Much appreciated, Hristo

** Note: I'm not developing a jQuery plugin. I'm developing a web app and heavily making use of jQuery.

I would say the first way you're creating methods is a misuse of jQuery. The jQuery.fn.foo syntax is generally reserved for functions that act upon a DOM element but you're using them as static functions, by using an empty jQuery object.

If you want to create static functions under the jQuery namespace, you can do:

jQuery.foo = function(){};

then call it via:

jQuery.foo();

instead of:

jQuery.fn.foo = function(){};

which allows you to do:

jQuery('#someElementId').foo();

In terms of OOP. there are many different approaches (module pattern, prototype, factory...). The way I generally approach it, is create a Class as a static function, then invoking it with the keyword new

(function($){
    var undefined;

    $.ClassName = function(options){
        var self = this;
        var cfg = $.extend(true, {}, this.defaults, options);

        // ********************
        // start:private
        // ********************
        function _init(){

        };

        // ********************
        // start:public
        // ********************
        this.methodName = function(){

        };

        _init();
    };

    $.ClassName.prototype.defaults = {};
})(jQuery);

In terms of reusing functionality, there's a threshold after which decoupling is more detrimental than anything. Make sure you keep the right balance of modularity and organization.

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy.

Anyone want to try?

You're going to laugh at how easy this is to do, but you will need to modify the plugin (demo).

Basically, I changed line 82 - 85 from this (all that needed changing was top to bottom but I added both so you can switch back and forth):

    var position = {
      left: props.colW * shortCol + props.posLeft,
      top: minimumY
    };

to this:

    var position = (opts.fromBottom) ? {
      left: props.colW * shortCol + props.posLeft,
      bottom: minimumY
    } : {
      left: props.colW * shortCol + props.posLeft,
      top: minimumY
    };

Then added the option in the defaults:

  // Default plugin options
  $.fn.masonry.defaults = {
    singleMode: false,
    columnWidth: undefined,
    itemSelector: undefined,
    appendedContent: undefined,
    fromBottom: false, // new option
    saveOptions: true,
    resizeable: true,
    animate: false,
    animationOptions: {}
  };

Now you can just use the plugin like this:

$('#masonry').masonry({ fromBottom: true });

---

Update: I also forked the repository on github, so you can just download the changes if you don't want to do them yourself.

Hi guys, I'm building a browser game and im using a heavy amount of ajax instead of page refreshs. I'm using php and javascript. After alot of work i noticed that ajax isnt exactly secure. The threats im worried about is say someone wants to look up someones information on my SQL server they'd just need to key in right information to my .php file associated with my ajax calls. I was using GET style ajax calls which was a bad idea. Anyways after alot of research i have the following security measures in place. I switched to POST (which isnt really any more secure but its a minor deterent). I have a referred in place as well which again can be faked but again its another deterrent.

The final measure i have in place and is the focus of this question, when my website is loaded i have a 80 char hex key generated and saved in the session, and when im sending the ajax call i am also sending the challenge key in the form of

challenge= <?php $_SESSION["challenge"]; ?>

now when the ajax php file reads this it checks to see if the sent challenge matchs the session challenge. Now this by itself wouldnt do much because you can simply open up firebug and see what challenge is being sent easily. So what I'm having it do is once that challenge is used it generates a new one in the session.

So my question is how secure is this from where im standing it looks one could only see what the challenge key was after it was sent and then it renews and they couldnt see it again until it is sent, making it not possible to send a faked request from another source. So does anyone see any loop hole to this security method or have any addition thoughts or ideas.

See the answer by 'meagar'.

I'd like to mention:

By passing around an identifier in Session, you're doing what the Session is already doing. There's usually a cookie with a unique identifier similar to the one you're generating, which is telling your application, essentially, who that person is. This is how PHP sessions work, in general.

What you would need to do, in this case, is check that for a given request - POST or GET - that the particular user (whose unique user ID, or similar, is stored in the Session) has permission to add/change/delete/whatever with that particular request.

So for a "search" request, you would only return results that User X has permission to view. That way, you don't worry about what they send - if the user doesn't have permission to do something, the system knows not to let them do it.

Hence "you should be authenticating all requests".

Someone feel free to add to this.

Possible Duplicates:
How does this JavaScript/JQuery Syntax work: (function( window, undefined ) { })(window)?
What advantages does using (function(window, document, undefined) { … })(window, document) confer?

i have seen many javascript libraries create a variable named "undefined", iam unable to figure out its purpose, below are lines copied from jQuery library

 * Date: Wed Feb 23 13:55:29 2011 -0500
 */
(function( window, undefined ) {

// Use the correct document accordingly with window argument (sandbox)
var document = window.document;
var jQuery = (function() {

Please suggest me the reason and benefits of doing so!!

What you will see is something like this:

(function(undefined) {
    /* lots of code */
}());

This creates an anonymous function and immediately executes it. The function has a parameter called undefined. Since there is no argument passed to the function, the variable undefined is in fact the Javascript primitive value undefined.

So why do you want to do this? Well, the problem is that you can actually create a variable with the name undefined and set it to anything you like, e.g.:

var undefined = 'some text';

A test myvalue === undefined within your code would then have unexpected results.

The anonymous function with the parameter called undefined essentially "resets" the value of undefined to the primitive value, so that you can check against it if you wish without having to worry about whether it has the right value.

Can not figure out how to theme an ajax loaded recaptcha. The below code does not work.
From Google Recaptcha

Saw this post Recaptcha ajax API custom theme not working, but I am definitely viewing in localhost and recaptcha is working fine, just not changing themes.

Anyone have advice on how to get the white theme to work?

    <script type='text/javascript'>
        var RecaptchaOptions = {
            theme : 'white'
         };
    </script>
    <div id="recaptcha_content">
      <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q" height="300" width="500" frameborder="0"></iframe><br />
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type='hidden' name='recaptcha_response_field' value='manual_challenge' />
      </noscript>
    </div>
    <script type="text/javascript">
    $(document).ready(function() {
        $.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
            function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content");
        });

    });
    </script>

I't doesn't look like you are adding your options that you have set RecapthcaOptions. Try changing to:

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
        function() {Recaptcha.create("6Ldr7woAAAAAADa_69Mr-EZKAeYyEx9N08q", "recaptcha_content", RecaptchaOptions);
});

See the doc's, the third option passed to the .create() method is the options. You are setting up a variable outside the function to set the options, but don't include them.

I can imagine the correct answer to this based on theory, but I'm just looking for some confirmation. I'm wondering what the most efficient way to re-use a jQuery-selected element is. For example:

$('#my_div').css('background','red');
//some other code
$('#my_div').attr('name','Red Div');

vs.

myDiv = $('#my_div');
myDiv.css('background','red');
//some other code
myDiv.attr('name','Red Div');

I assume the second example is more efficient because the element #my_div doesn't have to get found more than once. Is that correct?

Similarly, is it more efficient to first save $(this) in a varaible, such as 'obj', and then reuse 'obj' rather than using $(this) over and over? In this case, jQuery isn't being forced to find an element over and over again, but it IS being forced to convert this to a jQuery object [$(this)]. So as a general rule of thumb, should a jQuery object ALWAYS be stored in a variable if it will be used more than once?

if you're using jQuery selector (like $('#element')), then yes, you should always store your results.

if you're using object and wrapping it in jQuery (like $(this)), it's not necessary, because jQuery doesn't need to search for that element again.

Hey, I'm not sure if this is possible but anyway. Say for example:

<div id="foo">
    <a href="#" id="bar">Remove Parent</a>
</div>

$(function() {
    $('#bar').click(function() {
        $(this).parent().remove();
    }); 
});

Is it possible that you can remove the parent container, in this example #foo but keep the child anchor tag #bar?

In this situation you'd be looking for .unwrap()

example...

$(function() {
    $('#bar').click(function() {
        $(this).unwrap();
    });
});

So jQuery handles DOM manipulation, event handling, and special effects. Ext JS also does that, plus has a lot of built-in UI components.

Here's the question. Is there anything substantial that jQuery has that Ext JS doesn't?

Here's the context. I've been wondering what reason people would have of using both Ext JS and jQuery. Some guesses:

• They feel more comfortable with jQuery, but need the extra capabilities of Ext JS
• They have a site already in production with jQuery, need to add Ext JS, and don't want to rewrite what's already there
• There's something that jQuery has that Ext JS doesn't

Basically, ExtJS provides a completely different set of features that jQuery. Like you said, jQuery is designed and optimized for DOM manipulation (selectors, attributes, traversing, effects etc), whereas ExtJS' primary purpose is to provide a rich component library for user interfaces.

If you're working with the DOM and you aren't creating any kind of user interface then stick with jQuery, but if you're creating a rich web app then ExtJS is for you.

Whilst ExtJS provides some basic DOM manipulation in it's Ext.Element class, it is nothing on jQuery and many people use the two together for this reason.

A <select> might be good for choosing between 3-15 simple items, but how do you deal with 15-100+?

The simplest option would be to just have a plain <select> with a lot of <option>s, but it's not very user friendly. There's a lot of scrolling and it might be hard to find the option you are looking for. The benefit is that you can (maybe with scrolling) see all the options you have.

A more advanced option would be to have a text field with autocomplete. A user types in a letter or two, and search results come back which you choose from. It makes it easier to find the option you are looking for - if you know what you are looking for. The drawback is that the user can't see all the options.

An even more advanced option would be to build a "search, list and choose" widget which defaults to show X items, but allows you to search. An advantage of this approach is that I can allow search on multiple attributes and not just the name of the item which is to be selected.

1. What solutions have you deployed in these situations?
2. Is there a jQuery plugin I should know about?

1. The solution that I like to use is provide the user a select list with all the options (should they want to look through it), but provide an autocomplete feature which searches through the list as they type into it. Sort of a hybrid of your first and second options.
2. As for plug-ins, there are a number out there (as well as documentation which will lead you to more) that can help you here:
   • http://plugins.jquery.com/project/jquery-select-autocomplete
   • http://docs.jquery.com/Plugins/Autocomplete/autocomplete
   • http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/

Can someone help me get this code working in IE please:

HTML:

<p>Alex Thomas</p>
<button id="click">Click</button>

JS

$('#click').click(function(){
    var range = window.getSelection().getRangeAt(0);
    var selectionContents = range.extractContents();
    var span = document.createElement("span");
    span.style.color = "red";
    span.appendChild(selectionContents);
    range.insertNode(span);
});

Coded up here: http://jsfiddle.net/WdrC2/

Thanks in advance...

IE prior to 9 doesn't support window.getSelection(). You can use document.selection instead (see this msdn page for the description). This selection object has a method createRange() that returns a TextRange object (see this msdn page for details).

Note that both the selection and textrange objects are Microsofts own implementation and do not follow the W3C standards. You can read more about the textrange and range issues on www.quirksmode.org/dom/range_intro.html.

The following implementation works in IE:

$('#click').click(function(){
    var range = document.selection.createRange();
    range.pasteHTML("<span style='color: red'>" + range.htmlText + "</span>");
});

It's not nearly as nice as the other implementation since you have to work with strings instead of the dom. There is a little hack where you paste <span id="myUniqueId"></span> as a placeholder, and afterwards replace it using the dom. You still have to work with range.htmlText or range.text though.

BTW: the above implementation is obviously IE only. You have to use some browser capability detection to decide which version to use.

How can I modify this jQuery easing function to produce a less exaggerated bounce?

$.easing.easeOutElasticSingleBounce = function (x, t, b, c, d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
    if (a < Math.abs(c)) { a=c; var s=p/4; }
    else var s = p/(2*Math.PI) * Math.asin (c/a);
    return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
};

I'm looking to produce an easing function that emulates this:

http://sandbox.scriptiny.com/tinyslider2/

tinyslider2 uses a similar function that looks something like this:

new Function(this.n+'.slide('+(i==1?t+(12*d):t+(4*d))+','+(i==1?(-1*d):(-1*d))+','+(i==1?2:3)+','+a+')')

But I can't seem to get my head around the math today to fit tinyslider2 equation into the jQuery easing format. If someone can show me an example, I would appreciate it very much.

UPDATE

This equation is very close:

$.easing.custom = function (x, t, b, c, d) {
    var s = 1.70158; 
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

I just need only the ending bounce without the beginning bounce.

http://timotheegroleau.com/Flash/experiments/easing_function_generator.htm allows you to visually create an easing function. If you toggle the F5/FMX radio button in the top right, it gives the output in JavaScript.

Without knowing exactly the effect you want, this should get you pretty close.

$.easing.tinyslider = function(x, t, b, c, d) {    
    ts=(t/=d)*t;
    tc=ts*t;
    return b+c*(-8.1525*tc*ts + 28.5075*ts*ts + -35.105*tc + 16*ts + -0.25*t);
}

Otherwise fiddle around with the easing function generator and try new options or look up http://commadot.com/jquery/easing.php for more resources.

jsfiddle

http://jsfiddle.net/XRF6J/

This was fun to answer, I always wanted to find out how those easing functions worked.