CornerPixel Blog RSS 2.0

# Saturday, September 27, 2008

As you can see there is a small banner at the to of the page now.  I have signed CornerPixel up for the October 15th Blog Action Day.

On October 15th all the blogger's signed up with Blog Action Day will post about this years subject, poverty.  Last year was about the environment. 

I work for an organization that helps combat global poverty so I will have a lot to say.  I know that it has nothing to do with web design, or development but it is something that I thought would be fun to do and maybe even helpful to get people aware of poverty in the world.  Most people don't understand how bad it can be in some of these third world countries, because of how good we have it in the United States.

I recommend any of my readers who have a blog to sign up for the Blog Action Day.  If you do, just comment to this post and I will add your blog to the blog roll on the right.  (unless your site is pornographic or extremely offensive).

I hope to see a lot of participation both here on October 15th and on all others blogs that are signed up to participate.

~Michael

Saturday, September 27, 2008 9:39:34 AM (Pacific Standard Time, UTC-08:00)

#       Comments [0] - Trackback

Non-Webby

# Sunday, September 14, 2008

Just yesterday I was answering a CSS question in an online CSS group I belong to.  The question was on how to make tooltips with CSS.  The person who asked had a website with pictures on it.  He wanted to be able to hover over the pictures and get another tooltip box to pop up with yet another picture in it.

I tried to explain how I would do it, but I think I missed some things.  So I will try to redeem myself now with an explanation and a demo page!

Below is the markup I used for the list and it's tooltips.

<div class="main_wrap">
        <ul class="ninja_list">
            <li class="left_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="mid_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
              <li class="right_ninja"><a href="#"><span class="smoke"><em>title you want people to see if CSS is disabled or for screenreaders</em></span></a></li>
        </ul>
</div>

This will provide a list for those who have CSS off or those who are using text readers.  The next bit is the CSS to make the tooltips happen, along with placing the list items.

.main_wrap
{
    position: relative;
    height: 400px;
    background: url(images/ninjas_three.jpg) no-repeat;
}
.main_wrap ul
{
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: block;
}
.left_ninja
{
    position: absolute;
    left: 50px;
    top: 80px;
}
.mid_ninja
{
    position: absolute;
    left: 235px;
    top: 100px;
}
.right_ninja
{
    position: absolute;
    left: 405px;
    top: 90px;
}
/* NINJA in a box */
/* difines the width and height of anchors along with block */

.left_ninja a
{
    display: block;
    width: 100px;
    height: 160px;
    position: relative;
}
.mid_ninja a
{
    display: block;
    width: 80px;
    height: 140px;
    position: relative;
}
.right_ninja a
{
    display: block;
    width: 80px;
    height: 160px;
    position: relative;
}
/* NINJA pop smoke, span disappear */
/* hides the span where the tooltip is */
/* this also hides text */
.left_ninja span,
.mid_ninja span,
.right_ninja a span,
span.smoke em
{
    display: none;
}
/* span appear like NINJA out of nowhere */

.left_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/left_ninja_tooltip.png) no-repeat;
    top: -45px;
    left: 40px;
}
.mid_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/mid_ninja_tooltip.png) no-repeat;
    top: -70px;
    left: -80px;
}
.right_ninja a:hover span
{
    display: block;
    width: 200px;
    height: 91px;
    position: absolute;
    background: url(images/right_ninja_tooltip.png) no-repeat;
    top: -40px;
    left: -160px;
}

Basically you are telling the span inside the anchor element to display none.  Then when the anchor is hovered over you are bringing back that span with display block.  For more hands on and visual examples try out the Tooltips by Ninja's Page.

I hope this helps, and I hope you can use this  as a guide with tooltips and even CSS drop down menu's.

Happy CSS tinkering,

~Michael

Sunday, September 14, 2008 12:20:44 AM (Pacific Standard Time, UTC-08:00)

#       Comments [2] - Trackback

CSS | Web Standards

# Thursday, September 11, 2008

Okay quick post but good information.  I had a post prior to this one about tracking all subdomains in one profile in Google Analytics.  I explained what code to add to your JavaScript.  Well I need to go one step further and explain how to make sure that your analytics includes the entire domain in your results so that pages with the same name on different domains don't end up looking like one page with lots of results.

If you would like to distinguish between your subdomains you can create an "Advanced Filter".  Here are the settings, and a link to Google Analytics site with other groovy information.

Filter Type: Custom filter > Advanced
Field A: Hostname
Extract A: (.*)
Field B: Request URI
Extract B: (.*)
Output To: Request URI
Constructor: /$A1$B1

This will produce examples like the following,

www.example.com/index.html
help.example.com/index.html

Check out Google Analytics for more information on this subject.
Also check out this page for way groovy Google Analytics information and hints.

~Michael

Thursday, September 11, 2008 5:31:50 AM (Pacific Standard Time, UTC-08:00)

#       Comments [1] - Trackback

Code

# Wednesday, September 10, 2008

I was having fun with PHP the other day while working for a customer.  The customer had a web page that displayed a list of 15 people who were area representatives for their company.  Each row of the table included four columns.  The fields were name, email, area of responsibility, and phone extension.  Well the customer sent me an excel sheet with the new changes for me to change, and told me he wanted me to create an easier method for changing this list out.

Well the site is written in PHP and I am not a PHP expert but I was told to give it my best.  My thought was that we would have a CSV file for the data and the customer could edit that file via a PHP web application. 

The first step was to create a CSV file.  That was easy since it was already in Microsoft Excel.

After that it was time to create some PHP code to extract that CSV data and place it in a table.  Below is the PHP code I used.  I will explain it after.

<?php
            echo "<table class='repTable'>";
            echo "<tr><th>Name</th><th>E-Mail Address</th><th>Territory</th><th>Ext</th></tr>";
            ?>
            <?php
            $linenumber = 0;
            $handle = fopen("reps2.csv", "r");
            while (($data = fgetcsv($handle, 1000, "|")) !== FALSE) {
                if( $linenumber & 1)
                echo "<tr class=\"oddColumn\">";
                else
                echo "<tr>";
                echo "<td>$data[0]</td><td><a href=\"mailto:$data[1]\">$data[1]</a></td><td>$data[2]</td><td>$data[3]</td></tr>";
                $linenumber++;
            }
            fclose($handle);
            ?>
            <?php echo "</table>";?>

As you can see the first PHP code is just to display the first part of the table.  The second part of the code is to display the CSV data. 

I started with a line number variable $linenumber in order to make the odd number rows a different CSS class so that the background of those rows would be blue.  I have the $linenumber variable increase each pass through a line of data.  I will get back to that.

Next the code that reads the CSV file and how it works.

$handle = fopen("reps2.csv", "r");
            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

This opens the reps2.csv file and starts the loop.  Notice that we have created another two variables, $handle and  $data.  $handle is to handle the opening of the file and $data is the variable that stores the data for each loop.

The second line is the start of the loop and it is where the $data variable is created.  The 1000 is the size of the line and the comma is what we have chosen for the delimiter. (CSV files are comma separated as the name states)

if( $linenumber & 1)
                echo "<tr class=\"oddColumn\">";
                else
                echo "<tr>";

The next lines are using the $linenumber variable to determine if the line number is odd or even.  If it is odd then <tr class="oddColumn"> is used in the markup, and if it is even it uses <tr> in the markup creation of the table row.

echo "<td>$data[0]</td><td><a href=\"mailto:$data[1]\">$data[1]</a></td><td>$data[2]</td><td>$data[3]</td></tr>";
                $linenumber++;
            }
            fclose($handle);
            ?>

The next part is where the PHP code generates the markup for the data within the table row.  Notice that I am using the $data variable that is holding the data taken from the CSV file. 

When the table row is written the next line of code then adds 1 to the $linenumber variable and starts the loop again.

Lastly the fclose($handle); effectively releases the CSV file.

Okay I hope all that above makes sense.  I may have used some wrong terminology but I tried my best to explain this code.  If I wrote something wrong, or you want to add something please comment below.

Happy Coding,
~Michael

Wednesday, September 10, 2008 5:49:47 PM (Pacific Standard Time, UTC-08:00)

#       Comments [2] - Trackback

Code | Code - PHP

Archive

<October 2008>
SunMonTueWedThuFriSat
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

Email Subscription

Sign up to get the CornerPixel Blog delivered to your email.

About the Author

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

Sign In

Statistics

Total Posts: 52
This Year: 3
This Month: 0
This Week: 0
Comments: 28