It's amazing that I have gotten anything done this week with what has happened at work, the highlight of which was being told by my manager to commit time card fraud by changing time I worked from our overhead charge code to holiday hours. Human Resources, naturally, takes exception to this which worked out for me because when I was done talking to them about what to do here, I was basically given carte blanche to just sit at my desk for eight hours a day, doing my own thing if no one needed me to work for them. That's one advantage to working in this line of work. Time card fraud is so serious of an ethical lapse in this line of work that a company will immediately go into damage control the moment a junior employee says that he or she was instructed to commit time card fraud. While my manager has enough tenture to be possibly shielded from this particular incident, Human Resources will henceforth be very prejudiced toward him in the future should a similar situation arise ;)
I know that some of you have gotten into messing around a bit with HTML and such, which is why I recommend checking out JQuery. I know I've posted on it in the past, but lately I've gotten more and more impressed with how powerful it is for manipulating web pages. And it is very natural in how it does that too! Let's say that you have a list that looks like this:
If you wanted to go through that and a fade-in animation and add a number next to "Link" it'd look like this:
function doFade()
{
$("li.feedlink").each(function(index) {
$(this).hide();
$($(this).children()[0]).html( $($(this).children()[0]).html() + " " + index);
$(this).fadeIn(2000, undefined);
});
}
What this means in, English, is:
-For each list item (li) of class "feedlink,"
-Hide it
-Get the child nodes (the link inside), and set the inner html of the link (what's between the open and enclosing <a> tags) to be the existing content plus the variable index which is the current position in the loop.
-Fade in the current list item over the course of 2,000 miliseconds, and undefined is used instead of a reference to a JavaScript function call that would be called when the fade-in is completed.
$() is a wrapper that JQuery provides for just about everything you could want with JavaScript and HTML. You put in HTML or DOM nodes, and it will allow you to work JQuery's voodoo on that. Heck, if you wanted to add a new list item after every iteration through that aforementioned sequence, you would juse use $("<li class='feedlink'><a href='#'>Another Link</a></li>").insertAfter(this); JQuery In Action is a great reference source for JQuery, and I highly recommend anyone who likes to do web-related stuff to pick up a copy of it.
I know that some of you have gotten into messing around a bit with HTML and such, which is why I recommend checking out JQuery. I know I've posted on it in the past, but lately I've gotten more and more impressed with how powerful it is for manipulating web pages. And it is very natural in how it does that too! Let's say that you have a list that looks like this:
If you wanted to go through that and a fade-in animation and add a number next to "Link" it'd look like this:
function doFade()
{
$("li.feedlink").each(function(index) {
$(this).hide();
$($(this).children()[0]).html( $($(this).children()[0]).html() + " " + index);
$(this).fadeIn(2000, undefined);
});
}
What this means in, English, is:
-For each list item (li) of class "feedlink,"
-Hide it
-Get the child nodes (the link inside), and set the inner html of the link (what's between the open and enclosing <a> tags) to be the existing content plus the variable index which is the current position in the loop.
-Fade in the current list item over the course of 2,000 miliseconds, and undefined is used instead of a reference to a JavaScript function call that would be called when the fade-in is completed.
$() is a wrapper that JQuery provides for just about everything you could want with JavaScript and HTML. You put in HTML or DOM nodes, and it will allow you to work JQuery's voodoo on that. Heck, if you wanted to add a new list item after every iteration through that aforementioned sequence, you would juse use $("<li class='feedlink'><a href='#'>Another Link</a></li>").insertAfter(this); JQuery In Action is a great reference source for JQuery, and I highly recommend anyone who likes to do web-related stuff to pick up a copy of it.
Related Entries:
- I hate moving--and other insights
- Random thoughts
- A cool template trick for Movable Type users
- Random thoughts and links
- Random thoughts
- Random thoughts
- The power of a good toolkit
- Mashing it up with Google Reader
- How to detect requests to old Movable Type-created pages
- Connecting to Google Reader from Perl


Leave a comment