SVN problems for Linkedin Resume

I’ve completely messed up the SVN of linkedin resume today between 11:30 UTC and 12:30 UTC, I’m realy sorry for those who tried to download it during this period but it was for a good reason:
Now, that I’ve all fixed up, you can download older versions of the plugin (1.8 for the moment but soon all the old versions!).
That’s a good news for those who are experiencing some troubles with the new version.

JQuery usecase : Moving a fish in the back of a web page

The friend I’ve integrated the design for (http://www.stratewaterdesigners.com) recently asked me to add a fish that would move on the background of the website randomly. Even if I don’t really like JQuery, because it is the default WordPress framework I made with it.

So, here are the problems I’ve been confronted to :

How to make the fish move randomly?

To achieve that, I have used the JQuery method animate that I’ve called in an endless recursion to make the fish move 100px to the left or to the right and adding a random multiplicative to the top position of the fish

How to make the fish go under all the elements of the page?

To do that, I’ve used the CSS properrty z-index, it allows us to put one div in front of an other.But be careful, it only works for positioned elements (position:relative|absolute). So I’ve set all the positioned element of my page with a z-index of 10 and assigned my fish a z-index of 1.

How to make the fish go the other way around?

This what took me the longest : First, I check that the fish is at the right position, then I call the animate function to change at the same time three CSS values : ‘left’, ‘background-position’,’width’ to make the fish kind of rotate :p. Also, to avoid any loading time I’ve used a css trick : an image with my two fishes (the fish looking to the left and the one looking to the right) that is two times bigger than its container, so to swap between the two, I just have to change the background image position !

So now, the script : ( demo )

	var $j = jQuery.noConflict();
	$j(function(){
		var maurice = $j('< div>< /div>');
		var topPos = 200+Math.floor(Math.random() * (document.height-200));
		maurice.css({'position':'absolute','left':'-100px','top':topPos,'width':'100px','height':'70px','background':'url(/img/fish.png) no-repeat','z-index':'1'});
		var replaceleft = function(){
			maurice.css({'backgroundPosition':'-50px 0'});
			maurice.animate({'backgroundPosition':'0px 0%', 'width':'100px', 'left':0},200, "swing", callback);
		}
		var swapleft = function(){
			maurice.animate({'backgroundPosition':'-50px -70px', 'width':0, 'left':50},200, "swing", replaceleft);
		}
		var moveLeft = function(){
			var topMove = 50-Math.floor(Math.random() * 100);
			var newTopPos = parseInt(maurice.css('top'))+topMove;
			while(newTopPosdocument.height){
				topMove = 0-Math.floor(Math.random() * 100);
				newTopPos = parseInt(maurice.css('top'))+topMove;
			}
			if(100 < parseInt(maurice.css('left')))	maurice.animate({'left':parseInt(maurice.css('left'))-100,'top':newTopPos},1000, "swing", moveLeft);
			else maurice.animate({'left':0},500, "swing", swapleft);
		}
		var replacefish = function(){
			maurice.css({'backgroundPosition':'-50px -70px'});
			maurice.animate({'backgroundPosition':'0px 100%', 'width':'100px', 'left':screen.width-140},200, "swing", moveLeft);
		}
		var swapfish = function(){
			maurice.animate({'backgroundPosition':'-50px 0', 'width':0, 'left':screen.width-90},200, "swing", replacefish);
		}
		var callback = function(){
			var topMove = 50-Math.floor(Math.random() * 100);
			var newTopPos = parseInt(maurice.css('top'))+topMove;

			while(newTopPosdocument.height){
				topMove = 0-Math.floor(Math.random() * 100);
				newTopPos = parseInt(maurice.css('top'))+topMove;
			}
			if(parseInt(maurice.css('left'))

Linkedin Resume 1.9

A new year = a new version of your favorite wordpress plugin ! It just contains some regexp improvements, bugs and compatibility fixes

So, here are my answers to the comments that you have posted :

  • Travis, I don’t want to change my variable name because I would have to add more code to take care of those who are doing an update from their current version. For the second comment, it seems that it is a WordPress want it to be like that, so I can’t change it easily
  • Amรฉrico Dias, that’s fine, you helped a lot for the development of it ๐Ÿ˜‰
  • Jesse, I’ve added some text on the admin as you asked and changed “Jobs” to “Experience”
  • Some of you are asking for some caching but don’t have the time to do it those days… in v2.0 perhaps ๐Ÿ˜‰
  • Jorge, thanks for the bug report, I’ve fixed it in this new version ๐Ÿ˜‰

So, as you can see, all your comments are useful! Keep on commenting to make this plugin always more supernatural than it is!

Dynamic stylesheet swap with Mootools 1.2

Thanks to Mootools (my favorite JS Framework), it is possible to change the current CSS stylesheet dynamically really easily :

The Head :



The Body :


The JS:

$('styleSelector').addEvent('change',function(){
	var sexyColor = new Asset.css(this.value+'.css',{'id':'colorStyleSheet'});
	sexyColor.replaces(window.document.head.getElementById('colorStyleSheet'));
})

WordPress design integration for a friend

On of my friends recently asked me to create a blog for his association based on a design he had made on photoshop.
So I have created a new WordPress theme for him. You can see the result on http://www.stratewaterdesigners.com.

If you like the theme (comment !), I will probably put it on the WordPress servers!