Base JavaScript versus jQuery example – Driving a DOM selector

One of the things a good web programmer should be able to do is write code using multiple libraries. In this case I have created two snippets that show how to select an HTML on a page using both bare-bones JavaScript and its corollary in jQuery.

The basic flow is:

MouseEnter Listener -> Modify border -> Click Listener -> Call Function

MouseOut Listener -> Restore border

This gives you an interface where you can then select a DOM element right from the web page. It would look like this:

web-selection

Here are the two different implementations, you can see why I love jQuery, its brevity is breathtaking. The biggest difference is the selector API in jQuery that does the loop processing for you.

Base JavaScript

[codesyntax lang=”javascript”]

var all_1_Links = document.getElementsByTagName('div');
for (var i = 0; i < all_1_Links.length; i++) {
    var elm = all_1_Links[i];
    elm.addEventListener('mouseenter', function() {
        this.addEventListener('click', clickListener, true);
        this.style.oldborder = this.style.border;
        this.style.border = 'thin solid red';
    });
    elm.addEventListener('mouseout', function() {
        this.style.border = this.style.oldborder;
    });
}

[/codesyntax]

 

jQuery Version

[codesyntax lang=”javascript”]

$("div").mouseenter(function(e) {
    e.target.oldborder = e.target.style.border;
    $(e.target).css("border", "thin solid red"); 
    $(e.target).click(clickListener); 
}); 
$("div").mouseout(function(e) { 
    $(e.target).css("border", e.target.style.oldborder); 
    $(e.target).off("click"); 
});

[/codesyntax]

 

Advertisements

Did you know about the Adobe Experience Manager to IBM WebSphere Commerce Connector?

Have you seen this cool new connector for Adobe Experience Manager and IBM WebSphere Commerce? Click the picture below to see more.1400693369262

Finding every possible combination of array entries from multiple lists with unknown bounds in Java

I am sure this post will resonate with pretty much any developer that reads it. Have you ever had a problem where you had to really step back and think about for a long time? A problem where the wealth of the internet helps a little but just isn’t what you were looking for? One big problem is I had recursion on my brain and I was convinced for a long time recursion would be needed. Seeing many similar problems solved with recursion I thought it was the way to go.. “Much to learn you still have…my old padawan.” – Yoda.

A long time for me is hours or even days. Usually I have some level of experience in the past that helps me quickly figure out coding tasks. Well for some reason this thing got me thinking for almost an entire day. And when I say entire day I mean I still do other things but its embedded in the back of my brain. I had my notebook with me the entire day drawing out boxes, arrows, and visualizing walking through loops. It wasn’t until later that night when I realized what I had to do. This was that kind of problem.

Head shots thoughtful, thinking, finding solution man

Continue reading

Eclipse and SWT to the rescue

For the past week or so I have been able to do some Eclipse and SWT programming. I have a tool here for technical sellers written in Java and what has been requested for a couple of years is a front end UI to that tool. One thing that really stuck out was the Window Builder and the information on the internet. You see, when I started Eclipse development it was very new. Unless you knew where to look it was often difficult to find answers or great examples. Almost 13 years later and its a very different story.

window_builderFirst off, Window Builder is amazing, it works, and the amount of functionality in it is very impressive. I remember early on with was pretty bug ridden and we ended up coding by hand. Now, you can do all kinds of really cool things right in the user interface. I was able to completely use the WindowBuilder editor for all of my windows and dialogs – piece of cake! I especially like the Menu and Table editors – makes creating these things a snap.

Next, I have to mention the internet, StackOverFlow, and all of the blogs and articles out there. It seems no matter what I search for someone has written about it or asked about it. Great job Eclipse Community!.