Tutorial

Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example

Wednesday, June 16th, 2010 | Tutorials | 4 Comments

This tutorial will cover:

  • Modifying CSS attributes with jQuery
  • Setting a class for a page element
  • Removing a class from a page element
  • Testing if a class exists
  • A quick toggle click behavior example

The final example will use all of the other elements in a single exercise.

› Continue reading

Tags: , , , , , , , , , , , , ,

HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery’s fadeTo

Tuesday, April 13th, 2010 | Business, Tutorials | 4 Comments

In this tutorial we will review:

  • Basic document jQuery preparation
  • Binding  jQuery actions to an anchor (A) tag
  • Fading In and Fading Out html elements with Javascript/AJAX

› Continue reading

Tags: , , , , , , , , ,

How To: Track File Downloads with Google Analytics

Wednesday, March 25th, 2009 | Business, Tutorials | 11 Comments

Google Analytics is what most people use nowadays for web traffic reports.  It is flexible, powerful and simple.

The problem with Google Analytics is that it doesn’t analyze web traffic reports, but generates data in real time.  In most cases, this isn’t a problem.  In fact, it is big feature.  The problem is what about files that do not parse javascript such as PDFs, ZIP files, or other non-HTML documents.

When a user clicks on a PDF from your site, you will never see that PDF in Google Analytics.

How to track File downloads with Google Analytics
It’s very easy.  As is most things with Google Analytics.

Google Analytics provides a method for tracking anything you want.  It’s called “_trackPageview”.

You use it in javascript as “pageTracker._trackPageview(‘/downloads/map’);”.

How does this help us track file downloads?  Simply modify the link to the file asset to have an “onClick”:

[jscript]
Link to the file here:

<a onclick=”javascript: pageTracker._trackPageview(‘somefile.pdf’);” href=”somefile.pdf”>Download somefile.pdf</a>

[/jscript]

See how easy that was?

Hopefully you have a function used to print out those links, then you can modify it in one place (that’s what I did).

You should see results in Google Analytics under Top Content shortly.

Tags: , , , , , , , ,

How To: Throw an iTunes DJ Party

Thursday, March 12th, 2009 | Tutorials | 13 Comments

With Apple’s iTunes 8.1 release, we now have iTunes DJ.  It used to be Party Shuffle (for the past few years) but now we have a few new toys.

The biggest of which is the ability to allow guests to your party to vote for songs.  Guests can see the song details, upcoming songs, request songs in your library, and vote on which songs they want to hear next.  

So how do we do it?

Setup iTunes for DJ

You’ll need a computer running iTunes.  Open up iTunes (making sure to have updated to the newest release, 8.1 is the first release to support all the functionality mentioned here).  Click on iTunes DJ.

You are now in the iTunes DJ screen.  In the lower part of the playlist window are the iTunes DJ options (seen below)

iTunes DJ Options


Here are the various components:

Source – This is where iTunes DJ will get the songs it shuffles automatically.  Remember this when throwing a party, so people don’t have to see your Backstreet Boys collection.  I have it set to my entire music collection (uh oh!)

Refresh – It refreshes your playlist.  Real boring.

Settings – click here to setup iTunes DJ properly, here’s the window you will see (seen below)

iTunes DJ Settings


A bit more fun, I have filled in some values.

The most important thing on this screen is the “Allow guests to request songs with Remote for iPhone or iPod touch”, as it lets us do everything in the rest of this article.

Your welcome message will show up in your guests Remote application (seen below, ignore my note about looking in a playlist, you can’t do that only browse by artist, album, song, genre, music videos, composers or a general search)

iPhone Remote - iTunes DJ Welcome Message


Going back to the settings in iTunes… you will want to click “Enable Voting” to let guests vote for the next song.  

If you don’t set a password, anyone on your Wifi can see your iTunes DJ list, and make requests.  Then again, hopefully you don’t have an open wifi point.  If you do, I recommend a password.  

Easy setup right?

Now the fun stuff: Remote.

As I discovered, if you are already registered with your iTunes on Remote, you will not see the welcome message.  That is only for guests.  If you want to see it work, remove your iTunes from remote.  Tada!

Here are some screens you will see in iTunes:

iPhone - Now Playing in DJ When your guests first load your “iTunes DJ” guest, they will see the current song.  The album artwork will be there (a nice touch, I like having all album artwork in there, easy with “Get Album Artwork”).  Your guests are presented with 3 options here.  They can Request a Song (big button on bottom) to be added to your playlist, go back to the current playlist, or view Genius recommendations.
iPhone - "i" - Genius Recommendations If your guests click on the “i” in the top right corner, they will see the Genius recommendations, clicking on “+” will add it to the iTunes DJ playlist.  It will be added with “1” vote.  If other guests like the song and want it sooner, tell them to “vote” for the song (coming up in the next screengrab).  Again this screen doesn’t look so good if you have a messy library, or missing artwork.  Guests can tap “Back” to go back to “Now Playing”.
iPhone - Playlist Here is how your users see your playlist.  In light grey up top, we see “This Town” was just played.  Normally the single most recent is visible but guests can scroll up to see more (based on the setting in iTunes).  Currently playing is highlighted in black.  Next songs are below.  If a guest clicks on a “heart” next to a song they are voting for that song to be played next.  The song with the most votes comes next. Guests can still request a song, exit out to setting, or view the “Now Playing” song.
iPhone - Search in DJ If, at any point, a guest clicks on “Request a Song” — they are brought to a basic music navigation screen.  There is no playlists option, or some other options.  Users can search by most other parameters though.  Keep in mind, that this is your entire “Source” that you defined earlier.  If you want to limit choices to “Country”, or maybe “80s” music, then make an appropriate Playlist/Smart Playlist, and mark it as the source in the iTunes DJ “Source”.  Interestingly “Music Videos” is listed here.  Maybe just for the music, maybe for a future AppleTV update.

Tags: , , , , , , , , , , , ,

How do I use transparent PNGs in IE6: Using AlphaImageLoader

Tuesday, March 10th, 2009 | Tutorials | No Comments

Internet Explorer is a tough beast.  It was very popular years ago.  Unfortunately, it’s still in use in out there.

This site, www.seangw.com, has a fairly technical crowd.  We still see approximately 3% of our visits from IE6 (Firefox is the most popular at 64%, then IE7 at 14%, Safari at 10%, then Chrome at 5%).  

I don’t believe IE6 should be supported anymore.  In many jobs, that isn’t our decision to make.  We can recommend ignoring IE6 specific issues, but should do so intelligently:

  • Identify the current IE6 audience (knowing it will probably decrease over time)
  • Approximate the cost of supporting IE6 (depends on what you are trying to do)
  • Present the pertinent information to the client, and let them make an informed decision
  • You should tell the client what you feel, but make sure they understand the difference between emotion and facts

Note: If your client makes $1,000,000 online every year, ignoring that minor 3% audience means possibly ignoring about $30,000 in revenue.  Math is enlightening sometimes.

At that, you are here, and STILL want to do transparent PNGs in IE6.  

How to implement transparent PNGs in IE6
It’s pretty standard the method for implementing transparent PNGs in IE6 by now.  

This method is for implementations in CSS (you are using CSS, aren’t you?).  

Frequently I find myself making a quick browser detect for IE6 (since there are oh so many issues that only affect IE6).  I use basic IE conditional comments:

<body>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />

<!-- &#91;if lte IE 6&#93;>
<link rel="stylesheet" href="styleIE6.css" type="text/css" />
< !&#91;endif&#93; -->
</head>
<body>
</body>
</html>

There you go, now when you setup your styles in style.css and realize they don’t work in ie6, edit them in styleIE6.css to get them working again.

Assuming you defined a logo in style.css as follows:

#logo {
  width: 300px; 
  height: 150px;
  background: url(images/logo.png) no-repeat left top;
}

You will find that the PNG does NOT work in IE6.

The fix is easy, we tell IE6 to use the Microsoft DXImageTransform AlphaImageLoader to render the PNG. So we add an IE6 specific change ot the styleIE6.css file:

#logo {
  background: transparent;
  filter: progid:DXImageTransform:Microsoft.AlphaImageLoader(src='images/logo.png', sizingMethod='scale');
}

There you go. It should work now.

The background: transparent thing tells the browser to ignore the originally defined background used in the original CSS document.

Tags: , , , , , , , , , , ,

Illustrator Tutorial: Create a vector RSS Icon (a la web 2.0)

Thursday, February 19th, 2009 | Business, Tutorials | No Comments

Test IconNot being an artist or designer by default (I do some design by usually by applying formulas — I find a completely deterministic experince, a happier experience), I attempted to learn more about all those pretty graphics we see out there these days.  

I grew up in Photoshop, and have recently been “seeing the light” of Adobe Illustrator.  Don’t get me wrong, I’ve used Illustrator for quite a while, but I’m just now learning all the various tools that I need to know.  

See the icon in this article?  I made it.  All by myself.  Of course with the aid of an excellent tutorial:

Spoon Graphics BlogCreate a Vector RSS Icon with Illustrator

Tags: , , , , , , ,

How to link to iTunes: iTunes Link Maker

Friday, January 23rd, 2009 | Tutorials | 11 Comments

I was just about to write a post about an album I’ve been listening to, and an audiobook I just finished “reading”.

I wanted to know how I could link directly to those items in iTunes.  Here’s how..

iTunes Link Maker

An official tool by Apple, it lets you find items in iTunes and link to them.

First you must enter the item you are searching for (I usually leave it as all media):

Apple iTunes Link Maker

Once you hit search, you see a results screen where all matching items are listed.  Click the arrow to the right of what you want to link to (keep in mind, clicking on the arrow next to an artist, will link to that artists page):

Apple iTunes Link Maker

Finally you get the HTML to copy from the page, and insert into your document!

Apple iTunes Link Maker

UPDATE

Recently I’ve discovered there’s a way to setup these links as an affiliate, to make 5% commission off sales made through your blog links.  Check out my article, iTunes Link Affiliate: How to Make Money Linking to iTunes Music

Tags: , , , , ,

Basic AJAX Tutorial: jQuery toggle and slide

Wednesday, January 21st, 2009 | Business, Tutorials | 20 Comments

In this tutorial we will review:

  • Definition of AJAX
  • Introduction to jQuery
  • Basic document jQuery preparation
  • Binding jQuery actions to an anchor (A) tag
  • Toggling visibility of a div
  • Sliding in and out of that div

It sounds like a lot, but it’s all very easy.

Definition of AJAX
The term AJAX means Asynchronous JavaScript and XML.  That means AJAX technically defines a method for javascript to communicate with XML.  Over the past few years AJAX has been interpreted as a means for implementing all “web 2.0” functionality in the front end.  That added things like animations to the general term “AJAX”.




Introduction to jQuery
jQuery is one of my favorite libraries with a good toolset for working with AJAX techniques.  You can find out more information on jQuery at their site.

jQuery is a “fast and concise Javascript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development”.  Taken from the website itself.

As a javascript library, we will have to include the jQuery library on a page, and implement some of it’s more basic functions.

Basic jQuery document preparation
The first thing we need to do is incorporate the jQuery library in our page.  So download jQuery (direct link to the Google Code location).

Now that we have our JS library, we need to tell our document where it is (I renamed my js file to jquery.js, and threw it in the js folder):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>

</body>
</html>

We inserted the SCRIPT tag to include the jquery library when the page is loaded.

Binding jQuery actions to an anchor (A) tag
Lets create a basic link in our document:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
</head>
<body>
     <a href="#">Click Here</a>
</body>
</html>

We now have a link that does nothing.  We are preparing to bind jQuery to the anchor.

Toggling the visibility of a div
We need to do 2 things to toggle the visibility of a div with jQuery.  First off, we need a DIV to toggle!  Second we need to bind jQuery commands to the anchor link.

We will take advantage of the jQuery toggle effect.

To do this, we change our code below:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               $('#toggleSection').toggle();
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off
     </div>
</body>
</html>

This step we did a lot.

First we added [id=”togglebutton”] to the A tag.  That lets us identify it in the jQuery code.

Second we added the “toggleSection” DIV to the document.  The entire div will be toggled on and off.  Again, here we identified the DIV as “toggleSection” to be able to target it with the jQuery code.

Third, we added the jQuery code that actually does the toggling in the HEAD section of the document.  jQuery is a javascript engine, so we have to execute the commands in SCRIPT tags.  The first line of the code, “$(document).ready(function() {” is complicated.  Lets dissect this code.

Finally we put “return false;” in the code, that tells the link NOT to use the HREF value.  This means “#” will not be loaded.  It’s annoying, because that brings the browser to the top of the page in certain browsers.

$(document) — this is the HTML document itself.  It is the same as “document” in normal javascript.

.ready( — this is us looking at the “onLoad” part of jQuery.  When the document is ready, it executes  the “ready” method.  Here we are defining what the ready method is.

function () { — basically, we are creating a new function that will fill in for the document.ready method.  When the document is ready, our code will be executed.  This is smart, as executing code when the page isn’t ready can result in missing elements that aren’t loaded yet.

After that statement, we have “$(‘#toggleButton’).click(function() {“, another complicated statement.  Lets break it down:

$(‘#toggleButton’) — we are looking for the “toggleButton” via jQuery.  This code finds it for us.

.click( — Instead of setting the value of the “ready” method before, we are setting the function of when the “toggleButton” is clicked. So we need to create a function…

function () { — again, creating a function inline.  This will be assigned to the button’s “click” method.

Finally we do the fun stuff, toggling the DIV on and off with “$(‘#toggleSection’).toggle();”.  By now it should be easier to read this line.  We are finding the toggleSection div, and calling the jQuery method of “toggle()” which will toggle the visibility of the DIV.

It is important to note the “return false” part of this.  By returning false, we are telling the HREF that it should NOT execute the HREF value (which is #, and would bring the browser to the top of the screen).  If we don’t return false, the browser will still load the HREF value, and we will have some minor issue cross browser.

We’re done!  We are toggling the visibility, check out the demo — jQuery toggle demo.  Fortunately, we can still have a little more fun..

Sliding in and out of that div
In the previous step, we toggled the visibility of a DIV.  It’s not too exciting, as we could easily do that with javascript before with stylesheets and basic DOM code.  What is great about the jQuery library is all of the additional methods for animation it gives us.  Lets setup that div to not just appear, or hide — but to slide in and slide out.

For that we will take advantage of the slideUp and slideDown methods, they are just 2 of many Effects available in jQuery.

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript">
     $(document).ready(function() {
          $('#toggleButton').click(function() {
               if ($('#toggleSection').is(":hidden"))
               {
                    $('#toggleSection').slideDown("slow");
               } else {
                    $('#toggleSection').slideUp("slow");
               }
               return false;
          });
     });
     </script>
</head>
<body>
     <a href="#" id="toggleButton">Click Here</a>
     <div id="toggleSection">
          Content to toggle on and off<br>
          More content<br>
          Slides are more fun with more content<br>
          Four lines should be enough
     </div>
</body>
</html>

We have added a little more content to the DIV, so we can more easily see how the slideUp and slideDown work.  There are 2 interesting steps we hav taken.

First, we added an “if” statement to detect if the DIV is hidden or not.

Second, we added code to slideUp or slideDown depending on whether the DIV is actually hidden.

Check out the result on our example — jQuery slideUp and slideDown demo.

Conclusion
I hope this helped some of you out.  Let me know if it did.  Comments are open!

Tags: , , , , , , , , , , , , ,

jQuery 1.3 Released – How to use jQuery

Thursday, January 15th, 2009 | Business | 10 Comments

jQuery is a “fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.  jQuery is designed to change the way that you write JavaScript.”

jQuery version 1.3 was released yesterday.

Some new features in 1.3 are:

  • Sizzle – a brand new CSS selector engine
  • Live Events – event delegation with a jQuery twist
  • jQuery Event Overhaul – simplified event handling
  • HTML Injection Rewrite – Lightning-fast HTML appending
  • Offset Rewrite – Super-quick position calculation
  • No more browser sniffing!!
  • New API Browser – http://api.jquery.com/

I have yet to play with jQuery 1.3, but will post my impressions after I get some hands on time with it.

Are you new to jQuery?
jQuery is a library that you can include on your web projects.  jQuery enables HTML and JavaScript developers to rapidly deploy functionality that traditionally is more complex.  Through browser independent APIs, developers and designers can implement event handling, CSS changes, animations, popular web 2.0 effects, or other common function of web 2.0+ sites. 

Downloading jQuery
You can get jQuery by going to jQuery.com and downloading the version of jQuery you want:

  • Production version – 18kb – Minified for production environments (don’t try to debug this, its a nightmare)
  • Development version – 114kb – Developers can go in and see how things work with this version, but the footprint is huge

Getting Started with jQuery
jQuery provides a series of useful tutorials.   

Some favorites are:

There are so many more tutorials out there.

Tags: , , , , , , , , , , , , , , ,

35 Tutorials to get started with Photoshop

Tuesday, January 6th, 2009 | Business, Personal | No Comments

Adobe Photoshop is an amazing tool for web development, and image processing in general.  I remember my first experience with Photoshop when I was back in Massapequa High School.  There was an after school program that brought a local web designer in to help the kids work with websites and such.

My first creation was a series of boxes swirled.  It looked cool, and was so easy to do.

Now Photoshop places a large role in our everyday computer usage.  Everyone has a digital camera nowadays, and those with digital cameras should know how to use Photoshop to process those photos (deleting that annoying beach guy in the background who doesn’t understand you shouldn’t wear a “sweater” to the beach, or just to balance out colors).  

Of course there are excellent alternatives now, such as Google Picasa or the Adobe Lightroom.  

If you go the Photoshop route, check out this post at Six Revisions35 Basic Tutorials to Get You Started with Photoshop.

Tags: , , , , , , ,


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template