Welcome to WebmasterServe!

FREE TO JOIN! Join us now to engage in informative and friendly discussions about Webmastering, SEO, SEM, Internet Marketing, Programming, Graphic Design, Online Jobs and more. What are you waiting for? Ready to join our friendly community? It takes just one minute to register.

Dismiss Notice

Join WebmasterServe Forums 
Join the discussion! Have a better idea or an opinion? It takes just one minute to register Click Here to Join

My 2 Cents Nice ajax effects for messages box using mootools

Discussion in 'Javascript and jQuery' started by JavaScriptBank, Apr 25, 2011.

Thread Status:
Not open for further replies.
  1. JavaScriptBank

    Yellow Belt

    Joined:
    Jul 11, 2009
    Messages:
    85
    Ratings:
    +0 / -0
    This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes


    How to setup

    Step 1: CSS below for styling thescript, place it into HEAD section
    CSS
    Code:
    Select All
    <style type="text/css"> body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;} #box { margin-bottom:10px; width: auto; padding:4px; border:solid 1px #DEDEDE; background: #FFFFCC; display:none; } </style>
    Step 2: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    Select All
    <script type="text/javascript" src="mootools.js"></script> <script type="text/javascript"> // Created by Antonio Lupetti | http://woork.blogspot.com // This script downloaded from www.JavaScriptBank.com window.addEvent('domready', function(){ var box = $('box'); var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut}); $('save_button').addEvent('click', function() { box.style.display="block"; box.setHTML('Save in progress...'); /* AJAX Request here... */ fx.start({ }).chain(function() { box.setHTML('Saved!'); this.start.delay(1000, this, {'opacity': 0}); }).chain(function() { box.style.display="none"; this.start.delay(0001, this, {'opacity': 1}); }); }); }); </script>
    Step 3: Place HTML below in your BODY section
    HTML
    Code:
    Select All
    Press &quot;Save&quot;</p> <div id="box"></div> <input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>
    Step 4: must download files below
    Files
    mootools.js






     
  2. scriptbazaar

    Yellow Belt

    Joined:
    Nov 18, 2008
    Messages:
    6
    Ratings:
    +0 / -0
    Nice effects i was searching for this one but if you have something which remains ion the bottom that would be awesome :)
     
  3. silverf0x

    Yellow Belt

    Joined:
    Aug 17, 2010
    Messages:
    4
    Ratings:
    +0 / -0
    Is it need to link the jquery.jss in header, or it's enough just with motools.jss ??
     
Thread Status:
Not open for further replies.

Share This Page