Skip to Main Content

The One Three Web Design Blog

  • Today we are going to watch some grass grow.

  • Whoa did you see that? Look at it grow!

  • Now we shall zoom in to really see it grow.

  • This concludes our grass growing presentation for the day.

What?

This is a jQuery library plugin.

This plugin takes any list and makes the list elements fade in and out in an endless loop. Pauses on mouse over and restarts on mouse out. Markup inside the list element does not matter it will roll and fade just about anything (not tested).

If you are looking specifically for something to roll a list of images with text on top of them then you are in luck. The plugin comes with some built in styles to do just that.

How?

Add rollSM.jQuery.js to the head of your page after the jQuery library.

  1. <head>
  2. <script type=”text/javascript” src=”jquery.min.js”></script>
  3. <script type=”text/javascript” src=”rollSM.jQuery.js”></script>
  4. </head>

Setup your list however you see fit. If you want to use the built in styles for the rolling image with test on top of the image setup the list as follows.

  1. <ul class=”someSelector”>
  2. <img srd=”imageName.jpg” alt=”" />
  3. <div>
  4. <p>Text to go on top of image here</p>
  5. </div>
  6. </ul>

Lastly, select you list and attach the roll function to it. Pass a variable of true if you are using the built in styles for an image with text on top of the image and false if you are going to use your own styles.

  1. $(document).ready(function(){
  2. $(“someSelector”).rollSM(true);
  3. });

If you choose to use the built in styles open rollSM.jQuery.js and edit the customizable variables to meet your needs. Also, you can change the time interval between rolls in this file.

Future Features List:

  • Text on bottom, left and right
  • Text that fades or animates in
  • Arrows for navigation

Download

Get the ZIP

March ’09 Monthly Faves

Mar 31, 2009

More faves for the month. Some of these were written in February, but I didn’t stumble across them until March.

Lay Off the Juice Man!

An article running down the debacle that was the Tropicana carton redesign. Lots of good links and a particularly good quote from Paul Ford.

Creativity Abound

Designers block? Spark your creativity here. Lots of good examples and links.

Building Your Own Portfolio?

Ten surprisingly good things to consider when designing your own portfolio. Followed up by a slew, too many to count, of great portfolio examples.

Monthly How To

In this months how to segment we learn how to create simple and elegant light streaks using Photoshop. Thank you SpoonGraphics for being so awesome.

Manage A Large Corporate Site?

Learn what your corporate site is doing wrong, along with a slew of other things management will never give you the go ahead to fix.

Brand New Look and Feel

Mar 15, 2009

There’s something different about the site isn’t there?

Yup. After 1 month I already got sick of the old look of the site. So it had to go to make way for what you see before you. Hope you like it and feel free to let me know what you think.

Just think of it as an experiment in making a fresh looking new site without using gradients.

Monthly Faves

Feb 20, 2009

In an effort to provide more content I plan on doing these monthly faves posts. Mostly centered around web design and practices, but not always as my interests tend to wonder every now and then.

50 Dollar Logo Experiment

According to Forbes design is a snooty business and instead you should use sites like CrowdSpring to allow 10,000+ designers who know absolutely nothing about your business and are just looking to get paid to design your logo/print/site for you. They do guarantee quality and at least 25 entries so how can you go wrong? In all reality it is the designers that are hurting themselves by participating. Lets move the industry forward with grace and quality, not backwards with design by committee and spec work. But hey, if you’re interested fire up your browser hit iStock photo and become a designer!

Over here off my soap box, this link is an example experiment with one of the instant, cheap logo design adds (similar to clownSpring) you get if you google logo design.

iPhone Browser Simulator

Just a nice way to view your site on the iPhone. Requires Safari 3.2 for windows and has only been tested on Vista.

Learn Blender

Ever since the first time I played with Maya and LightWave I’ve wanted to someday return to the world of 3D modeling. However, the price tags on these things are a little steep to just play around with. Blender on the other hand has the very attractive free price tag.

Universal Login Debate

Feb 19, 2009

Along with a new invigorated session of the browser wars, 2009 will set the stage for the universal login debate to finally heat up. As a front end developer I’m chomping at the bit for a definitive, easy to use, universal login.

Of all the universal logins OpenID, MySpaceID, Google Friend Connect and Facebook Connect have the greatest potential of find themselves on top of the heap. Funny enough, a quick google search for “universal login” brings up no direct links. Most of these universal logins are relatively new being announced early 2009 or late 2008, except for OpedID which has been around since 2005.

Who will win?

In short Facebook Connect.

Logging in

When I think of a Universal Login I think one username and password that I can use to sign in anywhere. OpenID, Google and Myspace all allow you to use a multiple of different accounts to login to a site using their service. For example, Google Friend Connect allows you to login using your google account, AIM account, Yahoo account, or even OpenID. So what if you are like me and you have one of each of these or rather multiple accounts of each of these. Good luck remembering which account type you used for this site and which of those multiple accounts you chose to login with. And God forbid you realize that your Yahoo accounts can double as OpenID’s, then you might really confuse yourself.

Facebook Connect offers one way to login and that’s your Facebook account. Whether or not you have multiple accounts is your business, but I would be willing to bet most people are less likely to have multiple Facebook accounts.

Usability

The biggest possible competitor to Facebook in the universal login race I figured would be Google, but Google Friend connect looks to be huge letdown. Mainly because it looks like they have taken the focus away from developers and put it on bloggers and grandmas. Friend Connect allows you to just cut/past pre-made gadgets into your page. Great if I’m specifically looking for something already created and there is the option of writing my own gadget, but what if I like using jQuery instead of pure JavaScript. And lets face it Google is not known for creating super accessible, standards compliant, visually appealing applications.

All other login forms get you logged in and the rest is left up to the developer to figure out in whatever form they see fit.

Marketing

When it comes to using your selected universal login to also promote your site, Facebook Connect is second to none. Google does offer the ability to share your content with your Google contacts, but I don’t picture Google as ever being a viral social marketing service.

Facebook Connect on the other hand has an ever growing potential to get your content out to the masses. You are given the opportunity to allow your members to post back to their outgoing news feed via status updates. Think about it, 150million users up from just 11million users just 6 months ago, half of which login on a daily basis, with the fastest growing population being 35+(people that actually spend money), and the average user having 100-200 friends. Every time a user enters info on your site they are also advertising for you. Now just make it an opt-out situation, Facebook does it why can’t I, and there’s no stopping you.

Evil empire

I know we’re all worried about Facebook becoming a huge evil empire, but aside from OpenID, these are all evil empires. Myspace is a bastardization unto the web. Google will have its own operating system in a matter of years (you all know its true) and the takeover from Microsoft will be all but complete. And Facebook has this evil arrogance about them. They force new features in opt-out mode only onto their users and the whole internets turns upside down for a few days but ultimately everyone accepts it.

It’s not all roses

Facebook Connect is heavily reliant on the end user having JavaScript turned on. As in it does not work if you don’t have JavaScript enabled. Not a huge issue I know. Most people have come to realize that JavaScript is for more than annoying you with pop ups/unders and have it enabled, even if by default. But this will greatly affect its ability to be accepted for use in the private sector as JavaScript and screen readers do not mix. At least until everyone switches over to being ARIA compliant. But, maybe they don’t care about this sector and maybe would even want to stay out of it, but there are still accessibility proponents out there such as myself that can’t easily overlook this.

Growth comes at a price. It is estimated that for every 1million new users Facebook has to spend 1million on new servers. Pocket change for a company worth billions, but what if their user base doubles over the next year and internet advertising continues to decline during the recession. Facebook will be worth less on paper and will still need to be shelling out the cash. It’s a situation where certain side features might start to get cut, if you catch my drift.

Facebook has a history of just doing things that many of their users oppose, but ultimately cramming it down their throat. Most recently it has been over their Terms of Service where they changed the verbiage to read Facebook owns all your data forever and there is nothing you can do about it. The TOS has been changed back after threat of some legal action. There is a bigger question here. How much longer are users just going to sit back and take it? Probably only until something bigger and better comes along.