JQuery: How to avoid scrolling when using fadeIn/fadeOut effects

Today I had this problem at work using Jquery: I wanted to update the content of a div with the response from an ajax request in a nice way: firts fading the div out and then fading it in. Something like this:

$("#mylink").click(function(){

  jQuery.ajax({
    type: "GET",
    url: "/my/url",
    success: function(msg){
	         $("#content").fadeOut(200).empty().append(msg).fadeIn(200);
            }
  });

  return false;

});	

But this doesn’t work nicely because the page scrolls up. Why? Because fadeOut sets the css property display to none.

I fixed it using fadeTo, like this:

$("#mylink").click(function(){

  jQuery.ajax({
    type: "GET",
    url: "/my/url",
    success: function(msg){
               $("#content").fadeTo(200, 0, function () {
                    $("#content").empty().append(msg).fadeTo(200, 1);
                    });
		     }
  });

  return false;

});

Lost in Twitter

I’ve been playing with Jquery and the Google Language API the last couple of days and decided to create a small web application in HTML 5 and javascript called Lost in Twitter. This is just a mashup between Twitter and Google Language API to translate tweets from their original language to one selected by the user. It also allows the user to display only a twitter username’s tweets.

Basicly I created a small basic layout in valid HTML 5 and wrote the necessary javascript code to populate the data. You can have a look at the code viewing the source or pulling the source code from the github repository.

Introduction to HTML 5

I have been watching this  video: Introduction to HTML 5 from Brad Neuberg on Vimeo.

Basicly, the video talks about five main things:

1. Graphics: the new <svg> and <canvas> tags. Both allow to draw programaticly. SVG is for easy graphics and it uses elements such as <rect> to draw and <canvas> is more javascript focused. The nice thing about SVG is that now it is supported by 95% of the web in two forms: native browsers like Firefox or Chrome, and by the SVG library based in Flash (this is mainly for Internet Explorer). Another advantage is that the elements are in the DOM tree so you can manipulate them as you do with other elements.
2. Video: Now there is an element <video> to play movies in the same way we use <img> for images.  No need to use complicated plugin stuff anymore. Also, as <svg> and <canvas>, <video> element is part of the DOM tree so we can manipulate it, draw on it, etc. Another cool thing is that you can buffer the video even if the user doesn’t click the play button!
3. Geolocation: There is now a javascript object under the navigator object called geolocation which provides methods to get the longitude and latitude or more stuff to deal with the user location.
4. Storage: Yes, this is not a mistake. There are now cache and a database to save data and allow the user to work offline. The caching is performed by a cache manifest inserted in the body of the HTML 5 page. You can specify the files that must be copied to the local computer. The other very cool thing is the database. There is now another javscript object under window object to open a local database. You can save data using SQL queries and transactions.
5. Web workers: This is basicly a feature which allows executing Javascript in another thread so the browser don’t get frozen when executing complex code.

It also talks briefly about other new and useful tags such as:

• <header> where the logo and that stuff go
• <nav> where the navigation section goes
• <article> where the main content is inserted
• <section> to divide the information in sections as a book does
• <footer> for the footer information
• <progress> to display progress bar
• <meter> to display a star raking element

Nice and helpful video. It’s worth watching it to have an idea about what HTML 5 can do for you now. Believe me, it’s awesome!

How to configure Gnome Blog for WordPress

Gnome blog is a client to post entries in your blog. It supports:

- Blogger.com / Blogspot.com

- Advogato.org

- Movable Type

- WordPress

- LiveJournal.com

- Pyblosxom

- Any other blog using bloggerAPI or MetaWeblog

You can install from the Applications manager or Synaptic typing “gnome blog”.

The setup is very easy. This is what I did for this blog:

Screenshot of Gnome blog preferences

My first impression is that it looks too simple and probably I will try to find something better after playing around a little bit. For example, I cannot edit old posts.

This post has been written from gnome blog.

First post – What is this about?

I am planning to use this blog as a notebook to write what I am learning about technology, mainly: Java, J2EE, Spring, Hibernate, Grails, Test Driven Development, Linux, etc.  I hope I can help someone as well.

My previous blog was GiGo – written in Spanish – but since I moved to London 2 years ago I barely posted articles.

Follow me on Twitter, my nick is @alexcuesta and my bookmarks on delicious.com/alexcuesta