Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Comments

Intro to Spring Security Core for Grails
Eric Pierce said: Thanks for these screencasts, Dan! You made it crazy simple to get up and running w/security core h... [More]

Removing duplicates from an array of objects
Arvind said: Great tip, can't thank you enough for this. [More]

Intro to Spring Security Core for Grails
Santosh said: Thanks much for putting up these screencasts. As the others here I'm a beginner and I've been having... [More]

Grails Spring Security Plugin - Logout postOnly setting
eriihine said: I still had some issues with this one. It seems that the href link is always generating a GET method... [More]

Intro to Spring Security Core for Grails
Dan Vega said: Just a heads up but I decided to write up a quick post on your question just in case it trips up any... [More]

My first jQuery plugin: Big Ass Menu

I am not going to get into a tutorial on how to write a jQuery plugin. There are tons of tutorials out there so I will leave that explanation to the pros. Instead I will walk you through the process of building my plugin. This is the first take so please be nice! I will also come back in future posts and correct some of the mistakes made here. The first thing we need is the core code for our plugin. With the code above we can call our new plugin using the following code.

Before we get into any more code I think its time to look at our markup. It is important to note that a plugin like this really needs 3 things to make it work well. We need to have the markup for the component (HTML), the look and feel (css) and the glue to put it all together (JavaScript). With that this is the markup we are going to work with. Our sub menus will be divs right under our main menu items.

Now that we have the core of plugin ready we need to start writing some code. First we are going to create a reference to the jquery object. Using that reference we can use that as the basis of our selector. This will indeed improve performance because we don't need to go searching the entire DOM now. In our example from above we are now strictly working with the menu node. With the code above we now have an array of menu items (menuItems) to work with. What we want to do is iterate over each of those items and do some work. Here we are going to find the id of the main menu item so we have an object to create a sub menu for. When we have that main navigation item we can look to the next node in the dom which should be our "div".

Next we are going to hide all of the sub menus and add a class to them called submenu. Later on we will make these configurable options but lets just run with this for now. With our id we can now listen for a hover event. When the user hovers over the menu item we want to fade in the sub menu and change the class of the menu item so the user knows they are "activating" a menu. When we roll off the menu item we are going to do just the opposite. This works except when we roll of the main navigation item the sub menu disappears. We can fix that by adding a hover event for the sub menu as well. When the user rolls of the main navigation item they will move onto our sub menu.

So that is my first attempt at a plugin. Like I said before, there are probably better ones out there but this is a great learning experience for me so I am running with it. I will make this code available after the next couple of posts. I also want to get some credit where it is due. The reason I was able to write this plugin is because of the jDiv Skyrocket labs plugin. This is the code that flipped on the light switch for me so thanks to them for the great resource.

 
 

The Mega Drop Down Menu

I don't think this is the official name for it but you may get the idea from the name. Here are work we needed the ability to create a ton of content in drop down menus. As an example here is a quick wire frame that I threw together.

When you hover over a menu item the mega drop down will appear. The important thing to pay attention to here is that the content in the drop down menu should have the ability to contain any markup. There is a great article on site point about these menu's and how they are really starting to crop up everywhere.

I took a couple screen captures of some mega menus that I really like.

GoDaddy

Food Network

There are plenty more examples around the web but these are 2 that I like. Now that I have an idea of what I need to build I needed to figure out how to do it. To accomplish this you are going to need a combination of html/css/js. I did a quick search for a jQuery plugin and found instructions on how I could accomplish this. I decided that I really wanted to understand how the internals worked on this so it was time to create my first jQuery plugin. There are probably plugins out there that do what I am looking for but I needed to really understand how this works in case I need to make modifications in the future.

With that my first jQuery plugin (BigAssMenu) was born. Look for some more information about this plugin in the near future. I want to write about this plugin step by step so people can really follow along with me. Also, don't get to hyped up, it works but I need to come up with some really good examples to show of this plugin. Maybe I will try and recreate the menus above!

 
 

IE6 position absolute bug

I am working on some html/js/css menus and I came across an IE bug that I am not sure how to fix. I only say that it seems like an IE bug because it seems to work fine in Firefox/Chrom/Safari. Here is the markup for my menu. And the css.

In Chrome


In IE6

I am sure there is probably some hack to fix this I just don't know what I am looking for. If anyone can help me figure this one out that would be great.

** UPDATE
Bradley Moore was able to help me out with this one. Here is the updated css.

 
 

Using css to create non printable pages

Ok, so the title of this entry is a little misleading but I was just trying to get your attention. I had a request at work the other day that I knew right away was going to be impossible. The request came down to me and looked a little something like this.

Dan - I know that this may not be possible but is there any way to disable printing for the results screen your working on?
Of course there is no way to truly stop someone from using print screen and printing out the contents of the screen. What I did learn though is that they were talking about the file > print command from the browser windows.

This of course is not possible to disable but with a little css magic we can create some invisble ink. First you need to a print stylesheet to the template. This basically tells our application that when a user goes to print this template use this style sheet instead of the normal one. In that stylesheet we can do a quick little trick to hide everything on the page. Now when the user goes to print the page all they will see is a blank page with a printer header and footer. I know dumb little trick but I thought it was funny.

 
 

A lot of hard work has finally paid off

When 2009 started most people were working on setting those all important personal goals for the year. Let's face it, for most of us If your still following 1 a congratulations is in order. Here at STERIS we were starting the planning phase of what would become the new www.steris.com. If you don't know I was lucky enough to have joined this team back in October of 2008. I happy to announce that over the weekend we were able to launch the new corporate site. There is still plenty of work to do but I would like to walk you through a quick overview of the new compared to the old and give a quick run down of the new features. In the future I will post some more code specific features.

Here are a couple screen shots from the old site with it's counter part from the new site. The first is the home page and the second is the news page which is also an example of an inside page with sub navigation. 

 

Continue Reading >>

 
 

More Entries