Exposing an element (using jquery tools)

Question

on the onClick event of a button, I'm trying to expose a form (login form) using the Jquery tools Expose (http://flowplayer.org/tools/expose.html) but it doesn't seem to be working ..

 

// execute your scripts when the DOM is ready. this is a good habit
$(function() {

    var api1 = $("#login-area").expose({api:true, lazy:true, color: '#78c'});

});
 

Here is the part I'm trying to Expose

<div id="login-area"> 
   <div class="ttl-area"> 
      <h2 class="ttl-login"><span>Login</span></h2> 
   </div> 
   <!-- start login-area --> 
   <div class="login-area"> 
      <div class="login-holder"> 

         <form Id="loginForm" action="/raceday/Account/Login" method="post"> 
            <fieldset> 
               <label for="UserName" id="UserName_Label">Email:</label><input id="UserName" name="UserName" type="text" value="" /> 
               <label for="LoginPassword" id="LoginPassword_Label">Password:</label><input id="LoginPassword" name="LoginPassword" type="password" value="" /> 
               <div class="row"> 
                  <a href="/raceday/Account/ForgotPassword">Forgot your password?</a> 
               </div><br /> 
               <input class="lock btn" id="Login" name="Login" type="submit" value="Login" /> 
            </fieldset> 
         </form> 
      </div> 

      <strong class="ttl">New user to RacedayWorld.com? Signup below:</strong> 
      <form action="/raceday/Account/Edit" method="get"> 
         <input class="new btn" id="New_User" name="New_User" type="submit" value="New User" /> 
      </form> 
   </div> 
</div>

Here is the call to Expose the element

<input type="button" class="register btn" onclick="api1.load()" value="Sign up for this Event" />

Answer 1

Make sure:

• that you include jquery.js
• that you include expose.js
• that color should not have a true hexadecima: (aka #78C78C instead of #78C)

Also, don't use inline javascript but specify the onclick inside your main process.

So give your input a unique id:

<input type="button" id="exposeButton" class="register btn" onclick="api1.load()" value="Sign up for this Event" />

$(function(){
var api1 = $("#login-area").expose({api:true, lazy:true, color: '#78c'});
     $('#exposeButton').bind('click',function(){
         api.load();
     });
});

Answer 2

you forget to call load() function.

$(function(){

   // note: modify ".login-area" with any element that you want to expose
   var $api1 = $(".login-area").expose({api:true, lazy:true, color: '#78c'});

   // note: modify ".register" with any element that user will click to expose form
   $(".register").click(function(){
      $api1.load()
   });
});