jQuery Forum

Hi,

Hi,

In fancy box not sure how I would add another href link within the caption. I am adding regular text this way. Already linking to the larger image though, but would like to link within the data-caption if possible.

Hi, I am using a bootstrap theme for my portfolio website (www.inspired-evolution.com).

I am not sure the best or most elegant way to do this. What I am trying now isn't working. Essentially, I have a horizontal row of icons and when a user hovers over the icons I want text to display in a div to the right of the icons with the text being unique per each icon.

I am having a few issues with my JQuery functions. Below is the code: In Dreamweaver Line 14 is highlighted red as an error. I can't spot the error. and my $PopUp modal window doesn't fire on the last function. The HTML for that is below the JS.

I have an image which on hover a div appears below the image. The problem is I don't know the easiest way to handle the functionality for multiple images. Right now all of the images have the same class (item) so the hover effect occurs on all the images at the same time, and I only want the effect to occur when hovering over each image individually.

I have this close  to what I want, but not quite there.What I am seeking is for the div to appear when hovering over the image, then animate 15 pixels up and disappear on mouse-out. Right now the animate happens every time you hover over the image, incrementing upward 15 pixels each time from the previous mouseover, and I only want the animation to occur once, unless the browser is refreshed.

any ideas?

Here is the code:
<a id="FullBio"><img src="/Management-Team/VP_of_Sales.jpg" /></a>
<div id="Show_Hide">View Full Profile</div>
<script>
$("#FullBio").hover(
        function () {
            $("#Show_Hide").fadeIn(500);
            $('#Show_Hide').animate({marginTop: '-=15px'});
        },
        function () {
            $("#Show_Hide").fadeOut(500);
        }
    );
    </script>

and CSS

<style type="text/css">
    #Show_Hide {
    display: none;
    width:206px;
    height:35px;
    background-color:#78a22f;
    color:#fff;
    text-align:center;
    border:2px solid #c8df8e;
    font-family:arial, helvetica, sans-serif;
   
}
</style>

Hi,

I have set up a button which is supposed to bring up an iFrame link when you click on it with the FancyBox effect, but it's not working. I just get a brief flicker, but no effect.

I am using JQuery to click on parent table rows to reveal information on child rows below the parent. It works, but opposite of what I need. I need to rows to be collapsed when you load the page and then display and expand when you click on the parent row. Currently the opposite is occurring. Here is my JQuery and HTMl code.

Just wondering about something I am playing around with some code I got online with a JQuery/AJAX/PHP tutorial and everything works great, but I wanted to try other effects for when the data from the AJAX part appears and only  show("blind");  works, not clip, drop, explode or fold. Nothing happens and wondering why. Here is the JQuery code.

I am using a JQuery ToolTip on all links with a title="" and it works great. I want to add another class to (.shadow) and it only seems to work with one class.

I can't seem to get the row striping working with my application. The table data is being pulled in via AJAX and for some reason that is interfering with the striping code. It's hard to debug also because the table info doesn't show up in a view source.

I have a form, that used JQuery for some effects and PHP to submit the form. It works fine, but I want to make some improvements. For one,  the highlight class is added when you try and submit without filling in the fields which is great,but I would like that class to be removed when you click within a form field after it was added. Another improvement is I would like to add  some text when you submit without filling in the fields and then subsequently remove when you click inside a field element. Something like "Please fill in the name field" etc.

Here is my code.

1. <script type="text/javascript">
           /* <![CDATA[ */
   var J = jQuery.noConflict();
   
   J(document).ready(function() {
      
       //if submit button is clicked
       J('#submit').click(function () {       
          
           //Get the data from all the fields
           var name = J('input[name=name]');
           var email = J('input[name=email]');
           var website = J('input[name=website]');
           var comment = J('textarea[name=comment]');
   
           //Simple validation to make sure user entered something
           //If error found, add highlight class to the text field
           if (name.val()=='') {
               name.addClass('highlight');
               return false;
           } else {name.removeClass('highlight')};
          
           if (email.val()=='') {
               email.addClass('highlight');
               return false;
           } else {email.removeClass('highlight')};
          
           if (website.val()=='') {
               website.addClass('highlight');
               return false;
           } else {website.removeClass('highlight')};
          
           if (comment.val()=='') {
               comment.addClass('highlight');
               return false;
           } else {comment.removeClass('highlight')};
          
           //organize the data properly
           var data = 'name=' + name.val() + '&email=' + email.val() + '&website=' +
           website.val() + '&comment='  + encodeURIComponent(comment.val());
          
           //disabled all the text fields
           J('.text').attr('disabled','true');
          
           //show the loading sign
           J('.loading').show();
          
           //start the ajax
           J.ajax({
               //this is the php file that processes the data and send mail
               url: "process.php",   
              
               //GET method is used
               type: "GET",
   
               //pass the data           
               data: data,       
              
               //Do not cache the page
               cache: false,
              
               //success
               success: function (html) {               
                   //if process.php returned 1/true (send mail success)
                   if (html==1) {                   
                       //hide the form
                       J('.form').fadeOut('slow');                   
                      
                       //show the success message
                       J('.done').fadeIn('slow');
                       //add height to element
                      
                   //if process.php returned 0/false (send mail failed)
                   } else alert('Sorry, unexpected error. Please try again later.');               
               }       
           });
          
           //cancel the submit button default behaviours
           return false;
       });   
   });   
   /* ]]> */
   </script>
2. <?php
   
   //Retrieve form data.
   //GET - user submitted data using AJAX
   //POST - in case user does not support javascript, we'll use POST instead
   $name = ($_GET['name']) ? $_GET['name'] : $_POST['name'];
   $email = ($_GET['email']) ?$_GET['email'] : $_POST['email'];
   $website = ($_GET['website']) ?$_GET['website'] : $_POST['website'];
   $comment = ($_GET['comment']) ?$_GET['comment'] : $_POST['comment'];
   
   //flag to indicate which method it uses. If POST set it to 1
   if ($_POST) $post=1;
   
   //Simple server side validation for POST data, of course, you should validate the email
   if (!$name) $errors[count($errors)] = 'Please enter your name.';
   if (!$email) $errors[count($errors)] = 'Please enter your email.';
   if (!$comment) $errors[count($errors)] = 'Please enter your comment.';
   
   //if the errors array is empty, send the mail
   if (!$errors) {
   
       //recipient
       $to = 'My Name<myemail@gmail.com>';   
       //sender
       $from = $name . ' <' . $email . '>';
      
       //subject and the html message
       $subject = 'Comment from ' . $name;   
       $message = '
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
       <html xmlns="http://www.w3.org/1999/xhtml">
       <head></head>
       <body>
       <table>
           <tr><td>Name</td><td>' . $name . '</td></tr>
           <tr><td>Email</td><td>' . $email . '</td></tr>
           <tr><td>Website</td><td>' . $website . '</td></tr>
           <tr><td>Comment</td><td>' . nl2br($comment) . '</td></tr>
       </table>
       </body>
       </html>';
   
       //send the mail
       $result = sendmail($to, $subject, $message, $from);
      
       //if POST was used, display the message straight away
       if ($_POST) {
           if ($result) echo 'Thank you! I have received your message.';
           else echo 'Sorry, unexpected error. Please try again later';
          
       //else if GET was used, return the boolean value so that
       //ajax script can react accordingly
       //1 means success, 0 means failed
       } else {
           echo $result;   
       }
   
   //if the errors array has values
   } else {
       //display the errors message
       for ($i=0; $i<count($errors); $i++) echo $errors[$i] . '<br/>';
       echo '<a href="index.php">Back</a>';
       exit;
   }
   
   
   //Simple mail function with HTML header
   function sendmail($to, $subject, $message, $from) {
       $headers = "MIME-Version: 1.0" . "\r\n";
       $headers .= "Content-type:text/html;charset=iso-8859-1" . "\r\n";
       $headers .= 'From: ' . $from . "\r\n";
      
       $result = mail($to,$subject,$message,$headers);
      
       if ($result) {return 1;}
       else {return 0;}
   }
   
   ?>
3. <form id="form" action="process.php" method="post" name="ContactForm">
       <div class="element">
   
           <label for="Name" id="Name">Name</label>
           <input type="text" name="name" id="name" />
        </div>
         <div class="element">
           <label for="email">E-mail</label>
           <input type="text" name="email" id="email" />
        </div>
         <div class="element">
        <label for="website">Website (example: http://www.yourwebsite.com) </label>
           <input type="text" name="website" id="website" />
        </div>
        <div class="element">
         <label for="message" id="message">Message (resize the textarea if needed)</label>
         
           <textarea class="resizable" name="comment" cols="" rows="">
   </textarea>
   </div>
   <div class="element">
            <input type="submit" name="submit" id="submit" value="Submit" />
            <div class="loading"></div>
       </div>
       </form>
   </div>
   
   

Hi, I need to rewrite the following code with .live syntax so that it will work with my AJAX call. Can anyone assist me with this?

my current code:

$(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });

$(document).ready(function(){
$("#search_results").slideDown();
    $("#search_button").click(function(e){
        e.preventDefault();
        ajax_search();
    });
    $("#search_term").keyup(function(e){
        e.preventDefault();
        ajax_search();
    });

});

I am working on a form which uses JQuery to interact with a PHP file to display data from MySQL. The form works fine in functionality, but the JQuery effects aren't working.Specifically the table with the results from the database is supposed to have striped rows from the JQuery effects and the table is supposed to slide down, but it doesn't. It just appears. Any ideas? Here is the JQuery portion. I tested and made sure I am linking to JQuery correctly.

code...

<html>
<head>
<script src="js/jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");
 });
 </script>
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideDown();
    $("#search_button").click(function(e){
        e.preventDefault();
        ajax_search();
    });
    $("#search_term").keyup(function(e){
        e.preventDefault();
        ajax_search();
    });

});
function ajax_search(){
  $("#search_results").show();
  var search_val=$("#search_term").val();
  $.post("./find.php", {search_term : search_val}, function(data){
   if (data.length>0){
     $("#search_results").html(data);
   }
  })
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />

<title>Novo RPC Results Search Engine</title>

<link href="default.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<h1>Search RPC participants</h1>
    <form id="searchform" method="post" action="find.php">
<div>
        <label for="search_term">Search name/phone</label>
        <input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
    </form>
    <div id="search_results1"></div>
</body>
</html>

I am using JQuery to submit a web form, and the response isn't showing up if you leave an input blank. I know why this is happening but don't know how to fix. The reason it doesn't show up is I am using fancy CSS3 gradient background in my input fields instead of blank background.

The CSS for my JQuery addClass if a field is left blank is:

.element input.highlight {
    border:2px solid #9F1319;
    background:url(../images/icons/iconCaution.gif) no-repeat 2px;
   
}

but since there already is a background specified in the CSS for input it doesn't over-ride. Hope this makes sense.

Any ideas to fix?

Hey, I have two JS functionalities interfering with one another. One is a tooltip and the other is a Twitter app with the JQuery scroll pane.I know they are conflicting, b/c I take out the code for the Twitter app scroll and the Tooltip works, and vice versa. I know about the no conflict solution, and I am trying that but it isn't working. Must be doing something wrong.

Here is the tooltip JQuery
<script type="text/javascript">
var $tooltip = jQuery.noConflict();

$tooltip("#tab_container img[title]").tooltip();
$tooltip("#Social img[title]").tooltip();
$tooltip("#SideMenu a[title]").tooltip();
</script>

and the scrollpane JQuery

(function(A){A.jScrollPane={active:[]};A.fn.jScrollPane=function(C){C=A.extend({},A.fn.jScrollPane.defaults,C);var B=function(){return false};return this.each(function(){var O=A(this);O.css("overflow","hidden");var X=this;if(A(this).parent().is(".jScrollPaneContainer")){var Ac=C.maintainPosition?O.position().top:0;var L=A(this).parent();var d=L.innerWidth();var Ad=L.outerHeight();var M=Ad;A(">.jScrollPaneTrack, >.jScrollArrowUp, >.jScrollArrowDown",L).remove();O.css({top:0})}else{var Ac=0;this.originalPadding=O.css("paddingTop")+" "+O.css("paddingRight")+" "+O.css("paddingBottom")+" "+O.css("paddingLeft");this.originalSidePaddingTotal=(parseInt(O.css("paddingLeft"))||0)+(parseInt(O.css("paddingRight"))||0);var d=O.innerWidth();var Ad=O.innerHeight();var M=Ad;O.wrap(A("<div></div>").attr({className:"jScrollPaneContainer"}).css({height:Ad+"px",width:d+"px"}));A(document).bind("emchange",function(Ae,Af,p){O.jScrollPane(C)})}if(C.reinitialiseOnImageLoad){var N=A.data(X,"jScrollPaneImagesToLoad")||A("img",O);var G=[];if(N.length){N.each(function(p,Ae){A(this).bind("load",function(){if(A.inArray(p,G)==-1){G.push(Ae);N=A.grep(N,function(Ag,Af){return Ag!=Ae});A.data(X,"jScrollPaneImagesToLoad",N);C.reinitialiseOnImageLoad=false;O.jScrollPane(C)}}).each(function(Af,Ag){if(this.complete||this.complete===undefined){this.src=this.src}})})}}var o=this.originalSidePaddingTotal;var l={height:"auto",width:d-C.scrollbarWidth-C.scrollbarMargin-o+"px"};if(C.scrollbarOnLeft){l.paddingLeft=C.scrollbarMargin+C.scrollbarWidth+"px"}else{l.paddingRight=C.scrollbarMargin+"px"}O.css(l);var m=O.outerHeight();var i=Ad/m;if(i<0.99){var H=O.parent();H.append(A("<div></div>").attr({className:"jScrollPaneTrack"}).css({width:C.scrollbarWidth+"px"}).append(A("<div></div>").attr({className:"jScrollPaneDrag"}).css({width:C.scrollbarWidth+"px"}).append(A("<div></div>").attr({className:"jScrollPaneDragTop"}).css({width:C.scrollbarWidth+"px"}),A("<div></div>").attr({className:"jScrollPaneDragBottom"}).css({width:C.scrollbarWidth+"px"}))));var z=A(">.jScrollPaneTrack",H);var P=A(">.jScrollPaneTrack .jScrollPaneDrag",H);if(C.showArrows){var g;var Ab;var S;var r;var j=function(){if(r>4||r%4==0){y(u+Ab*b)}r++};var K=function(p){A("html").unbind("mouseup",K);g.removeClass("jScrollActiveArrowButton");clearInterval(S)};var Z=function(){A("html").bind("mouseup",K);g.addClass("jScrollActiveArrowButton");r=0;j();S=setInterval(j,100)};H.append(A("<a></a>").attr({href:"javascript:;",className:"jScrollArrowUp"}).css({width:C.scrollbarWidth+"px"}).html("Scroll up").bind("mousedown",function(){g=A(this);Ab=-1;Z();this.blur();return false}).bind("click",B),A("<a></a>").attr({href:"javascript:;",className:"jScrollArrowDown"}).css({width:C.scrollbarWidth+"px"}).html("Scroll down").bind("mousedown",function(){g=A(this);Ab=1;Z();this.blur();return false}).bind("click",B));var Q=A(">.jScrollArrowUp",H);var J=A(">.jScrollArrowDown",H);if(C.arrowSize){M=Ad-C.arrowSize-C.arrowSize;z.css({height:M+"px",top:C.arrowSize+"px"})}else{var s=Q.height();C.arrowSize=s;M=Ad-s-J.height();z.css({height:M+"px",top:s+"px"})}}var w=A(this).css({position:"absolute",overflow:"visible"});var D;var Y;var b;var u=0;var V=i*Ad/2;var a=function(Ae,Ag){var Af=Ag=="X"?"Left":"Top";return Ae["page"+Ag]||(Ae["client"+Ag]+(document.documentElement["scroll"+Af]||document.body["scroll"+Af]))||0};var f=function(){return false};var v=function(){n();D=P.offset(false);D.top-=u;Y=M-P[0].offsetHeight;b=2*C.wheelSpeed*Y/m};var E=function(p){v();V=a(p,"Y")-u-D.top;A("html").bind("mouseup",T).bind("mousemove",h);if(A.browser.msie){A("html").bind("dragstart",f).bind("selectstart",f)}return false};var T=function(){A("html").unbind("mouseup",T).unbind("mousemove",h);V=i*Ad/2;if(A.browser.msie){A("html").unbind("dragstart",f).unbind("selectstart",f)}};var y=function(Ae){Ae=Ae<0?0:(Ae>Y?Y:Ae);u=Ae;P.css({top:Ae+"px"});var Af=Ae/Y;w.css({top:((Ad-m)*Af)+"px"});O.trigger("scroll");if(C.showArrows){Q[Ae==0?"addClass":"removeClass"]("disabled");J[Ae==Y?"addClass":"removeClass"]("disabled")}};var h=function(p){y(a(p,"Y")-D.top-V)};var q=Math.max(Math.min(i*(Ad-C.arrowSize*2),C.dragMaxHeight),C.dragMinHeight);P.css({height:q+"px"}).bind("mousedown",E);var k;var R;var I;var t=function(){if(R>8||R%4==0){y((u-((u-I)/2)))}R++};var Aa=function(){clearInterval(k);A("html").unbind("mouseup",Aa).unbind("mousemove",e)};var e=function(p){I=a(p,"Y")-D.top-V};var U=function(p){v();e(p);R=0;A("html").bind("mouseup",Aa).bind("mousemove",e);k=setInterval(t,100);t()};z.bind("mousedown",U);H.bind("mousewheel",function(Ae,Ag){v();n();var Af=u;y(u-Ag*b);var p=Af!=u;return !p});var F;var W;function c(){var p=(F-u)/C.animateStep;if(p>1||p<-1){y(u+p)}else{y(F);n()}}var n=function(){if(W){clearInterval(W);delete F}};var x=function(Af,p){if(typeof Af=="string"){$e=A(Af,O);if(!$e.length){return}Af=$e.offset().top-O.offset().top}H.scrollTop(0);n();var Ae=-Af/(Ad-m)*Y;if(p||!C.animateTo){y(Ae)}else{F=Ae;W=setInterval(c,C.animateInterval)}};O[0].scrollTo=x;O[0].scrollBy=function(Ae){var p=-parseInt(w.css("top"))||0;x(p+Ae)};v();x(-Ac,true);A("*",this).bind("focus",function(Ah){var Ag=A(this);var Aj=0;while(Ag[0]!=O[0]){Aj+=Ag.position().top;Ag=Ag.offsetParent()}var p=-parseInt(w.css("top"))||0;var Ai=p+Ad;var Af=Aj>p&&Aj<Ai;if(!Af){var Ae=Aj-C.scrollbarMargin;if(Aj>p){Ae+=A(this).height()+15+C.scrollbarMargin-Ad}x(Ae)}});if(location.hash){x(location.hash)}A(document).bind("click",function(Ae){$target=A(Ae.target);if($target.is("a")){var p=$target.attr("href");if(p.substr(0,1)=="#"){x(p)}}});A.jScrollPane.active.push(O[0])}else{O.css({height:Ad+"px",width:d-this.originalSidePaddingTotal+"px",padding:this.originalPadding});O.parent().unbind("mousewheel")}})};A.fn.jScrollPane.defaults={scrollbarWidth:10,scrollbarMargin:5,wheelSpeed:18,showArrows:false,arrowSize:0,animateTo:false,dragMinHeight:1,dragMaxHeight:99999,animateInterval:100,animateStep:3,maintainPosition:true,scrollbarOnLeft:false,reinitialiseOnImageLoad:false};A(window).bind("unload",function(){var C=A.jScrollPane.active;for(var B=0;B<C.length;B++){C[B].scrollTo=C[B].scrollBy=null}})})(jQuery);

I have a web page which utilizes both Moo tools and JQuery features. The Moo Tools seems to be negating my JQuery functionality for a sliding menu. I did some research and it looks like I can add   $.noConflict(); to resolve this, but I am not sure how to add it. For instance I am linking to both the JQuery and Moo tools code.
 <script type="text/javascript" src="../js/mootools.js"></script>
 <script type="text/javascript" src="../js/JQuery.js"></script>

I am sure the Moo tools JS is interfering, b/c when I take it out the JQuery functionality works.

I have an accordian app using JQuery. The first panel displays as open when you enter the page, and the other two panels are closed. I would like all three panels to be initially closed. Here is my JQuery code.

<script type="text/javascript">
$(document).ready(function(){
   
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
        $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});
</script>

and here is the XHTML

<div class="container">

    <h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
    <div class="acc_container">
        <div class="block">
            1st block content
        </div>
    </div>
   
    <h2 class="acc_trigger"><a href="#">Photoshop Designs</a></h2>
    <div class="acc_container">
        <div class="block">

            <h3>Coming Soon</h3>
           
        </div>
        </div>
            <h2 class="acc_trigger"><a href="#">Flash and Multimedia</a></h2>
    <div class="acc_container">
        <div class="block">

            <h3>Coming Soon</h3>
           
        </div>
    </div>
   
   
   
</div><!--end container-->

any ideas?

I have a form which uses JQuery to validate fields and PHP to submit to DB. Current validation only looks to see if a field is empty and if it is displays and error msg. I would like to add addtn't functionality to check to see if an email address is invalid and if so displays an invalid email address msg. Need some help doing that please.

Current JS validation looks like this.

$(function() {
  $('label.error').hide();
var email = $("input#email").val();
        if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
});

in the form

<input id="email" name="email"  maxlength="120" type="text" autocomplete="off"/>
<label class="error" for="email" id="email_error">This field is required.</label>

TIA

I am looking to add a JQuery pop-calendar to a form field for birthdays, but all that I have found so far like this one.http://jqueryui.com/demos/datepicker/ - are more for currents dates. If you are an old person (like me), you have to do much clicking back to get to your birthday. Any better solutions for birthday picker?

Hi, I am trying to determine why my success message doesn't display for a form with PHP/MySQL, even though the data does get submitted correctly. I am alerting the data and get this output - [object Object]

not sure what this means? I should be getting data ==1.

[code]

the entire AJAX/JQuery code is below.

$(document).ready(function() {
    contact.initEventHandlers();
});
var contact = {
    initEventHandlers    : function() {
        /* clicking the submit form */
        $('#send').bind('click',function(event){
            $('#loader').show();
            setTimeout('contact.ContactFormSubmit()',500);
        });
        /* remove messages when user wants to correct (focus on the input) */
        $('.inplaceError',$('#ContactForm')).bind('focus',function(){
            var $this         = $(this);
            var $error_elem = $this.next();
            if($error_elem.length)
                $error_elem.fadeOut(function(){$(this).empty()});
            $('#success_message').empty();   
        });
        /* user presses enter - submits form */
        $('#ContactForm input,#ContactForm textarea').keypress(function (e) {
            if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
                $("#send").click();
                return false; 
            }
            else 
                return true; 
        });
    },
    ContactFormSubmit    : function() {
        $.ajax({
               type        : 'POST',
               url        : 'php/contact.php?ts='+new Date().getTime(),
               dataType    : 'json',
               data        : $('#ContactForm').serialize(),
               success    : function(data,textStatus){
                              //hide the ajax loader
                              $('#loader').hide();
                              //alert("The Bug Is Somewhere Before ME!")
                           
                              alert(data);
                              if(data.result == '1'){
                                  
                                  //show success message
                                  $('#success_message').empty().html('Message sent');
                                  //reset all form fields
                                  $('#ContactForm')[0].reset();   
                                  //envelope animation
                                  $('#envelope').stop().show().animate({'marginTop':'-175px','marginLeft':'-246px','width':'492px','height':'350px','opacity':'0'},function(){
                                      $(this).css({'width':'246px','height':'175px','margin-left':'-123px','margin-top':'-88px','opacity':'1','display':'none'});
                                  });
                              }
                              else if(data.result == '-1'){
                                  for(var i=0; i < data.errors.length; ++i ){
                                      if(data.errors[i].value!='')
                                          $("#"+data.errors[i].name).next().html('<span>'+data.errors[i].value+'</span>').fadeIn();
                                           $('#success_message').empty().html('Form not complete!');
                                  }
                              }                         
                          },
               error    : function(data,textStatus){}
        });
    } 
};
[/code]