There is a problem on the web. Displaying actual programming code takes away a lot of space of the webpage (especially the longer ones). You can split up the code in several parts, but that's really hard to read for programmers. You can leave it "as it is" and users would have to scroll a lot if they're not interested in the code itself. And scrollbars in code-examples - that's just horrible (and yes - that's what I have on this website).

I created a solution for this problem and call it the jQuery Code Expander. It does exactly what you think it does - Expand any code you want to place online using jQuery.

But, before you can expand anything, it has to be cropped. That's where the CSS kicks in. It's like a combination of using scrollbars and fully showing the code!

  

This script only changes those elements that needs to be expanded and doesn't touch those who don't. An additional overlay image is added, just to show the user that it can expand the code example. Check out the demo and read below what the secret of this technique is.

Pretty fast after I placed the Polaroid Photo Viewer with CSS3 and jQuery example online, I received loads of e-mails and comments requesting another feature. The original example was only full-screen, but people wanted it to "stick" to a box (Placing it inside a <div>).

By making a couple of changes to the original code, I managed to make this work too. So today, I present you the non-full screen version of the popular Polaroid Photo Viewer with CSS3 and jQuery.

Try dragging the polaroids around in the demo. You'll be able to do so, but the surrounding division seems to prevent the user from actually dragging it outside it's container.

  

Just like with the original example, this example only works on modern browsers supporting CSS3 (Safari, Chrome and Firefox 3.5). This probably would work with Opera too, but I haven't tested it.

Now to show you which small changes are made to the original script to make this one work.

If you're a regular visitor of Marcofolio, you know I love to create (and share) some wicked Proof of Concepts (For example: the Polaroid photo viewer and the iPhone Contacts App). They are nothing more than showing some amazing potential of certain techniques.

Today, I wanted to transfer the amazing slick Skype (for Mac) layout to your own webbrowser. Not the full layout: Only the menu where all your friends are listed. For the nifty layout we're going to use CSS3 and for the extra functionality (ofcourse) jQuery.

Features:

• Expanding and hiding the contact details.
• Nifty layout using CSS3.
• Extra info (behind each name that is not expanded) is added through jQuery.

  

Sadly, just like all other CSS3 examples placed here, not all browsers support this functionality. Only browsers that support the -webkit prefix (Safari and Chrome) and the latest version of Firefox (3.5 through the -moz prefix) are fully working. Other browsers will show the menu without the extra markup.

OK, here we go! Let's see how you can create one of these wicked Skype menu's yourself. The users listed in the demo are the friends of Marcofolio (same that are placed in the footer) with their Twitter profile picture and links.

A while ago, an article called "A fancy Apple.com-style search suggestion" was placed here. Many people loved it and already used the search suggestion in their latest web project.

Still, readers gave some criticism about the script. According to Jape, Simon and others the script was missing one vital element which the Apple search does have: keypress navigation (keyboard accessibility). For that reason, I'm presenting you a way you can improve that script yourself using advanced keypress navigation with jQuery.

Check out the demo so you can try it yourself: There is a simple menu displayed which reacts to the Up and Down arrows, as well as Enter (or Return) to follow the link.

  

The script is (a bit) advanced because of the extra functionality when the user combines the mouse hover and keypresses. Want to know how to create it yourself? Check out the source code or follow these steps in this tutorial.

After releasing several jQuery scripts, I wanted to take the whole jQuery programming to another level. For that reason, I'm proud to release my first jQuery plugin for everyone to use.

The plugin called jSlickmenu, creates, well, slick menus with jQuery. Combined with some great CSS3 features likes rotation and shadows, this plugin can really lift up your design. It's fairly easy to use, highly customizable and pretty cool (and fun!) to see.

As usual, you can freely use and modify this script where you want and I hope it can be of use in your next (web)project.

IMPORTANT NOTE:
Sadly, CSS3 and HTML5 aren't the standards (yet) these days (when will it ever be?). Since this demo is using CSS3, not all browsers will be able to show off the full effect. Because of this, it only works on Apples Safari and Google Chrome as they are the only browsers supporting the Transform and Box-Shadow property of CSS3 via the -webkit- prefix. Mozillas Firefox 3.5 is getting these properties too (with the -moz- prefix). So, for now, this is just for fun - Other browsers will display the menu, but (sadly) in a whole different way.

  

The plugin has been made as extensible as possible, so you can also view a demo with advanced settings. Make sure you check out the video demo and how to use the plugin.