Shoogle Designs » jQuery

Increase your blog’s readability with temporary removal of non-content areas

shoogledesigns — Mon, 07 Feb 2011 20:00:46 +0000

If you’re an aficionado of the web community’s twitter feeds, you probably have seen Arc90 and the @readability crew officially launch their web & mobile app which ‘zaps online clutter and saves web articles in a comfortable reading view’. And If you have read my blog before, you will know my love for minimalism and clean design. Therefore you won’t be surprised if I openly admit I absolutely love that “Imagine a web designed for readers” concept the guys from readability have come up with.

The BAD

Hostile environment for reading is how those clever people have described the web as it stands today. And hostile it is indeed. Between the site’s natural navigation features, the “advertise here” spaces people tend to put everywhere on their pages (in a natural attempt to monetize their blog), the most innovative, sometimes funny, mostly boring & annoying advertising banners , and f**k knows what else, it gets hard to concentrate on what you are reading.

The GOOD

But it doesn’t have to be that way…indeed. There are alternatives. The use of RSS readers is certainly one of them, although the simplest (and free) ones tend to drop some of the content (like pictures, and other media). Readability, as stated above, is definitely another way, and I can only encourage you to sign up to this service. But here’s a post about something I have been thinking about, looking at this whole “clean my page to help me concentrate on what I’m reading” concept.

Wouldn’t it be clever if we could have our blog’s web pages designed to show all our valuable content, all the side advertising crap we need to keep to make sure our families have bread on the table, and other social network links, but allow our visitors to concentrate on what they are actually reading by giving them dynamically the possibility to switch to a cleaner and minimalistic view of the article.

Thinking of it, not only it does seem possible, but also it could be mega easy using jquery and a couple of functions and classes. Let’s get crackin’ then!

The UGLY

Here’s the kind of page I often find on designer’s blogs. To be honest, I don’t personally agree with that kind of design, but yet again, I don’t personally need advertising revenues today. Problem: It’s got way too much on it. Some ads in the middle of the post which personally make me want to throw the laptop through the window (ok maybe not), some moving banners, some flashing pictures, in summary it gets hard to read what looks like a decent article (in fact it’s just this article you’re reading lol).

Anyway, here’s a screenshot of what such a page would look like. Please note the red annotations covering areas having absolutely nothing to do with the blog article.

READ-ABILITY

OK, let’s apply something really simple: set the class of all the div elements not containing any relevant data from the article to “hide”. I used pictures to illustrate my advertising banners for this demo. Therefore, I applied the “hide” class to all my advertising img elements. But the very same can be done on a series of divs.

This done, create a couple of logos to trigger your readability feature. I created a couple of Content Only and Show all buttons, and place them respectively in two separate divs of class “Hide” and “Unhide”.

Now, let’s turn to jquery and make sure that all the elements of class ‘Hide’ are being hidden upon the click of the Content only button, and of vice-versa for the Unhide class and the Show all button. Make sure your CSS includes a display:none setting for the .unhide class.

As you have may have noticed, I gave the effect a 200ms execution time to emphasize the resulting readbility effect. Hope you like it. I let you check out the demo now.

Geolocalize your portfolio to emphasize your local approach

shoogledesigns — Fri, 24 Dec 2010 11:06:42 +0000

It only takes a glance at services such as Yahoo Local or Google Places to understand the potential benefits of promoting your business at a smaller and more local scale.

I strongly believe that web design is not any different from the rest of the industries out there. Just as people will tend to buy local food to ensure freshness, quality and enjoy the opportunity to meet farmers and other local artisans, some people will be looking for a more local approach when on the lookout for a web designer.

I have met many small business owners having the will to get their services online, and promote their brand and company to other potential customers, but the overpriced quotes usually accompanying the too-virtual approach of a lot of web agencies often give those business owners the cold feet.

Please do not consider this post as a manifesto against modern technology and the use of web conference tools. I am a huge fan of Skype and other online sharing applications on both private and professional fronts. I however believe that nothing will replace good old face-to-face meetings to get things done, especially when projects are about to kick in.

And giving your potential customers the chance to meet you in person, meet the people you did work for and ask for their opinions on your services/customer-focus mind/prices and hence relate to your previous projects by adding a local aspect to your marketing campaign can only push things the right way.

Today, I will then take this opportunity to talk to you about a new jQuery plugin I have only discovered a few days ago: MobilyMap, created by Warsaw-based web developer Marcin Dziewulski of Mobily Playground.

What Marcin came up with is an attractive and dynamic way to display items/places/or more on a map by tagging coordinates-defined points on a given support. I let you discover this plugin and its many options on Marcin’s site.

I will show you instead how I have used this plugin to demonstrate how you can display your portfolio using this local approach mentioned above.

Get local

First of all, let me reaffirm that it doesn’t take a genius to get this thing working the way you want it. Proof is I wouldn’t be able to use it myself.

X and Y coordinates are needed to define your markups. Simply measure with any of your favorite graphic tools the distance between top and left borders and the location of your first customer, as shown below…

…and report your coordinates on a div of class set to point, and id set to ”p-x coord-y coord”.

Instead of using Marcin’s google-like markups, I opted for more subtle thumbtacks markups giving my portfolio map a more design-ish look.

Repeat the above process as many times as you have items to appear on the map.

In terms of Javascript, as usual all is provided by the plugins called in the header:

The jQuery library first of all, Marcin’s mobilymap and an init.js script with the various initial state options that you will be able to modify as you wish.

The CSS settings having nothing spectacular, I let you define your own settings yourselves. I just went ahead with a tiny thumbnail of the site designed and some description text wrapped around it.

This is about it. I let you take a look at the demo, and see how you too could geolocalize your portfolio, and get those local businessmen attracted by your services.
Finally, i wish you all a Merry Xmas.

Create a movie intro with basic jQuery effects

shoogledesigns — Fri, 10 Dec 2010 13:54:46 +0000

There are many examples of people having a go at animations without the use of video editing techniques, or flash on the web. And recreational activities being part of my daily schedule, I decided to challenge myself with a little one of those animation attempts, hoping to be able to recreate the well-known James Bond Intro with nothing but:

a bit of Photoshop
some CSS
a few basic jQuery effects (no extra plugin needed, but the standard library)

I pushed the challenge a bit further by restricting the number of jQuery effects to a mere 3, being:

fade(In or Out)
animate
delay

As a side-comment, let me point out that people often underestimate the power the delay effect. I absolutely love it.

Anyway, cutting a long story short, and attempting not to bore you with unnecessary details, here’s how I proceded…

Photoshop

I created the pictures needed for my animation, being:

a white dot for my pre-intro needs
a “Shoogle designs presents” label
a gun barrel inner view
a james bond character
and some blood layer with semi-opacity

All thrown on a piece of paper (do not mind the scales), it would look something like that:

CSS

Place a #video div in the middle, with overflow set to hidden…

#video {
	width: 560px;
	height: 300px;
	position:fixed;
	background-color:#000000;
	margin-top: 150px;
	overflow: hidden;
}

And set as many divs as you need for all your layers. Note that all my background images are set to PNG for opacity or see-through effects purposes.
All positions are set for the divs’ stating positions (before the jQuery takes over).

jQuery

As mentioned above, nothing but fade, animate and delay effects are permitted.
So we need a starting point, which is going to be the initial click on the toggle element (here the 007 gun, which will disappear once clicked by the way).
Then the animation and its sequence takes over.

Note that the sequence of events and effects is only timed by the delay feature. It doesn’t take much time to get it right if im honest with you. I let you go over the following code and its manual annotations yourselves, .

For your info, I used jPlayer for the background music. I’ve just realized that, for some reason, it doesn’t seem to be playing the tune when using IE8. Don’t have the time, nor the will to check out why. Let me rephrase, as this is only a wee game I’m playing, I don’t really give a f**k it doesn’t run best on IE, but if you know why, then don’t hesitate to leave me a comment.
For the rest of you’s (firefox, safari, chrome etc…users), it should work pretty good, and you should hear some james bond music playing. This obviously kicks in when you click on the icon, like the rest of the animation.

Also note that I had to modify the jPlayer settings so it pauses after having played the tune once:

.jPlayer("onSoundComplete", function() {
		this.element.jPlayer("pause");

This is it people, hope you enjoyed this little post of mine.
Leave a comment if you have. Follow me for more adventures in the future, and play the animation more than once, as it is a bit jumpy the first time round…

Create an elegant Portfolio with jQuery

shoogledesigns — Fri, 03 Dec 2010 20:06:30 +0000

Portfolios are not only the (supposedly-frequently-updated!) collection of your achievements and skills. They are your best and cheapest salesperson ever. When a customer is looking for a designer, web or other as a matter of fact, he/she is more than likely to check out your work before making an appropriate judgment on your designing skills and his/her potential will to work with you.

Customers are bound to follow a number of sources in order to find you. Word of mouth, publications, effective social marketing campaigns, and other targeted advertisements should get you to the front stage, making you a noticeable service provider, but the chance is this may not be enough in striking deals if your portfolio is neither up to date, nor the most attractive one.

Well, today, we are going to take a look at a very efficient way of displaying your portfolio, in an elegant-ish modern, dynamic and appealing manner, with only a few lines of jQuery codes.

I would like to introduce you to a couple of tools I did stumble upon while browsing the latest jQuery plugins out there.

The first one is fancybox , and although you may not have used this specific tool, you may already be accustomed to those lightbox-looking plugins by now if you are a fan of jQuery attempts like I am.

The second tool is a 3d carousel designed by Professor Cloud which I find not only very appealing but so easy to customize to your real needs/requirements.

OK, let’s get cracking.
One step at the time. Let’s first deal with the 3d-carousel plugin.

3D Carousel

Include your js packages in the head of your document, with as usual, the latest jQuery library, the cloud-carousel plugin you will find on Professor Cloud’s website, and the jquery.mousewheel javascript which will allow your users to rotate the 3d carousel with the mouse wheel.

Two more pieces of code will be needed for your carousel to work…

1. Some HTML defining a div of id carousel1 to be placed on the page. Use this opportunity to test/adjust the width and height of the carousel.

Note the ALT and TITLE attributes which will be displayed in the following p elements (of id title-text and alt-text) when hovering over the rotating images.

2. and some Javascript function including the position of the first rotating picture (which should be defined once the carousel dimensions have been set), and various other mechanisms such as the mouseWheel feature mentioned above.

Fancybox

The 3d-carousel setup now complete, we can now take a look at Fancybox.
Let’s take the same route, by defining first (in the head of our document) the necessary fancybox script and its css stylesheet.

And let’s now add a simple a href of id fancybox to each and every carousel image, to enable the visitor to click on the thumbnail and display a larger version of the picture lightbox-style.

And we’re done.

Time to finish this up with a decent demo and a slight twist to this portfolio creation post, with the opportunity to pay tribute to some of my dear web acquaintances.
I present you with my 3D-friends-carousel featuring:

Matt Ward aka @echoenduring
Radu Chelariu aka @sickdesigner
Becs Rivett aka @becskr
Adham Dannaway aka @cre8ivecommando
Michael Pehl aka @invocoes

Don’t forget to use your mouse wheel!

Help your visitors focus on the subject with jquery script PageSlide

shoogledesigns — Thu, 11 Nov 2010 18:13:35 +0000

As already stated during one of my previous posts (Push the minimalist approach one step further by hiding site navigation), I am (like many of you out there) a huge fan of the minimalism concept in web design, being convinced that too much information or content has a tendency to overwhelm our web site visitors to a point that they will lose interest, miss the point, and most likely turn around and never look back.

This approach has certainly proved to be a winning one in the marketing business, people in the high spheres of the sales industry very quickly understanding the power witty pictures could have in comparison to lengthy and boring sales proses.

And when it comes to online art display, I don’t see why those rules would not apply. Your work needs to be staged to be seen/inspected with attention. And very much like a designer would pick a frame, select his light to display a painting at its best, you need to make sure your visitors can see but more importantly can focus on what you want them to see.

And this implies the removal, at least on a temporary basis, of all the extra details, descriptions and other notes you may want to add to explain your work.

Well this PageSlide script I happened to find while taking a stroll along the jQuery plugin bay could bring you the chance to purify the display of your art piece before bringing in the valuable notes you want your visitors to be aware of. If you google this plugin, you will find out it comes in many shapes and pre-destined usages. The one I used for this example is Scott Robin’s.

Just download it and use it to your likings. You can add links so that the initial page shifts in every direction. I only set it up so it shifts to the left, but you get the idea.

Code your page

You will be needing 3 essentials pieces of coding to make this PageSlide script work.

Call the jQuery scripts in the header with the following:

A link triggering the shifting of the main content and the appearance of the hidden side panel.

- more about this -

And the javascript command dictating the various shape and direction of the side panel.

Finally you will be needing to code the side panel, in this case the page _left.html just like you would do with any other HTML page. This is it people, try it out. Open the demo and click on the -more about this – link below the picture to see the script in action. Click anywhere on the main content to go back to the page’s initial stage…

Spice up your Project Team presentation with Retina effect

shoogledesigns — Fri, 15 Oct 2010 14:23:16 +0000

“Talent wins games, but teamwork and intelligence win championships”. We can trust Micheal Jordan on this one. Although teamwork can surely become a complex, if not uncontrollable process, when things start going pear-shaped, it is more than often as challenging as rewarding in the end when people’s opinions, expertise, quality and characters are all put together.

And when a project formally ends, websites or webpages are built, press releases are sent out to annonce the launching of the long-awaited products, but managers and sponsors tend to forget all about their team work only to focus on the new gadget/product at hand.

This (slowly but surely) brings me to today’s subject, as I urge all project managers out there to start spending a few minutes and a single web page on their thankful acknowledgments to their dedicated project team members. And a picture being worth a thousand words, what better way to show your gratefulness and highlight your team members with a web page displaying a cool team photo.

Let’s go a bit further and apply an Apple-like Retina effect to the photo, and give this ‘team members’ page the modern and energetic look it deserves. Enough with words, make way for the coding…

Javascript

Nothing fancy but the latest jQuery pack and our retina.js script which you will find on a number of websites (just google it), but which I grabbed on the resourceful, and famous Tutorialzine.com website (as usual, I remind you all that I’m not a programmer and merely use other talented people’s work to satisfy my ideas).

HTML

Wrap the picture in a div of id “webpage”. You can change this of course, but you will need to apply the id change to the retina.js script if you decide to go this way.

CSS

I let you check all the position settings yourselves in the package to be download below. What is important here, is of course the display: none setting on the #retina div, and the webkit/moz box-shadow and border which will give your cursor a real cool look on the Safari/Firfeox/Chrome browsers.

#webpage	{
					width:499px;
					height:283px;
					position:absolute;
					top:50%;
					left:50%;
					margin:-141px 0 0 -249px;
				}
#retina     	{
					background:url('retina/team.png') no-repeat center center white;
					border:2px solid white;
					position:absolute;
					height:180px;
					width:180px;
					display:none;
					cursor:url('retina/blank.cur'),default;
					-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
					-webkit-box-shadow:0 0 5px #777;
					box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
					-moz-border-radius:90px;
					-webkit-border-radius:90px;
					border-radius:90px;
				}
#retina.chrome	{
					cursor:url('retina/blank_google_chrome.cur'),default;
				}

Don’t forget to check out the demo and download the zip package if you want to adapt the following example to one of your team photos. For my demo, I went with a picture of John Resig and his development squad, who are making jQuery the best JavaScript tool possible. Big hand to you guys and girls…

Create a funky 404 page with jQuery plugin jParallax

shoogledesigns — Mon, 04 Oct 2010 14:17:12 +0000

I have to admit I absolutely love those cool and creative 404 pages some designers do come up with sometimes. Nothing is funkier than getting to a really unexpected and innovative 404 sample following a URL typo.

The problem is there aren’t so many of them around. Ok, you can find loads of posts listing them up, but those posts often show the same works and you have to admit, for the amount of web sites present on the ever-growing 3-w sphere, there doesn’t seem to be a lot of people coming up with decent (if not funny) 404 pages worth a look.

This was the mindset I was in when, a few days ago, I did realize there weren’t so many of them because people (like me) were way too lazy to actually take the time to THINK and DESIGN a DECENT 404 PAGE. Therefore I decided time had come to stop drooling over other people’s work and get things going right at home.

When thinking about my own 404 page, I decided to use one of my earlier photoshop works (Shoogle Designs’ own personal fail whale) and apply it on a larger scale to give this 404 page and cul-de-sac event all its meaning, while making a huge reference to Twitter’s over-capacity feature.

The concept was simple (for a deranged mind like mine): create a 404 page featuring a stack of layers, all responding their own way upon movement of a hovering mouse, while featuring my own and personal fail whale over a number of various and colored waves.

“WTF was that?” is probably what comes initially to your mind. Therefore here’s what I was thinking of in a simple and yet self-explaining drawing:

As you can see, each and every layer would remain independent from the others, hence they would have a separate behavior when the mouse hovers over them, giving the visitors a wavy 3d-like effect.

This obviously takes me to the jQuery plugin of the day. As you may know from my various posts, I am not a programmer, I let all of this programming malarkey to people much more talented and knowledgeable than myself, and merely use them to satisfy my own imagination.

So,…jParallax is what I have been using here. There are many demos on the webdev.steph band website (and even many more on other websites). I can only encourage you to check this person’s samples (good work by the way whoever you are, as I can’t find a real reference there).

The code behind jParallax

The code used on the demos looking bit daunting at first glance, I’ve decided to simplify it all and make it understandable for you all jQuery beginners. Here’s what it all comes down to:

A javascript command applied to a div whose id is jparallax.

I let you check out the demo. As I don’t have personal screencasts to show, I took a few from Mr Jeffrey Way & co from Nettuts.

For more info on the plugin (including download files), please use the following link. And finally, for your info, Yoxview are also on Twitter.

Quick tip: use the backgroundColor settings to change the semi-dark background and make it consistent with the rest of your site.

Create a personalized scroll-to-top icon

shoogledesigns — Wed, 15 Sep 2010 18:32:23 +0000

If you are a WordPress user and most likely WordPress lover like me, you are more than likely aware that implementing a scroll-to-top link on your site is just as easy as pie. Just go to the plugin section of your WordPress back end, choose one of the many plugins available (Asvin Balloo’s wp-to-top is a very good one for example), activate it and customize the link, color and background color.

I was tempted to do this myself, just sit back, relax and click a few times to get this done. But I decided to go the longer way as it would be nice:

to inform people wanting to implement this on any website, and not only on WordPress
to have this feature customized so the scroll-to feature displays a dynamic and personalized icon instead of a simple link
to have this customized without having to go into the plugin editor and mess things up, especially if you have gone WordPress multisite like me.
to have this scroll-to-top feature available on a selected number of pages, and not on any post (or all site pages) as most plugins will give you the possibility.

Bearing in mind there is no need to reinvent the wheel, let’s Google a scroll-to-top jQuery plugin, and yes: you will find tons. I decided to go with Matt Varone’s plugin set (details here) and can only encourage you to go check it out and leave a kind message to this talented designer.

So here we go with the coding.

As Matt brilliantly explains it, you will be needing the jQuery plugin library as usual, his jquery.ui.totop.js script, some css to have the icon showing up, and a double-sided icon (or sprite as Matt calls it), with hover and no-hover states which will give your icon a dynamic and funky effect.

The CSS code

#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:-999px;
	background:url(../img/ui.totop.png) no-repeat left top;
}

#toTopHover {
	background:url(../img/ui.totop.png) no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}

As you can see, we have an icon set to 51px wide and 2x51px high, and two positions for our hover/no-hover states, with a left top positioning of our background image for the no-hover state and a left -51px positioning of the image for our hover state. This will technically shift the image along its y-axis and create a dynamic effect to it.

Personalize your icon

Obviously, you can choose to apply one (or more) effect(s) to a simple arrow icon if you decide not to go over the top with this. I went with Shoogle, my beloved fishy icon, with a black and white effect on the no-hover side of the pic and a colorful and thumb-up picture for the hover state.

OK this is it people. Click on the demo, scroll down the page to make the icon appear and don’t forget to hover over it with your mouse to flick between hover and no-hover states. Finally click on it and make the plugin take you back to the top. Download files here.

Happy plugin implementation!

Use Captify to add a slick caption effect to your images

shoogledesigns — Mon, 13 Sep 2010 15:35:13 +0000

I don’t usually quote other people’s work as the good stuff out there is usually very well known and more importantly very much documented on the web (whether it’s presented in press releases, news or relayed in blog posts).

I’m however going to make an exception with this one, as many of you have been asking me about this latest jQuery plugin I’m using, and time has come to come clean and refute the few people who have been foolishly thinking I was the gifted brain behind this one…

If you have read my latest post on How to Embed Google maps into your website in no time with jQuery, you may have rolled your cursor over a couple of pictures present on the page (my local pub and a snapshot of Google maps), and hence may have noticed a slick and very modern-looking semi-transparent caption appearing on top of them.

As i mentionned it earlier, since a number of you have been complimenting me on this, I have decided to write a short article, and give back to Caesar what was Caesar’s, or in this very case, give Brian Reavis (@brianreavis of thirdroute.com) the credit this young and selft-taught designer deserves for this slick work.

Anyway, I will not be going over Brian’s work in details as he does it much better than me. So I suggest you do check his Captify plugin on his site here or download it from the official jQuery plugin location there. But technically all it takes is the plugin, and a captify class applied to your images.

Once again well done Brian!