Fade In, Fade Out

So I’ve been hacking around in javascript lately to build our company’s new web content delivery web application. To put it lightly, javascript feels REALLY hacky to me. When there are random syntax errors without contextual highlighting (shoutout to eclipse!), it makes it really hard to debug errors. I guess it isn’t all bad. The fact that the interpreter can pick up changes on the fly makes development quicker.

However, where javascript is involved, there is also hacking my way through CSS. Integrating multiple libraries (e.g. Jquery, Jquery UI, bootstrap, etc) all together to work seamlessly has proven to be an exercise in patience. However, after about a week, I feel much more comfortable with things now. Here are a few of the tricks I’ve picked up.

1. In getting animations to work, having a “Fade In, Fade Out” animation mechanism to display the user’s selected

would cause the

to appear repeat the animation twice. This is because the JQuery selector I was using would select multiple and call the callback function multiple times. See here:

			done: function() {
			$(spanName).delay(200).fadeIn(200, function() {});
			duration: 200

To remedy this, there’s a JQuery answer using $.when(…).done() which can effectively handle multiple callbacks. Here’s the updated solution:

			function() {
				$(spanName).delay(200).fadeIn(200, function() {});

2. Next, I noticed that the animations would sometimes “bump” the entire screen over by around 10 pixels, whenever the y-axis scrollbar was loaded or disappeared. Apparently, there’s no good fix for this except to make the scrollbars always appear. This can be remedied through CSS:

html {
	overflow-y: scroll;

There are probably a ton of other things I’ve had to look on stackoverflow in order to solve. This is the element of javascript that I dislike … or maybe it just takes a while to get used to, to be in the “know.” I have to admit though, there are several really cool libraries in javascript that are freely available and so easy to add to one’s code. I’m looking at you datatables!

Until next time, happy hacking.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s