By Sammy MillerOnline marketing covers a great deal of stuffs. It includes SEO, social media, e-mail marketing, pay per click and mobile web. As the new year begins, it is time to put a second thought on our online marketing schemes and reconstructing our online marketing solutions. Give your online marketing campaigns a lift that it needs by implementing new plans that will bring about better,

There was a question in the forums about affecting non-hovered items. The effect they were after is that they had an unordered list of items and when they were rolled over, they would all dim (lower opacity) except the one hovered.

This can be done with CSS, using pseduo-selectors.

ul li:not(:hover) { opacity: 0.5; }

However we know that pseudo-selectors don’t have very good cross-browser support. And for that matter, opacity doesn’t either. jQuery is pretty good at mitigating cross-browser problems, so l thought I might give that a spin. In attempting it, I had a nice little learning journey.

My first thought is that I needed to write a selector to select all list items except the one currently being hovered over. I had this come up recently for another reason, and I made a snippet for it: Excluding this from the selector. In this example:

$("ul li").not(this).css("opacity", "0.5");

We just need to wrap that in some kind of hover function. The most obvious:

$("li").hover(function() {
  $("li").not(this).css("opacity", 0.5);
}, function() {
  $("li").not(this).css("opacity", 1);
});

But I’ve been being taught that binding events like this is inefficient, since 1) it requires one event handler for every single element and 2) new elements appended to the page after this code runs will need to be re-bound. (Not to mention, you would definitely want to cache that selector above var $listItems = $("li");).

So I thought I’d go right for the new delegate function which we have mentioned here on CSS-Tricks a few times now. This is awesome because it solves both the issues mentioned above. This was my first (utterly broken) attempt.

$("ul").delegate("li", "hover", function() {
    $("ul li").not(this).css("opacity", "0.5");
}, function() {
    $("ul li").not(this).css("opacity", "1");
});

Don’t try that at home, it’s not going to work. Why not? James Padolsey reminded me that “hover” isn’t an event. It’s a jQuery function, but not a real event, and will not work with delegate. Besides, even if it did, delegate is expecting just the three parameters: element, event, and function, not four parameters like I was passing it (assuming it would know the last function was supposed to be a callback/mouseleave).

Then the next most obvious transformation becomes this:

$("ul").delegate("li", "mouseenter", function() {
    $("ul li").not(this).css("opacity", "0.5");
}).delegate("li", "mouseleave", function() {
    $("ul li").not(this).css("opacity", "1");
});

That uses two delegate functions, this time with real events, to get the job done. This is fine, but we can make it a bit more efficient by mapping both events to a single delegate and then just testing to see what type of event was fired. David Link had this idea:

$("ul").delegate("li", "mouseover mouseout", function(e) {
    if (e.type == 'mouseover') {
      $("ul li").not(this).css("opacity", "0.5");
    } else {
      $("ul li").not(this).css("opacity", "1");
    }
});

Which James Padolsey had an even cleaner version:

$("ul").delegate("li", "mouseover mouseout", function(e) {
    $("ul li").not(this).css("opacity", e.type == 'mouseover' ? 0.5 : 1);
});

jQuery’s live() function is also a good choice here, but has some quirks as well. It turns out you can pass “hover” to live, but you can still only provide a single function. The function will then fire on both mouseenter and mouseleave events, and you’ll have to do event.type testing (like above) to figure out which it was and behave accordingly. Thanks to Paul Irish and Jeffrey Way for that one.

And remember that CSS selector from the very top? We can use that right in jQuery too:

$("ul li:not(:hover)").css("opacity", "0.5");

Quite the journey eh? Like all things web, always more than one way to skin the cat.

I’ll be speaking at the upcoming jQuery Conference. It is in the San Francisco Bay Area (Mountain View, at the Microsoft Campus) on April 24 – 25, 2010. Just check out that link for all the details. It looks pretty great.

“Solving Common Client Requests with jQuery”

That is my chosen topic. Since I think I’ll be speaking to a room of folks 75% of which are going to be smarter than me, I thought I would take more of a real-world approach rather than straight instructional. We’ll be taking a look at some actual sites I’ve worked on and how I leaned on jQuery to help me accomplish something that would have been difficult or impossible otherwise.

Win a free ticket!

I have one free ticket to give away to a CSS-Tricks reader. I always struggle with this because I don’t like “leave a comment to win” contests and I also dislike Facebook/Twitter related contests. So we are going to try something new here.

To enter to win the free ticket: you must donate $10 to ANY open source project. Then forward your receipt to me at chriscoyier@gmail.com and you’ll be entered to win.

If you win, you get a $199 ticket for $10. If you lose, you get the intense satisfaction that you helped an deserving open source project. If you aren’t comfortable with that, don’t enter. Transportation and lodging is up to you.

Also remember it’s ANY open source project. Could be jQuery (or some plugin), could be WordPress (or some plugin), or literally ANY other open source project that accepts donations.

This is going to be fairly quick. I’m going to pick winners on this Friday, April 9 2010.

This is the second part of a two-part series on what we can do to improve our onsite SEO based on Google s recent SEO Report Card of some of its own sites. In this part you ll learn the remaining three onsite SEO factors that can help your site achieve higher rankings….

GoGrid Cloud Center Connect Cloud and Dedicated Servers on Your Private Data Center