This past month has been really active here at FS. I’ve published 2 new articles How Web Development can help you as a Student and The Beta Syndrome, but that’s not nearly all that has been going on. No, last month saw the start of FS-Air, our official podcast! I know FS-A has been a long time in coming (since the start of the 2008 summer) but I finally got everything set-up, written, put together, and orchestrated.

As of right now, there are 3 permanent panelists on the show: yours truly-Fire G hosting, along with James White of James’ Blogs and Andrew Turner of Burning Stone Cold. James hails to us from the royal Nottingham, UK (north of London), and is an outstanding blogger at his personal site James’ Blogs. While Andrew resides in Sydney, Australia, and is a freelance web designer/developer(HTML/CSS/JS).

Currently there are still a few things left to be done (finishing the JS and PHP backend of the website for example) but you can view the site live as it’s finished at http://fs-air.org! As I’m writing this there are 3 episodes recorded (a “press release” of episode 1 can be read here and more info about the design and website of FS-A can be read here). A new episode recorded every Friday at 5p.m. EST and is usually released for download on the follow Wednesday.

Focusing back on FS, I don’t want there to be any feelings or thoughts that FS will become inactive as the podcast takes off. I guarantee that FS will always be working to bring you Triple-A quality article and tutorials (in fact, there a 3 planned for this month by me and possibly some guest writers publishing as well - if you wish to write here please contact via the contact page).

I hope everybody is as excited as I am for FS-Air!

Best Regards,
Fire G

P.S. - I know I said I was going to do these weekly, but I found that there just wasn’t enough content to write about on a weekly basis. So now these letters will be posted monthly!

Bookmark It

The “Beta Syndrome” has spawned whole sites dedicated to the tracking and release of “betaware” (ex: Beta News), and is slowly becoming part of our culture and daily lives. I bet that people would be shocked to know that every single person who has logged into the Internet has used a beta application and not known it, Google. The entirety of Google’s products are classified as Beta; Google Search, Gmail, Google Earth, GTalk, Analytics, Android, and Chrome are all still under the Beta tag.

So why are all the developers using the term Beta? I’ve analyzed the 5 most popular software and web apps. to see why they’re still claiming that title.

Gmail

You would think that the illegitimate child of Google and Hotmail would be out of its beta phases after these years, but you’d be wrong, the third most popular free mail service (following Hotmail and Yahoo Mail) is still running its race with the beta crutch under its arm.

Why is it still Beta?

There’s no reason for Gmail to still be in beta after all it’s revisions and upgrades. My only guess can be that some developer forgot to remove the “beta” our of the system version variable.

Aviary

This online sweet of “Adobe Suites”-like web applications is semi-new on the scene but is quite a powerful tool that’s brought to you by the people from Wordth1000.com that now bolsters 3 applications for open beta tester use: Phoenix (”Photoshop”), Toucan (”Adobe Kuler”), Peacock (pattern/effect generation). As it’s built on the on Flash and Flex, any browser with Flash 8 or higher can use it.

Why is it still Beta?

The suite’s forerunner application “Phoenix” still has features and bugs that need to be worked out. More Filters, styles, and brushes need to be configured; plus a brush engine may be in the works. And with 12+ more applications to come out, this suite is poised for some amazing work and opportunities in the future, for now though, this bird is still a nestling.

Windows Live Writer

The best desktop blog article writer on the market has come out recently with its new version that has better blog software support and script support (think lightbox anyone?) not to mention the great new interface. Sounds like everything’s in order no?

Why is it still Beta?

I’m sure there are people finding problems somewhere, but I’m using Vista SP1 and there’s only been 1 small bug that I’ve encountered (italics seem to persist when editing with the blog theme enabled). I’m hoping they’re adding even more features like beta theme integration, complete post preview, create pages, manage your blogs posts, or custom field support.

Filehippo.com Update Checker

Filehippo.com has been a great resource since I found out about it 1 1/2 years ago for every kind of and bit of software I might possibly need or want. Now they’ve come out with a desktop application that automatically scans your PC for any software that isn’t up-to-date.

Why is it still Beta?

Besides the fact that the application is really new to the market, it’s never once crashed or failed. All I believe Filehippo has to do to make this a “must-have” app is to give it a bigger software library. As of right now, it will tell me of all my free software updates (Filezilla, uTorrent, iTunes, etc…) but I would like it to look up drivers and Windows updates maybe even get definition updates from AVG.

Flickr

Flickr is becoming or quite possibly has become the largest photo-sharing site on the web. With millions of members and multiples more of pictures and images, Flickr has become a cultural phenomenon on par with Hoagies at a Mets game.

Why is it still Beta?

With so many users and pictures, scaling can be quite difficult (just ask twitter, they’re still trying to figure it out). With the new “Flickr Video” adding one of the last few pieces to the Flickr Puzzle, it should be cleaning things up and moving out to start it’s life without it’s beta past.

Bookmark It

1.)  Use Semantics in your notes

Semantics may seem like a large and complicated word, but all it means is how you arrange and write your code, such as:  line-spacing, indenting, commenting, syntax highlighting, and use of white-space. These same techniques can be applied to your notes in the exact same way you would your code. Use headings and separate out a new line for important or different information, when you have multiple characteristics of something, use a list and bullet each piece, this way when you’re reading or scanning your notes before a test you’ll be able to read it faster and remember more of the info.

2.)  Information has a hierarchy just like Code

Teachers and Professors want you to learn and retain every bit of knowledge thrown at you, but not every bit is as important as another, use a hierarchy like you would in HTML with the heading tags (H1, H2, H3.) to set a level for each piece of info, make the most important information bigger, a different color, or both even, create a system that you can understand at a glance and makes since to you.

3.)  Memorization

If you haven’t noticed, the more of a coding language you learn, the easier it is to learn aspects of that language and others.  It’s because you memorize information exponentially (at an ever increasing rate). But it’s not just for that language, it’s applied to everything you learn as well. That means if you take the time to learn one language, then second will be easier to learn, and the third even easier, and so on.

4.)  Multiple methods for a solution

CSS is, probably, the most versatile with multiple ways to achieve a desired effect. A quick example would be underlines, you can either use the “text-decoration: underline;” or “border-bottom: 1px solid #000000;”. If you take that concept and apply it to your classes you’ll start to achieve better results because you’ll be applying different theories and ideas to the concept your teacher/professor is introducing, causing you understand how the original works more, and how you can cut a few corners and achieve the same product.

Some of you may be wondering what languages help with what so here’s a list that shows what areas each helps with:

• (X)HTML - Structure, hierarchy, usability
• CSS - multiple solutions, memorization, usability
• JavaScript - Math (in general), Structure, Linear progression
• PHP - System, speed, prioritizing, memorization
• Ruby (on Rails) - Memorization, flexibility
• C, C#, C+, C++ - Structure, system, memorization
• jQuery, Prototype, MooTools, etc. - Notes (semantics)

Bookmark It

So here are the top 4 things to avoid and achieve your maximum working potential:

1. Social Networking

   - Myspace, Facebook, Twitter, Bebo, Linkedin, MyYearbook, etc. while they may be great sources of potential clients and fellow colleges, they encourage long hours of time spent on the site accomplishing little if anything at all. Even Freelance Freedom writer N. C. Winters has written about this problem on his regular comic strip for Freelance Switch.

2. Instant Messaging

   - Yes, AIM, MSN, ICQ, Skype, GTalk, YIM, and even chatrooms can become huge time wasters. This is my number one sin as I can spend all day messaging people, in-fact, this article took an extra 12 hours to write because of IM. But you don’t have to sever your IM all together, you can keep IM’ing by following Life Hacker’s IM Survival Tips.

3. Information Abundance

   - This on you can only half control. You can’t tell people when they can or cannot add new content, but you can control how much you read. If you see in your RSS Reader that there are 162 new updates, you will be very inclined to go through and read all of them. Luckily Chris Garrett has 21 ways you can manage all those feeds and still keep up to date on all the happenings of the Internet in his post 21 Tips For Keeping Up To Date.

4. Activities

   - One of the main draws of Freelancing is that you can set your own hours and work when you want to, but you shouldn’t. Don’t work for an hour then take a Halo or Call of Duty break because you’re almost guaranteed to spend more time than you planned playing the game. And when you get back to work, you’re likely to not be as inspired as you were before. If you start to feel like you’re working too much John Kuck wrote a fabulous post on Freelance Switch on How to Become more Social while Maintaining your Success.

So What Should I Do?

The jest of all the productivity killing problems we face come from combining our business and personal lives. When you’re at work, be at work, even if you work from your house. Don’t use instant messengers while on a call with a client,they get half your attention and you get half the information, meaning half the product.

Unless your job requires that you be connected to the Internet to work, don’t be. Most things can be developed locally using systems like XAMPP so disconnect or get out of Wi-Fi range and there will be very few distractions left to kill you productivity.

Bookmark It

This week has been quite strange and, actually, enjoyable even with all of the odd happenings and events. Which is a nice change of pace because since school started back it’s been nothing but one set-back after another, but things are starting to fall into a routine so I can start getting more work done each day. This week had a lot of updates and things that had me checking stuff off my “to-do” list.

Week Review

FS - This week I managed to get a lot of technical and back-end stuff done for FS. I edited the styles to be completely cross-browser compatible all the way from IE 5.5 (well, there’s the PNG error, but I’m not too worried about that). I took all the plugins that I have activated and edited them to be valid both XHTML wise and CSS wise, in particular was the Google Syntax Highlighter which used to have a few IE errors but now displays correctly in all browsers. I spent most of yesterday (close to 3 hours) making all the PHP/HTML/JS files become “gzipped” and “minified”, since my host doesn’t have gzip enabled by default, but now everything is working and making FS load about twice/maybe 3 times as fast as before.

Life - Monday was Labor Day and thus I had no school, but what made the day even better was that I finally bought a PS3(80gb)! I have 2 games for it at the moment, and will get more on Monday when my next check cashes, Guitar Hero 3: Legends of Rock and Call of Duty 4. I’ve been playing both now for awhile and have gotten really good at GH3 (I’m playing on expert with Hyperspeed 5). And the rest of the week was typical school -> work -> chill. But last week school had to be closed one day because 4 bridges flooded over and 85% of the students had NO way of getting to school, which was cool, but the Superintendent of my area decided to make up that day today (a Saturday). I also got my drivers license on Wednesday, so now I can drive without an adult in the car (but only from 5am to 9pm).

Future Events

I am working on my next feature post “How Web Developing helps you as a Student“[working title] and should have it done around Wednesday. I might look into posting it on some high-traffic sites like Freelance Switch, which would bring in some extra cash, but am still undecided since their terms say I can’t post it anywhere else for 9 months.

I’m also working on getting everything put together for FS’s podcast FS Air but I’ve still got some copy to write (the main flood gate holding FS Air back). Be on the look out for it soon though ;P .

Sincerely,

Jonathan “Fire G” Wolfe

Bookmark It

Go back and Watch part 1 if you haven’t!

Watch the Video!

Video notes:

In this video we took our HTML from part 1 and altered it just alittle and added in our CSS styles.

This video assumes you have at least a basic understanding of CSS and it’s elements.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Geniva Requiem</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>

<body>
    <div id="header">
        <div id="logo">
            <h1><a href="#" title="Genieva Requiem">Genieva Requiem</a></h1> <!--for SEO-->
            <a href="#" title="Genieva Requiem"><img src="images/logo.png" alt="Genieva Requiem" /></a>
        </div>

        <div id="slogan">
            <h4><a href="#" title="Another free template form Fire Studios">Another free template from Fire Studios</a></h4>
        </div>

		<div style="clear: both"></div>

        <div id="nav">
            <ul>
                <li><a href="#" title="Templates">Templates</a></li>
                <li><a href="#" title="Graphics">Graphics</a></li>
                <li><a href="#" title="Tutorials">Tutorials</a></li>
                <li><a href="#" title="Members">Members</a></li>
            </ul>
        </div>
    </div>

    <div id="sidebar">
        <div class="box">
            <h2>Side-bar</h2>
            <p>This is some random content, since I can't be bothered to read and re-type the content from the preview image. This is some random content, since I can't be bothered to read and re-type the content from the preview image.</p>
        </div>

        <div class="box">
            <h2>Lists</h2>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
            </ul>

            <ol>
                <li>Item 1</li>
                <li>Item 2</li>
            </ol>
        </div>
    </div>

    <div id="main">
    <div id="main-top"><img src="images/content-top-corner.png" alt="" /></div>
    	<div id="content">
       		<h1>Heading:</h1>
			<p>Proceded by normal content.  Genieva Requiem is by far the weirdest name I’ve ever made up to use as a template name.  The headings and content coloring are the same as the side bar but different sizes I believe (too lazy to look).  The main point of this template that would make it desierable is the hieghtening navigation bar on the hover and when on the active page.  I don’t know yet if I’m going to do that with AJAX or a simple Gradual Element Fader.  If I can find a javascript that would do that I’ll take that option.</p>

			<h2>:hover stuff:</h2>
			<p>When the template is working, if you move your mouse over the sidebar the border will change to a turquoise similar to the active navigation tab.  I’m not completely certian as to what will happen to the Main Content when hovered over, but I doubt I’ll do anything that might make the graphical border even harder.  Also the Navigation will be going up when hovered over.  I might make a color change in the footer on hover.</p>

			<h3>Notes to self:</h3>
			<p>Need to make sure and design the:</p>
			<ul>
				<li>&lt;blockquote&gt;</li>
				<li>&lt;xmp&gt;</li>
				<li>&lt;code&gt;/&lt;pre&gt;</li>
			</ul>

			<h4>Side-notes:</h4>
			<p>This content area is turning out to be more difficult to achieve.  But I have an idea on how I use some CSS to minimize editing my HTML.  I'm off to CSS syntax land!</p>
    	</div>
    <div id="main-bottom"><img src="images/content-bottom-corner.png" alt="" /></div>
    </div>

    <div id="footer">
        <p>Genieva Requiem copyright &copy; 2008 <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a>
        <br />
        Designed by: <a href="http://fire-studios.com" title="Fire Studios">Fire Studios</a></p>
    </div>
</body>
</html>

/**	 Main  **/
* {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

html {overflow: auto; background: #f0f0f0;}
body {margin: 0px auto; min-width: 975px; max-width: 1280px; font: normal 15px georgia; color: #79948c;}

a {text-decoration: none; color: #1E5D9C;}
a:hover {text-decoration: underline;}

p {line-height: 140%; text-indent: 1em; margin-bottom: 10px;}

img {border: none;}

h1 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h2 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h3 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h4 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h5 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}
h6 {font-family: "Palatino Linotype", Palatino; text-transform: capitalize; color: #556a64;}

ol {margin-left: 4em; margin-bottom: 10px; margin-top: -7px;}
ol li {line-height: 140%;}
ul {margin-left: 4em; margin-bottom: 10px; margin-top: -7px;}
ul li {line-height: 140%;}

/**  Header  **/
#header {background: #6a6a6a url(images/header-bg.png) top left repeat-x; height: 156px; margin-bottom: 23px;}

#header #logo {float: left; width: 537px; height: 43px; margin: 10px 10px;}
#header #logo h1 {visibility: hidden;}
#header #logo img {margin-top: -40px; float: left;}

#header #slogan {float: right; width: 300px; height: 43px; margin: 5px 5px 5px 5px;}
#header #slogan a {font: italic normal 19px "Gill Sans MT"; color: #ffffff; text-transform: capitalize;}

#header #nav {float: right;}
#header #nav ul {margin-top: 0px;}
#header #nav ul li {float: left; width: 136px; height: 43px; list-style: none; display: inline; background: transparent url(images/nav.png) top no-repeat; padding-left: 10px; text-align: center;  margin-top: 47px;}
#header #nav ul li a {margin-left: -10px; color: #ffffff; font: bold 21px arial; line-height: 43px; padding: 20px 20px 20px 20px;}
#header #nav ul li:hover {background: transparent url(images/nav-hover.png) top no-repeat; height: 73px; margin-top: 17px;}
#header #nav ul li a:hover {padding-bottom: 70px;}

/**  Side-bar **/
#sidebar {float: left; width: 269px; margin-left: 50px; overflow: hidden;}
#sidebar .box {background: transparent url(images/sidebar.png) bottom no-repeat; width: 269px; height: 253px; margin-right: 15px;}
#sidebar .box h2 {padding-top: 10px; text-align: center; padding-bottom: 10px;}
#sidebar .box p {padding: 0px 20px 30px 20px;}
#sidebar .box ul, #sidebar .box ol {padding: 0px 20px 10px 20px; margin-left: 2em;}

/**  Main Content **/
#main {float: right; width: 752px; background: url(images/content-left-repeat.png) left repeat-y;}
#main #main-top {background: url(images/content-top-repeat.png) top right repeat-x; margin-bottom: -10px;}
#main #main-bottom {background: url(images/content-bottom-repeat.png) bottom right repeat-x; margin-top: -10px;}
#main #content {width: 687px; float: right; background: #efefef url(images/content-grad.png) top left repeat-x; padding: 10px 20px 10px 20px;}

/**  Footer  **/
#footer {clear: both; text-align: center; padding-top: 15px;}

Bookmark It

This is the fist in a series of weekly posts where I will keep you all up to date on my personal workings and matters, along with some upcoming’s for FS.

So this week has had its highs and it’s extreme lows.  Some couldn’t be avoided, others because other people were having bad days.

Let’s start with the highs, I started school back this Monday, thus I spent this past weekend shopping with my parents money, which is much better than shopping with your own.  And that’s where the highs stopped.

The week went sour almost immediately since work had me come in at 7 a.m. until 3 in the afternoon.  Where I had to train a new guy while working the wrap and fryer stations (for those of you who don’t know I work at Bojangles).  Then I started school on Monday, which shouldn’t have been bad but there is nobody I know in any of my classes except for third period.

Then again at lunch, I drew the proverbial short straw and got A lunch (first lunch).  So I’m stuck every day being surrounded by freshmen who don’t know how to act in society or realize that they cannot sit at a table with or talk to a Junior.  And on top of that, there really are not many other juniors I could sit with since they’re all NASCAR obsessed, moonshine making, football playing jocks who can’t have an intelligent conversation without it being about football plays.

Now for the my Internet persona.

I have recorded the the screencast for “How to code a website - part 2″ but I’m not 100% happy with how it came out so I’m going to re-do it later tonight or tomorrow a little differently.

I’ve also made a few changes to the theme of the site, altering the links to have blue backgrounds instead of just the blue text, this helps set the apart from the rest of the text and makes them more reader noticeable for readers and the color-blind.

So that’s my life this week, I hope to publish one of these articles every Wednesday or there-about, so being looking out for them.

Sincerely,

Jonathan “Fire G” Wolfe

Bookmark It

Step 1

First lets start out with my standard 480×640 with a white background. Now lets select our gradient tool and set it to radial. Now your colors need to be a semi-bright color going to black I’m using #c30202 & #000000. Now place your mouse in the center of the canvas and drag until your mouse it just off campus. If you see that your dark color is in the middle then check your “reverse” settings.

Step 2

Now we’re going to bring our image to a super bright level. Duplicate the layer (Layer >> Duplicate Layer) then double click in the layers menu next to the name of the new layer. This will open the Layer Styles options. Set the Blending Mode to “Color Dodge”.

Step 3

Next we’re going add some texture to the glow by rendering some clouds and making it an overlay. First reset your colors back to Black and White, then make a new layer and go to Filter >> Render >> Clouds.

Now double click on the Layer Platlette to open the Layer style options and set the blending mode to “Overlay” and adjust the opacity to your liking.

Step 4

Now we need to add something to glow, this is where we breakout the pen tool. If you’ve never used the Pen Tool I suggest you play around with it and get comfortable with the way it works and makes pathes. For our purposes we do’t need anything extensive or complicated just some nice curving lines. So select the Pen tool and set it to Pathes (NOT SHAPES) and on a new layer make a nice line going somewhere near the middle.

Next we’re going to stroke the line. Select the brush tool and select a solid circle brush and set the size to 3-4 px. Now click back over to the Line Tool and right click (alt click for Mac users) select “Stroke Line”. In the new dialog box set it to brush and check the “Simulate Pressure” option.

Now we’re going to apply the layer style that will ultimatly cause our great glow effect. First open the Layer Style options by double clicking next to the layer name. First add a normal “Outer Glow” then add a “Color Overlay” of white and for a really nice glow effect, set a “Drop Shadow” to Color Dodge and give it a mustard yellow color and set the opacity to 100% and the distance and Spread to 0 and increase the size to 5-6.

Now you should have something like the below.

Step 5

Now we’re going to add some more lines. Create some more layers and on each one follow the same steps (Draw -> Stroke -> Layer Style) but instead of manually re-doing the layer style over-and-over-and-over again simply right click on the first glow layer and select “Copy Layer Style” then simply right click on the other line layers and select “Paste Layer Style”. I do suggest that when stoking your subsequent lines that you uses brushes of varying width (to give a distance effect), but do not go above 5px in size.

After creating al the lines you should have something like the following (if you see thin black lines running through your lines simply select all the line layers and with the pen tool right click and choose “Make Selection” then press CTRL+D {deselect}).

Step 6

Now we need to add your text. Simply use the “Type Tool” and write your text while playing around with the size and letter spacing (window >> Paragraph). Aftward, apply the same layer sytle as the glowing lines.

Step 7

Next let’s add some glowing particles. Select the brush tool and in the Brush Control Platlette use similar settings.

Now in a new layer try and brush along the same pathes as your lines and around your text, but you can branch off. Afterwads, apply the same style as the glow lines.

Step 8

For our final effect we’ll add some more color. Choose the Gradient tool and set it to radial and then use a Color -> Transparent gradient. Choose any color you like. Then click toward a side or corner and drag toward the center. Then go in and set the “Blending Mode” to color and alter the Opacity to your liking.

Repeat as Desired.

Finish

Here’s your final result. This effect is really nice but is more generated toward space and bright light scenes. I hope you enjoyed and learned from this tutorial and to think that to get this effect it only took you 20 minutes.

Bookmark It

Step 1

To begin this effect we’ll need an object to wrap around, start by opening some image. I’ll be using a picture of “The Cult” off of Deviant Art. Select your pen tool and have it set to “paths” (press “p” on the keyboard).

Step 2

Now take the pen tool and in a new layer create curves going around the object you want to wrap. In my instance it will be the guitar. If you don’t know how to use the pen tool, I suggest you read some tutorials on that because it is one of the most useful tools in Photoshop.

Step 3

Grab the Brush Tool (press “b” on the keyboard) and select a hard(solid) round brush with a size of about 6px (depending on the size of your picture) and set the color to white. Switch back over to the Pen Tool and right click (Mac: ctrl+click) and select “stroke line”. Check the “simulate pressure” box and press OK.

If you don’t like your result, press CRTL+Z and adjust your path. When your happy with your results, right click (Mac: CTRL+click) and select “Delete Path”.

Step 4

Open the Layer Style Pallet for your stroked line layer and apply the below settings. This is only for my image, play around with the blend mode and color to achieve different effects.

You should end you with something like the following.

Step 5

Next we’re going to alter the complete color structure of the image. Go to Image >> Adjustments >> Curves (or CTRL+M). Now select the main color of the color you used for the glow (in my case blue). Click and drag on the graph until you get a result you like.

Here’s my image thus far.

Step 6

To create the wrapping effect, we need to create a layer mask on the glow layer (Layer >> Layer Mask >> Reveal All). Now select the Polygonal Lasso Tool and create an over a part of the glow you wish to hide. After closing the selection, grab the Paint Bucket Tool and ,in the layer mask, fill the selection with black. This will hide that area of the glow from view. Repeat until the wrap is complete.

Conclusion

I really like this simple effect, it helps bring depth and excitement to a picture, and with only a few alterations to the Layer Style, a whole new effect can be created, so go experiment! This tutorial took me 45 minutes to type and 3 minutes for you to achieve the same the same effect.

Bookmark It

Watch the video!

Video notes:

This was a challenge from James over at Pulse GFX. Was also produce very quickly with little planning so please forgive me for the lack of professionalism.

Bookmark It

View the working Example

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<title>CSS-TABS | CSS-Only "DOM TABS"</title>

			<style type="text/css">
				* {padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;}

				html {font: normal 14pt "Century Gothic", "Arial Narrow", "Gill Sans", "Palatino Linotype"; line-height: 130%;}
				body {margin: 10px 10px 10px 10px;}

				a {color: #0066FF; text-decoration: none;}
				a:hover {color: #11f11f; font-weight: bold; text-decoration: underline;}

				h1, h2, h3, h4, h5, h6 {font-family: "Palatino Linotype"; padding-bottom: 5px;}

				p {padding-top: 10px; padding-bottom: 5px;}

				#navigation {background: #aaaaaa; height: 30px; color: #333333;}
				#navigation ul {line-height: 30px; margin-left: 25px;}
				#navigation ul li {display: inline; padding-right: 20px;}

				.content {background: #cccccc; height: 300px; padding: 15px 15px 15px 15px; overflow: auto;}

				#container {height: 330px; overflow: hidden;}
			</style>
		</head>

		<body>
			<div id="navigation">
				<ul>
					<li><a href="#c1" title="Content Area 1">Content Block 1</a></li>
					<li><a href="#c2" title="Content Area 2">Content Block 2</a></li>
					<li><a href="#c3" title="Content Area 3">Content Block 3</a></li>
				</ul>
			</div>

			<div id="container">
				<div class="content" id="c1">
					<h1>Heading 1</h1>
					<p>Curabitur in dui. Mauris adipiscing libero volutpat massa. Ut eros mauris, pulvinar sed, fringilla a, dignissim in, ante. Nunc blandit, massa condimentum malesuada facilisis, arcu ante fermentum orci, et cursus orci libero at est. Fusce posuere, metus vel fermentum pellentesque, nisl pede sagittis velit, vel scelerisque dui mauris tempor dui. Nam nisi. Phasellus sit amet ipsum a risus dapibus scelerisque. Sed porta, massa quis porta lacinia, sem arcu tincidunt purus, id posuere nulla tellus non augue. Ut sed arcu non enim mollis malesuada. Ut gravida ligula. Curabitur ac ligula. Maecenas imperdiet accumsan metus. Proin mattis. Donec suscipit tristique nisi. Nunc sed purus. Curabitur sapien tellus, ultricies ac, sodales faucibus, placerat at, sem. Aliquam rutrum tempus enim? Nulla congue aliquet turpis. Morbi ullamcorper, lectus eget laoreet consectetuer, eros diam faucibus odio, vel mattis dui nulla ut lorem. Phasellus a urna at diam rutrum fermentum.</p>
					<p>Nulla tellus nisl, cursus sed, pulvinar in, sagittis in, dui? Phasellus mollis. Cras metus. Morbi volutpat, metus ullamcorper vestibulum molestie; enim eros mollis nunc, sed rutrum arcu ipsum a mi! Morbi rutrum. In hac habitasse platea dictumst. Quisque eros. Duis cursus molestie dolor! Nam imperdiet. Sed risus enim, condimentum ut, sagittis in, tincidunt in, tellus. Suspendisse eget neque tempor tellus malesuada fermentum. Morbi ac elit? Donec rutrum tristique ligula. Nulla odio ante, volutpat eget, aliquet in, placerat et; justo. Etiam in arcu. Morbi quis ligula. Sed elementum dui malesuada erat. Integer lacinia. Fusce eros arcu, accumsan non; viverra eget, vehicula non, nunc.</p>
				</div>

				<div class="content" id="c2">
					<h2>Heading 2</h2>
					<p>In et odio eu eros tincidunt aliquam. Nunc fermentum. Ut iaculis nisl non lorem. Aenean lacinia elementum velit. Curabitur a pede? Ut congue neque sit amet risus. Praesent turpis. Vivamus tortor quam, convallis vitae, ultrices ac, imperdiet ut; odio. Integer quam elit, cursus ullamcorper, bibendum non; vulputate sit amet, ante. Nunc suscipit sem in nunc! Maecenas sit amet magna at tellus tincidunt porttitor. Vestibulum ligula. Mauris gravida fermentum pede. Proin arcu pede; varius vel; rutrum vitae, rhoncus ut; lacus. Donec placerat eros. Curabitur molestie imperdiet lectus. Fusce pharetra gravida lorem? Aliquam commodo.</p>
				</div>

				<div class="content" id="c3">
					<h3>Heading 3</h3>
					<p>Curabitur elit. Aliquam facilisis dui non dolor. Nulla at magna. Sed sem sem, gravida egestas, commodo sit amet, porttitor in, diam? Nulla quis velit id mauris euismod mattis. Morbi augue arcu, interdum at, congue ut, porttitor id, mauris? Duis vitae dui. Phasellus feugiat. Aliquam erat volutpat. Etiam elementum vulputate metus. Pellentesque rhoncus pharetra justo?</p>
				</div>
			</div>
		</body>
	</html>

PROs:

• Light-weight
• No javascript
• Easily styleable
• Works when javascript is turned off

CONs:

• Breaks the “back” button
• Does not work in IE8 BETA 1 or Opera
• Fixed height

How it Works

The bread and butter of this system is the div #container. By setting it’s “overflow” to “hidden“, all content that’s placed inside of it that exceeds the set height and width of the container will not show.

	#container {height: 330px; overflow: hidden;}

	<div id="container">
		/**content**/
	</div>

Then by having our links for our content link to the divs of our contents, the browsers will automatically scroll to those divs, effectively “switching” our content to the new div.

	<ul>
		<li><a href="#c1" title="Content Area 1">Content Block 1</a></li>
		<li><a href="#c2" title="Content Area 2">Content Block 2</a></li>
		<li><a href="#c3" title="Content Area 3">Content Block 3</a></li>
	</ul>

	<div class="content" id="c1">
		<h1>Heading 1</h1>
		<p>Curabitur in dui. Mauris adipiscing libero volutpat massa. Ut eros mauris, pulvinar sed, fringilla a, dignissim in, ante. Nunc blandit, massa condimentum malesuada facilisis, arcu ante fermentum orci, et cursus orci libero at est. Fusce posuere, metus vel fermentum pellentesque, nisl pede sagittis velit, vel scelerisque dui mauris tempor dui. Nam nisi. Phasellus sit amet ipsum a risus dapibus scelerisque. Sed porta, massa quis porta lacinia, sem arcu tincidunt purus, id posuere nulla tellus non augue. Ut sed arcu non enim mollis malesuada. Ut gravida ligula. Curabitur ac ligula. Maecenas imperdiet accumsan metus. Proin mattis. Donec suscipit tristique nisi. Nunc sed purus. Curabitur sapien tellus, ultricies ac, sodales faucibus, placerat at, sem. Aliquam rutrum tempus enim? Nulla congue aliquet turpis. Morbi ullamcorper, lectus eget laoreet consectetuer, eros diam faucibus odio, vel mattis dui nulla ut lorem. Phasellus a urna at diam rutrum fermentum.</p>
		<p>Nulla tellus nisl, cursus sed, pulvinar in, sagittis in, dui? Phasellus mollis. Cras metus. Morbi volutpat, metus ullamcorper vestibulum molestie; enim eros mollis nunc, sed rutrum arcu ipsum a mi! Morbi rutrum. In hac habitasse platea dictumst. Quisque eros. Duis cursus molestie dolor! Nam imperdiet. Sed risus enim, condimentum ut, sagittis in, tincidunt in, tellus. Suspendisse eget neque tempor tellus malesuada fermentum. Morbi ac elit? Donec rutrum tristique ligula. Nulla odio ante, volutpat eget, aliquet in, placerat et; justo. Etiam in arcu. Morbi quis ligula. Sed elementum dui malesuada erat. Integer lacinia. Fusce eros arcu, accumsan non; viverra eget, vehicula non, nunc.</p>
	</div>

	<div class="content" id="c2">
		<h2>Heading 2</h2>
		<p>In et odio eu eros tincidunt aliquam. Nunc fermentum. Ut iaculis nisl non lorem. Aenean lacinia elementum velit. Curabitur a pede? Ut congue neque sit amet risus. Praesent turpis. Vivamus tortor quam, convallis vitae, ultrices ac, imperdiet ut; odio. Integer quam elit, cursus ullamcorper, bibendum non; vulputate sit amet, ante. Nunc suscipit sem in nunc! Maecenas sit amet magna at tellus tincidunt porttitor. Vestibulum ligula. Mauris gravida fermentum pede. Proin arcu pede; varius vel; rutrum vitae, rhoncus ut; lacus. Donec placerat eros. Curabitur molestie imperdiet lectus. Fusce pharetra gravida lorem? Aliquam commodo.</p>
	</div>

	<div class="content" id="c3">
		<h3>Heading 3</h3>
		<p>Curabitur elit. Aliquam facilisis dui non dolor. Nulla at magna. Sed sem sem, gravida egestas, commodo sit amet, porttitor in, diam? Nulla quis velit id mauris euismod mattis. Morbi augue arcu, interdum at, congue ut, porttitor id, mauris? Duis vitae dui. Phasellus feugiat. Aliquam erat volutpat. Etiam elementum vulputate metus. Pellentesque rhoncus pharetra justo?</p>
	</div>

Bookmark It

#example {height: 100px;}
#example p {line-height: 100px;}

Example

Using the example we will center our text in the div that’s 100 pixels tall. The result can be seen below.

		<div style="height: 100px; width: 500px; background: #000000; color: #eaeaea;">
			<p style="line-height: 100px;">I is working!!  Yay!!</p>
		</div>
	

Note that the line-height attribute HAS to be applied to the tag holding the text (i.e. “p” or “a”). Applying it to the DIV won’t accomplish anything.

		<div style="height: 100px; width: 500px; background: #000000; color: #eaeaea; line-height: 100px;">
			<p>I is broke!!  Aww...</p>
		</div>
	

Bookmark It

<script type="text/javascript" language="javascript">
	
</script>

Now to explain. This script checks the browser type that the viewer is using and if it’s a Netscape 4 or higher, it uses an IF statement to run the code.

	if (parseInt(navigator.appVersion) >= 4) {

Then the code deploys 2 variables. The first is “num” which is the Number of titles and MUST match the number of random titles being used. The second is “rantitle” which is an array that will form the random titles.

	var num = 3;
	var rantitle = new Array(num+1);

Next are the random titles labeled by a number (must never repeat).

	rantitle[1] = "This is random";
	rantitle[2] = "Very Random";
	rantitle[3] = "Yay it works";

The code then draws a random number.

	ranNumber = parseInt(num * Math.random() + 1);

After that the code finalizes by altering the title of the page with the title that matched the random number.

	document.title = rantitle[ranNumber];

Documentaion to Fire G. All rights © reserved. This may not be duplicated or reproduced without the consent of the owner.

Bookmark It