CSS Bakery

Google Knows Too Much About You

2012-02-11T21:07:00.000-08:00

In her article titled, Google Knows Too Much About You, Ghitis says, "Google has every search you ever made and every e-mail you ever sent or received on Gmail. If you ever used Google while logged in to your account to search for a person, a symptom, a medical side effect, a political idea; all of this is on Google's servers. You've done it, said it, clicked it, searched it, Googled it. You can never undo it or unclick it. It stays there forever."

The tracking is not a revelation to anyone but storing the compiled information indefinitely sounds disturbing. The right to be forgotten initiative may be the way to protect users by providing them with the option to purge search engine data.

Writing a Generic CSS Blockquote Class

2012-01-28T09:24:00.000-08:00

People do odd things in an emergency and we all have stories of ludicrous situations in an emergency which we laugh afterwards, if we are still alive.
My favorite one is of the third mate of a merchant ship who, after a tremendous explosion and thinking his ship had been torpedoed, leapt naked from his bunk and jammed both his legs down one leg of his shorts, so immobilizing himself that he had to crawl out on deck on his hands and knees. Fortunately the explosion hadn't come from a torpedo but from a closely dropped depth charge.

D. Robertson, Survive the Savage Sea

I wanted to post a funny paragraph from one of the paperbacks I've been reading to the blog. We had covered CSS blockquotes before so I went back to find out how to use the blockquote class with my quote. As it is, every blockquote gets an airplane and naturally I had a boat to display. I must have assumed that the user would rewrite the background statements to fulfill their needs. This is a very easy change. But sometimes people just want to use things as is and have it work for them. So now, I am going to rewrite a more generic blockquote class without a background image - you can always add one if you desire using this post as a guide.

THE CSS

/* blockquote generic*/
div.post-body blockquote.gen img  { 
   float: left;  
   margin-right: 25px; 
}
 
div.post-body blockquote.gen span { 
   float: right; 
   margin-top: 5px;
}

blockquote.gen p.first:before,  
blockquote.gen p.last:after {
   font-weight: bold;
   font-size: 4em;
   color: #909090;
}

/*MS repositioning upper quote*/
blockquote.gen p.first:before {
   /*push the upper quote down, line up with the text*/
   position: relative;
   top: 0.4em;
   /*to push the text away from the quote symbol*/
   padding-right: 0.2em;
 }

.post blockquote.gen {
   width: 490px;
   margin: 0px;
   padding: 18px 30px 30px;
   /*cantaloupe background-color: #f0dfb5; */
   background-color: #d9e8fa;
   /*to round the corners of the blockquote background*/
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -goog-ms-border-radius: 10px;
   border-radius: 10px; 
   quotes: "\201C" "\201D";

   font-family: Calibri, sans-serif;
   font-size: 15px;
   color: #363636;
 }

 blockquote.gen p.first:before { content: open-quote; }
 blockquote.gen p.last:after   { 
    content: close-quote; 
    float: right; 
    padding-top:20px;
 }

 .post blockquote.gen p {
   margin: 0 0 0.75em;
 }          
 /* end of blockquotes */

THE HTML

<blockquote class="gen">
<img src="images/tallship2.png" alt="" />
<p class="first">
People do odd things...... alive. </p>
<p class="last">My favorite one is of the ...... charge.</p>

<span>D. Robertson, <a href="#">Surviving the Savage Sea</a></span>
</blockquote>

RELATIVE POSITIONING TO NUDGE THE QUOTE DOWN

Given the 4em font size, the first quote comes out rather large, producing a large line height to go with it. Since the text within the quote is in a much smaller font, we end up with a pretty large offset between the quote and the first letter of the text. The upper quote still looks decent but if you want to make it perfect, we can fix it using relative positioning.

HOW TO USE THE CLASS

Your markup will be very similar to the above. If you wish, you can change the background color from blue to a color of your choosing by rewriting the background color statement in the CSS and of course find a substitute for the image in the markup. Remember the filename and path "images/tallship2.png" are generic, you need to write your own URL.

The ship graphic used in the blockquote demo is by http://cemagraphics.deviantart.com

Blogger Adjustments Using CSS

2012-01-20T23:28:00.000-08:00

Another post working on Blogger software. I host my own images and have my own domain but my blog is on Blogger so any time I update the look and feel of the site, I have to work with their software. The placement of my post date could use some improvement. Here's how it looks now. I highlighted the gap between the date and my site logo in purple. Either the logo or the date needs to move. I will pull up the date for the first post, which means I will initialize the top margin for h2 to zero. One caveat: I wouldn't want the new change to effect every post since I need that top margin for separating successive posts. CSS first-child property will allow us to write a style that will be exclusively for the first post only.

div.blog-posts h2:first-child { margin-top: 0px; }

Zeroing the top margin of the post aligns us better but now I feel we are looking too crowded. See what you think. I think we need some breathing room.

Let's try lining up the blue block lettered CSS in my logo, with my main (the second column) and the right sidebar (the third column). Here's what we are going for. This will require rewriting our first style because we want to push it down and also push down the right sidebar:

div.blog-posts h2:first-child { margin-top: 50px; }
#sidebar-wrapper { padding-top: 63px; }

I embedded these two statements into my local file but best way to do this is to keep an external style sheet and link that file into your Blogger style/markup template which is accessible via DESIGN/EDIT HTML.

Blogger Avatar Sitting on Top of Sidebar

2012-01-17T18:00:00.000-08:00

I was reading comments on the blog recently when I noticed the avatar images sitting on top of my left sidebar.

If I pushed the #comments div to the right, the avatar would move along with it. This would change my overall margins for the comment section which bothers the symmetrical strain in me but without a clear and apparent place for the avatar to go, was the easiest, fastest way to fix the problem. I decided I could always revisit the styling of comments later.

div#main-wrapper #comments {
margin-left: 20px;
}

does the trick.

We are not writing over the left sidebar anymore which is good. We could push the avatar down some to align it with the user name better. Based on whether it's next to a user name that starts with lowercase or uppercase letters, the alignment looks different so I went for the middle of the road which looks pretty decent.

#comments-block .avatar-image-container {
padding-top: 5px;
}

Blogger users to make these changes, go to DESIGN > EDIT HTML and add the new CSS to your styles.

CSS3 3D Transform Example

2012-01-15T20:25:00.000-08:00

Above you see an image of a 3D box made from a single div element, and rendered in Chrome using CSS3 3D Transforms. On one side of the box you see a small window with CSSBakery showing in it. In the live demo, that is actually an iframe that allows you to scroll and click around.

If you click on the image you'll go to the live demo, but at the moment 3D Transforms are only supported on Apple Safari and Google Chrome (and based on my tests, Chrome doesn't render it when running on Windows XP). If you don't have a Browser with 3D transform support then it'll just look like a lot of gibberish and that includes Firefox which is the browser that I use. If you are on IE, you need a prayer. To download Chrome for Windows, visit Google. Google Chrome with Windows 7 as your OS will display the example correctly.

The markup for this is really simple:

<div id="bar1" class="bar">  
 <iframe src="http://cssbakery.com"></iframe>
</div>

The CSS is a bit longer, but still not too bad. The main things we are doing are:

Setting up a common perspective value and origin in a parent element (body). These values are then used by all 3D transforms that are done in all child elements.
We set the transform style to: preserve-3d
We create a couple of pseudo elements to go along with our content div. These are the ::before and ::after pseudo elements, which we'll use for rendering the right side and top of the 3d bar.
We use the transform property on each of the 3 elements to rotate and translate it in space to form the image of a 3d box.
We add some styles for the iframe I mentioned earlier, including some positioning and a scaling factor to make it fit.

Here's the CSS:

body {
 -webkit-perspective: 1000px;
 -webkit-perspective-origin: 200px -150px;
}

#bar1 {
 color: white;
 font-size: 50px;
 text-align: center;
 background: navy;
 top: 300px;
 left: 400px; 
 -webkit-transform-style: preserve-3d;
 -webkit-transform: translateX(-20%) rotateY(-45deg);
}

.bar, .bar::before, .bar::after {
 padding: 0;
 margin: 0;
 position: absolute;
 left: 100px;
 width: 200px;
 height: 260px; 
 display: block;
 position: absolute;
 font-size: 25px;
 line-height: 35px;
}

.bar::before {
 
 content: 'Before';
 top: -100px;
 height: 200px;
 background-color: rgba(0, 0, 255, .4);
 -webkit-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
 -moz-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
 -o-transform: rotateY(90deg) rotateX(90deg) translate(50%, -50%);
}


.bar::after {
 content: 'After';
 top: 0px;
 background-color: rgba(0, 255, 0, .4);
 -webkit-transform: rotateY(90deg) translateX(50%);
 -moz-transform: rotateY(90deg) translateX(50%);
 -o-transform: rotateY(90deg) translateX(50%);
}

iframe {
    position: absolute;
    left: -50px;
    top: -96px;
    height: 438px;
    -webkit-transform: scale(.48);
}

King's Crown to be Made of Chrome?

2012-01-04T23:00:00.000-08:00

Safari
Firefox
Chrome
IE

Browser Market Share
©2012 bar graphs by cssbakery.com

Could Google Chrome overtake Microsoft's Internet Explorer in the browser wars? That's what people are asking after StatCounter reported that Chrome has just bypassed Firefox in browser market share. Firefox and Chrome, long favored by developers, have steadily gone up in number of downloads over the years. Internet Explorer is still the leader but everybody, including Microsoft, is happy IE6 share is down to less than 1%. Not unlike those scenes in the movies when no matter what you do, you just can't kill the scary beast, there's a reason why IE6 has staying power.

Some corporations and government entities are still using IE6 because they have a suite of applications developed and tested on that particular browser. Moving to a new browser means they have to re-test all those applications and fix the ones that are broken, all of which costs them money. Of course, they should realize that there is also a large cost for staying on IE6, including extra effort for new applications and the potential cost of security breaches caused by the use of a 10 year old browser.

Here's a set of earlier CSSBakery posts on Google Chrome. The bar graph with the emblem was made using CSS classes that we developed here. For the markup and watermark css, look here.

Google Chrome is written in C++. I'm including a sample of the source code.

Microsoft Security Essentials

2012-01-01T10:58:00.000-08:00

I had a Coast Guard instructor once, a gruff but lovable Captain Haddock type with a penchant for donuts, who used to tell us that anybody who gets on his boat has to wear a life vest at all times. On board, he kept three of anything that was important - 3 GPS'es, 3 batteries, 3 radios that I can remember. Inside a large, lake-like harbor or with a computer that rarely goes to unknown sites, life vests and anti-virus software start feeling bulky, obstructive and you start bending the golden rules.

When another computer detected problems with some of my files, I scanned the suspect laptop with McAfee and Avast which revealed surprises in the form of Siveras-B. Feeling invincible, I hadn't run any anti-virus software on it for awhile (a sheepish grin). Even though I removed the threats identified by Avast and McAfee, MSE full scan, a free downloadable from Microsoft, which took six hours to run, came up with more. Microsoft Security Essentials Quick scan had declared it clean. The lesson to learn from my example: Run regular scans on all of your computers and any medium that comes into contact with them. An SD card that was infected is how I became aware of my situation.

If you find yourself in a similar or worse predicament and you want to back up your data before you reformat a disk, remember that even when your operating system's gone belly up, you can always boot using Ubuntu Linux on a portable medium to access your files. After saving important data, reformat the disk and reload the OS for a fresh start.

Styling Blogger Differently for Single Post vs. Multiple Posts

2011-12-31T15:02:00.000-08:00

If you are a Blogger user, you may find this useful. I had a situation where I wanted to style something differently for the individual post page vs. the main page where all the latest blog entries are displayed. Looking at the Blogger HTML markup, I found that the HTML is very similar between these two pages. So similar in fact that I could not write a CSS selector that would apply to one and not the other.

To solve this, I added a div that will have a different class name when viewing a single post vs. the main list of recent posts. To do this, I had to edit my Blogger template and 'expand widget templates'. I found the place I wanted to add the new div and entered it as follows

<div expr:class='data:blog.pageType''>
    <!-- the div's I want to enclose for styling -->
  </div>

Note the 'expression' used within the div tag ("expr:class='data:blog.pageType'"). This is a Blogger scripting expression that will be evaluated at runtime. Blogger will evaluate it and render something different based on the value of it's blog.pageType internal variable. For a single post page, this expression will evalute to "class='item'", whereas on a mult-post home page it will evaluate to "class='index'".

So, after doing this, the single post view will have the following div:

<div class='item'>

and the main list of posts will have:

<div class='index'>

Now I can write CSS rules that target one or the other using the different class names.

.blog-pager .item {
/* do something different on the single post page */
}

.blog-pager .index {
/* do something else for the main page */
}

CSS Diagonal Menu with Sprites

2011-12-26T12:54:00.000-08:00

Below I decided to do another text wrapping experiment - similar to the "stair steps" in the previous post - where I'll have the right hand side of the text wrap along an angled series of graphics. The graphics depict the various "points of sail" of a sailboat. In this post rather than using invisible "steps" to force the wrapping, I'm going to use a fake stair approach where I'll just insert <br>'s into the text to break lines at appropriate words to form the angled right hand side. While I'll do this by hand for this example, it wouldn't be too hard to write some server side code to insert the br's at appropriate places.

That takes care of the text, but we also have to position the circles along a diagonal line. We'll do this with a combination of relative and absolute positioning. We'll also add a hover style to pop up a box of text explaining the point of sail you are currently hovering over.

In the outer div - POSwrap - we set the position to relative to establish a positioning context. Below, we set an absolute position for the ul. Since the ul is a descendant of POSwrap it will use the positioning context we established above.

By absolutely positioning the entire ul we can move around all the point of sail graphics as a single unit (that is, all the li's within the ul will move together as we move the ul). Note that we will need to adjust the ul's position to match the amount of text in the paragraphs above the graphics.

Within the ul, we again use absolute positioning for each of the child li's. This positioning establishes the angled line of circular graphics.

In the working example below, hover over the portholes to see the text overlayed on a semi-transparent background. We discussed CSS transparency in other posts. The CSS and markup are fully listed, I explain the sprites briefly. If you search the blog, you'll find many other posts where I talk about sprites. I finish off with Photoshop circles. Enjoy and watch where you are going! :-)

Points of Sail

A sailboat cannot sail directly into the eye of the wind, but can sail to within
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer. Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your
screen. Boat drawings and info
from Chapman Piloting
and Seamanship,
65th edition
by E. Maloney.

Run
When the wind is almost directly aft, the boat is said to be "running". If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water. In stronger winds, gybing is a danger with this sail. Aerodynamically simpler but can be the most dangerous point of sail.
Close-Hauled
When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull. My favorite sail.
Close Reach
When the angle between heading and wind direction is increased, the boat begins to "close reach". A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats. The sails are eased about halfway out.
Beam Reach
The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.
Broad Reach
Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"

THE CSS AND THE MARKUP

/* pos */
ul#pointsofsail { position: absolute;
padding: 0; margin: 0;
list-style-type: none;

/*these 2 points will position it from title of blog post*/
/*and the title of pointofsale element*/
top: 105px; /*go below positioning context s 0 0 - go below*/
left: -125px; /*go left of positioning context s 0 0 - go left*/
}

ul#pointsofsail li {
background-image: url("http://pics.cssbakery.com/pics/pointsofsail.png");
background-repeat: none;
height: 102px;
width: 102px;
position: absolute;
}

ul#pointsofsail li span {
font: 13px Arial, Helvetica, sans-serif;
line-height: 16px;
color: #494949;
width: 200px;
background: #fcf6e6;
padding: 20px;

border: 3px solid #616161;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

opacity: .90;
filter: alpha(opacity=90);

display: none;
position: absolute;
top: 120px;
/*lines up with my blogger text but 8px works by shifting
the hover window a little to the right
*/
left: 8px;
text-align: justify;
}

/*the span is always the first child of the li in this
markup. We are really trying to get to the first
list item in the ul so the first-child goes to the li
element
I want the first popup window to be placed at 0 left and
not 8px like the rest of them
*/
#POSwrap ul#pointsofsail li:first-child span { left: 0; }

ul#pointsofsail li:hover span {
display: block;
}

#closehauled {
background-position: 0 0;
height: 102px;
width: 102px;
left: 571px;
top: 9px;
}
#closehauled:hover {
background-position: 0 -102px;
}

#closereach {
background-position: -102px 0;
left: 460px;
top: 72px;
}
#closereach:hover {
background-position: -102px -102px;
}

#beamreach {
background-position: -204px 0;
left: 349px;
top: 138px;
}
#beamreach:hover {
background-position: -204px -102px;
}

#broadreach {
background-position: -306px 0;
background-position: -307px -2px;
left: 235px;
top: 202px;
}
#broadreach:hover {
background-position: -307px -104px;
}

#run {
background-position: -408px 0;
background-position: -409px -2px;
left: 125px;
top: 266px;
}
#run:hover {
background-position: -409px -104px;
}

div.post-body ul#pointsofsail li span h2 {
font-size: 15px;
line-height: 6px;
font-weight: bold;
padding: 0;
margin: 5px 0 20px 0;

/*to undo the effects of cascading*/
text-transform: none;
background: none;
font-family : Arial,Helvetica,sans-serif;
font-style : normal;
letter-spacing : normal;
line-height : 6px;
}

/*different colors*/
ul#pointsofsail li#closehauled span h2 {
color: #6a2df7;
}

ul#pointsofsail li#closereach span h2 {
color: #61a1e2;
}

ul#pointsofsail li#beamreach span h2 {
color: #23689c;
}

ul#pointsofsail li#broadreach span h2 {
color: #06c2d3;
}

ul#pointsofsail li#run span h2 {
color: #de0c1b;
}

div.post-body div#POSwrap {
width: 550px;
margin: 0;
padding: 0 0 90px;
font-family: "Helvetica Neue Medium",Helvetica,"Helvetica Neue",Arial,sans-serif;
position: relative;
}

div.post-body div#POSwrap h1 {
background: url(http://pics.cssbakery.com/pics/h2transparent.png) no-repeat;
width: 244px;
height: 56px;
text-indent: -9999px;
margin-top: 20px;
}
/*end of pos*/

<div id="POSwrap">
<h1>
Points of Sail</h1>
<p>
A sailboat cannot sail directly into the eye of the wind, but can sail to within 
45 degrees of the wind or closer when close-hauled. If you head into the
wind, your sails will start luffing and you will lose power and the
ability to steer.  Describing a sailboat's course in relation
to the wind direction, the points of sale on the right
show a starboard tack and assume that the
wind is blowing from the top of your 
screen. Boat drawings and info 
from Chapman Piloting 
and Seamanship, 
65th edition 
by <em>E. Maloney</em>.
</p>

<ul id="pointsofsail">
<li id="run"><span><h2>
Run</h2>
When the wind is almost directly aft, the boat is said to be "running".  If the wind is light, it'll feel like you are not moving but just look behind the boat and you'll see a rippling line of water.  In stronger winds, gybing is a danger with this sail.  Aerodynamically simpler but can be the most dangerous point of sail.</span></li>
<li id="closehauled"><span><h2>
Close-Hauled</h2>
When there's the smallest angle between wind direction and heading, the boat is said to be "close-hauled" meaning that it sails are hauled in close to the hull.   My favorite sail :)</span></li>
<li id="closereach"><span><h2>
Close Reach</h2>
When the angle between heading and wind direction is increased, the boat begins to "close reach".  A close reach is somewhat toward the wind, and broad reach is a little bit away from the wind. Fast point of sale for most boats.  The sails are eased about halfway out.</span> </li>
<li id="beamreach"><span><h2>
Beam Reach</h2>
The boat is "beam reaching" when the wind is on the beam at a right angle to the boat.  </span>
</li>
<li id="broadreach"><span><h2>
Broad Reach</h2>
Further increases to the angle between heading and wind direction (more than 90 degrees) bring the boat to a "broad reach"</span></li>
</ul>
</div>

CSS SPRITES

The same rules that set the absolute positions of the graphics, also implements the CSS sprite technique by setting the background position attribute. An additional hover style makes the sprite dynamic by changing the background offset when you hover over the graphic. As an added touch, hovering over a graphic also displays the block of text contained in the corresponding li's span element (see the li:hover span" rule).

Finally, for each of these blocks of text, we set the color of the heading to match the border color of the circular graphic.

The sprite file that I'm using has the the active (when an image is pressed) and the inactive state (the grey versions) of each bitmap. For detailed discussion of CSS Sprites, see these links.

HOLLOW PHOTOSHOP CIRCLES

Here is a video briefly describing the steps involved in drawing consistent see through circles in Adobe Photoshop. You will learn how to use the Ellipse tool to make perfect circles, Stroke, Blending Options Default, and Fill Opacity for vector shapes:

CSS Sprites

2011-12-26T12:46:00.000-08:00

CSS Sprites

Happy Holidays

2011-12-18T08:39:00.000-08:00

The Stair Effect: CSS Curved Text Wrap Using a Mock Sliced Image

2011-12-12T20:42:00.000-08:00

To view the slideshow which has the major steps of the tutorial, click here. So why are we going to pretend to divide up an image into smaller rectangles? Because I want to wrap text around an image following a curved path. Like many others have done before, including Eric Meyer in his blue book, you can also cut your image into real slices in Photoshop, which would simplify the CSS but it'd be labor intensive, and requires you to add img tags in the markup. I want to do the same using CSS (and a bit of markup) without actually editing the image.

Honestly, CSS was not what I had in mind when I started thinking about wrapping text around a PNG file which contained an unevenly shaped image. Using Javascript, you can probably check for blank pixels to determine the real contour of an image and then build a "staircase" based on that. That would require a bit of programming and writing of some image processing algorithms.

Being a CSS-centric blog, I want to share with you a CSS technique that approximates the same thing without any traditional programming. If you have a good grasp of CSS fundamentals and some patience, you can curve text around an image using only CSS and HTML. The types of topics that we'll cover during this exercise are Negative Margins, Relative and Absolute Positioning, The Flow, and Floats.

The markup for the first still in the animated gif has a div enveloping an img and a p element. The image goes first and because p is a block element, the text starts at a new line. The red border is for the enveloping div and the dotted black border belongs to the image. No CSS needed, the markup goes something like this:

<div id="stairs">
  <img src="images/gown.png">
  <p>An evening gown is a long flowing women's....</p>
</div>

The output without any CSS looks like this. The borders are not turned on in this version because I have no CSS.

Since we want to pull the text to the same level with the image, we begin writing some CSS. Floating the image to the right should do the trick because this will sort of take the image out of the flow so as long as there's enough space the text and image will sit next to each other. Text will flow around the floated image but other than that, the image being there will not cause a block level element generate a br.

#stairs img { float: right; border: 1px dotted black; }
#stairs { border: 1px solid red; }

Let's add 20 pixels all around to get the image away from the corner of the browser and give the stairs div a width of 500 pixels to contain the text a bit. The third still is how we'll look at this point.

#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 500px;
   }
   
#stairs img { border: 1px dotted black; 
              float: right;}

The text is confined to a set width and is next to the image but moving the text more towards the image will benefit the design. To do this, we will use negative margins. Remember a left margin controls how far away the neighboring element to your left has to stay from you. You control how close someone gets to you. When you have a negative margin, you are in effect saying "come on in" so that the elements actually start overlapping. A left margin of minus 80 pixels looks okay.

#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 500px;
   }

#stairs img { 
   border: 1px dotted black;
   float: right;  
   margin-left: -80px;}

#stairs p   { text-align: justify; }

Here's the output of our CSS and HTML after the latest changes. I have the borders turned on for debugging.

STAIR EFFECT

With CSS, we do not have access to the internals of an image file so we are going to simulate the curve by stacking up rectangles on top of one another. This reminds me of how we used to compute an integral using a numerical method.

The markup will change. The finer the slices, the better the curve but for our purposes, four (4) should be sufficient to demonstrate the technique. Six (6) rectangles will make it perfect which would be a good exercise for you. All div's will be floated and will have nothing inside them so it's imperative that we declare width and height for each div. Without dimensions, an empty div will collapse in the flow. I'll take the negative margin out for now since we don't it for this case. The containing block for the image is csdiv, the wrapper div for the stair divs. I'm sure you can come up with a more descriptive name for your div, cs is short for container-stairs div.

/*the css*/
#stairs { 
   border: 1px solid red;
   margin: 20px;
   width: 460px;
   font: 13px/1.7 Georgia;
   }
   
#stairs img { 
      border: 1px dotted black; 
      position: absolute; 
      top:0; right:0;  }

#stairs p   { text-align: justify; }
#csdiv      { position: relative; }

.stair1, .stair2, .stair3, .stair4 { float: right; }   
.stair2, .stair3, .stair4 { clear: both; }

.stair1 { width: 181px;
   height: 190px;
   border: 1px solid blue;
   }
   
.stair2 { width:  208px;
   height: 76px;
   border: 1px solid black;
   }
   
.stair3 { width:  245px;  
   height:  70px;
   border: 1px solid red;
   }
   
.stair4 { width:  278px;
   height: 112px;
   border: 1px solid green;
   }

<!-- The Markup -->
<div id="stairs">
  <div id="csdiv">
    <img src="images/gown.png">
    <div class="stair1"></div>
    <div class="stair2"></div>
    <div class="stair3"></div>
    <div class="stair4"></div>
  </div>
  
  <p>
  An evening gown is a long flowing women's dress usually worn....
  </p>
</div>

CSS3 BORDER PROPERTIES

You can easily see the different elements when we turn the borders on. The text is nicely flowing around our image. We can dress up the border in Firefox by thickening the border, rounding its corners and dropping a shadow. The -webkit- prefix covers Safari/Chrome/Konqueror. I am not including it in the code here but you should:

#stairs {
border: 9px solid #f8d0d4;
-moz-border-radius: 12px;
-moz-box-shadow: -2px 2px 5px 1px #888;
box-shadow: -2px 2px 5px 1px #888;
border-radius: 12px;
......
}

A LITTLE MARGIN GOES A LONG WAY

With the addition of the thick border for the stairs div, the first thing that strikes you is the lack of padding/margin which we can take care of easily.

The text runs right up to the red border so one way to fix this is to give some padding or margin to one of the elements. I'm going to add margin to the p element with margin: 40px 0 40px 40px; statement. There will be no margin for the right side because that could create problems by keeping the text away from our "stairs".

Let's get the text and the image away from the border:

#stairs p {
text-align: justify;
margin: 40px 0 40px 40px;
}

A SET OF STAIRS KEEP THE TEXT AT BAY

Just so we are on the same page - if you are thinking the image itself is playing any role in arranging the text, you'd be wrong. It's taken out of the flow by the absolute positioning and is only there for displaying purposes. The 4 rectangles are now the "image". As long as we overlay the image where the rectangles are stacked up, we'll fool the eye.

#stairs {
margin: 50px;
width: 360px;
font: 13px/1.7 Georgia;
border: 9px solid #f8d0d4;
-moz-border-radius: 12px;
-moz-box-shadow: -2px 2px 5px 1px #888;
border-radius: 12px;
box-shadow: -2px 2px 5px 1px #888;
}

I am going to nudge the image up a little by absolutely positioning the top by -20 pixels. This will move the image up a little above the border.

#stairs img {
position: absolute;
top:-20px; right:0;
}

RELATIVE POSITIONING LEAVES A HOLE IN THE FLOW

#csdiv {
position: relative;
right: -165px;
}

To see the effects of the relative (moving the stairs to the right) and absolute positioning (moving the image up), take a look here. csdiv is relatively positioned. It's still in the flow but we have moved it to the right by 165 pixels. We are doing this because we want the image to pop out of its container and sit on top of the border. But doing so will leave a "hole" behind where csdiv was going to be. As far as the flow is concerned, it still is.

We are going fill in the yellow strip - leftover from the relative positioning - by bringing the text over to the right.

NEGATIVE MARGIN TO PULL THE TEXT TO THE RIGHT

The curve will stay the same. Every stair will get the same negative margin of minus 162 pixels. I can turn off my debugging borders simply by setting all borders to none.

/*negative margin to pull the text over*/
.stair1, .stair2, .stair3, .stair4 {
float: right;
margin-left: -162px;
border: none;
}

Notice how we have moved the image over the border of its containing div in the final version. I thought we were done then I remembered that I had replaced the first letter of the paragraph with a dropcap.

At the time I wrote the CSS Dropcap post, I didn't think a non-floated version was going to help anyone but maybe calm down people's fears about floats. Well, as it turns out, a non-floated dropcap, "stylized_olho-a" in this case, is exactly what I needed for this example to work.

THE CSS & THE MARKUP

If you want to see the entire CSS and markup based on this version, click here. HTML version here. The introductory gif shows the text lighter than I have in the image below. If you prefer it that way, update the paragraph selector with: #stairs p { color: #999999; }.

For comparing the image below with what we started out, see here. Once again, the slideshow has the major steps of the tutorial.

Building Image Grids: Size and Crop an Image Using CSS

2011-11-11T21:43:00.000-08:00

Sometimes you want to display an existing image in a different size and with a different crop, but without actually changing the image file itself. For example if you are displaying a lot of images that reside on Flickr, you could consider making copies of all the images and editing those copies (e.g. using Photoshop) to resize and crop. But that's a lot of work. Instead, we can resize and crop the original images directly in the Browser using CSS.

RE-SIZING

The original image could be any size, so it's likely that we'll need to resize it to fit in with our page layout. For example if we are laying out a grid of images we'll want to each image in the grid to be the same width and height. Cropping, which we talk about below, can help, but if the image is large we don't want to just crop a small section of it. Instead, we first want to scale the image to get as much of it as we can in our target rectangle, then we'll finish it off with a crop.

Scaling the image is pretty easy by setting the CSS width and height properties of the img tag. But there is one trick here: we never want to set both the width and height because then the image can be streched and distorted to meet the exact height and width we specify. Instead, what we want to do is set only the width, or only the height, letting the other dimension be determined automatically, and thus preserving the original aspect ratio of the image.

So one question we must answer for each image is: Do we scale it by height, or by width?

The answer depends on the aspect ratios of both the target rectangle, and the image. Suppose our target rectangle has a height of 100px and a width of 150px, while the image we are displaying has a height of 200px and a width of 450px - the dimensions for the B/W composite image that appears below. First lets consider what would happen if we scale the image width to be 150px in order to fit it into our target rectangle.

That's a scaling factor of 1/3, so the height will also be multiplied by 1/3 and we'll end up with an image 150 pixels wide, but only 67 pixels in height. Note that since we don't want to distort the image, we have to apply the same scaling factor of 1/3 to both the width and height. But the resulting height of 67 pixels doesn't work since our target height is 100px. As you can see, our resized image got too small for our targeted window. The blue area, which was supposed to be filled with the image, is empty.

So lets try scaling the image height to 100px instead. That's a scaling factor of 1/2, so the width of the image gets reduced to 225px. This is better since the image is still large enough to fill our target rectangle. Of course it's wider than our target, but we'll fix that by cropping it.

Mathematically, the way to decide whether to scale the height or the width is to compute aspect ratios for both the target area and the image:

A_Target = TargetWidth / TargetHeight
A_Image  = ImageWidth / ImageHeight

Then compare them to decide whether to scale the image by height or width:

if (A_Image > A_Target) then
  scale image using height
else
  scale image using width

For the example discussed above, the calculations would be:

A_Target = 150 / 100 = 3:2 = 1.5
A_Image  = 450 / 200 = 9:4 = 2.25

A_Image is greater than A_Target, so scale using height.

CROPPING

To crop the image, we need to have a parent element that we set to the height and width of the target rectangle. The img tag is a child of this parent element. To crop, we just set the overflow property of the parent to hidden (overflow: hidden). If the scaled image is wider than the parent, this will crop off the right portion of the image. If the scaled image is taller than the parent, it will crop off the lower portion of the image.

To crop equally from all sides, we need to pull the image to the left (or up) relative to the parent. We can do this with negative margins. So let's say the scaled image is 20px wider than the parent. If we set margin-left of the image to be -10px, it will pull the image 10px to the left without affecting the parent, and the crop will be centered. If the scaled image is taller then the parent, then use a negative margin-top to achieve the same effect.

Given these two images of varying dimensions - one's vertical and taller, the other's got a horizontal layout that's wider - let's display them with the same dimensions (height and width the same) in an image grid using CSS:

<style type="text/css">
.flickrgrid a {
   height:275px;
   width: 275px;
   overflow: hidden;
   float: left;
   display: block;
   margin-bottom: 25px;
   }
#image1 {
   width: 275px;
   }
#image2 {
   height: 275px;   
   }
</style>

<div class="flickrgrid">
<a href="images/drawingv.jpg"><img id="image1" src="images/drawingv.jpg"></a>
<a href="images/drawingh.jpg"><img id="images/drawingh.jpg"></a> 
</div>

SAME EXAMPLE WITH LESS CSS

We can make the CSS more compact by using multiple classes. The width and height will be set in only one place. .window is made generic so that it can be used for a window of any dimension. We are going to reduce the size of each image in the grid to 220 pixels down from 275 pixels that I used in the example above. That'll give us extra room for right margin to separate the thumbnail images.

.window1, .window1 .taller { width: 220px; }
.window1, .window1 .wider  { height: 220px; }

.window {
   overflow: hidden;
   display: block;
   float: left;
   margin-right:20px;
   }

<a class="window window1" href="images/drawingh.jpg">
<img class="wider" src="images/drawingh.jpg">
</a>

<a class="window window1" href="images/drawingv.jpg">
<img class="taller" src="images/drawingv.jpg">
</a>

THREE IMAGE GRID

<style type="text/css">
.flickrgrid2 a {
   height:150px;
   width: 150px;
   overflow: hidden;
   float: left;
   display: block;
   margin-right: 15px;
   margin-bottom: 25px;
   }
#image12 {
   height: 150px;
   }
#image22 {
   width: 150px;
   }
#image32 {
   height: 150px;
   }
</style>
<div class="flickrgrid2">
<a href="images/drawingv.jpg"><img id="image22" src="images/drawingv.jpg"></a>
<a href="images/pencils550x361.jpg"><img id="image32" src="images/pencils550x361.jpg"></a>
<a href="images/drawingh.jpg"><img id="image12" src="images/drawingh.jpg"></a>
</div>

USING WIDER CROPS

Next we change the example above to make the cropping window wider than it is tall. So it will no longer be a square of 150px on each side. Instead it will be 150px tall and 180px wide. To do this we need to set the width of the a tags to be 180px, and then any images that need to be scaled by width, we will also set to be 180px wide.

The only tricky part of this is that since we are changing the width of the cropping window, it could mean that some images that we were previously scaling by height, now need to be scaled by width. This happens if the aspect ratio of the scaling window is now larger than the aspect ratio of the image.

In our example the aspect ratio of the cropping window is changing from 1 (150/150) to 1.2 (180/150). If we had images with an aspect ratio of say 1.1, then we would have been scaling them by width and cropping a little off the bottom, and now we need to scale them by height and crop a little off the right.

<style type="text/css">
.flickrgrid3 a {
   height:150px;
   width: 180px;
   overflow: hidden;
   float: left;
   display: block;
   margin-right: 3px;
   margin-bottom: 25px;
   }
#image12c {
   height: 150px;
   }
#image22c {
   width: 180px;
   }
#image32c {
   height: 150px;
   }
</style>

<div class="flickrgrid3">
<a href="images/drawingv.jpg"><img id="image22c" src="images/drawingv.jpg"></a>
<a href="images/pencils550x361.jpg"><img id="image32c" src="images/pencils550x361.jpg"></a>
<a href="images/drawingh.jpg"><img id="image12c" src="images/drawingh.jpg"></a>
</div>

CSS Image Grids

Happy 4th

2011-07-04T20:32:00.000-07:00

CSS Image Grid Using Sprites

2011-05-30T14:27:00.000-07:00

Still Life

When we worked on a CSS image grid last summer, I thought later I'd complete a second version using sprites to show you how that approach can improve performance. I should make notes to myself about loose ends like that because somewhere along the way, I forgot about it. Last week, an email about the original grid reminded me.

The grid post is popular, the sprite change is easy enough, so let's implement it. By the way, the grid above is a real-time working example generated through HTML included within this post and styles that come from a style sheet. Each thumbnail is clickable but needs a URL assigned to its a element before it'll take you somewhere.

The thumbnail images are still life on black, which is a hobby of mine. I had to crop some of them quite a bit in order to fit them here. Images were saved in low resolution to speed up things for the web.

I made a new copy of the old CSS styles just to keep things from tangling with each other. Most of the code is recycled so for detailed explanations, see this previous post. I posted several times on sprites before if you need help to figure out what those are about.

Keep in mind that my space on the blog is limited to 550 pixels, you can adjust the width to fit your requirements and increase the number of columns of your grid as you wish. You'll find the markup at the end of the CSS.

ul.imggrid {
  padding: 0;
  list-style: none;
  margin: 0 auto;
  width: 495px;
  }

.imggrid li {
    float: left;
    padding: 1px;
    border: 1px solid #cbcad0;
    margin: 0 5px 10px 5px;
    } 

.imggrid_display {
   padding: 20px;
   margin: 0 auto;
   width: 513px; 
   /*these two properties will be inherited by .portfolio h2 and .portfolio p */
   font-family: 'GraublauWeb', arial, serif; 
   text-align: center;
  }
  
  /* .post-body is only for those who are on Blogger, or all others please skip 
     it and write your selector as "div.imggrid_display h2" without the quotes
  */
  .post-body div.imggrid_display h2 {
     padding: 0; margin: 0;
     clear: both;
     font-size: 35px;
     font-weight: normal;
     color: #58595b;
     background: none;
     font-family: 'GraublauWeb', arial, serif;  
     /* reset for cascade effects that are trickling down to me 
       from other h2's 
    */
     text-transform: none;
     letter-spacing: normal;
     }
  
  .imggrid_display p {
      margin:0; padding: 0;
      font-size: 15px;
      color: #58595b;
      }
  
/* sprites for imggrid */
.imggrid a {
    background: url('images/spritebitmaps.jpg') no-repeat;
    height: 150px;
    width: 150px;
    display: block;
    }

/*sprites*/
.imggrid a#col1 {background-position: 0 0;}
.imggrid a#col2 {background-position:  -150px 0;}
.imggrid a#col3 {background-position: -300px 0;}
.imggrid a#col4 {background-position:  -450px 0;}
.imggrid a#col5 {background-position:  -600px 0;}
.imggrid a#col6 {background-position:  -750px 0;}
.imggrid a#col7 {background-position:  -900px 0;}
.imggrid a#col8 {background-position:  -1050px 0;}
.imggrid a#col9 {background-position:  -1200px 0;}
/* end sprites for imggrid */
/* end imggrid block */

Important note for the CSS: .post-body is only for those who are on Blogger, All others please skip it and write your selector as div.imggrid_display h2

Fill in your own URLs for the a href's. The markup:

<div class="imggrid_display">
<ul class="imggrid">
<li><a id="col1" href="#"></a></li>
<li><a id="col2" href="#"></a></li>
<li><a id="col3" href="#"></a></li>
<li><a id="col4" href="#"></a></li>
<li><a id="col5" href="#"></a></li>
<li><a id="col6" href="#"></a></li>
<li><a id="col7" href="#"></a></li>
<li><a id="col8" href="#"></a></li>
<li><a id="col9" href="#"></a></li>
</ul>
<h2>Still Life</h2>
<p>© Copyright 2011 | www.cssbakery.com | All Rights Reserved</p>
</div>

THE "SPRITE" FILE

All the images used in forming the grid reside in the same file avoiding multiple GETs which saves time and loads the page smoother. I did not leave any space between my images but for clarity and ease of edit, you might want to include at least a single line as a separator between yours.

Since my images are each 150 pixels wide and stacked next to each other with no separator space, I shift the sprite file by a factor of 150 times the order of each image in the file to get to that image.

To give you an example, the red tulip is fifth in line so I multiply 150 by (5-1). I subtracted 1 since we start counting from zero. In other words, I have to shift the background image by 600 pixels to get to the tulip.

The background position x value is negative at -600 pixels because we want to pull the image to the left. If it helps any, think of the negative x axis from school. You are pulling the parts of the image that you don't want into that quadrant and showing only a portion of the remaining in the positive quadrant.

NTH CHILD OF CSS3

We can improve the CSS by including the nth-child construct from CSS3. It will simplify both the CSS and the markup. Off the top of my head, I couldn't tell you how widespread it's implemented in browsers, except that Firefox 3.5 and greater supports it and IE8 and below doesn't. The fact that IE8 does not support it is a dealbreaker and the reason why we cannot use in official code yet. There are still a lot of users running Windows XP, which does not support IE9. Anyway, I will show you how the nth child works in a separate post.

CSS Image Grids

AN IMAGE GRID FOR YOUR WALL

This has nothing to do with software but the idea is very similar to the grid that we just talked about with the only difference being where the images go - on a computer screen or a wall. If you have a collection of pictures - with the proliferation of digital cameras who doesn't these days - you can print them on canvas with a wide format printer. Once the prints are made, stretch them on ready-made canvas frames. Arrange the finished pictures in a grid on a bare wall and surround the arrangement with a hollow but complete frame. No need for glass, matting, or mounting. Finish it off with a picture light.

Images and Text © Copyright 2011 cssbakery.com
Brass Picture Light Image © Copyright Gracious Home

Fixing font-face Problems in IE

2011-05-30T03:53:00.000-07:00

GraublauWeb font was working fine in Firefox for me but not in IE. I have the before's and after's to show you the changes that I had to make in order to have it working in IE. To implement font-face that will work across browsers, use Fontspring @font-face syntax.

BEFORE:
@font-face {
font-family:'GraublauWeb';
src: url(http://pics.cssbakery.com/fonts/GraublauWeb.eot);
src: url(http://pics.cssbakery.com/fonts/GraublauWeb.otf) format("opentype");
}

AFTER:
@font-face {
font-family:'GraublauWeb';
src: url("http://pics.cssbakery.com/fonts/GraublauWeb.eot?") format('eot'), url(http://pics.cssbakery.com/fonts/GraublauWeb.otf) format("opentype");
}

google fonts + cufon + font-face

Caching Cufon Javascript Files via Apache HTTP Response Headers

2011-05-22T21:00:00.000-07:00

In a comment on a previous post, someone wanted to know how to cache data returned by the server in order to save time from extra Cufon Javascript file loads. In Cufon, the data that describes the font is placed in a Javascript file. This is the file you download when running the Cufon generator.

When using Cufon, one thing we do not want is for the browser to retrieve a fresh copy of that Javascript file each time the page loads or refreshes. After the Browser has downloaded the file once, we'd like to cache it to save the download time.

You can see here in Firebug that the Javascript files we are downloading with the Cufonized "MS Trebuchet" font does not have HTTP Expires or Cache Control headers.

But you can see here that font files downloaded from Google have both an Expires and Cache Control header.

We want to have the Expires and Cache-Control headers sent down with our Cufon-generated Javascript files. To do this, we can make a change to our Apache server configuration to tell it to send down these headers.

We simply need to put a .htaccess file on the server in the directory where the Cufon js file resides.

We can do that by either logging on to our server using SSH and creating the file with an editor on the server, or we can create the file on our local machine and transfer it to the server using Filezilla or other file transfer program.

The file must be called .htaccess, and will have these contents:

<Files *.js>
Header add "Cache-Control" "max-age=604800"
Header set Expires "Thu, 14 May 2015 20:00:00 GMT"
</Files>

The max-age parameter of the Cache-Control header tells the Browser that the file can be cached until the given number of seconds elapses. The Expires header tells the Browser that the current file expires at a future time, after which the Browser should re-download a fresh copy instead of using the verion in cache.

By placing a .htaccess file in a directory on the server, you are telling Apache to apply some additional configuration settings just for the files in that directory. Since the .htaccess file as written will apply to all .js files in the directory, you want to make sure that it is OK to cache all of those files. If there is a .js file that you think should not be cached (e.g. because you are making frequent changes to it), then you should place that file in a separate directory that does not have the same .htaccess file settings.

With these changes applied, you can now see that the Expires and Cache-Control headers are being sent down for the "MS Trebuchet" font file.

A couple of other things to point out in the Response Headers are the "Last Modified" and "Etag" headers, as seen below. These are used in conjunction with the "If-Modified-Since" and "If-None-Match" request headers that the Browser sends to the Server. Basically the Browser remembers the last modified date from the "Last Modified" header, and the ETag value from the ETag header. It then sends those values back to the Server in the "If-Modified-Since" and "If-None-Match" headers, respectively. That allows Apache to then compare the values the Browser is sending up to the current version of the file residing on the server. Apache then makes a decision about whether the file should be sent down to the Browser, vs. telling to Browser to use the version in its cache.

So, just to re-iterate:

The If-Modified-Since request header asks the server if the file has changed since a certain date/time which is the date/time that the Browser received in the "Last Modifield" header. If the server sees that it has not been modified since then, it will send back a 304 Not Modified response, and the file content will not be sent down to the Browser.

The If-None-Match request header asks the server if the file's ETag value matches the ETag that was sent by the server when the Browser last downloaded the file. If the server sees that the ETag is unchanged, then it will send back a 304 Not Modified response, and the file content is not sent down to the Browser.

The ETag and "Last Modified" headers can be turned on/off via Apache configuration. My server already has them turned on, and I'll leave them that way. The one case where you would want to turn them off is if your site is hosted across multiple servers where the same file can come from one of many servers in a cluster, and where the file can have different attributes on the different servers in the cluster. In that case you are better off relying on just the Expires and Cache-Control headers.

As you can see there are multiple mechanisms in HTTP that can help the Browser to use files from its cache rather than re-downloading them, and each mechanism has its strengths and weaknesses.

CUFON

The Milky Way

2011-05-09T22:10:00.000-07:00

Most of us live in big cities with a lot of light pollution making stargazing impossible. If you've never seen our galaxy at night, Terje Sorgjerd's time-lapse piece, shot with a 5D will surprise you.

Speaking of stars, I remember a night many years ago in a small coastal town, when I unwittingly stepped into a meteor shower. It was a warm summer night, I had gone out onto the balcony for some air. I thought I was dreaming when the first shooting star streaked across the navy sky. Within a minute, another followed and another..and... It was magical.

In the same town, a large octopus had taken up residence under a rock in the deeper waters of the calm, crystal clear sea. Those of us who knew kept quiet because we didn't want the local restaurant owner to get any ideas for his appetizer menu. Whenever I went out for a swim, I'd take a look to see if he moved. Octopus are shy creatures and for the most part not dangerous. He'd always leave one of his arms outside. Maybe that was his favorite resting position, one tentacle out, the rest of him tucked under the rock, his pillow.

Cufon Multiple Fonts Using Same Font with Different Weights

2011-05-03T22:17:00.000-07:00

Someone asked me a question about using a Cufon generated font with two different weights. We know that Cufon works for multiple fonts but when he tried to use the different weights of the same font, it sounded like it didn't work for him. I don't have Myriad Pro on this computer so I am going to test this idea with the ubiquitous MS Trebuchet, in regular and bold.

In Windows find the fonts under Control Panel fonts and copy them to your desktop. In my case, the names of the files are trebuc.ttf and trebucbd.ttf. Then go to the Using Cufon post or use this link to generate the fonts at Cufon's site.

<script src='http://pics.cssbakery.com/pics/Trebuchet_MS_400-Trebuchet_MS_700.font.js' type='text/javascript'/>

Cufon placed both of the fonts in the same Javascript file. That's fine. I opened the .js file above in Wordpad to get the names of the fonts. They used the same name for both weights. We have to know how to express the bold font in Cufonspeak. I check their documentation for their API to find out about a parameter named fontWeight. Problem solved.

<script type="text/javascript">
Cufon.replace('p.mstest',{fontFamily: 'Trebuchet MS'} );
Cufon.replace('p.mstest2',{fontFamily: 'Trebuchet MS', fontWeight:'bold'} );
</script>

Simple color styling for the two classes. You don't even have to do this:
.mstest, .mstest2 { color: #817BBA; }

The HTML for testing:

<p class="mstest">
Testing the p.mstest font - This is Cufon generated Trebuchet MS</p>
<p class="mstest2">
Testing the p.mstest2 font - This is Cufon generated Trebuchet MS Bold</p>

The output:

Testing the p.mstest font - This is Cufon generated Trebuchet MS

Testing the p.mstest2 font - This is Cufon generated Trebuchet MS Bold

So you can make Cufon work for the variants of the same font family.

CUFON

How To Access Your Disk in an Unresponsive Laptop

2011-04-20T22:54:00.000-07:00

I wonder if extra cooling would prevent untimely exits. Another laptop of mine is RIP. From the looks of it, it's the motherboard since the machine won't even go through the ROM sequence. A little whir of the disk then pitch black.

Say you're in a similar situation and you'd like to salvage the data on the disk. One way is to remove the disk from the computer to turn it into an external drive. In my 17 inch Toshiba Satellite, I had to take a few screws off of a small panel next to the fan in the bottom to get to the hard drive. The disk has a clear plastic tab on it for easy removal. But first we have to disconnect it from the laptop so you gently push the disk down with a few fingers to disengage the pins. Then grab it by the tab and pull it up and out of the laptop.

The disk is in a metal cage which you have to remove before you can install it in one of these colorful enclosures, available from Newegg or Staples. Connect the pins of the disk (male) with the enclosure (female), line up the holes and then put in about 4 screws and you got yourself a new USB device and a way to access your old files from another computer.

PS Be careful when handling the disk itself as there are exposed chips that are sensitive to static electricity, which can damage them. I try to handle the disk by the edges and not touch the circuitry. If the machine has any exposed metal, then you could touch it before you begin working to ground yourself and hopefully discharge any static electricity.

Sailboat

2011-04-13T22:47:00.000-07:00

CSS Hover Menu on a Post-it Note

2011-04-10T23:26:00.000-07:00

Hover over the yellow note to see how it changes. Example bitmap for the hover menu sprite:

<html>
<head>
<!-- name of the file is testCSS3.html -->
<style type="text/css">

#menu {
  list-style: none;
  width: 164px;
  height: 155px;
  background: url(images1/yellownote.png) no-repeat;
  position: relative;
}

#menu span {
  display: none;   
}

#menu a {
  display: block;
  position: absolute;
  outline: none;
  width: 126px;
  height: 50px;
  left: 12px;
}

#menu a:hover {
  background-position: 0 top;
}
 
#menu .things {
  /* width: 126px;  height: 50px;  left: 12px; coming from "#menu a" 
     for .things, .notes, .posts, .calendar
  */
  background: url(images1/things.png) -126px top no-repeat;
  top: 8px;
}

#menu .notes {
  background: url(images1/notes.png) -126px top no-repeat;
  top: 40px;
}

#menu .posts {
  background: url(images1/posts.png) -126px top no-repeat;
  top: 68px;
}

#menu .calendar{
  background: url(images1/calendar.png) -126px top no-repeat;
  top: 105px;
}

</style>
</head>
<body>

<ul id="menu">
  <li><a href="#" class="things"> <span>Things</span></a></li>
  <li><a href="#" class="notes"> <span>Notes</span></a></li>
  <li><a href="#" class="posts"> <span>Posts</span></a></li>
  <li><a href="#" class="calendar"> <span>Calendar</span></a></li>
</ul>
</body>
</html>

CSS Zen Garden Series

2011-04-03T01:06:00.000-07:00

CSS Zen Garden Series

Positioning the Extra Divs in the CSS Zen Garden Markup

2011-04-02T15:29:00.000-07:00

Saturday 3:30PM. The sky's turned grey again. I'm going to work on the blog on and off throughout today and finish explaining the CSS behind my Zen Garden design which I had done many years ago - 2005 I think but never sent it to Dave Shea. So when I started the blog later in '09, I thought it'd make a good teaching example.

In the last Zen Garden post, we worked on the #linkList element and finished the menu. There are just a few cosmetic changes to do before the design is complete.

In the footer, I'm going to hang a spider from a hyperlink and right underneath the spider, I will drop a few flower petals. We can use one of the paragraph elements as a hook for the spider, but the petals are going to require the use of an extradiv that Dave Shea provided at the end of his Zen Garden markup.

p5 is the last paragraph in the markup:

<p class="p5">
<span>Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">
DreamFire Studios</a></span>
</p>

The spider bitmap is 41px × 95px. I'm going to give the paragraph a height of 100 pixels and make the bitmap the background of p5 p. Then through background positioning, we will find the perfect place to hang the spider:

.p5 {
height: 100px;
background: url("images/itsy.jpg") 16em 1em no-repeat;
}

No matter what the browser window or the text size is doing, the spider stays in place, attached to the hyperlink. That's good. :)

STYLING THE EXTRA DIVS OF CSS ZEN GARDEN

Zen Garden has six of these extra div's.

#extraDiv2 {
width: 215px;
height: 106px;
background: url(images/shell215x106.jpg) 0 0 no-repeat;
}

The flower petal bitmap is going to go right underneath the spider. The bitmap is 215 by 106 pixels. So you give the extraDiv2 width and height that will match those numbers. Drop your bitmap into the background and you'll get this.

Let's change positioning from static to relative. I think Shea tells you to do this by absolute positioning. With relative positioning, the browser will keep the element in the flow but will move it by an x,y offset that you specify. We want to move the bitmap up into the frame, shifting it up by 200px from where it would be positioned in the normal flow. Horizontally, we want to move it 600px to the right (see the red dot in the diagram) to move it underneath the spider. I don't want to teach anybody math but for example for x, all the points along that vertical line (y-axis) are valid since they will all have the same x coordinate.

#extraDiv2 {
width: 215px;
height: 106px;
background: url(images/shell215x106.jpg) 0 0 no-repeat;
position: relative;
top: -200px;
left: 600px;
}

At first sight, everything looks good but the design quickly breaks when the user resizes the browser window. Try it and see for yourself.

Remember the auto margin statement? Setting the left and right margins to auto will take of this problem nicely. Here's how the browser will compute the bitmap's final destination: First it will go through the normal flow and lay down all the elements including our bitmap. This would be position 1 in the illustration above. But it won't stay there. Auto margin is considered part of the normal flow so it'll center the image by computing the size of the browser window dividing it by two, then find the midpoint of our bitmap, and moving it to intersect with the halfline. I am not showing this position in the image.

From there, the relative positioning kicks in, and you move 200 up (up because it's negative) and 100 to the right which is position 2 in the illustration.

#extraDiv2 {
width: 215px;
height: 106px;
background: url(images/shell215x106.jpg) 0 0 no-repeat;
position: relative;
top: -200px;
left: 100px;
margin: 0 auto;
}

The curious may ask me why I chose 100 pixels for the x value. That's because when the browser is sized to an average width, the spider is positioned right above the red petal as if he's trying to reach it.

Ok, two down, two to go. One easy, the other has something with to do with our fluid design and is tricky.

First the super easy. I'm going to place another insect bitmap in our design, this time underneath quickSummary on the upper right. p2's background is clear, let's hook into that:

/* The dragonfly */
#quickSummary p.p2 {
background: url("images/dragonfly.gif")
no-repeat right bottom;
padding-bottom: 40px;
}

Normally we'd give a height and width but here I'm using the bottom padding since we know background images show through padding. 40 pixels is enough for our little guy.

Looks and works fine.

We are almost done. The eagle eyed aside, most people may not notice the gap between the red title and the moving grey line:

Using one of the extradiv's, I want to give the illusion of a long grey line that grows or shrinks depending on what the user is doing with the browser window. We accomplish this by turning on the top border of extraDiv1, and absolutely positioning it in just the right spot to align that border with the existing line.

We set the z-index to a high value (800) to make sure this line shows up on top of all other elements in the area. We give it a minimum width of 100px to make sure the line doesn't become too narrow when the browser window is narrow.

Finally, we play an interesting trick. We set to width to auto, and we set both left and right properties, which is something you usually don't see. This causes the div's left edge to be offset 524 px from the left edge of the page, and the div's right edge to be offset 130px from the right edge of the page. Thus, the width of the div varies with the width of the browser window, but the horizontal dimensions are controlled in such a way so that it appears to be an extension of the existing line underneath the page heading. This is interesting because its a case where we are using the left and right properties, along with absolute positioning to control the width of the element, as well as the left/right offsets from the edges of the page.

#extraDiv1 {
width: auto;
border-top: 1px solid #e1e1e1;
height: 1px;
position: absolute;
top: 80px; left: 524px; right: 130px;
z-index: 800;
min-width: 100px;
}

You can stretch the browser more and the design will not break - I had to limit myself for this screenshot because of my tight 550px main column width. The line will keep growing in the middle as if it's one piece:

This is the case when the browser is sized to its minimum - it cannot shrink more. See how perfectly the grey line is positioned, it always stops under "THE" and the right edge of the frame sits aligned under "DESIGN". Everything looks perfect even when you increase text size in the order of 5. I love how this works:

The interactive html file.

Spring Has Sprung

2011-04-01T20:16:00.000-07:00

It was the beginning of February sometime. I blinked. It's April

2011 is giving me a whiplash

Styling the CSS Zen Garden Menu

2011-04-01T19:47:00.000-07:00

Let's go back to CSS Zen Garden and finish the example that we were working on for the blog. We had left off here. The menu is sitting below the page. Let's move it up:

#linkList {
position: absolute;
top: 200px; left: 0;
z-index: 11;
margin-top: 105px;
text-align: left;
}

This is an absolutely positioned element so we give it the coordinates of (0,200px) to pull it up to the top of the page. z-index is necessary to keep the element on top of pageHeader div which has a smaller z-index. Without a higher z-index, we will lose the "Select a Design" header. Also, 105 pixels for top margin so that we don't end up on top of the bitmap for the red rose. If you have text with more than word, with enough space, the words will separate from one another, giving you an unsightly sinkhole in between. text-align: left will take care of this potential problem.

Next we'll get rid of the bullets and style the ul/li elements:

#linkList ul {
margin: 5px 1em 0 60px;
list-style: none;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}

#linkList li {
margin-bottom: 5px;
font-size: 70%;
width: 138px;
}

#linkList a { color: #5c7a5e;
text-decoration: none;
font-weight: bold;
}

#linkList a:hover {
text-decoration: underline;
}

In lselect div, I want to draw a line between the li elements so I use a border-bottom rule.

#lselect ul li {
padding-bottom: 5px;
color: #858f72;
border-bottom: 1px solid #858f72;
}

The updated menu.

There are some links in the lselect div that we want to display on their own line in the menu, but there's no class name that lets us target them directly. So what we'll do is write a general rule for all the links in lselect, then we'll selectively undo part of it.

For the first part, we set all the links to have display: block. This will cause them to render on their own line.

#lselect ul li a, #lselect ul li a:link, #lselect ul li a:visited {
display: block;
padding: 0 0 5px 0;
color: #566047;
}

But here's where we "undo" that for other links that we don't want on their own line. These are the links that have a class="c". We accomplish this by setting these back to display: inline. While were at it, we give these links a different color:

#linkList a.c, #linkList a.c:link,
#linkList a.c:visited, #linkList a.c:hover,
#linkList a.c:active, #linkList a.c:focus {
color: #858f72;
display: inline;
}

#lselect ul li a:hover {
text-decoration: underline;
}

Once again, the new menu.

I'm going to skip the bottom border for the last child in "select a design". This rule will only work in browsers that recognize the last-child property of CSS3. IE will draw the extra bottom border:

#lselect ul li:last-child {
border: none;
}

I have a leaf vector graphic that will go right before each li (menu item):

I thought of using list-style-image for this purpose but gave up on the idea when I figured the background property's just as good. Since we want this icon only for the "Select a Design", we are going to write our descendant selectors using #lselect. The property cascades down to a.c element but we do not want a second icon in the same menu item. That's why we are resetting the background images to none later. (note: This is due to 'cascading' not 'inheritance'. In inheritance a style applied to some parent element is inherited by a child element. But in this case the 'a' elements are siblings, not parent-child).

#lselect ul li a, #lselect ul li a:link, #lselect ul li a:visited {
padding: 0 0 2px 20px;
background: transparent url(images/littleleaf.png) left center no-repeat;
}

#lselect ul li a.c, #lselect ul li a.c:link, #lselect ul li a.c:visited {
background-image: none;
padding: 0;
}

The "Select a Design" menu with its new icons.

I have a moth and a butterfly which I'm going to use to separate the menu items, lselect (Select a Menu Design) and lresources (Resources) by dropping the bitmaps in their background images. A 40 pixel bottom padding will allow enough room to show each bug.

#lselect {
background: url(images/moth.gif) no-repeat 50% 100%;
padding-bottom: 40px;
}

#lresources{
background: url(images/butterfly.gif) no-repeat 50% 100%;
padding-bottom: 40px;
}

Here's the menu with the two insects.

There are three headings in the menu, "Select a Design", "Archives" and "Resources" which are all in plain, black text. How about replacing the text with bitmap images? The first rule establishes the width and height for the bitmaps. The next three statements are straight forward where we drop in the bitmaps into each h3's background. The very last statement #linkList h3 span {visibility: hidden;} is for hiding the text that comes from the markup since we want to replace the text with the new images. If you skip this step, there will be graffiti on your menu.

#linkList h3 {
width: 163px;
height: 40px;
margin: 25px 0 5px 45px;
}

#linkList h3.select {
background: transparent url(images/h3_select_red.gif) left center no-repeat;
margin: 0 0 0 45px;
}

h3.archives {
background: transparent url(images/h3_archives.gif) left center no-repeat;
}

h3.resources {
background: transparent url(images/h3_resources.gif) left center no-repeat;
}
#linkList h3 span {visibility: hidden;}

Final html file after all the styles are applied. The design is fluid so you can test it by expanding/shrinking your browser window. A bulletproof design should hold up when you enlarge text size by three levels. I have not tested IE yet but in Firefox, everything's good:

CSS Zen Garden Series

HTML Forms Quick Reference

2011-03-06T16:17:00.000-08:00

THE FORM TAG

Encloses a given form.
There can be multiple forms on a page.
Requires an action attribute: <form action="myform.php">
The action determines what URL will be used for submitting the form to the server
Also requires a method attribute: <form action="myform.php" method="post">
The method determines whether HTTP GET or HTTP POST will be used for sending the form data to the server.
You'll almost always use method="post"

INPUT TAGS

Used for several different purposes including: single line text, checkboxes, radio buttons, submit buttons, file upload buttons, passwords, and hidden data.
The type attribute determines which type of UI element it will be, for example: type="text", type="checkbox"
The name attribute is also very important: <input type="text" name="username">
The name attribute is sent to the server along with the value the user enters. Without it, the server won't know what the data is for.
Yet another important attribute is: value. It holds the current value of the input field: <input type="text" name="username" value="Eastwood">

INPUT A SINGLE LINE OF TEXT

For a single line of text use: <input type="text" name="username">
Often you will want to initialize the input with an existing value. Using PHP that would look like this: <input type="text" name="username" value="<?php echo $username?>">
Or, using PHP short tags (which I prefer): <input type="text" name="username" value="<?=$username?>">
If the text is a password it's just like a single line of input text, except the browser will show asterisks instead of the password: <input type="password" name="password" value="<?=$password?>">

TEXT AREAS

For multiple lines of text, use the <textarea> tag instead.

Specify rows and columns to control the size:

<textarea rows="5" cols="50" name="mytext">
Some text
</textarea>

Looks like this:
Some text

HIDDEN DATA

Many situations arise where you need to put some hidden data in a form. Often this is a database key value
Just use an input tag with type="hidden", and set the value attribute to hold the data: <input type="hidden" value="somevalue" name="my_hidden_data">
You do also need to give it a name attribute so the server will know what this data is for.

SELECT TAG

Select lets you have a pull down input element:

<select name="mySelect">
    <option>Cat</option>
    <option selected="1">Dog</option>
    <option>Rabbit</option>
    <option>Turtle</option>
  </select>

Produces this:
Notice how the default value was selected using the selected attribute.
Later I will describe doing a select where you can select multiple options.

SUBMITTING THE FORM

When the input is a submit button, the value attribute determines what is written on the button.
Submit buttons always need a value: <input type="submit" name="Save" value="Save">
Submit buttons can be represented by an image instead of a normal button. In that case type must be set to "image" instead of "submit", and the src attribute points to the image: <input type="image" name="Save" src="path/to/image.jpg">

RESET

A 'reset' button clears all the form fields back to the state they were in when the page loaded.
A reset button is coded as follows: <input type="reset">

Later I'll talk about how forms can be submitted with Javascript so that you can submit the form without leaving or reloading the current page.

A Quiet Morning

2011-03-06T11:25:00.000-08:00

I had no trouble getting up early today. But even though I was up, I was kind of useless. I'm walking towards my kayak and thinking, Can someone sleep and walk at the same time, I feel so tired.

Quiet, cloudy morning in the marina, you can hear a pin drop this early. While I am puttering around in the middle of the channel, I hear a big but gentle swoosh. The water around me has hundreds of ripples. It's hard to see through the dark green water but one of them turns its belly sideways revealing its identity - it's a 10 inch (25 cm) silver fish. This is an entire school. They keep coming back up, barely breaking the water surface and then just as quickly diving under. It's not unusual to see a single fish jump but it's wonderful when there are so many and you are in the middle of it.

Along with me, someone else is watching the magic unfold. Suddenly there's a huge splash. I look behind and see a pelican swallowing his breakfast. :)

PHP Quick Intro

2011-03-04T05:04:00.001-08:00

VARIABLES

Start with a dollar sign,for example : $variable_name=2;
Do not need to be declared before use.
Can hold a string, or a number, or a boolean: $a="cat"; $b=42; $c=false;
Can store floating point numbers: $b=42.06;

STRINGS

Can be assigned to a variable: $w = "world";
Can be concatenated with the period (.) operator: "hello ".$w yields "hello world"
The concatenation operator is used a lot. Remember it.
You can get the length: strlen($w) returns 5
You can get a substring: substr($w,1,3); returns orl
Can be operated on by many PHP built in string functions
Can be enclosed by double quotes (") or single quotes ('): $w = 'world';
There are differences between single and double quotes.
In double quotes, you can embed variables: "hello $w" produces hello world - the variable is substituted (its name replaced by its value)
But if you try that with single quotes: 'hello $w' produces hello $w
That same idea applies to special chars: "hello\n" produces a newline
But 'hello\n' produces hello\n as a string (no newline) - taken literally with no substitution
You can put a double quote in a double quoted sting by escaping: "Hello \"World\"" produces Hello "World"
PHP strings act very differently than C character arrays. Much simpler to work with.

ARRAYS

Create an empty one like this: $myarray=array();
Create one with some elements: $myarray=array("cat","dog","hamster");
Can hold a mixture of data types: $myarray=array("cat",42,false);
Start with index of 0: echo $myarray[0]; // outputs: cat
Unless the keys are specified: $myarray=array(1=>"cat",2=>42);
And the keys don't have to be numbers, they can be strings: $myarray=array("fluffy"=>"cat","rover"=>"dog");
Can append to an array like this: $myarray[]="a new element"
Find out how many elements it has: count($myarray)
Sort the array: sort($myarray)
Sort the array by keys instead of values: ksort($myarray)
Can be operated on by many built in PHP array functions.

FROM STRING TO ARRAY AND BACK AGAIN

Here's a string: $s="Cat,Dog,Cow,Pig"
Create an array from it: $a=explode(',',$s);
$a[0] is now Cat, $a[3] is Pig
Let's overwrite the Pig: $a[3]="Goose";
Go back to a string: $s=implode(',',$a);
$s is now: "Cat,Dog,Cow,Goose"

LOOPING

foreach loops through entire arrays:

$myarray=array("fluffy"=>"cat","rover"=>"dog");
  foreach ($myarray as $element) {
    echo $element;
  }
  // Outputs: cat, dog

But you can also get at the array key values:

$myarray=array("fluffy"=>"cat","rover"=>"dog");
  foreach ($myarray as $k => $element) {
    // We're using the concatenation operator here (period, remember?)
    echo $k." is a ".$element;
  }
  // Outputs: fluffy is a cat, rover is a dog

There are other ways to loop, but foreach covers 90% of what you'll ever need.

IF-ELSE

Looks just like if-else in C and other languages.

Optionally, you can use a colon and endif statement, instead of braces:

// using curly braces:
  if ($w=="world") {
    echo "hello ".$w;  // aside: note the concatenation operator (period)
  }
  // This is the same logic:
  if ($w=="world):
    echo "hello $w";  // aside: this time we didn't use concatenation!
  endif;

There is a tertiary operator: echo ($w=="world") ? "hello $w" : "goodbye";

MIXING PHP WITH HTML

Files ending with .php contain HTML and PHP
PHP must be enclosed within PHP tags: <?php echo "I'm PHP";?>
If it's not within PHP tags, it gets sent to the Browser unaltered.
So whatever is not within PHP tags should be valid HTML/CSS/Javascript
You can use the short PHP tag: <? echo "I'm PHP";?>
For an echo, this is most concise: <?="I'm PHP"?>
Works well for variables: <div class="<?=$classname?>">

E Ink: Kindle DX, Reader and Nook

2011-03-01T23:25:00.001-08:00

When Sony came out with their Reader three, four years ago, it was the only device that used e-ink, predating Amazon's Kindle. The second generation Sony was not as nice a package as the first one but was faster. I would have stayed loyal to the brand, had it not been for my PDF files that require a larger screen to view. Along the way, I also acquired a Nook which has a touch screen for navigation but again not very useful to me because of its small screen.

Kindle DX is so far working out fine for me. There's still a lot of room for improvement - a simple page turn can take too long (I do not remember Sony Reader getting stuck this long), no SD card slot when first generation Sony Reader had one, and a flash when changing pages. The faster these devices get, the more the transition between pages looks like a flash and catches your eye. Minor issues: No cover, no stand. The cover that I got for it keeps pressing buttons when closed.

People are also fond of iPads for reading books/documents. They are nice but an iPad with a backlit screen and an e-ink device are two very different things. If your eyes are tired from having to read backlit displays, an e-ink device can make a difference in your life.

Cufon, Google WebFonts Summary

2011-02-27T03:02:00.001-08:00

google fonts + cufon + font-face

Update: Google WebFont FOUT (Flash of Unstyled Text)

2011-02-27T02:56:00.000-08:00

I recently wrote about how I'm dealing with the Google WebFont FOUT (Flash of Unstyled Text). On one occasion I saw a case where the Google script failed to load and I ended up with a blank area on my screen where the heading should have been. So I put in one more small change so that after 10 seconds the h1 will be made visible no matter what else is going on.

Here's the code I added:

var showH1 = function() {
      $("div.article h1").css({'visibility':'visible'});
    }
    setTimeout(showH1,10000);

Windy Weekend

2011-02-26T15:49:00.000-08:00

Got up at 6. Took the first picture right before I left when things looked promising. Water had some chop. Grand canal entry was churning fast with a strong current. No boats, no wakes. By the time I was back at 8:30, the wind had gotten much stronger, with a lot of clouds moving in. It felt very cold (picture on the right). Bundled up and walked back home.

CSS Pullquotes and Blockquotes Summary

2011-02-25T18:46:00.000-08:00

CSS Pullquotes and Blockquotes

CSS 3 Gradients, CSS 3 Multiple Background Images and HTML Blockquote

2011-02-25T18:35:00.000-08:00

-webkit-gradient(linear, left top, right top, from(#23262a), to(#2784ed))

This post was really about blockquotes but since I used new CSS 3 features, I'm going to show the code for gradients and multiple background images. The blockquote was generated in the Chrome browser with CSS3. The CSS is very similar to the pullquotes with most of the action taking place in the openingbracediv.

div.openingbracediv {
    color: white; 
    font: bold 24px/27px arial;

    /* this statement is for IE 8 and earlier versions */
    background: url("images/openingbrace300DropS.png")  no-repeat 2% 70% #899bc8;
 
    background: url("images/openingbrace300DropS.png")  no-repeat 2% 70%,   
                      url("images/closingbrace300DropS.png")  no-repeat 98% 30%,      
                     -moz-linear-gradient(100% 100% 245deg,  #2784ed, #23262a);
     
    background: url("images/openingbrace300DropS.png") no-repeat 2% 70%,       
            url("images/closingbrace300DropS.png")   no-repeat 98% 30%,      
           -webkit-gradient(linear, left top, right top, from(#23262a), to(#2784ed));
    
    background-color: #899bc8;
   -moz-border-radius: 10px;
    border-radius: 10px; 
    width: 550px;
    }
/* for IE - the closing brace graphic */
.closingbracediv {
    background: url("images/closingbrace300DropS.png") no-repeat 98% 30% transparent;
   -moz-border-radius: 10px;
    border-radius: 10px;  
    }

First background statement is for IE version < 9. The next two backgrounds are for Firefox and Chrome. IE being IE pokes its nose into the Mozilla and Webkit backgrounds and by the time we are done with the three background statements, IE no longer has a handle on what the background color should be. This is why I had to add a standalone background color just to set IE straight. Let's look at the second background statement written for Firefox. The opening and closing braces with drop shadows are going to layer over the color gradient. I purposefully positioned them asymmetrical along the y-axis to make things visually more interesting. In the -moz-linear-gradient(100% 100% 245deg, #2784ed, #23262a), the percentages can be rewritten as bottom right and you'd get the same results.

Gradient is the final entry which renders a fading layer going from a dark blue to a brighter blue using a 245 degree angle. Prior to CSS 3.0, our options were limited to uniform gradients that faded horizontally or vertically since we typically took a small slice of a gradient and repeated it either in x or y direction.

You might wonder if the order is important in the background statement. It is. If you were to move the gradient entry in between the opening and closing brace images, you will lose the closing brace from the final image because you'll write over it.

-moz-linear-gradient(100% 100% 245deg, #2784ed, #23262a);

Background statements for Firefox and Chrome have three background images assigned to them. Two brace images and since the gradient is considered an image, that brings the total to three. Before version 3.0, we could only do a single background image per element which forced us to use a lot of unnecessary markup in order to layout all the images. IE versions < 9 are not equipped to handle multiple images so the extra div named closingbracediv is there for putting out the closing brace in IE. No support for rounded corners in IE 8.0.

Browser Support for Multiple Backgrounds

Internet Explorer 9.0
Firefox 3.6
Opera 10.5
Safari (Webkit) 1.3

For the rest of the blockquote CSS and HTML.

CSS Pullquotes Continued

2011-02-24T22:43:00.000-08:00

I made a png image of a closing brace in Photoshop (Yes, I finally bought another version of it. I should keep the new disk in a bank vault.) which gives us new looks for the pullquote example.

Markup for the pullquote style that uses a brace image:

<div class="suspended">
<div class="suspendedquotebrace">
<blockquote>
The internet is built on a single simple idea: the IP Packet
<span>-CSSBakery.com</span>
</blockquote>
</div>
<div class="linediv"></div>
</div>

For its CSS, see this file.

Example Markup for the pullquote style that uses a brace image on a black background:

<div class="suspended">
<div class="suspendedquotebrace">
<blockquote>
The internet is built on a single simple idea: the IP Packet
<span>-CSSBakery.com</span>
</blockquote>
</div>
</div>
<div class="related_topics">
<h3>
<b>RELATED TOPICS</b></h3>
<ul>
<li><a href="http://www.ietf.org/">Internet Eng'g Task Force</a></li>
<li><a href="http://www.w3.org/Protocols/">Network Engineering</a></li>
</ul></div>

For its CSS, see this file.

Newspaper Style Pullquotes Using CSS and HTML

2011-02-21T20:42:00.001-08:00

It was on CNN where I saw the pullquote styling that I'll be talking about in this post. Using the blockquote element, I've shown you how to style pullquotes before. In the new example, the pullquotes will force the text to be indented as it flows around them, engaging the body of the text. I am going to use material from a previous post to show you how it works. I will list the CSS immediately after the newly styled, How the Internet Works.

How the Internet Works

By CSSBakery.com

February 21, 2011 7:30 p.m. PST

HIGHLIGHTS

IP Packets: IP Packets are similar to traditional snail-mail letters
IP Addressing: Each packet has a from and to address
IP Routing: Routers do the delivery work

In a previous post I described TCP/IP. In this post I'll focus more on the lower layers of the protocol stack: the IP layer and below. One key thing to understand is that the Internet is built on a single simple idea: the IP Packet.

So what is it?

An IP Packet is lot like a letter you send via the post office. In the case of IP Packets of course, we're really talking about an array of bytes in your computer memory, not a physical piece of mail. But there really are many similarities. In both case you have a From Address, a To Address, and inside it carries some contents that you want delivered at the other end.

With both IP Packets and letters, once you send it you no longer have any control over it - it's out of your hands. It goes into the delivery system and you depend on that delivery system to get it where it's supposed to go. There is a small chance it could get delivered to the wrong place, or lost completely.

The Internet is a series of tubes
-US Senator Ted Stevens

The contents could be examined by some third party, damaged so that they are unreadable, or even intentionally altered by some unscrupulous party before being delivered. There are protections against each of these bad outcomes, which I'll talk about in a later post.

In the case of a letter, you write the from and to addresses on the outside of the envelope and place the contents inside the envelope. IP Packets have a similar idea. An IP Packet starts life as just a sequence of bytes in your computer memory. Typically the first 20 bytes or so are used like the outside of an envelope. This part of the packet is called the "IP Header".

This is where the from and to IP Addresses are placed. IP Addresses are 4 bytes each(*), so those take up 8 of the 20 bytes. Some of the other bytes in the header are used by the delivery system for housekeeping. As an analogy, recall that the outside of an envelope has a stamp, and the postal service adds a post mark. Similar idea.

After the IP header, we place the bytes of the payload - the thing we want to get delivered to the recipient. Once we've got the payload, and the header constructed, we need to send it. With letters we need to get them to the post office. The equivalent in the IP World is your local Router. The router is responsible for looking at the destination IP address and figuring out where to send the packet next.

That next hop is likely another router that is one step closer to the recipient - just as your local post office might send the letter to another postal facility to be sorted and forwarded on towards the destination address.

The internet is built on a single simple idea: the IP Packet
-CSSBakery.com

The way we get the packet from your computer to your local router is over your local area network (WiFi or Ethernet). If you are hooked up directly to a DSL/Cable Modem, then your "local" router is really a router located at your Internet Sevice Provider. The main idea here is that you can send the IP Packet to the router directly over the underlying networking media, whether that is Ethernet, WiFi, DSL, or Dial-up.

There is a whole other story on how the packet gets delivered over this media to the router, but for now just think of this media as your local mailman who picks up the letter and carries it to the post office (i.e. to the local Router). I can go into more details on Ethernet, WiFi, DSL etc. in a future post.

After an IP packet has been constructed in your computer memory, and carried to your local router via your local networking media, the router gets to work. It looks at the destination IP address, and matches this against a set of configured rules in a table. The rules are called "IP Routes", and the table is called the "IP Routing Table". By matching the destination IP address against the IP Routes, the router figures out the next place to send the packet. We call this the "next hop".

The next hop is going to be another router that will repeat the same process-CSSBakery.com

The Sun is Racing Me

2011-02-20T10:19:00.000-08:00

It was already bright by 6:20 am. I had a hard time getting up today - a combination of sleepiness and a tummy ache. So I'm walking to my kayak reluctantly through the cold marina air and I see this woman walking her dog in her patterned flannel pajama bottoms. I thought I completely understand her. It's too early to dress properly. The kayaking wasn't too bad because it turns out the fishermen sleep in on Sundays. Only one wake from a turning sailboat.

Google Web Fonts Flash of Unstyled Text (FOUT) Problem with wf-active

2011-02-19T14:06:00.000-08:00

I decided to use a font off of Google Web Fonts but quickly ran into the FOUT (Flash of Unstyled Text) in Firefox. On the Web Fonts page, when you click on "use this font", the basic instructions tell you to put in a link to a stylesheet and then just use the new font family in your CSS. With that approach Firefox will first display the text in a native font, and then replace it with the new font once it's downloaded. So you get the FOUT.

So back to the Web Fonts page and on the "use this font" page towards the bottom there's a link for Advanced Techniques. You'll then see a link to the WebFont loader documentation. At first glance it looks like all you need to do is use their script and put the following type of styles in your stylesheet:

.wf-loading h1 {
        font-family: serif
      }
      .wf-inactive h1 {
        font-family: serif
      }
      .wf-active h1 {
        font-family: 'Meddon', serif
      }

The wf-loading, wf-inactive, and wf-active classes are added to your document <html> tag by Google's script at various points in time to reflect the state of what's happening with the font download. With that in mind I tried this:

.wf-loading h1 {
        font-family: serif;
      }
      .wf-inactive h1 {
        font-family: serif;
      }
      .wf-active h1 {
        font-family: 'Meddon', serif;
        visibility: visible;
      }
      h1 {
        visiblity: hidden;
      }

The idea is that the h1's will initially be hidden and will only change to visible once the wf-active class is added to the html tag. It seemed that this should work fine, but it didn't. I'm not sure if this issue is specific to Blogger or not, but what I found is that I still get the FOUT. It's as if the Google script is adding wf-active class too soon, before the font is really ready.

BACK TO THE DRAWING BOARD

So I went back to the WebFont loader documentation and dug a little deeper. The WebFont loader can be configured to invoke callback functions that you provide. One of the events that you can set a callback on is "active" - meaning that the font is loaded. I decided to try using this callback to make my text visible, so I changed the stylesheet to look like this:

.wf-loading h1 {
        font-family: serif;
      }
      .wf-inactive h1 {
        font-family: serif;
      }
      .wf-active h1 {
        font-family: 'Meddon', serif;
      }
      h1 {
        visibility: hidden;
      }

Notice that I no longer have visibility: visible in the wf-active rule. I'm now going to take care of making it visible in the active callback. Here's my first attempt at setting the callback function as part of the WebFontConfig object:

<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ 'Meddon' ] },
    active: function() {
      $('h1').css({'visibility':'visible';});
    }
  };
</script>

So all I'm saying here is: when the font goes 'active', set the visibility of my h1's to visible (I'm using jQuery to access all the h1's). This almost worked. In fact it worked about 50% of the time, but half the time the page loaded and the h1 did not show up at all.

I eventually concluded that the problem occurs in cases where the font is downloaded, and the active callback is firing, before the document itself is fully downloaded. In those cases, setting the h1 visibility doesn't work because the h1 doesn't exist yet in the DOM. So, my second attempt, which so far has worked 100% of the time, looks like this:

<script type='text/javascript'>
  WebFontConfig = {
    google: { families: [ 'Meddon' ] },
    active: function() {
      $('h1').css({'visibility':'visible';});
      $(document).ready(function() {
        $('h1').css({'visibility':'visible';});
      });
    }
  };
</script>

What I've added is a callback to be executed when the document is ready using the usual jQuery approach (the 'ready' method). So now those cases where the document is still downloading when the font become active are covered.

google fonts + cufon + font-face

Gusting Winds

2011-02-19T12:28:00.000-08:00

Last night was cold and rainy with 20+ mph gusting winds so I thought this morning would be a no go. Mistake. I got up later than usual and the sun is shining. We have 70% chance rain which will hit in the afternoon. There's always tomorrow morning. :-)

PHP Arrays

2011-02-14T16:52:00.000-08:00

These pretzels that I made awhile back seem perfect for today's Array post. Happy Valentine's Day! :-)

Arrays are data structures that hold multiple rows of data, usually of the same type. There are languages (like PHP) which allow you to store elements of different types in the same array. Arrays just like matrices in mathematics can be single or multi-dimensional.

When you declare an array variable in C, the compiler allocates a block of memory to be used by the elements of the array. For example, int numbers[10] declaration will set aside 40 bytes for the numbers array in a 32-bit architecture system. The number inside the square brackets is how you tell the compiler how many elements there are in an array. The first element of the array can be referenced by index zero as in numbers[0]. An index of an array counts from the beginning of the array, indicating the ordinal number of the element. C, C++ indexes start from 0.

If you're going to write any kind of significant PHP application, you are going to use arrays. You'll quickly find that PHP arrays are not like C, C++, or Java arrays - they are much more powerful. They are powerful because they really aren't "arrays" at all, but "ordered maps". An ordered map is a data structure that associates values to keys. PHP arrays are not preallocated with fixed size elements. They can function a lot like C or Java arrays by using numeric keys:

$a[0] = "first";
$a[1] = "second";
$a[2] = "third";

But the keys are not limited to numbers:

$a['apple'] = "red";
$a['grape'] = "green";

And the values can be just about anything, including other arrays:

$a['fruits'] = array("apple","grape","strawberry");
$a['veggies'] = array("cabbage","carrot","lettuce");

When you assign arrays within arrays like this, you've created PHP's version of multi-dimensional arrays. You can access elements of this multi-dimensional array by specifying two key values. For example:

echo $a['fruits'][0]; // outputs: apple
  echo $a['veggies'][1]; // outputs:  carrot

You'll run into mult-dimensional arrays when accessing databases. The set of records returned from a query will be in an array. Within that array each element will be an array that represents all the fields of a particular record.

Before you use an array, you should declare it, like this:

$a = array();

(Note however, that if you are getting an array back from a database query, then you don't have to declare it, since the function you called to execute the query will do that for you.)

You can also put some entries into the array as you create it:

$a = array("Mercury","Venus","Earth","Mars");

When you create an array this way, the keys will be numbers starting from zero:

0 => "Mercury",
1 => "Venus",
2 => "Earth",
3 => "Mars"

You can get the same result using the append syntax, which adds a new element at the end of the array, and increments a numeric key value:

$a = array();
$a[] = "Mercury",
$a[] = "Venus",
$a[] = "Earth",
$a[] = "Mars"

If you need the keys to be something other than integers, you can specify them like this:

$a = array("Hottest"=>"Mercury","Hot"=>"Venus","JustRight"=>"Earth","Cold"=>"Mars");

Giving you:

$a["Hottest"] equal to: "Mercury",
$a["Hot"] equal to: "Venus",
$a["Just Right"] equal to: "Earth",
$a["Cold"] equal to: "Mars"

LOOPING THROUGH PHP ARRAYS

To loop through an array, your best bet is the foreach statement:

foreach ($a as $planet) {
  echo $planet; 
}
// outputs: Mercury, Venus, Earth, Mars

If you need it, you can also access the key value, with this syntax:

// $temp will be the array element's key.
// $planet will be the array element's value.
  foreach ($a as $temp => $planet) {
    echo "$planet is $temp ";
  }
  // outputs: Mercury is Hottest, Venus is Hot, Earth is Just Right, Mars is Cold

But, you should not think that foreach is the only way to iterate over an array. There are times when you need something else. If you know the array has numeric keys starting from zero, you can write a traditional for loop, looking a lot like C:

for ($i=0; $i<count($a); $i++) {
  echo $a[$i];
}

Or you can make use of the internal array pointer that PHP maintains for each array. This is especially useful if you have a loop where you might need to process more than one array element on a single pass through the loop:

reset($a);  // reset internal pointer to the first element of array
while ($planet = current($a)) {  // get the current array element.
  echo $planet;
  next($a);  // advance to the next array element.
}

When the end of the array is reached, current() will return false and the loop will end.

PHP ARRAY FUNCTIONS

Now that you've got an array, you can use the many PHP array functions to do things with it. Some of the more important of these are:

count() - return the number of elements in the array.
sort() - sort array elements.
in_array() - check to see if a value exists in the array.

No Bad Days

2011-02-12T11:36:00.000-08:00

Good Morning! :-)

I got up at 6:30 today. By 7 am, I was out walking to my kayak. The only way to avoid heavy boat traffic is to get on the water earlier. I kayaked over an hour, going all the way to the entrance of the marina. Although I was able to avoid the sailboats, guys who fish had the same idea and were motoring out. Some of these boats are rather large with powerful twin engines which makes kayaking next to them a little dicey. My wide ocean kayak, its length around 14 feet, is quite stable or it would be only a matter time before I get tossed out into the cold water because of their wakes. When I got finished, my legs were covered with dried salt from the ocean water. Sun is getting stronger.

Programming with PHP in a Local Environment

2011-02-10T18:45:00.000-08:00

The previous post shows how to set up a local environment with XAMPP. In this post we start developing PHP code.

I have two files, main.php and register.php that I've been editing. I renamed their extensions to .txt so that you can view them here. If I had left them as .php's, they'll try to run when you click on the filenames. You'll see that they are nothing fancy, just an initial draft to get you started. So, now I'd like to show you how to execute those files. I told you my directory name at the beginning of the post. So, type into your browser:

"localhost/eclipseworkspace/projectX/main.php"

If I had named it "index.php" instead of main, then you could skip the filename. This code shows how you can validate the fields of the form in PHP, and give the user an error message if something is wrong. It works fine except for one problem: if there are multiple errors, such as a zero length username AND a zero length password, then only one error message is displayed to the user. In this case it's the password error message, since that check occurs later in the code.

To fix this, we can change the code to keep an array of error messages. Here's how we'll do that:

1. Instead of setting $error=false, lets instead create an empty array, and let's make the variable plural $errors instead of $error. Of course, you know that a compiler, or in this case the PHP interpreter, does not really distinguish between singular and plural form. It just helps make the variable names more meaningful for us:

$errors = array(); // create an empty array

Now, when we detect an error, instead of just assigning a string to $error, we will append the error string to the array. For example:

$errors[] = "Error: Please enter a username";

We make that same change for all other error messages. Note that we are making use of PHP syntax for appending to an array. That's where you have the array variable name followed by empty square brackets, like this: $arrayName[] = "string to append"

Now we need to change the test for whether we encountered any errors or not. Currently the code says:

if (!$error) {

We change that to instead test whether there is anything in the array. If there is nothing in the array (count of elements is zero), then there were no errors:

if (count($errors)== 0) {

So far so good. Now the only thing remaining is to change the code that displays the error to the user. Here's what we've got right now. The PHP empty function will return true if your string is set to either FALSE, an empty string or an empty array or zero:

<?php // Old code to be removed:
  if (!empty($error)):?>
    <p class="error"><?php echo $error?></p>
  <?php endif;?>

Now we want to change that to:

<?php // New code:
  foreach($errors as $e):?>
    <p class="error"><?php echo $e?></p>
  <?php endforeach;?>

Note that we no longer have an if statement here. That's because in the case where there were no errors the array will be empty and we'll never execute the body of the foreach statement. On the other hand if there are one or two or more errors in the array, we will loop through them and display all of them one by one.

If you are not familiar with the PHP foreach syntax, it just provides an easy way to iterate over all the elements of an array. The loop starts with the first element in the array and continues with the next element until the end. Each time through the loop the value of the current element is assigned to the variable specified after the "as" ($e in the example code above). Basically says step through this array and for each element assign that value to my variable $e, then run the body of the loop.

There are certainly other ways you could code this loop. For example, this would be equivalent:

<?php for ($i=0; $i<count($errors); $i++):?>
    <p class="error"><?php echo $errors[$i]?></p>
  <?php endfor;?>

The syntax above will feel very familiar and comforting but although this form of the loop works, the former method is more bulletproof since it will work for any array no matter what the array keys are. In this case the keys happen to be integer values starting with 0 and incrementing, but PHP arrays are associative arrays, so you can do things like $myarray['banana']='yellow' and $myarray['apple']='red'. In such a case the former loop will still work, but the latter loop that depends on numeric keys will not.

For more on PHP foreach syntax, see here.

Note 1: A quick visual comparison of the long and short tags of PHP.

Note 2: The switching symbols used below to go between PHP and HTML making you queasy? Feels like a PHP-HTML-PHP carousel.

<?php 
  if (!empty($error)):?>
    <p class="error"><?php echo $error?></p>
  <?php endif;?>

An alternative way to write this would be:

<?php 
  if (!empty($error)):
    echo "<p class='error'>$error</p>";
  endif;?>

In this case where it's just one line of HTML to be output, that's not a bad way to do it. But when sending long stretches of HTML I think the format where you jump back and forth between PHP and HTML is the way to do. You end up with a file that looks more like HTML code with PHP sprinkled in, rather than an onslaught of PHP echo statements. That might be hard to visualize with just a small example like this, but if you code up an entire page you'll see what I mean.

The idea of echo'ing all output from a PHP program would be similar to writing a C program where you printf all the HTML. Come to think of it, you could actually write all this pure C. You could have an Apache module that links in your C code as a shared library. It would handle the TCP connection from the browser, doing printf's to send the HTML and other content to the browser. In other words, you'd be generating the HTML from your C program entirely. All the things that we are doing with PHP, you could do it with C instead in which case you would not need to switch between PHP and HTML. However, it'd be more complex. Say you needed to make a change, with PHP you just edit the file and you are done; with C, you have the extra step of compiling which will slow you down. Then you have to restart the web server process.

Setting Up a Local Development Environment with XAMPP

2011-02-08T19:03:00.000-08:00

If you are going to install PHP, Apache, phpMyAdmin, and MySQL on your local computer, you can download and configure each one separately but it's a little time consuming and can be painful to get them all set up and working correctly. This is probably more true for Windows than Linux because in Linux you can easily install things with a package manager. But then again different distributions of Linux tend to have little variations in how they do things - including different package managers - which can add some confusion.

Fortunately, Friends of Apache have done all the legwork and created one package that installs and configures these on your local machine. If you read the introduction by XAMPP, they write, "Many people know from their own experience that it's not easy to install an Apache web server and it gets harder if you want to add MySQL, PHP and Perl". For the remainder of this post I'll be talking about installing on Windows since I think that's where XAMPP adds the most value.

You can download the current Windows version of XAMPP 1.7.4 from here. You'll get:

Apache 2.2.17
MySQL 5.5.8
PHP 5.3.5
phpMyAdmin 3.3.9
FileZilla FTP Server 0.9.37
Tomcat 7.0.3 (with mod_proxy_ajp as connector)

STARTING XAMPP

Via the Windows start menu, start XAMPP. If it's not in your start menu, then from Windows Explorer navigate to the Install directory and find XAMPP-control.exe and drag a shortcut to your desktop or Start Menu. Ok, that should get you covered. Here's what the control panel looks like:

I do not click on the Service checkboxes because I do not want to start Apache and MySql everytime I start my machine. I'd rather do it manually, when I need it. To start Apache and MySql, click the Start buttons next to them. In a new tab in your browser, type in localhost. If Apache started successfully, you will get the XAMPP main page.

SECURITY SETTINGS

Since you are now running both web server and MySQL processes on your computer, you should setup some security so that someone from the Internet doesn't connect into these servers when you really only need them for your local use. On the XAMPP control panel click on Security. You'll get a page like this one.

Now click the link further down that page for fixing the security settings and follow the directions. It'll have you specify a MySQL root password and a username/password for your local XAMPP pages as well. Don't forget the passwords that you use, as you will need them later.

WHERE TO PUT YOUR CODE

Now you are ready to start coding but you want to put your code in a place where Apache can find it. This directory happens to be "c:\xampp\htdocs\" (your path may vary, depending on where you installed XAMPP). I always create a subdirectory under that called "\EclipseWorkspace\". You can call it anything you want such as "\myprojectX\".

To edit your code, you need a programmer's text editor or an IDE, an integrated development environment. You can use the Eclipse IDE which has become an industry standard, but you can also use Notepad++ which is written in C++. I don't know what happened to Brief, I once saw it in an unrecognizable form on a Borland product. I think they made their money and are now sipping margaritas down in the Caribbean. For this post, I'm going to use Notepad++. You can download it from here. One advantage of Notepad++ is that it comes up fast compared to Eclipse. And unlike Eclipse, it does not drive you crazy when you want to reset its colors.

Canvas Frame for a Painting

2011-02-05T19:23:00.000-08:00

No software today. Been busy making a frame for a large painting. After two Home Depot trips, a lot of measuring, cutting, and nailing later, it's finished. The steps in pictures:

The corners are cut at 45 degree angles. The reason the edges are beveled is for keeping the wide part of the frame from hitting the surface. You get the beveled effect by placing a narrower, curved piece over the rectangular wood - all cut at the hardware store.

After this picture, I tucked the fabric in for a clean finish.

Recycled Search Results: Bing Copying Google Search Data

2011-02-02T08:10:00.000-08:00

When Google slammed Microsoft for copying their search results, Microsoft took it as a compliment. Here's the story.

Developing a Windows Networking Driver to Keep a Computer from Connecting to Different WiFi Networks

2011-02-02T01:24:00.000-08:00

When you connect to your wireless LAN (this is a standard term for local area network), you'll see a long list of nearby networks. Occasionally your computer on its own might actually connect to a network other than yours. There is always an unsecured network available in the air wherever you go, making a random connection possible.

It'll be good to just block out all but your own network from even showing up in the list of wireless networks, or at least making sure that you are only connecting to your own network. With a few exceptions, people don't really need to see all the networks around them, and definitely don't want to connect to them - just your own. So, I'm looking into writing some Windows code that will do this - possibly a networking driver. I downloaded the Windows Device Driver Kit (DDK) and started looking through the documentation.

Before long I came across this:

The msDot11DesiredSSIDList MIB object specifies the list of 802.11 service set identifiers (SSIDs) that the 802.11 station uses when connecting to a basic service set (BSS) network. After OID_DOT11_CONNECT_REQUEST is set, the 802.11 station will attempt to connect to a BSS with an service set identifier (SSID) that matches an entry from this list.

That sounds like if we could set the msDot11DesiredSSIDList with only your own network name, then the networking drivers would only connect to your network. Now just need to see how that could be set. Looking further I also found a regular Windows API that might be able to control WiFi connections. Here's what the Microsoft documentation says:

The Wireless LAN Win32 API enables developers to build applications that manage wireless adapters, wireless connections, and wireless profiles. The APIs consist of the following functionalities:

Operational API: Applications can request the adapter to scan, connect/disconnect to/from a wireless network and query attributes of the current connection. (etc...)

So those are two possible leads I've found so far. On the 2nd one - the Wireless LAN API - it turns out there is a Microsoft SDK sample program (called "wlsample") that shows you how to retrieve the name of the current WiFi network you are connected to, as well as how to disconnect from the current network. With some additional logic this could monitor which network you are connected to and promptly disconnect you if you happen to connect to the wrong one. It could then attempt to re-connect to your approved network. This could be run as a Windows Service that starts up and runs in the background.

Update: Now I've got the program working that detects if I'm on the wrong network, but I need to turn it into a Windows service that starts automatically when Windows boots, and keeps running. Looks like there are multiple paths to developing a service. Here are my leading candidates:

From a pure C example in the SDK that uses Win32 APIs directly
From a C++ example based on the CAtlServiceModule
From a C# example generated from a Visual Studio "Windows Service" project template.

The code for the C# example is the simplest, and the C example is probably the most complex, with the C++ example somewhere in between. The code I've written so far is in C and would need some work to convert to C#. So I'm debating which one to go with. I may start with the C example and see how it goes.

Programming a Custom Blog Search

2011-01-31T20:42:00.000-08:00

Programming a Custom Blog Search

Stephen Hawking Talk at Caltech

2011-01-13T19:10:00.001-08:00

This coming Tuesday on January 18, Stephen Hawking will speak at Caltech in Pasadena. It's free for the public with the talk targeted to a general audience. So if you are in the Los Angeles area, it'll be a great way to spend your evening.

Another Interface to My Custom Blog Search

2011-01-11T05:35:00.000-08:00

4:45 am. January 11, 2010. No, it's 2011. I'm not used to the new year change yet. Fell asleep at 8 pm last night so I am up early writing this post before the day starts.

I've written several posts about creating my own Blog search tool. Up until now I was only using it to bring up results for my various category links in the right sidebar. But now I want to also use it for the "site search" form, so you can type in a phrase to search for. Site search is the small blue form at the upper right corner. I'm going to leave the web search form alone.

I've already got the search mechanism, so this just take a bit of Javascript to handle the form submit event and run the custom search. Here's the code:

$('#searchthis').submit(function() {
     var q = $('#searchthis .sbox').attr('value');
        var href='http://tools.cssbakery.com/search/?q='+q+'&title=Search Results:&callback=?';
        $.getJSON(href, process);
        return false;
    });

The first line sets up a function to be called when the form is submitted. The function that gets called first grabs the value from the search input field, then builds a URL to run the search tool. It performs an Ajax call via getJSON() and invokes the 'process' function when the results come back. I already had the process function from the existing implementation.

PHP Parsing, Searching an RSS Feed and a Cron Job

2011-01-08T21:15:00.000-08:00

Kayaked for over an hour. Going out at 9:30 am would've been impossible in the summer. These days, it's so chilly out over the water that the sun is a non-issue. I went all the way to the shoal marker at the entrance where I had the summer encounter with the shark.

My custom search tool has two major parts: a Javascript client component, and a PHP server component. This post describes the PHP server code. This is built on the CodeIgniter framework, so it has three parts: a Model, a View, and a Controller.

The Controller's job is to receive the request from the Browser, then call the Model and View as needed. The code for the controller is listed below. It has a constructor function Search(), which just loads some CodeIgniter helper libraries, then loads in our Model, called rssfeed_model.

The second function in the controller, index() handles the GET request from the Browser. It first calls the model to load in the RSS feed (described more below), then it reads in some URL parameters, q, title, and callback. The q parameter contains the search string, the title holds the title we want to display for the search, and callback tells us whether or not this is a JSONP GET request.

Once the parameters are read, the search is performed by calling the model's search() method. The returned results are then sorted so that the ones with the most relevance will appear first in the displayed results. Finally, we call the view to actually send the results. We call either the "search_view" or the "search_json_view", depending upon whether or not the "callback" parameter was set to anything in the URL.

class Search extends Controller {
  function Search() {
    parent::Controller();    
    $this->load->helper('form');  
    $this->load->helper('url');
    $this->load->helper('html');   
    $this->load->model('rssfeed_model');
  }
  
  function index() {
    $this->rssfeed_model->loadfeed('blogsearch/cssbakery.rss');
    $q = $this->input->get("q");
    $this->data['q'] = $q;    
    $this->data['title'] = $this->input->get("title");
    $callback = $this->input->get("callback");
    $this->data['callback'] = $callback;
    // Perform the search
    $this->data['results'] = $this->rssfeed_model->search($q,!empty($debug));
    usort($this->data['results'],"cmp");
    if (empty($callback)) {   
      $this->load->view("search_view",$this->data);
    } else {
      $this->load->view("search_json_view",$this->data);
    }
  }
}

Next we look at the rssfeed_model. It has two methods: loadfeed() and search(). Loadfeed() is pretty simple, it just calls PHP's simplexml_load_file to load in the RSS feed data. RSS is an XML-based format so this results in loading the entire Blog content into a data structure. The search() function searches through that data structure looking for matches with the search phrase.

The search function uses XML Xpath searches to parse things out of the RSS XML. One slightly tricky part of this is that each call to PHP's xpath() search function must be preceded by a call to registerXPathNamespace(). This is because the RSS feed specifies a namespace, and Xpath won't parse it unless you specify that namespace. The search uses regular expressions to match search terms against the blog content. This was discussed in a previous post.

class rssfeed_model extends Model {
  private $xml;
  
  function rssfeed_model() {
    parent::Model();
  }
  
  function loadfeed($url='http://www.cssbakery.com/feeds/posts/default?max-results=10') {
    $this->xml = simplexml_load_file($url);
  }
  
  function search($q,$debug=false) {
    if (empty($q)) { 
      return array(); 
    }
    $q = trim(strtolower($q));
    $fc=substr($q,0,1);
    $lc=substr($q,-1,1);
    if ((($fc=="'") || ($fc=='"')) && (($lc=="'") || ($lc=='"'))) {
      $qarray = array(substr($q,1,-1));
    } else {
      $qarray = explode(" ",$q);
    }
    $r = array();
    $this->xml->registerXPathNamespace('atm', 'http://www.w3.org/2005/Atom');
    $posts = $this->xml->xpath('//atm:entry');
    foreach ($posts as $k=>$post) {
      $count = 0;
      foreach ($qarray as $q) {
        $termcount = 0;
        if (empty($q)) continue; 
        $content = strip_html_tags(strtolower($post->content));
        $title = strip_tags(strtolower($post->title));
        $termcount += 1000*preg_match_all('/([^a-z]|^)'.$q.'([^a-z]|$|(s[^a-z]))/',$title,$matches);
        $termcount += preg_match_all('/([^a-z]|^)'.$q.'([^a-z]|$|(s[^a-z]))/',$content,$matches);
        $post->registerXPathNamespace('atm', 'http://www.w3.org/2005/Atom');
        $categories = $post->xpath('atm:category');
        foreach ($categories as $category) {
          $tag = strtolower($category['term']);
          $termcount += 1000*preg_match_all('/([^a-z]|^)'.$q.'([^a-z]|$|(s[^a-z]))/',$tag,$matches);
        }
        $post->registerXPathNamespace('atm', 'http://www.w3.org/2005/Atom');
        $links = $post->xpath('atm:link[@rel="alternate"]');
        foreach ($links as $link) {
          $href = $link['href'];
        }
        $count += $termcount;
        if ($debug && ($termcount>0)) {
          echo "Term: $q scored $termcount for post: '".(string)$post->title."'<br>\n";
        }
      } 
      if ($count > 0) {
        $r[] = array("title"=>(string)$post->title,"link"=>$href,"count"=>$count);
      }        
    } 
    return $r; 
  }
}

Now we turn to the View. The search_json_view builds a JSON structured string, placing it all in the $r variable, and echo'ing it out to the Browser at the end.

<?php
$r = $callback.'(';
  $r .= '{ "q": "'.str_replace('"',"'",$q).'",';
  $r .= '"title":"'.$title.'",';
  $r .= '"result": [';
  foreach ($results as $result) {
    $r .= '{ "count":"'.$result['count'].'", "title":"'.
          str_replace('"','',$result['title']).'", "link":"'.$result['link'].'" },'."\n";
  }
  $r .= ']}';
$r .= ')';
echo $r;
?>

CRON JOB

One thing you might have noticed is that the search currently loads in the RSS data from a local file on the server. I didn't want every single search to re-download the whole RSS feed, so I just store the feed in that local file. But that raises the question of how to keep the results up to date. I do that with a cron job that runs every hour on the server. Here's how I set that up.

First, I created a file containing a command that downloads the RSS feed and puts it in a file. I called the file searchCron:

File searchCron:
curl http://www.cssbakery.com/feeds/posts/default?max-results=9999 > blogsearch/cssbakery.rss

This uses the popular "curl" command to retrieve the URL.

Next, I need to schedule this command to run every hour. So I create another file, which I called mycron, to tell the cron scheduler how to run it:

File mycron:
    20 * * * * searchCron

The first five fields specify when to run the command. In my case I have it run at 20 minutes after the hour, every hour, every day, every month, every year. If I wanted to just run it once a day, say at 10:30am every morning, I'd change this file as follows:

30 10 * * * searchCron

Now to actually schedule the job, I run the crontab command on the server:

crontab mycron

And that should get the cron job scheduled... However, I did run into a problem. For some reason my cron job wasn't working. If you run the command "crontab -l" it will list all your cron jobs. It showed that mine was scheduled just fine, but still the RSS feed file wasn't being updated at all!

My next step was to look in the system log:

tail /var/www/syslog

In there I saw this entry:

Jan  8 17:20:01 /USR/SBIN/CRON[12525]: (web) CMD (searchCron^M)

The thing that got my attention was the "^M" at the end of the command. As it turned out I had edited the "mycron" file on Windows and uploaded it. That left the Windows carriage return-line feed sequence in the file, and that extra character - from the Linux point of view - was causing the failure. So, I re-created the file on Linux (using vi) and that solved the problem. The cron job now runs every hour.

Javascript for My Custom Search

2011-01-03T23:38:00.000-08:00

I'm using my new custom search tool to drive the category links in my right sidebar. I have some Javascript that captures the mouse click, does an Ajax call to my search engine, and displays the results. Here's the code:

function process(d) {
 var r=d.result;
 var arLen=r.length;
 var high = r[0].count;
 h="<div class='searchresults'>";
 h+="<h3 class='post-title entry-title'>"+d.title+"</h3>";
 h+="<ol>";
 for ( var i=0, len=arLen; i<len; ++i ){
   if ((high>=1000) && (r[i].count<1000)) {
    h+="<div class='divider'></div>"
    high=0;
   }
   h+="<li><a href='"+r[i].link+"'>"+r[i].title+"</a></li>";
 }
 h+="</ol></div>";
 $("#main-wrapper").html(h);
 Cufon.replace('.searchresults h3');
 window.scrollTo(0,0);
}

$(document).ready(function() {
    $('.categories_div ul li a').click(function() { 
        var href='http://tools.cssbakery.com/search?showform=1&
        '+$(this).attr('href').replace(/^(.)*\?/,'')+"&title="+$(this).attr('title');
        href = href.replace(/site%3Acssbakery.com/,'');
        href = href.replace('+','');
        href = href.replace('[','');
        href = href.replace(']','');
        href = href.replace(/"/g,"'");
        href = href+'&callback=?'
        $.getJSON(href, process);
        return false; 
    });
})

Here's the breakdown on how this works:

$(document).ready(function() {
    $('.categories_div ul li a').click(function() { 
        var href='http://tools.cssbakery.com/search?showform=1&
'+$(this).attr('href').replace(/^(.)*\?/,'')+"&title="+$(this).attr('title');

This uses jQuery. The first line registers a callback function with jQuery to be executed when the page is loaded. The function itself then registers a click handler using the selector .categories_div ul li a. That selector targets all my category links.

When a click actually occurs, I construct a URL for the search and store it in the href variable. This is built by pulling out part of the link's href, as well as the link's title attribute and building the URL string from those components. Next we delete any undesirable characters from the URL:

href = href.replace(/site%3Acssbakery.com/,'');
        href = href.replace('+','');
        href = href.replace('[','');
        href = href.replace(']','');
        href = href.replace(/"/g,"'");

I see that I probably could have reduced the code by using a regular expression in the replace, like this: href.replace(/[\[\]\+"]/g,'') instead of doing all the individual replace calls.

Now we make the Ajax call to the server:

href = href+'&callback=?'
        $.getJSON(href, process);
        return false;

This call goes to a different domain (tools.cssbakery.com) so I use a JSONP call (which is done by adding the callback=? string to the URL). When the Ajax call returns, it will call the function 'process'. Finally we return false to keep the user's mouse click from triggering the default action, which would be to follow the link (we don't want the Browser to follow the clicked link since we are already handling the click in our Javascript).

Next we look at the 'process' function that handles the search results. First we just grab some information from the results. The array of results is stored in local variable r. We get the length of that array and store it in arLen. We then pull out the highest score from the results and put it in local variable high:

function process(d) {
 var r=d.result;
 var arLen=r.length;
 var high = r[0].count;

Now we start constructing a HTML fragment and putting it into local variable h. We put in the searchresults div, an h3 for the title, then begin an ordered list:

h="<div class='searchresults'>";
 h+="<h3 class='post-title entry-title'>"+d.title+"</h3>";
 h+="<ol>";

Now we loop over all the results and append list item and link markup to the h variable for each individual result. Also when we see that the scores drop below 1000 we output the divider div:

for ( var i=0, len=arLen; i<len; ++i ){
   if ((high>=1000) && (r[i].count<1000)) {
    h+="<div class='divider'></div>"
    high=0;
   }
   h+="<li><a href='"+r[i].link+"'>"+r[i].title+"</a></li>";
 }

Now we just finish off the ordered list, insert the html fragment into the main wrapper of the page, then call Cufon to make sure the h3 title is rendered correctly, and as a final touch we scroll the Browser window to the very top so the results can be seen.

h+="</ol></div>";
 $("#main-wrapper").html(h);
 Cufon.replace('.searchresults h3');
 window.scrollTo(0,0);
}

And that's it for the Javascript component of the search tool. In another post I'll go into more detail on the PHP that handles the Ajax call on the server side.

Improving Search with Regular Expressions

2011-01-02T23:59:00.000-08:00

This weekend my focus was on improving the search function and making it work smoothly with the existing categories. I want to add new sections to the categories sidebar later. The footer's slowly coming together. I put in a new background which has a gradient on top of it. If you see banding, let me know.

Originally I was using Blogger search and sometime later I switched to Google Blog search for my categories sidebar links. I wasn't happy with either one. Their searches were not robust and I didn't have much control over how the results were presented. The purpose of this post is to show you how you can write your own search and stop relying on Google or Blogger. Here's what my category search markup used to look like:

<li class='categories'>
<a href='http://cssbakery.blogspot.com/search/label/Modifying%20Blogger'
target='_blank'><div id='cat1'/></a>

<a href='http://cssbakery.blogspot.com/search/label/Modifying%20Blogger'
target='_blank'>Modifying Blogger with CSS/HTML</a>
</li>

Note that the %20 you see in the URLs just means a space character. So in my Blogger template I actually typed "Modifying Blogger", and when I save it, Blogger converts it to "Modifying%20Blogger". Anyway, here's what the same category links look like now with the new category search tool:

<a href='http://blogsearch.google.com/blogsearch?q=site%3Acssbakery.com+Blogger' >
Modifying Blogger with CSS/HTML</a>

I have some Javascript that pulls out the "q=" part of the URL and uses it for my own custom search tool (so I actually ignore the blogsearch.google.com part of this URL. I still have it point to google as a backup just in case my Javascript file hasn't loaded or the user has Javascript disabled).

At first my search algorithm was just looking for substring matches using the PHP substr_count($haystack,$needle) function. That function returns the number of occurrences of $needle in $haystack. The problem with that was that when I searched for strings like "id", it would match parts of whole words like "Holidays". I didn't want that, so instead of using substr_count(), I switched to using function preg_match_all($regex,$haystack,$matches).

With preg_match_all(), you pass in a regular expression, and it returns the number of matches found in $haystack (it also returns a set of matches via the 3rd parameter, but for my purposes I'm only interested in the number of matches). So the most difficult part of this is coming up with a good regular expression.

Regular expressions are used for pattern matching. They consist of strings written in a special syntax that specifies what to match. The regular expression is interpreted by a processing engine that uses it to determine a set of matches within a body of text. PHP's regular expression engine uses a syntax that is common among Unix/Linux based languages and tools. Certain characters have special meaning. The caret symbol (^) matches the beginning of a line of text. The dollar sign ($) matches end of line. So for example, the pattern ^abc$ would match a complete line that consisted of only the letters abc. Regular expressions can get very complex, but are very powerful. You can read more about PHP's regular expressions here.

We want to match occurrences where the search term is surrounded by spaces, as in: "the id attribute", but we also want to match cases like these: "set the id." (the search term is followed by a period), "Id is important" (search term at beginning of sentence), and even plurals like: "set all the ids for these divs". It should also handle cases where the search term is followed immediately by some whitespace character such as a newline, or a tab.

Here is what I came up with that I think satisfies all those criteria:

$count = preg_match_all('/([^a-z]|^)'.$needle.'([^a-z]|$|(s[^a-z]))/',$haystack,$matches);

The first part of the regular expression is: ([^a-z]|^) This says the character immediately preceding the search term can be anything except characters a thru z, or it can be the beginning of line (^).

The second part of the expression is ([^a-z]|$|(s[^a-z])). This says the character following the search term can be anything except a thru z, or it can be end of line ($), or an 's' character followed by any character that is not a thru z. (This last part handles the plural of the search term, so we match "ids" as well as "id", but not "idsay" for example.)

<a href='http://blogsearch.google.com/blogsearch?q=site%3Acssbakery.com+Internet' 
target='_blank' title='Internet'>

<img alt='web' src='http://pics.cssbakery.com/pics/webcake.jpg' title='Internet'/></a>

<a href='http://blogsearch.google.com/blogsearch?q=site%3Acssbakery.com+Internet' 
target='_blank' title='Internet'>The Internets</a>
</li>

Another thing that I do in my search algorithm is to give more weight to posts where the search term appears in the title of the post, or in the labels. Posts where the title or label matches the search term will always appear at the top of my search results. If the match is only in the text of the post, it will still be listed, but further down the list. In fact, I even put a separator in the output so you can see the title/label matches above the separator, and the other matches below it. The algorithm also ranks posts higher in the list based on how many times the search term appears in the title, labels, as well as the body of the post.

In the CSS, I styled an ordered list which comes with sequential numbers instead of bullets:

.searchresults ol {
  padding-left: 25px; 
}
.searchresults ol li {
  margin-top: 5px;
}
.searchresults ol li a, .searchresults ol {
  font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
  font-size: 13px;
  color: #606060;
  font-weight: normal;
}
.searchresults ol li a:hover {
  color: #30AECE;
}
.searchresults {
  margin-top: 45px;
}
.searchresults div.divider {
  margin: 40px 0;
}
.searchresults h3 {
  color: #CC6600;
  font-size: 30px;
  font-weight: normal;
  font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
}

Another minor thing I did is to have the page automatically scroll to the top when you click on a category search. I did this with the following Javascript statement:

window.scrollTo(0,0);

I'll explain more about the Javascript and PHP code in a later post.

My New Favorite Candy

2010-12-31T12:17:00.000-08:00

The picture pretty much sums up my last five days. My tongue has gone numb sucking on lemon throat drops. The sore throat persists. Here's to feeling better tomorrow?

Parsing RSS Feeds with PHP

2010-12-24T14:28:00.001-08:00

12/24 Morning
Post Office open today? I wouldn't have thought so but that's what it says on their site. I need to make a trip over there. I am still working on the footer while also programming a search tool.

12/24 @2:26PM
I neglected my subject categories long enough so this Christmas Eve, I've sat down to write a search tool that will help people find what they are looking for.

I wrote the following PHP code to pull down my CSSBakery RSS feed, then parse and dump it out:

function dumpXmlDoc($node,$d=0) {
    if ($d==0) { echo "<pre>"; }
    echo str_repeat(" ",$d).$node->getName()."\n";
    foreach ($node->attributes() as $k=>$v) {
      echo str_repeat(" ",$d+2)."($k='$v')\n";
    }
    echo str_repeat(" ",$d+2).":".(string)$node."\n";
    foreach($node->children() as $child) {
      dumpXmlDoc($child,$d+2);
    } 
    if ($d==0) { echo "</pre>"; }
  }

  $xml = simplexml_load_file('http://www.cssbakery.com/feeds/posts/default?max-results=10');
  dumpXmlDoc($xml);

RSS feeds are formatted as XML documents, so I'm using PHP's SimpleXML extension. The following line of PHP code does a lot for us:

$xml = simplexml_load_file('http://www.cssbakery.com/feeds/posts/default?max-results=10');

This causes SimpleXML to load the feed document from my Blog, parse it, and construct a corresponding data structure in memory. This function can load files off the server's filesystem, but it can also retrieve them over HTTP, which is what we are doing here. Note that in the URL I am specifying a query parameter of max-results=10. That tells Blogger to only give me the latest 10 posts.

Next we want to just dump out the XML structure that we now have in memory. For this I wrote a small recursive function, dumpXmlDoc() to dump out the XML tree. The function takes two parameters: a node that is the root of the sub-tree to dump out, and an optional depth variable I called $d. If a 2nd parameter is not specified, it defaults to zero.

We call dumpXmlDoc() on the root of the tree, letting the 2nd parameter default to zero:

dumpXmlDoc($xml);

If the dump function sees that the depth ($d) is zero, it will wrap the output in a <pre> tag to preserve formatting:

function dumpXmlDoc($node,$d=0) {
    if ($d==0) { echo "<pre>"; }
    ... (do the dumping logic) ...
    if ($d==0) { echo "</pre>"; }
  }

It dumps out the name, attributes, and value of the current node. The calls to str_repeat() are there to provide some indenting of the output by generating a number of spaces based on the current depth ($d):

echo str_repeat(" ",$d).$node->getName()."\n";
    foreach ($node->attributes() as $k=>$v) {
      echo str_repeat(" ",$d+2)."($k='$v')\n";
    }
    echo str_repeat(" ",$d+2).":".(string)$node."\n";

Then it loops over all children of the current node and recursively calls itself on each child, passing in a computed value of depth that is greater than the current depth:

foreach($node->children() as $child) {
      dumpXmlDoc($child,$d+2);
    }

And that's all there is to it. We can use this as a basis for writing some interesting applications to process RSS feeds.

You can see the live output of this code here.

Lights

2010-12-21T11:24:00.001-08:00

Time to bring out my fake snowfall.

PHP: Displaying a Simple Table

2010-12-12T00:56:00.000-08:00

I was trying to post something for Saturday. I didn't notice how late it had become. It's after midnite here so this will be a Sunday post. :)

After my previous post on Scrolling Tables with Fixed Headings, I realized that some people who are starting out in PHP might be interested in some of the simple PHP code I used to generate the table examples. So in this post I'll list that PHP code and explain it.

One thing I did not want to do was duplicate the table data in multiple files. So I have put all the table data in one PHP file called tabledata.php. Here's an excerpt from that file:

$cruises = array(
    array("Seabourne Sun","Seabourn Cruise Line","1988","","Ended service in 2002,
           currently operating as Prinsendam"),
    array("Adventures of the Seas","Royal Caribbean International","2001","138,000","Operating"),    
    array("Oceanic Independence","American Hawaiian Cruises / American Global Line","1974",
          "23,719","Named formerly (1951—1974) and subsequently renamed 
           (1982—2006) the Independence, renamed the Oceanic (2006), sold 
           for scrap in 2008 but remains in mothballs"),
    array("Cunard Ambassador","Cunard Line","1972","14,160","Burnt 1974, 
           rebuilt into a livestock carrier, renamed Linda Clausen, later Procyon, Raslan. 
           Scrapped 1984 after a second fire."),
    array("Aegean Beauty","Voyages to Antiquity","1973","11,563","Formerly Aegean Dolphin 
           and Aegean I. Operating"),
    array("Serenade of the Seas","Royal Caribbean International","2003","90,090","Operating"),
    array("Queen Elizabeth 2","Cunard Line","1969","70,327","Left fleet in November 2008"),
    array("Queen Elizabeth","Cunard Line","2010","92,000","Operating"),
    array("Regent Sea","Regency Cruises","1957","","Began operation in 1957 as the Gripsholm (II) 
           for Swedish America Line. Ended operation when Regency went bankrupt in 1995. 
           Was to be converted to a casino ship, but later marked for scrap. Prior to scrapping,
           was looted by pirates, then sank in heavy seas in 2001."),
    array("Allure of the Seas","Royal Caribbean International","2010","225,000",
           "Starts service in December 2010"),
);

This is a PHP array of arrays. Each inner array represents one row in the table we will render. In each PHP file where I need to show the table I simply include the file with the array(include "tabledata.php";). Then the only trick is to loop through the outer array and generate the table:

<table class="cruises">
        <tr>
          <th>Name</th>
          <th>Operator</th>
          <th>Began operation</th>
          <th>Tonnage</th>
          <th>Status</th>
        </tr>
        <?php foreach ($cruises as $cruise): ?>
          <tr>
            <td><?=$cruise[0]?></td>
            <td><?=$cruise[1]?></td>
            <td><?=$cruise[2]?></td>
            <td><?=$cruise[3]?></td>
            <td><?=$cruise[4]?></td>                        
          </tr>
        <?php endforeach; ?>
</table>

The key here is the "foreach" loop. In PHP you can code this with a colon and an "endforeach", as I did here, or using the traditional curly braces. Inside the loop each inner array gets assigned to the $cruise variable. We then access individual fields by indexing into $cruise with offsets from zero through four.

If I think of something to add, I'll do that tomorrow when I wake up. Good nite. :)

CSS Scrolling Tables with Fixed Headings

2010-12-04T22:00:00.000-08:00

CSS Scrolling Tables is a big topic. Lots of people have asked questions about how to keep the headings fixed, but are not always finding good answers. It took me one day (Saturday) to figure out the problem and part of today (Sunday) to write this post. I'm working on a project where I needed a scrolling table with fixed headings. That's where the table headings stay fixed in place, and you can scroll the data portion of the table. I tried a couple of things that didn't work, then resorted to a quick Google search that landed me at Stu Nicholls' CSSPlay site where he has a post on CSS Scrolling Tables.

Stu's solution is very clean compared to some others I found, however it didn't handle the very complex table I was dealing with. It does work fine when the data in each column of the table are close to the same width, but my table has one column where there is text that varies from a few words to a lengthy paragraph. To make things even worse, there are occasional cases in my data where a column will have a LongUnbrokenStringThatJustKeepsGoing. Those long strings create havoc in tables as the browser tries to adjust column widths to accommodate the longest string it sees.

That combination of long paragraph data, and long unbroken strings broke Stu's solution.

The problem is that with variable length data in the cells, the browser ends up adjusting the width of the data cells based on content, but does not adjust the width of the fixed heading cells. So you end up with the column heading cells having different widths than the data cells, and they do not align. The frustrating thing is that if you allow the headings to scroll along with the data, then the browser will adjust the heading widths and all is well. But as soon as you start keeping the headings fixed, they no longer align.

I tried a few things to fix it.

First I set table-layout to fixed, thinking that would cause the Browser to use fixed cell width, which would be the same for headings and data cells. Didn't work.

Next, I allowed the Browser to load the whole page with the headings allowed to scroll (not fixed), then using Javascript I set the headings to be fixed. I was thinking, 'Well, I'll let the Browser figure out all the right widths for the headings, then sneak in with Javascript and tell it to not scroll them'. No luck! As soon as the Javascript ran, the headings no longer aligned with the data cells.

Then, I decided to give every column a class name, on both the heading and data cells, and use CSS to set the width explicitly on each column, like .col1 { width: 6em; }. Same result! The headings still didn't align with the data.

A little research revealed that when it comes to Tables, Browsers take your width statements as "suggestions" rather than as "commands". They'll try to accommodate you, but if there's some long string in a table cell, they can decide on a different width.

At this point I was about ready to ditch the table markup completely and just render it all with div's. I even coded it up, and quickly discovered that I could make fixed headings and data rows align correctly, but there was one thing that wasn't working. HTML tables do have the benefit that they render all the cells in a row with the same height. That wasn't true in my div-based markup. I had rows with cells of varying height, and that made it difficult to use borders to render a nice grid for the table.

For a second I thought about a way to make my div-based tables work using Javascript, but then another idea struck me: Go back to using table markup, but in each heading and data cell, put in an extra div to wrap the content, and give those divs explicit widths via CSS. Amazingly, this worked. I just wished I had thought of it sooner.

AN EXAMPLE: CRUISE SHIPS

I have linked to a series of self contained example files that illustrate various problems, and the ultimate solution. (note: the table data is a subset of the table in this Wikipedia article):

tableTest0 - This file contains just the initial table markup, and some minimal styling. This is what the table would look like with no scrolling.

tableTest1 - In this file we start having the table scroll. But notice that the headings scroll as well. What we're going for is to have the headings stay fixed, and only have the data portion of the table scroll.

tableTest2 - Here, we've got the headings fixed in place, but they are the wrong widths. The Browser is treating them like a separate table with respect to calculating their widths.

tableTest3 - In this file we change the markup to add a class on every table cell (both heading and data cells). We then apply widths to each cell class. At first this seems to work, but it's actually got a problem. As soon as you introduce one of those LongStringsWithNoSpaces, then this solution breaks. This is shown in tableTest4.

In tableTest5 we solve the problem by changing the markup to put div's in all the table cells, and those div's are all given widths. Below we'll take a closer look at the details of this solution.

tableTest6 is the final result after I applied some additional tweaks to improve the appearance of the table. These tweaks are described later in the post.

THE SOLUTION MARKUP & CSS

Here is the markup for the tableTest5 solution (this is prior to the tweaks applied in the next section of this post):

<div class="scrollableContainer">
  <div class="scrollingArea">
   <table class="cruises scrollable">
     <thead>
     <tr>
         <th><div class="name">Name</div></th>
         <th><div class="operator">Operator</div></th>
         <th><div class="began">Began operation</div></th>
         <th><div class="tonnage">Tonnage</div></th>
         <th><div class="status">Status</div></th>
     </tr>
    </thead>
    <tbody>
      <tr>
          <td><div class="name">Name of ship</div></td>
          <td><div class="operator">Who operates</div></td>
          <td><div class="began">Began service when</div></td>
          <td><div class="tonnage">How big</div></td>
          <td><div class="status">Current status</div></td>                        
        </tr>
       ... more rows ...
      </tbody>
   </table>
 </div>
</div>

One thing you'll notice is I've wrapped the table in two DIVs. The outer div holds the whole thing and has some padding at the top that will be used for rendering the fixed headings (we'll absolutely position the headings over the top padding).

The inner div defines the area that will scroll. The key to producing the scrolling area is giving this div a height and setting the overflow property to 'auto'.

The other change in the markup is that I've wrapped the contents of each cell (both th's and td's) with divs, and given those divs class names that correspond to the name of the column. I hesitated in putting in this extra markup, tried several ways to avoid it, but in the end I found it absolutely necessary in order to take control of the column widths. Without it you end up with cases like my 4th example file: tableTest4. In fact the only difference between this example and the final solution (tableTest5) was the addition of the divs wrapping the cell contents.

Here's the CSS of the solution presented in the tableTest5 example. This is prior to the various tweaks we apply in the next section to improve the appearance of the table (to see the final code do a "view source" on tableTest6, or follow the individual changes described in the next section.):

* { padding: 0; margin: 0; }
  table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }
  
  div.scrollableContainer { 
    position: relative; 
    width: 552px; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #aab;
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

  table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }

  table.cruises .name     { width: 108px; }
  table.cruises .operator { width: 126px; }
  table.cruises .began    { width: 76px; text-align:center; }
  table.cruises .tonnage  { width: 60px; text-align:center; }
  table.cruises .status   { width: 160px; }

Let's break down the CSS one part at a time. This first part is really just styling the table, and is not directly involved in the scrolling aspects of the design:

table.cruises { 
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 11px;
    cellspacing: 0; 
    border-collapse: collapse; 
    width: 535px;    
    }
  table.cruises th, table.cruises td { 
    border-right: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }
  table.cruises th { background: #aab; }
  table.cruises td { background: #eee; }

In the next part we style the two wrapper div's that I mentioned earlier. The outer container is set to position: relative so it becomes the positioning context for all elements under it. We also add some padding at the top of this div. That padding area is the place where we will position the column headings (using absolute positioning, explained below). We also set the width to 552px. This has to be wide enough to accommodate both the table and the vertical scroll bar. You'll probably want to tweak your width to get things just right. The only other thing we do with this div is set it's border and background to match the colors we are using with the table.

In the inner div, all we need to do is set the height of the scrolling area and set overflow to auto. This creates the scrolling area of the table.

div.scrollableContainer { 
    position: relative; 
    width: 552px; 
    padding-top: 1.7em; 
    margin: 40px;    
    border: 1px solid #999;
    background: #aab;
    }
  div.scrollingArea { 
    height: 240px; 
    overflow: auto; 
    }

In the final part of the CSS, we first setup the absolute positioning of the column headings. We just put them as 0,0 of the positioning context, which is the outer div (class='scrollableContainer'). So, what we're doing here is positioning the column headings over the top of the padding we had created in that outer div.

The only other thing we need to do is set the widths of each column. You need to adjust these widths for the final presentation of the table. You want the last column to end just before the vertical scroll bar, but don't make the table too wide or you'll get a horizontal scroll bar. In my case the column widths add up to 530px. The total width of the outer div is 552px. The difference of 22px is taken up by the vertical scroll bar. If you want to center any columns, you can do that here too, as I do with the 'began' and 'tonnage' columns.

table.scrollable thead tr {
    left: 0; top: 0;
    position: absolute;
    }

  table.cruises .name     { width: 108px; }
  table.cruises .operator { width: 126px; }
  table.cruises .began    { width: 76px; text-align:center; }
  table.cruises .tonnage  { width: 60px; text-align:center; }
  table.cruises .status   { width: 160px; }

ADDITIONAL TWEAKS

Hiding Cell Overflow

After a few final tweaks, here is my final example.

If you looked at each of the examples I linked to above, one thing you might have noticed in tableTest5 is that the text in the 2nd column of the 9th row overflows into the next cell. Since we are taking full control of the column widths, and no longer allowing the Browser to determine widths based on LongStringsWithNoSpaces, then we also have to be responsible for making sure our column widths are wide enough.

If you have just a few cells that overflow and you don't want to make the whole column wider just for them, you have two choices: (1) Let them overflow into the next cell, or (2) truncate them. You can truncate them by setting overflow: hidden on the table cells. Adding that to the CSS of my example, would look like this:

table.cruises td { background: #eee; overflow: hidden; }

Fixing Scroll Bar Interaction

Another issue I found is that putting the cell borders on the right, as I have done, is causing some strange interaction with the scroll bar in some browsers, leaving artifacts while scrolling. The solution is to move the cell borders to the left and bottom, instead of right and bottom, like this:

table.cruises th, table.cruises td { 
    border-left: 1px solid #999; 
    border-bottom: 1px solid #999; 
    }

But then you'll notice that the headings are mis-aligned by one pixel. The reason for this is that we absolutely positioned the headers at 0,0 - which worked fine when there was no left border. But adding the left border shifted the headers over by one pixel. The solution for this is easy: just absolutely position at -1,0 instead:

table.scrollable thead tr {
    left: -1px; top: 0;
    position: absolute;
    }

Colored Columns

Next, I wanted to do something different, and give the columns different colors. To do this I decided to change the markup a bit by moving the class names off of the divs in each cell, up to the enclosing td or th. Like this:

<tr>
    <th class="name"><div>Name</div></th>
    <th class="operator"><div>Operator</div></th>
  ...
  <tr>
    <td class="name"><div>Queen Elizabeth</div></td>
    <td class="operator"><div>Cunard Line</div></td>    
  ...

That markup change requires adjusting the CSS selectors for each column to target the divs, using descendant selectors:

table.cruises .name     div { width: 108px; }
  table.cruises .operator div { width: 126px; }
  table.cruises .began    div { width: 76px;  text-align:center; }
  table.cruises .tonnage  div { width: 60px;  text-align:center; }
  table.cruises .status   div { width: 160px; }

Now, with that markup change in place, I can now set the colors of the various columns, like this:

table.cruises td.operator { background: #ebcb4d; }
  table.cruises td.tonnage  { background: white; }
  table.cruises td.name     { background: #C7E0C1; }  
  table.cruises td.began    { background: #B7C3E8; }

Adding Padding

The next tweak is to add some padding in all the cells:

table.cruises th, table.cruises td { 
    ...
    padding: 2px 4px;
    }

That padding makes the table wider, so we also adjust the width of the outer div up to 592px (this avoids the horizontal scroll bar):

div.scrollableContainer { 
    position: relative; 
    width: 592px; 
    ...

Styling the Headings

Finally we'll change the headings to different color and background, and set them to render in "small-caps". We also change the color of the scrollableContainer div to match the new color of the heading backgrounds:

table.cruises th { 
    background: #6b6164;
    color: white;
    font-variant: small-caps;
    }

  div.scrollableContainer { 
    ...
    background: #6b6164;
    }

The screenshot of the table does not show the scroll bar on the right. Once again final working version with a scrollbar can be seen here. Do a "view source" to see the final CSS and Markup.

CONCLUDING NOTES

If you are having trouble with headings mis-aligning with the data by a few pixels, try increasing the width of the columns, starting on the left with the first column that is mis-aligned. It's best to do this in Firebug by placing your cursor on the width value and bumping it up (you can use the 'up arrow' key for this, or just edit in a new value). Once you've got the right widths in Firebug, remember to copy the value to your code.

If you are out there struggling with fixed table headings on a complex table (as I was for a full day), I hope this post will help you.

CSS Inheritance and Cascading

2010-12-03T22:02:00.001-08:00

When you are first starting out with CSS, you may have some confusion about the concepts of inheritance and cascading, as well as specificity. Let's take a look at these ideas and see if we can make them clearer. We'll start with inheritance.

Inheritance

Let's say your HTML looks like this:

<body>
  <div>
     <h1>The Title</ht>
     <p>
         Some text.
     </p>
  </div>
</body>

That results in a document tree that looks like this:

body
    |-div
        |-h1
        |-p

If you add more elements the tree will become more complex, but even this simple document can demonstrate what CSS inheritance is all about. Suppose you have the following CSS:

body {
color: green;
}

This will cause both the h1 heading and the text of the paragraph to be rendered in green. The reason is that the div inherits the color green from it's parent, the body element. Then the h1 and p inherit the color from their parent, the div. This is just like a trait such as eye color being passed down from one generation of people to the next.

Now suppose we add something else to the CSS:

body {
color: green;
border: 1px solid red;
}

What do you think will happen here?
Will everything be green with a red border?

No it won't because the border property is defined by the CSS standard to not be inheritable. For each CSS property the W3C CSS specification tells you whether it is or isn't inheritable. So think of things like borders as being like tattoos: they can change the appearance of the parent, but they aren't inherited to the next generation.

Now consider what would happen if we add the following CSS rule:

p {
color: navy;
}

The heading will still be green, but now the paragraph text will be navy. Furthermore, if there were more elements underneath the p, then they would all inherit 'navy' from their p parent.

The key idea here is that the value of an inheritable property p, for element x, are taken from the parent element *unless* some CSS rule - any CSS rule - has something to say about that property's value. So any applicable CSS rule, will override inheritance from the parent. Think of CSS rules like Cosmic Rays that come in and modify the genes of a child so that her eyes are brown instead of blue like the parent. Inheritance doesn't matter when a CSS rule makes a specific change to a property.

So far, so good. Now let's talk about Cascading.

Cascading

For cascading, try to forget all about the structure of the HTML document and the parent-child relationships we talked about above. Cascading has more to do with the many CSS rules that can apply to an individual HTML element, and deciding which rules really apply to the element's appearance. An analogy is a persons education level, like "High School Graduate", "Bachelor Degree", "Masters Degree", "PhD". It has nothing to do with inheritance, and is instead an attribute of the individual.

To carry the analogy a little further, imagine that 100 people from the town of Smallville all graduated from Smallville High School together. 50 of those 100 went on to get Bachelor degrees at Bigtown U. Now all 100 are technically high school graduates. But we commonly refer to the ones who finished college as "college graduates", and the ones who only finished high school as "high school graduates".

Now imagine that we attach properties to each person, where the properties are "home-town" and "education-level". For 50 people the values will be:

home-town: smallville
education-level: high-school-graduate

and the other 50 will be:

home-town: smallville
education-level: college-graduate

We can derive these values from a couple of simple rules:

1. All 100 people are from Smallville and graduated from Smallville High School.

2. 50 people graduate from Bigtown U.

A very similar process goes on in the Browser as it's trying to figure out all the CSS properties that apply to a given element. Here's how to think about it:

First, every given element on the page there is a set of properties (just like home-town, and education-level).

These properties will have default values set by the Browser.

The default values are over-written by values inherited from parents.

The inherited values are over-written by values in applicable CSS rules. This is where the cascade comes into play. The cascade works like this:

a. Find all CSS rules where the selector applies to this element.
b. Sort those CSS rules by specificity, with low specificity rules at the top of the list, and high specificity at the bottom.
c. For those rules where specificity is the same, put rules that appear later in the code closer to the bottom of the list.
d. Now starting at the top of the list, when you see a property value, write it down. If you see that same property again further down the list, cross out the old value and use the new one. So the values found further down the list take precedence.

So, for example, let's say you have these five rules, and we're working out the property values for the paragraph in the example markup given earlier:

p { color: pink; font-size: 10px; }
body p { color: green; font-size: 20px;}
body div p { color: yellow; }
body div p { color: red; }
body div { color: blue; }

After we choose only those rules that apply to the p tag, and sort by specificity (and secondarily by order of occurrence), the list looks like this:

(Less specific)
p { color: pink; font-size: 10px; }
body p { color: green; font-size: 20px; }
body div p { color: yellow; }
body div p { color: red; }
(More specific)

Note that we don't include the rule for "body div" because that selector does not target the p element that we are working on. Now to determine the property values that will apply to the p element, we walk down the list looking for property values. We find color: pink right away and write that down. As we keep going we find green, then yellow, then red. In each case we replace the value with the one further down the list, so we end up with color: red.

We do the same thing with font-size. First we see font-size: 10px, and write it down. Then we find font-size: 20px, cross out the 10px and write down 20px. So our final properties that are set via the CSS cascade are:

color: red;
font-size: 20px;

This whole process of finding the set of applicable CSS rules, and then determining how they affect the properties of the element, is what Cascading is all about. Look again at the sorted list of CSS rules and notice how the font-size "cascades" down through multiple rules, even though those rules are more specific.

To summarize, the key idea of Cascading is looking at all the CSS rules that apply to a given HTML element, and determining which property values to pull from those rules and apply to the element.

And finally, remember that any properties of the element that are not affected directly by the CSS cascade can end up being set by inheritance, or by Browser default values, or even by Browser runtime calculations (e.g. width and height).

HTML Blockquote Element, CSS Content and Quote Properties

2010-12-02T21:40:00.000-08:00

For an update, please see this post.

9:40 PM. Chilly Evening. Quoting one of my favorite authors, I'm going to write an example for the HTML blockquote element and show you how to style it. In I'm a Stranger Here Myself, Bill Bryson wrote:

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.

I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself

I set the background color of the blockquote to blue and painted a plane image with lowered opacity in both x and y directions. The corners of the element are rounded by 4 pixels. There's also the image of the author which I floated to the left and two oversized quotation marks. As insignificant as those marks may seem, the coding behind them is not, possibly because most people are not familiar with the properties being used.

CSS CONTENT PROPERTY

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.

I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself

I'll be repeating the same passage from the book because I don't want to quote extensively from the same source. The CSS "content" property allows us to add more content to the page without changing our HTML markup. We generally use it with the :before and :after pseudo-selectors. These pseudo selectors allow us to target the part of the page content just before, or after, a regular element's content. For example, you can use this to target every paragraph on a page and insert something just before or after the paragraph text. The way this works is we say something like: p:before { content: 'Paragraph: '; color: red; } and now every paragraph on the page will start with the word 'Paragraph', in red.

In the blockquotes you see at the top of this post I use the 'content' property to insert the quotes before and after the quoted text. So as you can imagine, that might look a lot like the rule above, but replacing the word Paragraph, with a quote character, and changing the selector to the blockquote element, like this:

blockquote:before { content: '"'; }
blockqutoe:after { content: '"'; }

CSS QUOTES PROPERTY

And that does work, but the resulting quotes are pretty boring. We want some nice looking quotes where the opening and closing quotes are rendered differently. The way to make this happen is with the CSS 'quotes' property, and the 'open-quote' and 'close-quote' values. So, the above rules can be re-written as:

blockquote { quotes: '"' '"'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

This works fine, but it still gives us the same old boring quotes. But one more small change to the quotes property will fix it:

blockquote { quotes: '\201C' '\201D'; }
blockquote:before { content: open-quote; }
blockquote:after { content: close-quote; }

Now we are using some special character codes for the quote values. You can find these in a table in the CSS spec.

I'm including the table here for easy reference:

Character	Approximate rendering	ISO 10646 code (hex)	Description
"	"	0022	QUOTATION MARK [the ASCII double quotation mark]
'	'	0027	APOSTROPHE [the ASCII single quotation mark]
‹	<	2039	SINGLE LEFT-POINTING ANGLE QUOTATION MARK
›	>	203A	SINGLE RIGHT-POINTING ANGLE QUOTATION MARK
«	«	00AB	LEFT-POINTING DOUBLE ANGLE QUOTATION MARK
»	»	00BB	RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK
‘	`	2018	LEFT SINGLE QUOTATION MARK [single high-6]
’	'	2019	RIGHT SINGLE QUOTATION MARK [single high-9]
“	``	201C	LEFT DOUBLE QUOTATION MARK [double high-6]
”	''	201D	RIGHT DOUBLE QUOTATION MARK [double high-9]
„	,,	201E	DOUBLE LOW-9 QUOTATION MARK [double low-9]

As one final touch, you can also set the font properties to affect how the quotes are rendered:

p:before, p:after { font-family: 'Times New Roman'; font-weight: bold; font-size: 3em; }

The other thing we need to do is float the closing quote to the right, to position it correctly at the lower right part of the blockquote:

blockquote:after { content: close-quote; float: right; }

We can also style the blockquote itself to add some styling and color. Following is the entire listing for the CSS.

STYLING THE BLOCKQUOTE ELEMENT

div.post-body blockquote.nu img { float: left; margin-right: 25px; }

div.post-body blockquote.nu span { float: right; }

blockquote.nu:before, blockquote.nu:after {
font-weight: bold;
font-size: 3em;
}
.post blockquote.nu {
width: 490px;
/* an alternative look with the quote narrower and floated to the right
of screen float: right; margin-left: 20px; width: 200px; */

margin: 0px;
padding: 30px;

background: #C6E0FB url('images/aero.png') top left repeat;

-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;

quotes: "\201C" "\201D";
}

blockquote.nu:before { content: open-quote;
}

blockquote.nu:after { content: close-quote;
float: right;
}

First Note: In the CSS above, I've added a class to all the blockquote selectors, so instead of blockquote:after, I'm writing blockquote.nu:after. That is just to limit the scope of these rules to blockquotes of class "nu", instead of affecting all blockquotes globally. When ever you are selecting by class, you can write .classname, or you can use the element type followed with .classname (with no spaces). In this case I chose to say "blockquote.nu:after for clarity, instead of writing: ".nu:after".

Second Note: If you are not on the Blogger, do not get thrown off by "div.post-body" or ".post" descendant selectors. Your selectors will be simpler because chances are you don't have to watch out for specificity. If I don't write my selector as "div.post-body blockquote.nu img", my rule will be overwritten by another that's higher on the specificity scale. For you, writing them as,

blockquote.nu img { float: left; margin-right: 25px; }

blockquote.nu span { float: right; }

should work. If you have to build descendant selectors, you need to look at your containing elements. Remember "post-body" or "post" are Blogger specific unless you happen to use the same naming convention.

BLOCKQUOTE: CSS FOR THE NARROW VERSION

I'm using double class structure, essentially writing over properties set by the previous blockquote class nu:

.post blockquote.narrow {
background-color: #e8e4b5;
width: 280px;
float: right;
padding: 25px 20px 20px;
margin-left: 20px;
font-size: 12px;
}
div.post-body blockquote.narrow img { float: right; margin-right: 0;
margin-left: 15px;}

The Markup looks like this:

<blockquote class="nu narrow">
<img src="images/bill3.jpg" alt="" />In the oddest
ways airlines continue ..... of a life vest.  

I am especially fascinated ..... Thank gosh I've got this whistle."

<span>Bill Bryson, <a href=" http://www.amazon.com/...">
I'm a Stranger Here Myself</a></span>
</blockquote>

CHANGING THE MARKUP TO TARGET P ELEMENTS

We can improve the look further by placing the end quote right after the text before the author name and book title. Unfortunately there's not a way to do this using the blockquote element but if we changed the markup by specifying a first and last paragraph, we can hook into the p element instead. In the following CSS, I highlighted everything that changed in yellow. First the new markup:

<blockquote class="nuu">
<img src="images/bryson.jpg" alt="" />

<p class="first">
In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration.  
Why after all these years do the flight attendants still put a life vest over their heads and 
show you how to pull the little cord that inflates it?  In the entire history of commercial 
aviation no life has been saved by the provision of a life vest.
</p>

<p class="last">
I am especially fascinated by the way they include a little plastic whistle on each vest.  I 
always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: 
"Well, Thank gosh I've got this whistle."
</p>

<span>
Bill Bryson, <a href=" http://www......">I'm a Stranger Here Myself</a>
</span>
</blockquote>

div.post-body blockquote.nuu img { float: left; margin-right: 25px; }
div.post-body blockquote.nuu span { float: right; }

blockquote.nuu p.first:before, blockquote.nuu p.last:after {
font-weight: bold;
font-size: 3em;
}

.post blockquote.nuu {
width: 490px;
margin: 0px;
padding: 30px;
background: #e8e4b5 url('images/aero.png')
top left repeat;

-moz-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px 4px 4px 4px;
border-radius: 4px 4px 4px 4px;

quotes: "\201C" "\201D";
}

blockquote.nuu p.first:before { content: open-quote; }
blockquote.nuu p.last:after {
content: close-quote;
float: right;
padding-top:20px;
}

In the oddest ways airlines continue to act as if it is still 1955. Take the safety demonstration. Why after all these years do the flight attendants still put a life vest over their heads and show you how to pull the little cord that inflates it? In the entire history of commercial aviation no life has been saved by the provision of a life vest.
I am especially fascinated by the way they include a little plastic whistle on each vest. I always imagine myself plunging vertically toward the ocean at 1,200 miles an hour and thinking: "Well, Thank gosh I've got this whistle."

Bill Bryson, I'm a Stranger Here Myself

IPv6 : Internet Protocol Version 6

2010-12-01T18:29:00.000-08:00

Got a bad sore throat going on for a week. I was trying to heal it by drinking copious amounts of hot beverages but tonight my ear's hurting also. So if I disappear again, you know why. I said that I would talk about the new Internet standard so let's do that before we go back to CSS. For the last decade, widespread use of IPv6 has always been "just a couple of years away". It never happened. But now things may really start to change, as the IPv4 address space is finally being exhausted.

Today's Internet runs on IP version 4, or IPv4. Every device on the Internet gets a unique IPv4 address (with some exceptions I'll mention below). IPv4 addresses are four bytes - or 32 bits - long, and are typically written like this: 98.137.10.42. Since it's a 32 bit number, the total number of IPv4 addresses is 2^32, or about 4.3 Billion (4,294,967,296 to be exact). But, there are currently over 6.7 Billion people on the Earth, so you can see right away there aren't enough IPv4 addresses to go around.

Of course, not everyone is on the Internet, but many people are consuming multiple addresses (e.g. one for the cell phone, one for their Kindle, one for their PC, etc..). There are also many IPv4 address ranges that are reserved as private addresses, so aren't available in the public pool.

The situation is helped a little by allowing multiple devices to share one public IP address. If you have a home router, and four PCs connecting through that router, then you are really only using up a single public IPv4 address because the router is running a protocol called Network Address Translation (NAT). NAT allows all four PCs to share a single public address assigned to the router. So this helps with conserving the number of IPv4 addresses being used, but even with NAT, the number of IPv4 addresses available for allocation is dwindling.

Current projections from the IPv4 Address Report site show IPv4 addresses being exhausted in March of 2011.

What then?

The answer is IPv6. IPv6 addresses are 128 bits long. That gives you 2^128 addresses, which is a *lot* of addresses. The only problem right now with IPv6 is that not every device or web site is setup to use it. All modern operating systems already have "dual stack" support - that's a networking stack with both IPv4 and IPv6 sitting side by side. But the IPv6 stack might not be configured, or you might be connecting to an ISP that's not ready to hand out IPv6 addresses, or you might have a home router that just does not have IPv6 support.

The bottom line is if you were on an IPv6 only device right now, you could only see a part of the web - the parts that are already IPv6 ready. That situation will have to change in the coming years, once the IPv4 address range is completely used up, and more and more users are only connected via IPv6.

CSSBakery on the Web

2010-11-30T18:43:00.000-08:00

Before we are done with November, just want to mention that in the beginning of the month, Paul Andrew featured two of my graphs that you've seen here in his "10 Awesome Pure CSS Graph and Chart Techniques"roundup. Thank you Paul!

CSS Cookie Cutter Revisited

2010-11-28T14:07:00.000-08:00

After seeing this post on StackOverflow I decided to take a look at my cookie cutter method again to see how I could help people use it correctly. First I took Neil's example and tried it out, providing my own images. The result looks good to me, so I'm not clear where he was having a problem. I tested in IE7, IE8, Firefox 3.6, and Chrome. (IE6 clearly doesn't work due to lack of transparent png support.) The CSS, markup, and resulting image is shown below:

.filler {
    padding-left:20px;
    height:448px;
    width:500px;
    float:left;
}

.filler-mask {
    background: url('images/filler-mask.png') repeat;
    position: absolute;
    left:0; top:0;
    height: 448px;
    width: 500px;
}

.filler-picture {
    z-index: 0;
    background: url('http://pics.cssbakery.com/pics/cubic2.jpg') no-repeat;
    position: relative;
    height: 448px;
    width: 500px;
    display: block;
}
...
<div class="filler">
    <div class="filler-picture">
        <img src="http://pics.cssbakery.com/pics/cubic2.jpg" alt="test" />
        <div class="filler-mask"> </div>
    </div>
</div>

I used a circular "cookie cutter" mask over an image of a boat:

Next I decided to re-write the example a bit and see if I could streamline the code some:

* { margin:0; padding:0; }

.framed, .framed img {
  width:500px;
  height:448px;
  }

.picture {
  position: relative;
  }
  
.mask {
  background: url('images/filler-mask.png') repeat;
  position: absolute;
  left:0; top:0;
  }
...
<div class="framed">
    <div class="framed picture">
        <img src="http://pics.cssbakery.com/pics/cubic2.jpg" alt="test" />
        <div class="framed mask"> </div>
    </div>
</div>

Only the class names have been changed in the markup, and now the CSS is considerably shorter. The resulting image is the same.

What this technique really boils down to is using the png mask image as a background on a div, and then displaying that div directly over the top of the photo we want to make the cuts from. We do that using absolute positioning, making sure that we have a parent div that provides a positioning context.

Blogger Profile Pictures and "Excuse me, Have You Seen a Chicken?"

2010-11-27T21:18:00.000-08:00

Weaving between the chilly palm tree shaded spots and patches of evening sun, I was walking yesterday when I got stopped by two very cute, chubby 10 years olds. A boy and a girl with dark hair, bundled up in jackets, faces red from the cold. They asked me if I had seen a chicken "just wandering around". For a second, I stood there wondering if I heard them right as they looked up to me with hope. So I say, "Did you lose one?". They answer, "Yes". I smile and tell them that no, I hadn't seen a chicken. I noticed that one of them was carrying a net with a handle to scoop up the bird. As we continued to walk in opposite directions, I kept an eye out for the errant chicken. :-)

Blogger profiles come with an image that you can upload either from your machine or by a URL. I recently added one which looked like this:

The CSS that managed the look was:

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $bordercolor;
}
(NOTE: the strings that start with dollar sign ($) are Blogger variables. Blogger takes care of replacing those in the final CSS sent to the browser.)

I did not like the way this crowded the image and the blogger's name into the same line. I thought a bigger image and the person's name on a separate line would look better so I wrote the following, doing away with the float and specifying image width to preempt stretching:

#Profile1 .profile-img {
display: block;
float: none;
width: 140px;
height: 109px;
}

150 pixels is the width of my right sidebar. Since I have 4 pixel margins on each side of the profile image, and a single pixel border around the image, I subtracted 10 pixels from my total of 150. Don't forget to give it a height also (need to get this number from your image editor). I did not want to be ignored so I increased specificity by writing a #Profile1 descendant selector.

Blogger Instructions: To make this change in Blogger, update the CSS from DESIGN > Edit HTML tab.

My Web Development Toolkit

2010-11-08T00:41:00.000-08:00

List of things that I've been using for development. Google Maps == Google Maps API.

Tech CEOs

2010-11-07T22:55:00.000-08:00

The person who wrote this article asks if tech CEOs are expected to be young in the era of Facebook. Here's someone with no technical background who hired programmers from overseas and made some money with a smart phone app.

How to Center an Image with CSS

2010-11-04T09:04:00.000-07:00

Thanks for putting up with this for a few days. I took the election music and the flags down. Glad to see Jerry Brown win in California - he's a cool guy. Before we throw away the decorations, I want to show you a CSS technique for centering an image like the flags I had hanging from the top of the browser window for the elections. I tried it two different ways.

First time I repeated the image across the top which only takes a height and background statement that repeats horizontally. You have to specify height for divs that do not have content. A background image will collapse without content and you will see nothing on screen.

#special_events {
background: url(images/flagcascades2.jpg) 0 0 repeat-x;
height: 85px;
}
<div id='special_events'/>

This looked fine and a lot of people will be pleased with it but it was too busy for my taste. I decided to place a single image over the main content that moved with the middle column. In order to make this work correctly, you have to do two things.

When the browser window resizes in order to flow the flag with the main content, we have to auto margin the left and right margins. But for that to work, the browser needs to know the width of your element. Then based on that width, it will center the div with the margin: 0 auto; statement. If you don't give the div an explicit width, it'll take the full width of the browser because it's a block element and block elements expand horizontally all the way across their containing block. Doing "margin: 0 auto;" won't have any effect in that situation since the div goes all the way across.

To rewrite special_events, we will give the div a width equal to its background image and take the horizontal repeat out of the background rule.

#special_events {
background: url(images/flagcascades2.jpg) 0 0 no-repeat;
height: 85px;

/* to center it as the browser window resizes */
width: 872px;
margin: 0 auto; }
}
<div id='special_events'/>

Fastbreak: Restructuring PHP for Reuse

2010-10-31T16:58:00.000-07:00

I don't like mixing politics with my site but a strong commitment to secular government being at the core of who I am, I could not resist the musical spoof on the constitutionally confused Delaware Senate candidate Christine O'Donnell. She will sing "I'm not a witch, I'm you, you, you" in her own voice and words until the end of elections. The cover is just as good. Good luck, Delaware! :-)

Having promised myself and you a post a day in October, I have some catching up to do on this Halloween day. We'll go back to the PHP code that we were working on for the mail order company mimicking the J.Crew site. I'll keep posting under this title as I get chunks of the code finished.

To make this example more like a real online shopping site I've designed a three column layout, and a menu that will be common to all the pages of the site. In the layout, only the middle column content will change from page to page. We want to accomplish this without having to duplicate site content in multiple files. There are many ways to do this in PHP. I'll take a simple approach of just factoring out all the common parts into separate files, which will then be included in various files that are specific to the middle column content.

Here's a picture of what the file structure will look like:

header.php holds one piece of common code. This is where we put the menu that goes into column one of every page. The other common code goes into footer.php. Here we have some common Javascript along with the actual footer content which lists some common site links.

The files showitems.php, and shoes_complete.php will each provide unique content for the middle column. In showitems.php this will be a list of all the products in the database (i.e. all shoes listed, with a clickable link to get more detail on a specific shoe). shoes_complete.php will show details on a single shoe, given the shoe's item number, passed as a parameter in the URL.

So now, with the addition of showitems.php you no longer have to type in a URL with an item number to see the details of particular shoe. Instead, the code in showitems.php generates hyperlinks with the complete URL already filled in with the itemnumber for the corresponding shoe. When you click the link, the item number is passed to shoes_complete.php in the query parameter portion of the URL.

In this post I want to extend the previous PHP/MySQL examples, by generating a page that shows a list of all the shoes in the database. This will include a small image of the shoe, the price, and the name of the shoe with a hyperlink to get more detail for ordering the shoe.

With a small change to the MySQL queries from previous posts, we can get all records from the shoe_primary_data table (before we were getting only a specific record via the where clause like this: where itemnum='$itemnum'). Here, we simply leave the where clause off of the query, and the database will default to returning all records:

// make a connection to the mysql database server
$db = mysqli_connect("womenshoes.db.6787492.hostedresource.com","womenshoes",
"thisIsyourPassword", "womenshoes");
if ($db) {
  //SHOE_PRIMARY_DATA TABLE
  //building a query string to send to the database, this will be the search string
  //Give me all the records, with all the fields (star) from the shoe_primary_data table 
  $query = "SELECT * FROM shoe_primary_data";

Now that we've got all records from shoe_primary_data, we will loop through them and generate a HTML list of items, like this:

<div id="container">
  <ul id="shoeList">
    <?php while ($row=mysqli_fetch_array($result,MYSQLI_ASSOC)): ?>
      <li>
        <div>
          <img style="width:80px;" src="<?=$row['imagepath']?>">
          <div><a href="shoes_complete.php?itemnum=<?=$row['itemnum']?>">
          <?=$row['itemname']?></a></div>
          <div><?php printf("$%01.2f",$row['price'])?>
          </div>
        </div>
      </li>  
    <?php endwhile; ?>
  </ul>
</div>

What we have here is snippets of PHP interspersed with HTML. The PHP in this case, loops through all the records retrieved from the query, pulling each record into an associative array. For each record we generate a list, where each item in the list contains: (a) a small image of the product, (b) the name of the product as a hyperlink that takes you to more detail on the product, and (c) the price of the product.

The main thing to notice from this code is the structure of the while loop, where the call to mysqli_fetch_array() returns a result into the $row variable. If there are no more records mysqli_fetch_array returns false, and we drop out of the loop. Otherwise, we have the associative array for the current record sitting in the $row variable.

The rest is straightforward HTML. To style the resulting list we use the following CSS:

/* force vertical scroll bar to eliminate layout 'jumps' between pages */
html {
  overflow-y: scroll;
  }

#container {
  width: 620px;
  /*padding-bottom: 400px;*/
}
#container ul li {
  display: block;
  padding-left: 10px;
  width: 8em;
  text-align: center;
  float: left;
  list-style-type: none;
}

#container ul li img  {
  display: block;
  float: none;
  list-style-type: none;
  margin: 5px;
}

#container ul li div {
  margin: 10px;
}

MySQL/PHP Database Series

A Flash Example: Functional and Good Looking Web Pages

2010-10-26T10:20:00.000-07:00

A very nicely done Flash application showing the worldwide corruption indices for 2010. The organization behind this work is called Transparency International - a Global Coalition against corruption.

Multiple Fonts with Cufon

2010-10-25T19:52:00.000-07:00

Warm and windy day, the water was delicious.

To replace one font with Cufon generated font:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Eras_Light_ITC_400.font.js"></script>
<script type="text/javascript">
  Cufon.replace('h1');
</script>

This code replaces all h1's to a Cufon generated Eras Light.

To replace multiple fonts with Cufon the syntax changes because we have tell the Cufon script that's running in the browser (cufon-yui.js file) which font family to use. I am going to convert my h1's to Eras Light and h2's to Eras Demi so:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Eras_Light_ITC_400.font.js"></script>
<script type="text/javascript" src="js/Eras_Demi_ITC_400.font.js"></script>

<script type="text/javascript">
  Cufon.replace('h1',{fontFamily: 'Eras Light ITC'} );
  Cufon.replace('h2',{fontFamily: 'Eras Demi ITC'} );
</script>

If you don't specify which font to use for whom then you will be writing over everything else that comes before you. Eras Demi will be wiping out the Eras Light for example.

This may change in the future but for awhile now, I've using Cufon generated titles in this blog. The title of this post "Multiple Fonts with Cufon" is an example.

Cufon site also recommends the following to fix an IE glitch. I had tried and not seen much difference with this. It goes right before the ending body tag:

<script type="text/javascript"> Cufon.now(); </script>

WITH MORE THAN 2 FONTS

Let's try three fonts for testing. First I converted a couple of additional font files using the Cufon Generator, then I setup Cufon on my page like this:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/vegur_400.font.js"></script>
<script type="text/javascript" src="js/Calibri_400.font.js"></script>
<script type="text/javascript" src="js/Book_Antiqua_italic_400.font.js"></script>

Then I applied three different fonts to elements of my page, like this:

<script type="text/javascript">
  Cufon.replace('.cufon, h2',{fontFamily: 'vegur'} );
  Cufon.replace('.dtreviewed',{fontFamily: 'Book Antiqua'} );
  Cufon.replace('.author-name',{fontFamily: 'Calibri'} );
</script>

It works fine. If you are having trouble with using more than two, I would bring up Firebug, go to Console, and reload the page just to make sure you don't have a Javascript error somewhere.

CUFON

Using Cufon

2010-10-24T10:33:00.000-07:00

Here's how to get started with Cufon fast:

Step 1: Go to the Cufon generator at: http://cufon.shoqolate.com/generate/ Fill out the form and hit the "Lets do This!" button. You will have to choose a font off your disk. Typically your fonts will be under Windows>Fonts on a PC however Windows does not allow you to open a font file from the dialog box so you need to copy the font that you want to another directory (Don't just drag the file, press Control key to make a second copy).

Step 2: The generator will produce a javascript file (My filename was Eras_Light_ITC_400.font for the Eras Light fontface) Save this file, and also download the Cufon javascript library, which you can get by hitting the "Download" button at the top of the page.

When you click the button, it'll load the Javascript into your browser window. From the File menu on your browser, just hit File>Save As. cufon-yi.js is your second Javascript file.

Step 3: Upload both of the javascript files to your web server. You might want to create a subdirectory called js.

Step 4: In your HTML, link in both files, like this:

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/vegur_400.font.js"></script>

Step 5: Next, you need to tell Cufon which text you want it to replace. You do this through a selector that you pass to the Cufon replace method. For example, you can replace all h2 headers like this:

<script type="text/javascript">
  Cufon.replace('h2');
</script>

That's a simple example, but the string you pass to Cufon.replace() can be a more complex selector.

Step 6: If you notice your text jumping around, you might want to look at this post about stopping the Cufon Flash of Unstyled Content.

We also have this Cufon related post in the archives.

Passing a Query Parameter to PHP

2010-10-22T05:57:00.000-07:00

No sign of the fun dolphin that I met the other day but was a beautiful early morning with a lot of clouds reflecting off the water. Air felt perfect, not too warm, not too cool.

You and I were still working on the PHP/Database mini project. Our database, named shoes, had two tables. First one more generic information about a particular type of shoe and the second table listed each shoe item with its size, color, width, and how many there are in the inventory. Today I want to add a new class of shoes to our database and then query it via the URL to display two different items from the database. Let's add a new shoe to shoe_primary_data table via phpMyAdmin. The master table will now show "Birkenstock Arizona Sandals" in addition to the "Strappy Evening Shoes".

The Arizonas have an item number of 12000. Using that number, I inserted new records into "shoe_secondary_data" table for different sizes and colors for the new sandals.

Browsing the shoe secondary table:

Here's how our PHP file going to change. All of my explanations are within comments in the program:

//
// In URLs anything to the right of a question mark is called the query string.
// That's the place where you can plug in certain values that act like parameters
// to the page. In the query string if you have multiple parameters, they must
// be separated by ampersands (&).  So passing someones age and first name in a 
// query string would look like http://www.example.com?age=12&name=Joe
//
// When your browser goes to a URL that includes such a query string - whether by 
// clicking a link, or manually entering it - the server side software can look
// at the values you passed in the query string to decide what to do.
//
// In the case of a PHP web application, the PHP interpreter will read the query
// string and where it finds name value pairs such as age=12 name=Joe, it will
// copy these into a "Super Global" array variable called $_GET.  Your program
// can then access these values by indexing into the array, using the parameter
// name as the key, like this:  $_GET['age'], or $_GET['name'].
//
// In our case we are passsing in the item number of a shoe, and we'll use 
// it to look up the item in our database.
//
// URL to go to), all the parts of the URL to the right 
$itemnumber=$_GET["itemnum"];

// make a connection to the mysql database server
$db = mysqli_connect("womenshoes.db.6787492.hostedresource.com",
"womenshoes", "yourpasswordtothedatabase", "womenshoes");
if ($db) {
  //SHOE_PRIMARY_DATA TABLE
  //building a query string to send to the database, this will be the search string
  //Give me all the fields (star) from the shoe_primary_data table 
  //that have an item number of itemnum
  $query = "SELECT * FROM shoe_primary_data WHERE itemnum='$itemnumber' ";

  //executes the search in the database using our query that we built
  //result object holds the results of the query
  //this query gives us the records for the  first table (shoe_primary_data)
  $result = mysqli_query($db, $query);
  if ($result) {
     echo " ";     
  }
  else die('Problem querying a database');

 //SHOE_SECONDARY_DATA
 //building a query string to send to the database, this will be the search string
  //Give me all the fields (star) from the shoe_secondary_data table 
  //that have an item number of itemnum
  $query = "SELECT * FROM shoe_secondary_data WHERE itemnum='$itemnumber' ";

  //executes the search in the database using our query that we built
  //result object holds the results of the query
  //this query gives us the records for the  secondary table (shoe_secondary_data)
  $result2 = mysqli_query($db, $query);

To run, enter from the URL either:

http://topossibilities.com/mailorder/mailorder.php?itemnum=12000

or

http://topossibilities.com/mailorder/mailorder.php?itemnum=10100

So far we have a page that can display different types of shoes, but you have to enter the different item numbers in the URL each time. So for the next post, we'll add another page that lists all the different types of shoes in the database. When you click on a shoe from this list, it will bring up the details page that we already have. That's the next post.

Photoshop Note: In the image caption, I mentioned the barrel distortion phenomenon. This is when your image looks rounded or bloated. To correct barrel distortion in Photoshop, from Filter>Lens Correction Filter>Distort, drag the distortion slider slowly to the right.

MySQL/PHP Database Series

Looping through Multiple MySQL Records with PHP

2010-10-21T09:57:00.001-07:00

Back to Godaddy to add a record to our database table, shoe_secondary_data. There are several ways to add the new record. I tried the phpMyAdmin interface where you fill in the blanks from their insert function. Same item number for the strappy Jimmy Choo shoes, size 7W in gold of which we have 3 in our inventory. Leave the first field empty (NULL), it's self incrementing :

When you hit return, the system formulates a MySQL query and updates the database with your changes (the color should be gold here):

Browsing our shoe_secondary_data table contents:

So given that database table, we are now going to update the hardcoded HTML in our PHP file by pulling in the data from shoes_secondary_data. I commented all the steps I took in the program so it should be easy to follow. I could have deleted the HTML but kept it so that you can compare the old and the new:

<?php
 //SHOE_SECONDARY_DATA
 //building a query string to send to the database, this will be the search string
  //Give me all the fields (star) from the shoe_secondary_data table that have 
  //an item number of 10100
  $query = "SELECT * FROM shoe_secondary_data WHERE itemnum='10100' ";

  //executes the search in the database using our query that we built
  //result object holds the results of the query
  //this query gives us the records for the  secondary table (shoe_secondary_data)
  $result2 = mysqli_query($db, $query);
  if ($result2) {
     echo "You know how talk to a database";     
  }
  else die('You dont know how to query a database');

/* We are going to loop through the shoe_secondary_data results and construct
   an array of arrays which you can think of as the set of records returned from 
   the database
*/   
$count=mysqli_num_rows($result2);
$nested_array=array();
for ($i=0; $i<$count; $i++) {
   //empty brackets means append to the array
   $nested_array[]=mysqli_fetch_array($result2, MYSQLI_ASSOC);
}
//debugging 
print_r($nested_array);

// Create an array for each Drop Down Select box:
$size_array = array();
$width_array = array();
$color_array = array();
// Now loop through the records and construct the size, width,
// and color arrays.
foreach($nested_array as $rec) {
  // Get the values from this record:
  $size = $rec['size'];
  $width = $rec['width'];
  $color = $rec['color'];
  // We use PHP associative arrays to create unique lists of values. 
  // 
  // Here's how this works for "size" for example: we may have many records 
  // that have size 6, but we only want one "6" in the size_array.  We 
  // accomplish that by using $size as the key into the array.  
  // 
  // So when we encounter the first record with a 6, we index into the array with
  // a key of 6, thus creating a new entry in the array: $size_array[6], and
  // we set the value of that entry to 6.  Now when we see another record that
  // also has size 6, we again index into the array using a key of 6 
  // ($size_array[6]) and set the value again to 6 (so we overwrite value 6
  // with 6, so it really doesn't change).
  // 
  $size_array[$size] = $size;
  $width_array[$width] = $width;
  $color_array[$color] = $color;
}
//debugging 
print_r($size_array);
print_r($width_array);
print_r($color_array);

<form action="cbmailorder.php" method="post">
<p>select size

   <!-- Loop through all sizes, generating an option tag for each one. -->
   <select name="size"> 
<?php foreach($size_array as $size) {
        echo "<option value='$size'>$size</option>\n";
      }
?>
<!-- HTML here just got replaced above by PHP/no longer hardcoded
<option value="5 H">5 H</option> 
<option value="6">6</option> 
<option value="6 H">6 H</option> 
<option value="7" selected="1">7</option> 
<option value="7 H">7 H</option> 
<option value="8">8</option> 
<option value="8 H">8 H</option> 
<option value="9">9</option> 
<option value="9 H">9 H</option> 
<option value="10">10</option> 
-->
</select>
</p>


<p>select width   <select name="width"> 
<!-- Loop through all widths, generating an option tag for each one. -->
<?php foreach($width_array as $width) {
        echo "<option value='$width'>$width</option>\n";
      }
?>
<!-- HTML for the width got replaced by PHP statements above
<option value="N">N</option> <option value="B" selected="1"
>B</option> <option value="W">W</option> 
-->
</select></p>


<p>select color<select name="color"> 
<!-- Loop through all colors, generating an option tag for each one. -->
<?php foreach($color_array as $color) {
        echo "<option value='$color'>$color</option>\n";
      }
?> 
<!--  HTML for the colors got replaced by PHP statements above
<option value="gold">gold</option> <option value="platinum" selected="1">platinum</option> 
<option value="black suede">black suede</option> <option value="navy suede">navy</option> 
-->
</select>
</p>  
?>

PHP DEBUG: print_r($nested_array);

A look at the $nested_array contents put together in the for loop. This view comes from View>Page Source rather than the direct output of print_r($nested_array); which is not formatted.

Array
(
[0] => Array
(
[id] => 1
[itemnum] => 10100
[size] => 7
[width] => M
[color] => platinum
[inventory] => 7
)

[1] => Array
(
[id] => 2
[itemnum] => 10100
[size] => 6 1/2
[width] => M
[color] => black suede
[inventory] => 5
)

[2] => Array
(
[id] => 3
[itemnum] => 10100
[size] => 7
[width] => W
[color] => platinum
[inventory] => 4
)

[3] => Array
(
[id] => 4
[itemnum] => 10100
[size] => 8
[width] => M
[color] => navy suede
[inventory] => 2
)

[4] => Array
(
[id] => 5
[itemnum] => 10100
[size] => 7
[width] => W
[color] => Gold
[inventory] => 3
)

Our PHP file which has replaced the original HTML is almost done. Try the pull down fields to see the differences between the two different versions.

MySQL/PHP Database Series

This Evening

2010-10-19T21:26:00.000-07:00

Started pouring down just as I was about to finish my walk.

CSS Relative Positioning & The Twitter Bird

2010-10-18T18:12:00.000-07:00

I'm not that crazy about the name of this blog but by now I think I'm stuck with it. So when I saw the birthday cake RSS buttons today even though my first thought was, "Hmm those tie in with the blog's theme", I quickly recovered and came to my senses saying, "No way. I'm not going to make the blog even cutesier with one of those things".

So how did I end up with the twitter bird flying over a cake displayed right underneath my site logo?

Don't ask, I don't know what to say.

If you are designing a site and traffic is important to you as it is to most people, then it's a good idea to prominently display your RSS feed instead of burying it like I had down in the bottom of my blog. Twitter and RSS go hand in hand these days so I included Twitter even though I don't have an account with them yet. Let's talk about the CSS styles that I wrote to display the two images for these services.

I wanted the bird appear as if it's hovering over the cake. Obviously that can be easily achieved in an image editor but in my case both images had to be clickable so combining the two was not an option. That's when CSS positioning came in handy.

For the RSS cake, I gave the dimensions of the image. Just as a reminder, you don't really have to specify width and height for images unless you want to change the original dimensions of the image. I just happened to write mine out, it wasn't really necessary.

For the bird, I had to tweak with positioning. As you'll recall, in relative positioning the space occupied by the element remains in the flow but the element itself is shifted by however many pixels you specify typically in your top and left. So that's exactly what I did, I moved the bird around until I was pleased with its new position. That meant I pushed it down by 35 pixels and pushed it out by giving its left a negative value of 79 pixels.

The bird is moved relative to the position it would have occupied in the normal flow. What I really want you to see is the invisible "hole" left behind because of relatively positioning the bird. As far as the normal flow rendering is concerned, the bird's still there in the larger rectangle. It's because of that hole I had to go back in and adjust padding/margin on other elements.

img.rss { width: 90px; height: 94px; }
img.twitter { position: relative; top:35px; left: -79px;}

I updated my image captioning tool.

It has a new option that you can check off to display your caption on top of the image instead of bottom. To see how that looks, see the image in this post. As you'll see, showing caption on top of the image instead of the typical bottom makes more sense in some cases.

Reading the Database from PHP

2010-10-17T13:59:00.000-07:00

A Sunday which is constantly threatening rain. Cold. Walked for an hour early in the morning.

You remember our "mailorder.html" file which had the shoe information hard coded. In the real world, we never work that way, always storing and retrieving information from a database. In order to get that done, we will have to dip our toes into PHP and MySQL. We have our database already set up at Go Daddy so that should make this exercise go faster. I am going to convert parts of the HTML file to PHP. Information that's going to become dynamic is item name, item number, item description, price, and item picture.

Let's take a look at the parts of the HTML file that we are going to convert:

</head>
<body>
<p><img src="jimmychoos.jpg" alt="Jimmy Choo Sandals" /></p>
<div class="itemorder">
<h2>Strappy Evening Sandals</h2>
<p>$275.00</p>
<p>Elegance and pain defined. Classic special-occasion heel crafted in 
metallic or suede leather. Cross-over straps at toe and double ankle strap
with gold metal self-fastening oval buckle. Suede lining and leather sole. 3 1/2" 
self-covered high heels that are sure hell to walk on.  Recommended use is for 
sitting down and not really for walking.  Made in the USA. Catalog/cssbakery.com only.
</p>

Name enclosed within h2's, price and description of the sandals enclosed within p tags are all hardcoded. The img tag has the name of the image file hardcoded.

itemname
imagepath
description

Our database table "primary_data" does not have a field for item name so I'm going to add that as "itemname". The phpMyAdmin interface makes this easy. Click on the name of the table, in my case, "shoe_primary_data" and choose "Structure" tab from above which shows all the fields of your table. Then to add a new field, just specify where it'll go in the table next to the "Add" option at the end of the table. Hit the Go button to add the new field. Repeat the same process with field names, imagepath and description.

Once you have the new field established, then we will have to set its value. For "itemname" field, we want to enter "Strappy Evening Shoes". We are again going to do this from the Godaddy interface but this time we are going to have to give it as a MySQL statement:

UPDATE shoe_primary_data SET itemname="Strappy Evening Shoes"

You enter the above SQL query from the SQL tab. For a complete MySQL reference, please see.

Since we only have one kind of shoe in our database so far, this statement will not cause problems but if we were to have several different types of shoes then it's important to write our SQL statement as follows:

UPDATE shoe_primary_data SET itemname="Strappy Evening Shoes" WHERE itemnum="10100"

which will only update the item names of those shoes where the item number happens to be 10100. Otherwise, you would set every shoe in your database to "Strappy Evening Shoes".

Here's the code that connects to the MySQL database from PHP. The mysqli_connect() API call returns an object that keeps track of the database connection. If mysqli_connect() runs into a problem and can't connect, then the $db variable will get set to false.

</head>
<body>
<?php
// make a connection to the mysql database server
$db = mysqli_connect("womenshoes.db.6787492.hostedresource.com","womenshoes", 
"mypasswordwhichstartswithaV", "womenshoes");
if ($db) {

With the connection established, we read from the database using a SQL SELECT statement. We limit the query to only records that have an item number of 10100:

//building a query string to send to the database, this will be the search string
  //Give me all the fields (star) from the shoe_primary_data table that have an item 
  //number of 10100
  $query = "SELECT * FROM shoe_primary_data WHERE itemnum='10100' ";

  //executes the search in the database using our query that we built
  //result object holds the results of the query
  $result = mysqli_query($db, $query);
  if ($result) {
     echo "Problem talking to a database";     
  }
  else die('Problem querying a database');
}
else die("Problem connecting to a database");

Here we check to see if the number of rows returned is exactly equal to 1. If there are zero rows, then we didn't find the item. If there are more than 1 rows, then the database is corrupted somehow, since this table should have a single row for each unique item number.

//returns the number of records that the query retrieved 
$count=mysqli_num_rows($result);

// we are only expecting to find one record for the item number we queried for
if ($count == 1) {
  //row is the record and we are getting it as an array
  //the parameter tells the API function to return the record as an associative array
  //ass array means the indices into the array are the field names of the table
  //indices are keys into the array
  //so instead of accessing the fields using row sub 0, row sub 1, row['description']
  $row=mysqli_fetch_array($result, MYSQLI_ASSOC);

  //printr will dump any variable whether it's an array, object or simple string
  print_r($row);
} else die("error error");
?>

With the database side of things settled, we can write our PHP code that's going to replace parts of the HTML.

<!-- php snippet is going to get totally replaced by the string from the database 
     so we need quotes outside the angle brackets
-->
<p><img src = "<?=$row['imagepath']?>" alt="Jimmy Choo Sandals" /></p>
<div class="itemorder">
<h2><?=$row['itemname']?></h2>
<p>$<?php  printf("%01.2f", $row['price']); ?><span class="floatr">Item #: 
<?php printf("%d",$row['itemnum']); ?></span></p>

<p class="description"><?php  printf("%s", $row['description']); ?></p>

I will use short tags to echo out the path name of the image (imagepath in our shoe_primary_data table). This PHP snippet will be totally replaced by the string from the database so it needs quotes around it to become the src file for the HTML img tag.

The imagepath field provides one of the keys we can use to access the PHP row associative array. Notice we are doing PHP right in the middle of HTML.

Then we are indexing the row array a second time with itemname field to get the name of the shoes. This should return the "Strappy Evening Shoes".

SHORT TAGS IN PHP

Let me just say a few things about short tags before we move on. When echoing out PHP variables, you can use the "short tag" form, so instead of writing <?php echo $x; ?>, you can just write <?=$x?>. The short tag form with the equal sign tells PHP to do an echo of the expression that follows. If you need to do a printf instead of echo, for example to format a floating point number, then you still have to use the long form, e.g. <?php printf("%02f",$x); ?>, but in cases where you just outputing the contents of the variable without formatting, then the short tag form works well and saves you some typing.

<p>$<?php  printf("%01.2f", $row['price']); ?><span class="floatr">Item #: 
<?php printf("%d",$row['itemnum']); ?></span></p>

<!- above line can be re-written as below: -->
<p>$<?php  printf("%01.2f", $row['price']); ?><span class="floatr">Item #: 
<?=$row['itemnum'])?></span></p>

CAN YOU EXPLAIN %01.2f?

In the PHP statement, printf("%01.2f", $row['price']); .2 means to put two decimal places. f is for floats. Let's say the value is 0.75. In that case, you don't want .75 so the zero one says to pad it with leading zeros for one decimal position before the period if it needs it.