Purpleurbia.com » Tutorial

jQuery week: Getting started

mary fran — Mon, 02 Nov 2009 15:44:02 +0000

It is jQuery Week here at Purpleurbia and we are excited! We have some exciting stuff up our sleeves for the next few days, however, today we need to get you started with the basics.

There are a lot of tutorials out there to get you started, here short synopsis on why you should learn it and then some links to the best tutorials out there to get the job done. And a tutorial on how to write your first bit of jQuery code. Hooray!

What is jQuery?

jQuery is a JavaScript library that allows faster development of JavaScript effects. It does a lot of what Flash can do, by interacting with the HTML and CSS and manipulating these properties. It makes your website more dynamic and frequently more visually exciting. It also doesn’t have any direct negative effects on SEO (those only happen if you do things like set default CSS to display: none but we aren’t covering that here).

What is it used for?

It is used to make your page respond to events, (clicks, rollovers, etc) or to animate, or to post notifications such as error warnings. With jQuery you can manipulate the DOM and make pretty nifty animations and effects.

Let’s write some jQuery

You are going to need to download the current version of jQuery for this tutorial and include it in your header.



 
 
 jQuery Week on Purpleurbia

Now we need to add some content to our HTML to manipulate:


 
 
 I made a jQuery!
 
 
 
 Click me
 
 
 
 
 Hello everyone!
 
 Come back tomorrow for a more exciting tutorial!

*                    { margin: 0; padding: 0; }
body                { font-size: 62.5%; font-family: Georgia, serif; }
.clear              { clear: both; }

a                    { outline: none; text-decoration: none; color: white; font-size: 1.3em; }
h3                    { font-size:18px; color: #4b0049;}

div#container        { width: 300px; margin: 0 auto;}

#header                { padding: 20px; font-size: 3.0em; background: #9b6999; color: #ffffff;}

ul#nav                { list-style: none;  width: 300px; margin: 10px auto; }
ul#nav li            { float: left; padding: 10px; margin-right: 3px; width: 200px; background: #4b0049; }

Now we can write our jQuery. Put this in script tags () in the header area of your document.

$(document).ready(function() {
 $("li.button").click(function(){
 $("h3").toggle();
 });
 });

The first line says to wait until the document is ready. The next line says that when there is a click on an li element with a class of button to toggle the h3 element.

Pretty nifty, eh? (You should get something that looks like this)

Some great tutorials to make sure you really get the basics:

jQuery's own tutorials. A little more technical than most of the others out there, but if you are a programmer type, this is the way to go.
ThemeForest's jQuery for Absolute Beginners series. This is a great video tutorial series that will get you on your way to learning jQuery.
Learningjquery.com's series on Working with Events. This series talks about the major difference between JavaScript and CSS
CSS Tricks' Video Series on Getting Started with jQuery. This is a great basic series on working with jQuery and CSS.

Check back tomorrow for some more advanced jQuery coding!

(the background from our header image is from BittBox's Free Texture Tuesday Series)

Quick tips for designing HTML e-mail

mary fran — Fri, 23 Oct 2009 15:31:28 +0000

Some think it is a typical web designer’s worst nightmare. Because, guess what, it means your design is most likely laid out in tables! And, there are no external style sheets, or even header styles, all your styles have to be inline! And as opposed to about a dozen browsers that are common, there are over 100 e-mail programs that are common.

There are a couple of different styles of e-mail marketing/ HTML e-mails. There are the kind that most major brands send that are all images:

and there are the more news letter types (like the one below from MyFonts):

(disclaimer : I am not saying that these are the best ever examples of email marketing, they are what was in my inbox this morning when I was writing this post)

While this type of code does go against everything we know and love as fans and lovers of a semantic web, it is actually easy to create (well to start, just don’t let it become habit-forming!) To start:

Set up a document in Photoshop that is no wider than 550px wide. Reading pane limitations force this on you. And, if you make your document too much taller than 700px for a typical image-type HTML e-mail, information will get lost.
Quick Photoshop tip: As long as you name all your slices in Photoshop, and you have sliced well, you are going to simplify one of your development steps: table creation. When you save for web, make sure you save images AND html, to help you cut down on a development step.
Now, make sure your images are moved to a server and then deleted from the relative file and linked to using their absolute address. This is very important. If you link to a relative address, the recipient will not see the images, because you are only sending them the code, not the entire directory that contains the code and images. Deleting them from their relative file will help you check for errors.
Including alt text for your images and title tags for your links is imperative. While you don’t need to be concerned about search engines, you do need to be concerned about accessibility for people with images turned off (the majority of e-mail clients do this) and people with disabilities.
Also, you will need to include a plain text version of your e-mail, so make sure that your client has provided you with one, as some e-mail servers only accept plain text messages. Your e-mail marketing provider will walk you through this step.
Does your design account for the CAN-SPAM notices? Most (but not all) e-mail providers automatically append this information to the end of your e-mail. You also need to allow for an unsubscribe method. No one likes a spammer.

Good luck with your e-mail designing! I have plans for writing a tutorial on design principles of e-newsletters soon!

jQuery UI tabs + Featured content = love

mary fran — Tue, 20 Oct 2009 01:07:40 +0000

If I could, I might just marry jQuery. That’s right. I said it. I might just marry jQuery. Why? Because I can understand it. I can make it work. Although, it might have gotten me to the point where I can understand javascript. But, I digress. The point of today’s post? To teach you a fun new trick!

Almost every website has a featured content slider or tabbed section of some sort, so today, we will make an auto-scrolling, fancy-schmancy featured tabbed content thingy. Which will be primed and ready for us to make add some WordPress code to next time.

Take a look at this bad boy!

We are going to start by downloading a couple of important files:

jQuery

jQuery UI (the core and tabs)

Put these in your project folder/js.

Now create an HTML file in your root folder.

And create a blank stylesheet in your project folder /css.

Now, we need to make sure that we are calling the script files and css.

The core and tabs js files can be found in the development folder of your download.
Now, lets have some fun. In your HTML file, you will need to create an unordered list which will become the tabs, and a series of divs that will contain the corresponding content.

        
            
            
                
                    myrobot
                    
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip x ea commodo consequat.
                    
                    
                
                
                    bigrobot
                    
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipx ea commodo consequat.
                    
                    
                
                
                    coolrobot
                    
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        x ea commodo consequat.

This is where it gets fun! We are now going to make the slider look pretty and act the way it is supposed to. I used Eric Meyer’s CSS reset to start with, and you probably should too. It is followed by the styling telling the featured content how to look and finally the CSS telling the tabs how to behave.

/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
/*End Reset*/
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size:12px;
	line-height::21px;
}
#Container {
	width:960px;
	margin-left:auto;
	margin-right: auto;
	position:relative;
}
.clrBOTH {
	clear:both
}
img {
	border: none;
	}

#tabs {
	background-color: #6cb9c7;
	height:275px;
	padding-top: 25px;
}
.feature p {
	color: #ffffff;
	float:left;
	font-size: 1.166667em;
	margin-left:30px;
	margin-right:30px;
	line-height: 1.5em;
	width: 520px;
}
.feature h3 {
	color:#ffffff;
	float:left;
	font-size: 2em;
	font-weight:normal;
	line-height: 0.875em;
	margin-top:00px;
	margin-left:30px;
	margin-bottom:10px;
	width: 620px;
}

.bigIMG {
	margin-left:20px;
}
#tabby {
	position:absolute;
	left:0px;
	bottom:-75px;}
/* Tabs
----------------------------------*/
.ui-tabs {
    padding: 0em;
    zoom: 1;
	z-index: 100;
}

.ui-tabs .ui-tabs-nav {
    list-style: none;
    position: relative;
    padding: 0em 0em 0;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;
    float: left;
    border-bottom-width: 0 !important;
    margin-top:5px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:0px;
    padding: 0;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
	text-align: center;
    text-decoration: none;
    padding-top:30px;
	width:320px;
	color: #ffffff;
	height:75px;
	font-size: 1.5em;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
    padding-bottom: 0px;
    border-bottom-width: 0;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a {
    cursor: text;
}

.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a {
    cursor: pointer;
}
 /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel {
    padding: 0em 0em;
    display: block;
    border-width: 0;
    background: none;
}

.ui-tabs .ui-tabs-hide {
    display: none !important;
}

Here’s why that is working: we positioned the div contianing the tabs below the content area, but allowed the padding (the area where the arrow is) to overlap. We set the arrow to be a background image on the selected li (the selected class will be applied by the jQuery. Pretty nifty, eh? Meh, that’s alright, but it is still lacking a little magic. We want it to cycle through the featured content automatically, all sexy and such. How do we do that? We add a little bit more javascript!

$(function(){
 
    $('#tabs').tabs({ fx: { opacity: 'toggle' } }).tabs('rotate', 2000);
    
   });

Make sure to wrap that in