Tag Archives: javascript

Active navigation with jQuery

Posted on by

I was building a site last week and came across some jQuery code for active navigation. It’s very simple and works real well. I’m using it on some secondary navigation and still using my body class for the main nav.

Active navigation with a body class
body.home #nav ul li.navhome{font-weight:700;}

So I’m still doing that, but then for the internal page navigation, rather than loading the CSS up with long declarations for the numerous sub nav links, I used this jQuery:

Active vavigation with jQuery
$("#nav a").each(function() {
var hreflink = $(this).attr("href");
if (hreflink.toLowerCase()==location.href.toLowerCase()) {
	$(this).parent("li").addClass("selected");
}

Breaking it down

Let’s try this line by line for those who want to know what’s happening here.

This targets each link in contained in #nav.

$("#nav a").each(function() {

This line just saves the href attribute of each #nav a to a variable. It makes the code a little cleaner and easier to work with.

var hreflink = $(this).attr("href");

This converts the href of each link in #nav, makes it lowercase (it should be already, but just in case) and checks the current URL of the page and sees if they match. Also making the current page URL lowercase.

if (hreflink.toLowerCase()==location.href.toLowerCase()) {

If the current URL matches the href for one of the links it looks to the parent element (in this case it’s a list item) and adds a class of “selected” to it.

$(this).parent("li").addClass("selected");

This is just closing the function, I really don’t know why I didn’t include it in the above code for the purpose of this post. But no matter.

}

Issues

The only problem I ran into with this was that you have to make sure the you use a consistent href for pages.

For example

If you’re sub nav contains a link to http://www.csskarma.com/contact/, you have to make sure that you don’t link to http://www.csskarma.com/index.php; or the active navigation won’t work.

It’s not a huge deal, but definitely something to be aware of, I just had to go through a site and clean up a bunch of links up because I applied this jQuery pretty late in development. You can probably rework the code to strip out the file name and extension or do it with some PHP, if you’d like.

Actually, if anyone does that, let me know and I’ll update this post with the code.

This Week in Links 9/17

Posted on by

article banner

How HTML5 is Already Changing the Web

Generally, I’m not a fan of all the hoop-la over HTML5 since it won’t be released and in use for a long time. But I was very interested in reading this article from webmonkey

FV Code Highlighter

A handy wordpress plugin for code hightlighting, very cool and useful, definitely check this out if you have time. This will be the next plugin I install.

Hacking JavaScript for Fun and Profit

SitePoint is always a great place to find good tutorials. This one especially caught my eye in the past week.

LiveBar

The concept of LiveBar is very interesting to me. It’s like portable social networking for your web site. It will display related social content in a small bar stuck to the bottom of the screen.

Paper background graphics

I’m usually against most design fads because they pass so quickly. But if you choose to venture into the grunge fad, this is a very good resource to find those large images of crumpled up paper.

This Week in Links – 9/4

Posted on by

I’d like to try and start sharing some links once a week with everyone since I’m settling into a new job and I don’t want my posts to become few and far between. Just to let you know that I am doing some interesting things right now, but have just run a little short on time. Here are some links that grabbed my attention:

Some sites to be aware of:

Script & Style

Script & Style is a new site by Chris Coyier and David Walsh. The best way I can describe it is like subscribing to the CSS/JS search term RSS feed on Digg, but a little more interesting. There are user-submitted articles, like Digg, but you don’t have to filter out all that Digg-esk junk like articles about hamburger grease and bicycle chains. You just get the stuff you want. I like it, at least subscribe to the RSS feed, it’s well worth the visit.

Google Chrome bugs – Alternate Style Sheets and Max/Min-width

The big news for the week seemed to be about Google’s web browser, Chrome. Everyone seems to love it (I couldn’t install it on my parallel, I’ll try on Vista later on), but there are some bugs reported with it. I guess that’s why Google leaves everything in Beta for a decade.

Animation Jump in JQuery

When I first saw this quick tip from JQuery for Designers I really didn’t see a major need for it. But as I kept seeing it in my news feed it actually grew on me. It creates a nice sliding effect for anchor links, worth poking around with. I really don’t like dumping a ton of JavaScript into my pages, but for a JS light page, or an FAQ, this might be a nice feature.

Using JQuery UI to Control Text Size

I love Nettuts, every week they come out with some really cool tricks. This is one of those things that is a really nice tool to have in your library just in case you need it. I could see this being very useful for reading documents online or just zooming in on an app.

Automatic Awesompersands

YAJQPI I guess, but I kind like this one. It searches through your content to find and restyle ampersands, giving them a hip designer/small coffee shop look by wrapping a span around them (sidenote: are we using spans too much with jQuery?).

JavaScript in Modern Web Design

Web Designer Wall is a pretty popular blog (more so than this one), so I’m sure most have seen this already, but it’s still worth mentioning just in case. Nick La lists out and describes virtually every JavaScript you will commonly find in web design today. If nothing, it’s a great reference list.

Today seemed to be a little JavaScript heavy, but I guess that’s what’s going on right now as we’re all in our JQuery phase.

Cracking open Google Gadgets

Posted on by

A few weeks ago, I decided to do a little research into Google Desktop. Which is basically a Google widget platform competing with Yahoo! widgets. After some exploration and dissecting Google Gadgets, this is what I came out with:

  • The core of the application runs on 2 files
    • main.js
    • main.xml
  • There are also some image and CSS options readily available, but the guts of it really run on JavaScript and XML
  • Overall, it’s very straightforward, a little playing around with the sample gadgets will give you a good idea of what you can do (endless possibilites)

The file structure of some of the sample gadgets leaves a lot of room for improvement. Some seem to be built to handle very large, modular applications, but in most cases, they’re a little too modular (in my opinion).

Some of the more useful samples you can go through are:

  • Animations
  • ComboBox
  • Countdown
  • DragDrop
  • HelloWorld
  • HTMLDetailsView
  • QueryAPI
  • RSS
  • XMLDetailsView
  • XMLHttpRequest

There are others too, but these are the one’s I found most useful. So, lookin at those options, a being an RSS freak, I chose to customize the RSS gadget for CSSKarma

CSSKarma RSS Gadget

Download CSSKarma RSS Gadget

The first thing to do is to make a copy of the RSS sample given with the Google Gadget samples. I did that (as a CSS person), I opened up the theme folder “default” and looked for “details.css”. I assumed this file would edit all the presentation for the gadget. It doesn’t. I only edits the flyout menu (after you click on a link in the RSS gadget). OK, that’s fine. So I enter this CSS:

body {
  color:#323F4C;
  background:#fff url(http://www.csskarma.com/images/bg_branding.jpg) no-repeat 0 bottom;
  font: 0.8em/1.5 Verdana, Arial, Sans-serif;
}

That will add my CSSKarma logo to the flyout and add some basic CSS. The other files in the theme folder to deal with are “entry_item.xml”, “theme_config.xml” and “title.xml”. After you look at “theme_config.xml” and “title.xml”, you’ll see why I think this is a little too modular. I left those two file alone. But I did edit “entry_item.xml”, view entry_item.xml. I edited some style information in there (one more thing I’m not thrilled about – embedding style info into the XML).

The next folder to tackle is “editme”. It contains 2 files (config_constants.js and entry_item_impl.js). In “entry_item_impl.js” you can edit the RSS nodes, if you want. I chose not to. In “config_constants.js” you need to edit the URL of the RSS feed you want to use.

The last thing I wanted to do was to remove the default background image from “main.xml”. When I did this, the background was transparent, by default. So in “main.xml” I added a background attribute of #FFFFFF to top level div (container). I also edited the height and width attributes of the “view” element for when the gadget is undocked from Google Desktop.

The outcome of this was the CSSKarma RSS Gadget (You’ll probably need Google Desktop installed to use this). A very basic RSS gadget made by making simple modifications to the sample files. Feel free to download, play around with it, and let me know about any errors you find.

Aptana Jaxter

Aptana Jaxter recently released “The worlds first Ajax server” (I have no date to back up the claim that it was recent). I’ve seen some web apps using this in integrating the Google API, looks promising but there’s very limited server space right now. I’d like to see how these can be integrated into the Mobile web. I don’t have too much information on it right now (and I keep losing the damn link).

That’s all I have for now.

With ease
Tim