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
$(".toggleableMADiv").fadeOut({
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:
$.when($(".toggleableMADiv").fadeOut(200)).done(
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.
Code and Codes 