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

Easily Creating Widgets In WebSphere Commerce Composer

WebSphere Commerce Composer is a very powerful addition to the tool set. It allows marketing and HTML developers to pretty much design a web site to their heart’s content.

In this video I show how you can use jQuery and the REST services in WebSphere Commerce to display a product list. One thing you will notice in the JavaScript I use a substitution variable [storeId]. These things come in very handy and allow you to create reusable code snippets across pages and store fronts; to learn more about them check out the info center. If you are really adventurous you can even create your own substitution variables, check out this info center page to learn how to do that.

 

Getting and setting check boxes with jQuery

Getting and setting check boxes in jQuery is a lot easier than setting radio buttons and we can thank the “prop” function for that.

Here is the HTML, notice each check box has its own Id, that is the key so the jQuery selector can get at the “checked” property:

Screen Shot 2013-11-25 at 10.46.49 PM

Getting the value is a single line call and it can be stored in a boolean:

pillar_buy = $('#screen_pillar_buy').prop( "checked");

Setting is just as easy:

$('#screen_pillar_buy').prop( "checked", pillar_buy );

Add Google Map like grab and scroll to your web site with jQuery

DSCN3434Have you ever wanted to scroll a zoomed-in image around like Google Maps does? Then this plugin is for you!

Working on an internal project I found this very easy to implement plugin for jQuery called jquery-scrollview. I implemented it almost exactly as shown in the code on the Google site.

//

Book Review: jQuery Hotshot

Did you ever go to a web site and think, wow, how did they do that? Or, wouldn’t that be cool to write? I know I do.

Well, this book is filled with 10 small projects you can use in real life. So unlike an API book where it focuses on the small granular API calls this book focuses on completed solutions.

It starts off in the preface with a high level summary of what jQuery is and the basic concepts of the API so you really don’t even have to know jQuery to read this book. You do however need to know HTML and JavaScript basics but I will add, all of the source code is available and the massive 296 page book does a great job going step by step. The beauty of the book is it covers a lot of areas for where jQuery can be used – from developing games to building your own jQuery. Many of the techniques used in the book are very creative and well thought through.  Each project has plenty of screen shots and narrative to help you digest the content. Did I mention all of the source code is downloadable? Yep, so you can casually read the book and then go back and play with the finished source code if you wanted.

From beginner to advanced this book is a valuable resource to see how different things can be done with jQuery. It mixes some really good JavaScript API’s along with jQuery API’s to create real life projects.

Well done Dan Wellman.

Properly cleaning up a JQuery Dialog box to prevent memory leaks

One of the cool things about JQuery is you can declare an invisible DIV with a “display:none” style and then use that DIV as the content for a popup dialog box in your application. I have been working on a pretty dynamic web application that is pretty much all JavaScript and buttons come and go based on the users actions. This can present a problem with regard to memory consumption. Each time you call $(“#dialog”).dialog() jQuery creates a set of DIV’s in the base of the HTML.

Continue reading

Getting and setting radio button values with JQuery

I figured I would share this because I found so many inconsistent hits on the internet searching for a solution. I have this dialog that I pop up and want to set the values and then retrieve the values once OK is hit using JQuery.

jquery-radio

The HTML is pretty straight forward:

jquery-html

The code to set the value from my model looks like this:

var $radios = $('input:radio[name=transition]');
$radios.filter('[value=' + model.options.transition +']').attr('checked', true);

The code to retrieve the value looks like this:

model.options.transition = $('input:radio[name=transition]:checked').val();

Ruby on Rails 3.1 standardizes on JQuery…

Rails 3.1 sounds very promising indeed. From the article on InfoWorld it looks like they made some major enhancements to performance and most interesting is the default JavaScript library is now JQuery. JQuery is clearly all over the place these days. Being the default library in Rails, WordPress, and Drupal make it almost ubiquitous in the world of open source web development.

Another change: The default JavaScript library for Ruby on Rails has been switched to jQuery. Users can easily change from the previous default library, Prototype, through a single command. Developers shouldn’t notice any difference, and going forward, Ruby on Rails will be able to harness the work being done on this popular library.

Very Cool: 25 jQuery image galleries and slideshow plugins

Had to put this on my blog, great set of free plugins:

Image galleries. jQuery slideshow. jQuery Gallery. | Webdesigner Depot.

Is Eclipse fading away into the abyss?

As I read the Eclipse responses to the 2011 survey one thing that really stood out was the activity (or lack there of) in the number of respondents. The US continues to be second or third in the past two years with regards to number of respondents (maybe we are just lazy). I also would have thought, from a site which claims over a million hits per month that there would have been more than 624 people taking the survey. The survey count dropped from 1696 respondents in 2010 to just 624 in 2011 – I don’t think that’s a good thing for an open source community.

We believe a reason for the lower number of respondents is that some popular developer news sites in Germany and France had previously promoted the survey but did not promote the survey this year. This is evident by the decreased participation rate
in Germany (26% in 2010 vs 18% in 2011) and France (15% in 2010 vs 7% in 2011).

This year, the playing field seem to be leveled between Germany, France, and the United States with regards to survey respondents. But, as stated, the lack of promotion may be the cause. The US was at 16.8%, Germany reigns at 18.1% and France took a beating with only 6.9% of the respondents and India gained some ground to 5.6% – up 1.6% from last year.

Based on geographical area, Europe represented 58.9% of the respondents, North America 21.6%, and Asia 14.3%.

I also found it interesting that JQuery continues to win the popularity vote amongst developers for RIA frameworks:

Click to make larger

 

And a real shocker is the number of developers choosing Windows over the other platforms this year: