View all tutorials for Marcofolio.net

jQuery quickie: Unlimited Scroll using the Twitter API

Time for another relatively simple jQuery tutorial, just like my previous jQuery quickie. At work, I'm currently working with Silverlight and implemented unlimited scroll. This is a great technique that could be used on loads of websites. Instead of the regular pagination, where the user has to click to see the next page, unlimited scroll automatically loads the next page when the user is at the bottom.I wanted to take this technique and port it to another jQuery example.

Animated wicked CSS3 3d bar chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I'm proud to release the animated wicked CSS3 3d bar chart.The principle is the same as the previous version: Create a beautiful 3d bar chart. But this time, we don't create a "stacked" one (since animation would be hard), but several bars place

Giveaway - $40 book vouchers from ShopHTML

Books are a great resource to have. They provide loads of useful information and especially when learning a new things, reading a (hardcopy) book can be really great. Absar from ShopHTML knows that too and has decided to give away $40 book vouchers for two lucky readers from this site. You can use this voucher to buy any (web)design related book that you want. Go crazy with subjects like ASP.NET, Silverlight, Flash, CSS, jQuery, PHP, WordPress, Joomla!

Wicked CSS3 3d bar chart

More and more CSS3 articles are popping up on Marcofolio and all across the web. Although CSS3 is just future talk (since not all browsers support it yet), it's pretty cool to get a sneak peak on what the future will hold for us.While browsing the web, I came across a pretty cool 3d bar chart created with Flash. I was wondering if I could recreate the same neat effect using pure CSS3 and started working on this wicked CSS3 3d bar chart. Check out the example to see th

WordPress and Flash 10x: Book review and Giveaway

After the jQuery 1.3 and PHP, Zend Framework 1.8 and WordPress 2.9 E-Commerce book reviews and giveaways (all books from Packt Publishing), I'm reviewing another book today. This time, the book has been written by Peter Spannagle and Sarah Soward and is called WordPress and Flash 10x Cookbook.As you might expect from reading the title, this book covers some great ways on how to combine WordPress with Flash. For me, it was a very interesting read, since I'm

3 year anniversary of Marcofolio.net

Not one, not two, but Marcofolio.net is turning 3 years old today! Time goes so fast when you're having so much fun, doesn't it? And I'm still writing high quality content with pleasure, still exploring more and more possibilities of the web every day. I believe the quality of the articles have gained a lot, especially compared to the first year. I wanted to push out a redesign before the blog turned three, but because of the lack if time, you'll have to wait

jQuery quickie: Colourful rating system with CSS3

Today, we're going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.By using the jQuery Color plugin, we can animate colours. Simply use the animate() function from jQuery to have colours fade to another colour. When using this technique, combined with some CSS3 feautures (roun

3d animation using pure CSS3

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?At that point, I started digging through the Safari Reference Library, where I eventually found the Safari CSS Visual Effects Guide: Transforms page. This page describes a CSS property I've never

jHTML-Ipsum: HTML Ipsum using a jQuery plugin

Most webdesigners/developers know what Lorem Ipsum is. For those who don't, it's simply dummy text of the printing and typesetting industry. Although I hardly use it myself (others think it's killing your designs), I still think the idea behind it is pretty good. Chris Coyier took this idea to a whole new level and created HTML-Ipsum. You can copy HTML elements to your own project to see if you've styled all the elements in a proper way.There is ju

Advanced jQuery background image slideshow

A couple of weeks ago, I received an e-mail from a guy named Patrick. He just visited the website from Philadelphia and wanted to know how to create the slideshow header that's on top of the page. Since I was also impressed by the effect, I took the time to recreate this effect myself. Our focus is the background image slideshow (including the text), not the other things (like the dropdown menu).With the use of transparent PNG's, some HTML, pretty nifty CS

WordPress 2.9 E-Commerce: Book review and Giveaway

A while ago, I reviewed the jQuery 1.3 and PHP and Zend Framework 1.8 books. These books are published by Packt Publishing (who just had a redesign on their site) and they asked me to review another book for them. This book, written by Brian Bondari, is called WordPress 2.9 E-Commerce. As you could have guessed by the title of the book, it shares great information about WordPress combined with the WP e-Commerce plugin. This book was an eye opener for myself to

jFancyTile: A jQuery tile shifting image viewer plugin

Previous week, colleague Willem and I were checking out the mosaic slideshow created by Martin. We were both impressed by his example, but wanted to take it to another level. We discussed on how we could add some features and how it should look like. Willem tranformed this idea to Silverlight and I created an easy to use jQuery plugin that does the same.This jQuery plugin called jFancyTile is a tile shifting image viewer. It allows you to tranform any list with images to a be

How you can prevent an SQL injection

About the author:The write up has been done by Joanna who works with WebHostingSearch and has been been part of web industry from quite some time now. An SQL Injection (also known as "Failure to Preserve SQL Query Structure") is one of the most common and most dangerous security issues. SQL injections are dangerous because they are a door wide open to hackers to enter your system through your Web interface and to do whatever they please - i.e. delete tables, modify da

Zend Framework 1.8: Book review and Giveaway

A while ago, I reviewed the jQuery 1.3 and PHP book. This book is published by Pack Publishing and they asked me to review another book for them. This book, written by Keith Pope, is called Zend Framework 1.8 Web Application Development. As you could have guessed by the title of the book, it shares great information about the Zend PHP Framework. This book was an eye opener for myself too, since I'm a regular user of the CakePHP framework.I've read the book and

Pure CSS3 bokeh effect with some jQuery help

Bokeh - In photography, bokeh is the blur, or the aesthetic quality of the blur, in out-of-focus areas of an image, or "the way the lens renders out-of-focus points of light." (from Wikipedia). I'm pretty sure you've seen this effect before, since there are loads of wallpaper roundups and tutorials using this technique. Currently, one of my favourite wallpapers has to be this bokeh effect from -kol.Today, I want to add another addition to the bokeh "hype", by crea

Offline ways to keep your creative fluids going

"Inspiration can be found everywhere". But what if you're simply empty and have no fuel in your creativity tank left? You can always get stuck at a creativity block, which could have a very big impact.To prevent this phenomenon from happening to you, I compled a list with 10+ offline ways to keep your creative fluids going to prevent a creativity block. As you can see by the title of this article, this list aims at the offline ways (by not using your computer) in orde

Alice in Wonderland Fan Art

Although the success of 3d movie "Avatar" seems unstoppable, another movie in 3d is coming to the cinemas soon. With the tagline You've got a very important date, the latest version of "Alice in Wonderland" will be released in theaters in one of the upcoming weeks.Since the story about Alice is one most people will know from their childhood, loads of fan art is created around it. Because of the upcoming movie, this post is a inspirational roundup with Fan Art about Alice in Wonde

New CSS3 properties added to Firefox 3.6

A couple of days ago, Mozilla released their newest version of their ever popular browser: Firefox. It was in beta before, but now version 3.6 can be officially downloaded. This version of the browser brings us a couple of improvements on several aspects, like using Personas (themes), improved (JavaScript) performance and an extended version of the CSS engine compared to the 3.5 release. Today, we're going to look at a couple of the new CSS3 properties

Nostalgia: Dragging the Windows XP error dialog

Remember the "good old days" when you were still using Windows XP? If so, I'm pretty sure you remember the loads of error dialogs that would pop up at a totally random time. Although these dialogs always show up at a bad time, you could do something pretty neat with them. Drag the window around and it would duplicate itself over and over!Sadly, I haven't seen this effect alive in Windows 7, so to keep those memories alive for XP, I re-created the effect using HTML/CSS

jQuery 1.3 and PHP: Book review and Giveaway

Combining both jQuery and PHP can be very powerful. One of my very popular articles called A fancy Apple.com-style search suggestion is combining these two techniques too, to achieve the desired effect. There are loads of tutorials on the net that also use both techniques, but Kae Verens wrote a complete book about it. The book is called jQuery 1.3 with PHP (by Packt Publishing) and shares great information on how you can combine jQuery and PHP for use on your own web

Best of the Best: 2009

A little bit of sad news; This will be the last post on Marcofolio on 2009. I'm going to Austria for two weeks and enjoy a winter sport vacation. But don't worry, I'm planning on finishing this year with another great article.Just like last year, I contacted several (web)design bloggers and asked them the following question: Could you provide me with the URL of what you think is the best article that you wrote in the past year (2009)? If you do, pl

CSS3 animations and their jQuery equivalents

As you might know already, I'm not a big fan of animations that are added in CSS3. Yet, several people on Twitter told me why they really like the feature. At that point, I wanted to play around with it too.At the same time, I wanted to see if those animations with CSS3 could be created with jQuery too (especially for those browser that don't support CSS3 animations yet). So today, I present you Five examples of CSS3 animations and their jQuery equivalents. Th

Sweet tabbed navigation using CSS3

Although I don't understand why animations have been added in CSS3, this upcoming standard does have a couple of very neat features added to the CSS we're using today. I wanted to take a couple of these new things, and create a Sweet tabbed navigation using CSS3. This tutorial takes on the following CSS(3) properties: rgba opacity text-shadow pseudo selectors rounded corners gradients box-shadow As you could expect, this demo only works in bro

Your two cents - CSS3 animation and Lazy loading

Remember jTypingHero? This was a fun little game to test your typing skills based on the ever popular Guitar Hero. Lately, I came across some news about a new "Hero" game: DJ Hero. Since I really love Proof of Concepts/experimenting, I wanted to bring the vinyl to the browser. That's why I present to you: jQuery DJ Hero.By combining CSS3 and jQuery, I created two records that you can start spinning (faster and slower) and even scratching is e

Giveaway contest - Invoicera Billing Software

Style Sheet switchers (or "colour theme choosers") are not really that new. Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions.There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. We'll simply change some colours for t

CSS trick: Debug your HTML and CSS

Last week, I started experimenting with Microsoft Silverlight. I've never worked with the technique before, but after using it, I was impressed. It works pretty good and the separation of the XAML and CS file is great.Today, we're going to create a Smokey Mouse Follower in Silverlight. This was my first experiment too and pretty fun to see. I have to admit that the layout can be improved in loads of ways, but this tutorial is intended to be for beginner Silverlight us

Browser size aware content scaling

The use of HTML lists (<ol> for an ordered list, <ul> for an unordered list) is very common these days. Today, we're going to look a little bit further than creating regular lists, by showing 8 different ways to beautifully style your HTML lists with CSS. We'll use some pure CSS techniques to make a bored list look awesome (and even have some extra functionality). As a reminder, here's how a default ordered list and a unordered list look like&#

Complete list with sweet UI improvements on Windows 7

Planet Collision: Free November 2009 Calendar Wallpaper was originally my entry for the Desktop Wallpaper collection on SmashingMagazine. Sadly, my wallpapers weren't selected to be included in the list, but I still wanted to share them with the rest of the world. I hope you enjoy them and use them as your wallpaper. These wallpapers are totally free for all kinds of use. Next to the versions that has a calender on them, the non-calender version has been included (in

jQuery DJ Hero - CSS3 and jQuery fun

As you might already know, I'm Dutch. This simply means that I was born and live in a country called The Netherlands (a.k.a. Holland). When looking at prejudices: The country of cheese, wooden shoes, windmills and (legal) drugs.But I'm not the only one having roots in this part of the world. A couple of (big) companies started their business here. Some of them became really big and grew to international sizes.Today, I presen

Create a better jQuery stylesheet switcher

Don't you wonder sometimes, when looking at something, how you can create something like that yourself? I have to admit that I do. This is why I came up with the Skype for Mac and the iPhone examples in your webbrowser. Today, we're trying something new in this Proof of Concept category: creating a theatrical movie trailer with jQueryThis technique could be really well used when creating a slide-show that just needs some text. Using the CSS letter-spacing property, we

Create a mouse follower with smokey trail in Silverlight

Formatting and submitting invoices may seem like a headache at times, but this essential component of the billing process is a critical part of doing business. Record-keeping would be nearly impossible without a paper trail that includes invoices submitted to clients, customers or employers. This is where one should consider the help offered by web based invoicing software, a surprisingly simple and easy way to automate your invoicing paperwork.There are a plethora of online invoici

8 different ways to beautifully style your lists

Today, I'll be showing you a neat little CSS trick to Debug your HTML and CSS. Take note that this will not be actual debugging, but it can help you find the element depth on a web page. Also, when you didn't properly close a tag, this piece of code will expose it for you. Simply check out the demo to view what we're going to create! At first, the demo looks like a regular web page. But when you start hovering the elements, you'll be able to see the HTML struc