Wednesday 9 March 2011

Using jQuery to perform a Bing API search - explained.....

After a recent discussion, I was asked to explain how the jQuery Bing API search found on the site vynora.com worked , so decided, if its useful to one, it maybe useful to others, so in this post I will explain line by line what's happening.

Below is an example of what you will get if you used to code (except I've added a button to clear the results), all you need to do is type! This kind of search box does have one major downside, if the user has javascript turned off, it won't work!! But for majority of users out there it will 

The Example:
Search For:


The basics of the search are:
  1. An input box for your user to type what they are searching for.
  2. A container to show off the results that get returned.
  3. Some jQuery to perform the magic for you.
    1. NOTE: You will need to get an API ID from Bing to allow you to perform searches on your own site. You can get one here.
Lets see some code then:
The input box - straight forward enough:
<input type="text" class="search_input" />

NOTE: in jQuery if you want to reference a DOM element, if it has an ID attribute use #idName, if you want to reference an element by its class name use .className

The results box - again straight forward enough:
<div id="result"></div>

Finally the jQuery magic:
1. $(document).ready(function(){
2.  $(".search_input").focus();
3.  $(".search_input").keyup(function() {
4.   var search_input = $(this).val();
5.   var keyword = encodeURIComponent(search_input);
6.   var appID = "YOUR-OWN-APP-ID-FROM-BING";
7.   var yt_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid='+appID+'&query='+keyword+'&sources=web'; 
8.   $.ajax({
9.    type: "GET",
10.    url: yt_url,
11.    dataType:"jsonp",
12.    success: function(response){
13.     $("#result").html('');
14.     if(response.SearchResponse.Web.Results.length){
15.      $.each(response.SearchResponse.Web.Results, function(i,data){
16.       var title=data.Title;
17.       var dis=data.Description;
18.       var url=data.Url;
19.       var final="<div class="webresult"><div class="title"><a href="http://www.blogger.com/%22+url+%22">"+title+"</a></div><div class="desc">"+dis+"</div><div class="url">"+url+"</div></div>";
20.       $("#result").append(final);
21.      });
22.     }
23.     else {
24.      $("#result").html("<div id="no">No results</div>");
25.     }
26.    }
27.   });
28.  });
29. }); 

OK let's break it down now......

  1. When the page has finished loading, run the following code.
  2. Focus the user on the input box so they can start typing straight away.
  3. Bind a function onto the input box, listening for a keypress.
  4. Store whats been written in the input box as a variable.
  5. Encode what was in the input box so it can be passed in a URL to Bing.
  6. Store your Bing application ID you got earlier on into a variable.
  7. Store the URL to query as a variable. To break this down a little, we are passing our application ID, the value from the input box and also informing Bing we want results from the web.
  8. Start a jQuery Ajax request.
  9. Set the ajax type to a GET request.
  10. Set the URL for the ajax call to contact.
  11. Set the data type as jsonp (a cross browser request for JSON formated results)
  12. If the ajax request was successful, perform the following (data that was returned will be available as response).
  13. Clear any previous results.
  14. Check we actually got some results (If there were none, the length would be 0 - 0 is equal to false. When queried like this, anything other than 0 is true)
  15. Now use the jQuery .each() function to loop through each result which was returned, performing the following for each result.
  16. Store this results title as a variable.
  17. Store this results description as a variable.
  18. Store this results URL as a variable.
  19. Store a HTML snippet to display this result, putting each part into a container (this allows our CSS to make the results look pretty).
  20. Use jQuery's .append() method to add the HTML snippet to the end of the results container.
  21. Finished looping through the results.
  22. Finished what happens if there were results.
  23. Perform the following in the case no results were returned.
  24. Use jQuerys .html() method to set the results container to show a message saying nothing came back. This method would clear everything else from the container leaving just what it sets.
  25. Finished what happens if nothing was returned.
  26. Finished what to do when the ajax is successful.
  27. Finished the ajax call.
  28. Finished what to do when a key is pressed on the input box.
  29. Finished what to do when the page has finished loading.
The final, but optional part for this, by now, rather long post is the CSS to style the results. I won't break this lot down, there is plenty of guides out there which will help you understand CSS if you need to know:
.title{
 color:#069;
 font-size:15px;
 padding-bottom:5px
}

.title a{
 color:#2200c1;
 text-decoration:none
}

.title a:hover{
 text-decoration:underline
}

.desc{
 color:#333;
 padding-bottom:5px
}

.url{
 color:#0e774a
}

.webresult{
 margin-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 border-bottom:1px dashed #dedede
} 

#result {
 text-align: left;
 font-family: arial,helvetica,sans serif;
}


One final note:
The above code is what I was asked to explain, it isn't in my opinion a fully polished example I would put into production. When I have a moment, I will polish up the jQuery code a little so it gives somewhat of a nicer user experience - i.e. advising the user when the ajax fails, and performing just one request instead of one for every letter pressed (see the post for why this can be a problem).




Scoobler.

Some jQuery books from Amazon.com:

HTML5: Up and Running     HTML5 and CSS3: Develop with Tomorrow's Standards Today (Pragmatic Programmers)     jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)

Monday 7 March 2011

Adding Fancybox to blogger.com

Fancybox for jQuery is another one of the plugins which I really like right now. I came across Fancybox one day in work whilst I was developing a web application where I wanted to show a map, but didn't really want to go down the route of using Google Maps API to showing my own map - that all seemed far too cumbersome when I could simply open Google Maps, but thats no fun now is it!!!

So along came Fancybox to save the day and make that really boring link to Google Maps so much more pleasurable.

OK so Fancybox can do so much more but for the purpose of this post I will show you how to set it up to open up a pretty iFrame popup when you click on a link you have added to your blog.

As ever with my jQuery posts, you can try this out on this very page - if you haven't clicked a link above already, go ahead and click this one below:


Pretty aint it?!?!

A little preparation is key:
First things first, Fancybox doesn't appear to have a CDN, so we are going to need to download the source files, extract them and store them somewhere online where you can reference them from.

  • Download from Fancybox.com
  • Extract the files, you will need (at the time of writing this):
    • jquery.fancybox-1.3.4.css
    • jquery.fancybox-1.3.4.pack.js
    • All images from the fancybox folder.
  • Now you need to store the files (all in the same directory) somewhere online where you can reference them.
  • You will need to know the web address in a moment (lookout for YOURDOMAIN.com)....

Let's take a look at the code:
Firstly we need to add the plugin:
  1. Login to your blog. At the top right of the page (for me anyway) click Design
  2. Click on the Edit HTML tab.
  3. Find the line </head>
  4. Just before the line, you need to add the following code:
  5. <script src='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.js' type='text/javascript'/> 
    <link href='http://YOURDOMAIN.com/hosted/fancybox/jquery.fancybox-1.3.4.css' rel='stylesheet' type='text/css'/>
    
  6. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:
  7. $("a.inlineLink").fancybox({
         'width'             : '75%',
         'height'            : '75%',
         'autoScale'         : true,
         'enableEscapeButton': true,
         'speedIn'  : 500,
         'speedOut'  : 500,
         'padding'  : 15,
         'overlayColor' : '#123',
         'transitionIn'      : 'fade',
         'transitionOut'     : 'fade',
         'type'              : 'iframe'
     });
    
That's the control's in place, now all you need to do is a little tweak in your post, and voila......
  1. Create your post as you normally would, including using the Link feature to add links within your post.
  2. Once completed, you will need to edit your HTML, so click on the Edit HTML tab.
  3. Now find the code for the link, taking the example above link to Google.com it will look something like this:
  4. <a href="http://www.google.com/">View: Google.com</a>
  5. Now we need to add the trigger, so when the user clicks the link it open Fancybox:
  6. class="inlineLink"
  7. The final code will look something like this:
  8. <a href="http://www.google.com/" class="inlineLink">View: Googlee.com</a>
    
Simple, but so effective! Great for when you want to show a reader something without them disappearing off from your blog!

NOTE: Make sure you check your links once you have added the effect, there are the odd sites out there which won't work in an iFrame, take YouTube.com for example (go on give it a click).....

Scoobler.

Some jQuery books from Amazon.com:
Professional Ajax, 2nd Edition (Programmer to Programmer)     Smashing jQuery (Smashing Magazine Book Series)     JavaScript: The Good Parts

Sunday 6 March 2011

Adding a jQuery UI Dialog to your blogger.com

One item I find very useful from the jQuery UI range is the .dialog(), its a much nicer sight than the typical browser alert() box!

In this little tutorial I will show you how to add a jQuery wrapper function which will allow you to show a dialog with a custom title and contents from anywhere in your blog. I have opted for a wrapper function as I generally don't change my dialog's, you could, if you wanted change things to allow you to customize the dialog a little more. But for now, I'll stick with the simple stuff!

If you have looked at my post on "Adding jQuery to your blogger.com"  and you were keen, you may have noticed, in the demo towards the bottom of the page, where I used the jQuery UI .button() effect to change a boring button for a nice pretty one, I also changed what happens when you click the button (just in case you wanted to see it really does work) yep, its a dialog.

Just in case you want to see it again:


Lets see some code:


Firstly lets add the HTML needed for the dialog:
  1. Login to your blog. At the top right of the page (for me anyway) click Design 
  2. Click on the Edit HTML tab.
  3. Now search for the line </body>
  4. Just before the line, add the following code, this will be the holder for the dialog:
  5. <div id='dialogMsg' style='display:none;'/>
Now its time for the jQuery wrapper function which will do the work of displaying the default dialog:
  1. Whilst still in the Edit HTML section, we are going to add some code to our jQuery block we setup if you followed "Adding jQuery to your blogger.com".
  2. Find the line $(document).ready(function(){ 
  3. Just after the line, add the following code:
  4. $.fn.dialogPopup=function(title, content) {
      $(this).html('');
      $(this).dialog('destroy');
      $(this).html(content);
      $(this).dialog({
       title:title, 
       modal:true,
       autoOpen:true,
       buttons: {
        "Close": function() {
         $(this).dialog("close");
        }
       },
       destroyOnEscape:true
      });
     };
    
OK so now all the codes in place lets see how we could use our new wrapper function.

A basic button example:
  1. Start by creating a New Post, or Editing an existing one.
  2. Complete your page first using the Compose tab (if thats how you normally do things).
  3. Click on the Edit HTML tab. Now we'll add the HTML and jQuery code which does the niceties.
  4. Find the part of the code where you want to add the, in this case button and add the following HTML:
  5. <input id="myNewButton" type="button" value="Nice jQuery UI Button" />
  6. Finally add a little script block which will allow us to setup the jQuery code just for this post:
  7. <script type="text/javascript">
     $(function(){
      $("#myNewButton").click(function(){
       $("#dialogMsg").dialogPopup("This is the title...", "And this is the contents of the dialog!"); 
      }).button();
     });
    </script>
    
The results from above:


What else could we use this for? What every you can think of!!! How about stopping someone right licking on the page (go on, you should know by now that you can try it out).
Wanna see how I did it:

$(this).mousedown(function(event) {
   switch (event.which) {
    case 3:
     $(document).bind("contextmenu",function(){return false;});
     $("#dialogMsg").dialogPopup("No right clicking....", "I do hope that was a test and ya ain't trying to pinch my code ya cheeky bugger :p ");
     break;
    }
  });


Scoobler.

Some jQuery books on Amazon.com:

JavaScript: The Definitive Guide     Murach's JavaScript and DOM Scripting (Murach: Training & Reference)     jQuery UI 1.6: The User Interface Library for jQuery

Adding a scollTop link to blogger.com

After "Adding jQuery to your blogger.com" I decided it was time to add my first little hack to every blog post I make. So the first item on the agenda is a link to scroll to the top of the page (see it in action at the bottom right of this page...) this isn't something new, but I decided I would do things my way, so I'll share how I have achieved this.



The beauty of this link and it is a link, not an image ;) is, it will only appear once the visitor has scrolled down from the top of the page and disappear again once they are back at the top. And it uses jQuery's .animate() function to make the users experience that little bit more pleasant. 

Lets get started:

OK so to start with, we will need to add a link to the page. It isn't really too important where on the page its added as we will be using CSS to move its location and make it look pretty, but inside the <body>..</body> tags will be best.
  1. Login to your blog. At the top right of the page (for me anyway) click Design
  2. Click on the Edit HTML tab.
  3. Now search for the line: </body>
  4. Now just above the tag you want to add the line (set the text to what ever you want to appear):
  5. <a href='#' id='toTop'>Scroll to Top</a>
Next we want to add the CSS to the page to make our link look a little more appealing. We can use the Template Designer to add the CSS, this will ensure the code is in the correct place.

  1. Now click on the Template Designer tab.
  2. On the list (top left) click on Advanced.
  3. Now scroll down and click on Add CSS.
  4. In the input box, add the following (change the colors and things to suite) and click Apply to Blog:
  5. /* to top */
    #toTop {
      width: 100px;
      background: #99d9f2;
      border: 1px solid #bce1a6;
      text-align: center;
      padding: 5px;
      position: fixed;
      bottom: 10px;
      right: 10px;
      cursor: pointer;
      color: #333333;
      text-decoration: none;
    }

Now we will have a link appear on the page at the bottom right, it will technically return the visitor to the top of the page, but not in a nice way, so onto the jQuery that will do the niceties for us:
  1. Return to the Edit HTML tab, in the Design section.
  2. Now we need to add some jQuery code to the section we setup in: Adding jQuery to your blogger.com. Add the following lines:
  3. $("#toTop").hide().removeAttr("href");
     if($(document).scrollTop()!="0") {
      $("#toTop").fadeIn("slow");
     }
     $(window).scroll(function(){
      if($(window).scrollTop()=="0"){
       $("#toTop").hide("slow");
      }
      else{
       $("#toTop").show("slow"); 
      }
     });
    
     $("#toTop").click(function(){
      $("html, body").animate({ scrollTop: "0px" });
     });
    
  4. The result will be something like this:
  5. <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
     $("#toTop").hide().removeAttr("href");
     if($(document).scrollTop()!="0") {
      $("#toTop").fadeIn("slow");
     }
     $(window).scroll(function(){
      if($(window).scrollTop()=="0"){
       $("#toTop").hide("slow");
      }
      else{
       $("#toTop").show("slow"); 
      }
     });
    
     $("#toTop").click(function(){
      $("html, body").animate({ scrollTop: "0px" });
     });
    });
    //]]>
    </script>
    
  6. Now save the template, and take a look at your work!!
If you have followed everything, you should have a link appear once you scroll away from the top of a post, and if you click the link, you will be scrolled to the top of the page.

Scoobler.

Some jQuery books from Amazon.com:

jQuery 1.4 Animation Techniques: Beginners Guide     jQuery For Dummies     jQuery Pocket Reference

Saturday 5 March 2011

Adding jQuery to your blogger.com

jQuery is one of my favorite frameworks available today. The sheer versatility of the framework is outstanding. So you can expect to see a fair few posts on jQuery throughout this blog. Hopefully you will find them useful - please feel free to ask questions, I will help out if and where I can!


I will dive straight in, with this being the first blog on the site, I may as well make it about my experience with setting up the blog, preparing it for the many posts to come.

Adding jQuery to blogger.com:
  1. Login to your blog. At the top right of the page (for me anyway) click Design 
  2. Click on the Edit HTML tab.
  3. Now search for the line <head>
  4. Now you need to add the jQuery core (I will be using the Google CDN version), after <head> add the following lines - you will notice I am also adding the jQuery UI aswell:
  5. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js' type='text/javascript'/>
    <link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
    
  6. Next is to add any jQuery code you want to load with EVERY page:
  7. <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
    
    });
    //]]>
    </script>
    
  8. Now you can place anything you want to run when the blog loads in the normal way. 
For example:
If you wanted to turn all buttons that you place on your blog:
<input type="button" id="myButton" value="This Button" />
Into jQuery UI buttons you could do this:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$(":button").button();
});
//]]>
</script>


Note:
The reason for adding the code between:
//<![CDATA[
.....
//]]>
Is that when you submit the code, it stops the code being interpreted, and characters being swapped for their ASCII representation. This isn't really a problem for most browsers, but it makes the code much harder to read next time you fancy changing something!

Scoobler.

Some jQuery books on Amazon.com:

jQuery in Action, Second Edition    jQuery Cookbook: Solutions & Examples for jQuery Developers (Animal Guide)    jQuery: Novice to Ninja
Scroll to Top