JQuery: Flicker problem on Firefox with fadeOut and fadeIn

It has been a bloody nuisance getting the fadeIn and fadeOut to work properly on Firefox. I’ve been trying to get the content on the page to fade out, load new content and fade it in when the user clicks the navigation menu. But everytime I do that, there’s a flicker on the page that simply bugs the hell out of me.

After googling for half a day, I finally found out the reason. And it is not very straightforward, especially for someone getting into web design after a 6 year hiatus. Here’s what the problem is – Firefox gives you a vertical scrollbar on the side as long as you have content that extends beyond the vertical visual boundaries of your screen. But it doesn’t keep it there all the time. If the content can fit on your screen, it disappears. This causes the scroll bar to disappear when it’s not needed thereby making your layout move to the right because of the extra space.

Now apparently, there is some way to get the scroll bar to persist, but I couldn’t get it to work without having a double vertical scroll bar on the side. A number of options are available on this page, mainly in the comments, but none of them did the trick for me (I’m using Firefox 4).

So, back to googling and this time I came across this issue on the jquery website which says that fadeOut sets the display property to none and this causes an issue with the layout. More searching finally led to this mail chain in which one of the users suggests not to use fadeOut and fadeIn but rather just use animate() and that will solve the issue with the display:none. And it actually did. The annoying flicker is gone. Effectively, instead of using

$obj.fadeOut(‘slow’, function(){

$obj.fadeIn(‘slow’);

});

use:

$obj.animate({opacity:0}, ‘slow’, function(){

$obj.animate({opacity:1},’slow’);

});

and no more flickers! 🙂

 

Update: If you’d like to see a working POC, you can download the source here. It should work fine even with Javascript disabled.

Load in and Animate content with JQuery

I found out how to load and animate content using this excellent tutorial from tutsplus.com. But I wanted to take it one step further and also show the currently active link highlighted in the menu bar which took a bit of effort.

The full working sample can be downloaded from here.

Here’s the final version of the javascript:

$(document).ready(function(){

var hash = window.location.hash.substr(1);
var href = $(‘#nav li a’).each(function(){
var href = $(this).attr(‘href’);
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+’.html #content’;
$(‘#content’).load(toLoad)
}
});

$(“.nav li a”).click(function(e){

var toLoad = $(this).attr(‘href’)+’ #content’;

var clickedMenuItem = $(this);//Store whatever you clicked over here

var currentMenuItem = $(this);//This is where you’ll store whatever is currently selected (in the next step)

$(“.nav li a”).each(function(){
if($(this).hasClass(“active”)){
currentMenuItem = $(this);//If it is active then set that to the currentMenuItem
return false;//Break out of the each() loop (http://gavinroy.com/jquery-tip-how-to-break-out-of-each)
}
return true;//Just to get rid of the warning “Function doesn’t always return a value”
});
e.preventDefault();
//Change animations to slideUp and slideDown to get the sliding animation
$(“#content”).fadeOut(‘slow’,function(){
$(“#content”).load(toLoad, function(){
$(“#content”).fadeIn(‘slow’);
});
});

window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-5);
currentMenuItem.removeClass(“active”);//First remove and then add in case the same link is clicked
clickedMenuItem.addClass(“active”);

});

});

Hard to find svn commands

Some tips for SVN that I’d like to note here rather than google for every single time. Will keep adding them as I get more of them.

Revert all recursively:

svn revert -R <targetdir>

Source

Remove .svn directories in all folder / Clean up entire project from svn

svn export /path/to/old/working/copy /path/to/plain/code

Source

How to set properties for files and directories

svn ps svn:ignore <file pattern> <target directory>

Ex: svn ps svn:ignore ‘database.php’ ‘./config’

Source

Prototype(PC) Trainer

Prototype is an amazing game. The graphics, gameplay everything is almost perfect. Seamless movements and absolutely no lag time. But the game is also incredibly difficult. One particular level had me cringing after I had to play the dam level 3 times and still not make it. Surprisingly, I didn’t find any cheats for infinite health. Thankfully however, I found this trainer to get infinite health and infinite ammo. I swear, people who can finish this game without using the trainer deserve a medal!

Prototype Trainer: http://www.cheatbook.de/trainer/prototype.htm (defunct)

Update: The above link isn’t working anymore. You can get the trainer at the following links:

http://www.mofunzone.com/game_trainers/prototype.shtml

http://www.cheathappens.com/show_download.asp?id=25763

PS: Anyone remember the 2nd chariot race in Prince of Persia: The Two Thrones? I had to use a trainer from that point onwards in that game as well!

Flash 10.2 doesn’t work on Acer 5742G

For some strange reason, adobe 10.2 has issues when you try to use it on any system running nvidia’s optimus technology. Apparently this is a well known issue as can be see at the nvidia forums over here.

Fortunately, it can be fixed very easily by installing Flash 10.1. The link given on the forums didn’t work for me. But I could get it directly from adobe’s website using this link:

http://kb2.adobe.com/cps/142/tn_14266.html

The one I downloaded was:

http://fpdownload.macromedia.com/get/flashplayer/installers/archive/fp10.1_archive.zip

and I installed the file named:

fp10.1_archive.zip\fp10.1_archive\10_1r82_76\flashplayer10_1r82_76_win.exe

in the archive

i.e. install flash 10.1

Zoundry Raven

Testing Zoundry Raven. Looks pretty decent. Also supports tags and that’s what I was looking for in a blogging tool. Here’s a test image:

Desert.jpg

Images inserted and resized with ease. Blogger interface very much like a word editor which makes it very convenient:

Not bad!

Setting up personal folders on Outlook 2007

My school uses outlook exchange and only allows for 200MB of storage space on the server which sucks big time. So, instead of using their space, I chose to download all my mail directly onto my PC.

The way to do this to create a personal folders (.pst) file under Tools -> account settings. Once you do that, set it as the default folder. You will get a pop-up window saying “… it’s not recommended to download… yada yada yada … “. Just accept it and restart outlook. From now onwards, any message you get will be downloaded directly to your PC. The screenie below shows how your account settings should look like:

outlook personal folders