Submit your widget
HomeFormTweetblast jQuery

Tweetblast jQuery

Created 14 years ago   Views 5355   downloads 1529    Author n/a
Tweetblast jQuery
View DemoDownload
84
Share |

The index page will have 3 slides, they will be

  1. Entering the data/errors slide
  2. Searching slide
  3. Thanks slide

and we will animate them in and out depending on the information that we get from out PHP script. Here is the layout:

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>Tweet Blast!</title>

  <!-- Start of CSS -->
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
 <link rel="stylesheet" type="text/css" href="css/main.css" />
  <!-- Start of JS -->
  <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/scripts.js"></script>
</head>

<div id="wrap">
 <div id="header">
  <p>You should follow:
   <a class="brenelz" href="http://twitter.com/brenelz">@brenelz</a> and
   <a class="alex" href="http://twitter.com/alexanderbor">@AlexanderBor</a>
  </p>
 </div>

  <div id="blaster">
   <div id="slide1" class="slide">

          <!-- What we want the user to tweet
           We are going to search for the #tag but
           # needs to be # when we direct them to Twitter with
           this status

           -->
    <a class="tweetText" href="http://twitter.com/?status=Testing the Tweetblast #findthis" target="_blank">
     Testing the Tweetblast #findthis!
    </a>
    <div class="form">
     <!-- The username of our twitter-er -->
     <label for="username" class="label">Username: @</label>
     <input type="text" size="20" class="input" id="username" name="username" /><br />

     <!-- A span this is defult to be hidden but will be show if this field has an error -->

     <p class="errorU error">Please enter a username</p><br />

     <label for="email" class="label">Email Address:</label>
     <input type="text" size="20" class="input" id="email" name="email" /><br /><p class="errorE error">Please enter a valid email</p>
     <button type="submit" class="next" name="next" value="Next"></button>

    <!--
     Twitter will not add people who's profiles are
     private so if everything is OK and we didn't find
     the tweet that is probebly why.
    -->
     <p class="errorP error">Your account must not be private, if its not try again.</p>
    </div>
   </div>

   <!-- Our processing side -->
   <div id="slide2" class="slide">
    <p class="tweetText searching">
     Searching Twitter for your Tweet!
    </p>
    <img src="images/loading.gif" class="loading" alt="Loading..." width="32px" height="32px" />
   </div>

   <!-- Our thanks for Tweeting side -->
   <div id="slide3" class="slide">
    <p class="tweetText done">
     We found your tweet! Thanks for tweeting!
    </p>
   </div>

  </div>
</div>
</body>
</html

 

Anything that is special has been commented in the code.

 

CSS

 

In the CSS we want to make sure that the slides our horizontal, and that they will be hidden if they are not meant to be shown. 

@charset "UTF-8";
/* CSS Document */
/* UTULITIES */
.clear{clear: both;}
.push{height: 30px;}
/* END */
/* ORDER PAGE CORRECTLY */
*{margin: 0; padding: 0;}
html{overflow-y: scroll;position: relative;}
body{font-family: Helvetica, Verdana, Arial, sans-serif; width: 100%; height: 100%; background: #3EA9DF;}
/* END */

#wrap{width: 720px; margin: 0 auto;} /*  Center everything  */
#header{background: url(../images/blast.jpg) left top no-repeat; height: 131px;position: relative;}
#header p{position: absolute; bottom: 0px; padding-left: 190px;color: #3D3D3D;}
#header p a{color: #626262;padding: 5px;text-decoration: none;}
#header p a:hover{color: #7B7D7D;text-decoration: none;}

#blaster{
 overflow: hidden; /*  So we can hide the slide we don't want  */
 width: 720px; /*  Need to set a width of what area can be shown  */

 padding-bottom: 30px;
 padding-top: 35px;
 position: relative;
 height: 220px;
 background: white;

 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px; /*  When a browser FINALY support it  */
}

.slide{width: 715px;
 overflow: hidden;
 display: inline-block; /*  We can set a width and they will be inline  */
 position: absolute;
 }/*  The size of each of our sides  */

.tweetText{
 background:none repeat scroll 0 0 #B9CBD5;
 display:block;
 font-family:helvetica;
 font-size:22px;
 margin:0 auto;
 padding:30px 0;
 text-align:center;
 text-decoration:none;
 width:680px;
 color: #626262;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 border-radius: 6px;
}
.tweetText:hover{
 background: #BCD5E4;
 color: #727374;
}
.form{
 margin-left:30px;
 margin-top:30px;
 font-size: 17px;
 color: #595D5F;
}

.label{display: inline-block; width: 130px;}
.input{color: #8D9499;border: none; background: none; border-bottom: 1px solid #BDD0DA;font-size: 17px;}
.input:hover, .input:focus{border-bottom: 1px solid #6D7980;color: #676C6F;}

.error{
 color:red;
 font-size:15px;
 padding-top:10px;
 display: none;/*  Make sure we have no errors showing  */
}
.errorP{text-align: center;padding-right: 30px;}

.next{
 background:url("../images/next.jpg") no-repeat scroll left top transparent;
 border:medium none;
 cursor:pointer;
 height:37px;
 margin-top:-60px;
 position:absolute;
 right:30px;
 width:121px;
}
.next:hover, .next:focus{background:url("../images/next_over.jpg") no-repeat scroll left top transparent;}

/*  SLIDE 2  */
.loading{padding-left:339px;
padding-top:50px;}
#slide2{left: 715px;}

/*  SLIDE 3  */

#slide3{left: 715px;}
.done{margin-top: 50px;}

 

JavaScript

 

With the JavaScript  lib jQuery we will post the values and move the first slide left while moving the next slides in. We want to check if there are any errors as if there are we want to move the first slide back in else, we move in the thanks slide. 

$(function() {
 $(".next").click(function(){ /*  When next is clicked  */
  $("#slide1").animate({"left": "-715px"}, 500); /*  Slide away the first slide  */
  $("#slide2").animate({"left": "0"}, 500, function(){ /*  And slide in the new once, once that if finished run this function  */

  $.ajax({
   type: 'post',
   dataType: 'json',
   url: 'grab.php',
   data: 'username=' + $('#username').val() + '&email=' + $('#email').val(),
   success: function(e){ /*  On success  */
    if(e.error == 1){ // if there as an error
     $('.error').css({"display": "none"});// remove all error messages as we want to display messages for this current go

     if(e.username == 1){
      $('.errorU').css({"display": "block"});
     }

     if(e.email == 1){
      $('.errorE').css({"display": "block"});
     }
     if(e.private == 1){
      $('.errorP').css({"display": "block"});
     }

     /*

      We now slide back in the first slide with the error "p" elements
      Now visible.

     */

     $("#slide2").animate({"left": "710px"}, 500);
     $("#slide1").animate({"left": "0px"}, 500);
    }else{
     /*

      There was no error so we remove slide 2
      and bring in the thanks!

     */
      $("#slide2").animate({"left": "-710px"}, 500);
     $("#slide3").animate({"left": "0px"}, 500);
    }
   }
  });

  });
 });

});

 

Searching Twitter

Twitter’s search API is basically open to use with no limits. They do say not to use it excessively so if your going to use this on a HUGE scale you may want to contact them to ask of their permission. Because of this we can use CURL without authentication. 

<?php

 $twitterUsername = $_POST['username'];
 $emailAdd = $_POST['email'];
 $tag = "findthis"; // The #tag that the use will find for

 function reply($type, $username, $email, $private){ // function to reply to the javascript
   /*

    This function shows if there was an error in
    1. overall
    2. username
    3. email
    4. didn't find it

   */
   $replying = array("error"=>"{$type}", "username"=>"$username", "email"=>"$email", "private"=>"$private");
   echo(json_encode($replying)); // json encode the responce
 }

 // Defult everything to OK
 $error = false;
 $username = 0;
 $email = 0;
 $private = 0;

 if( strlen($twitterUsername) < 1 ){
  $username = 1;
  $error = true;
 }

 if( !preg_match('/^[a-z0-9]+([_\.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\.[a-z]{2,}$/i', $emailAdd) ){
  $email = 1;
  $error = true;
 }

 if( $error == true ){
  reply(1, $username, $email, $private);
  die(); // stop running the script
 }

 /*

  If a user has JUST tweeted then it takes a few seconds for it to appear in
  Twitter's search. Because of this I have made it sleep for a few seconds to
  allow time for that to happen.
  It will also help a bit with mass attacks of people clicking over and over again.

 */
 sleep(4);

 // search for the tweet    JSON format    The tag    Who its from
 $search = "http://search.twitter.com/search.json?q=&tag={$tag}&from={$twitterUsername}";
 $curlhandle = curl_init();
 curl_setopt($curlhandle, CURLOPT_URL, $search);
    curl_setopt($curlhandle, CURLOPT_RETURNTRANSFER, 1);

 // execute the search
    $response = curl_exec($curlhandle);
    curl_close($curlhandle);

 // decode the responce
    $json = json_decode($response);
 // cound the amount of "results" that have been found
    $numb = count($json->results);

    if($numb != 0){ // if a result has been found reply with no error
     reply(0, 0, 0, 0);

     /*

      If you are going to use this scrip put all your code
      to happen when a user has successfully tweeted here

     */

     die();

    }else{
     reply(1, 0, 0, 1); // no result was found so the user is mostlikey private
     die();
    }

 

That is all the code that is needed to build a basic tweetblast. It can be easily customised to accomplish what you would want it to do for your site.

You might also like