CornerPixel Blog RSS 2.0

# 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

# Monday, September 08, 2008

This won't be the biggest post ever, but it is important none the less.  I have been as of late creating sites with Adobe Dreamweaver and my users have been using Contribute CS3 to edit them.  Now I still hand coded the site for the most part, but I did use the template system that Dreamweaver has and it was pretty effective.

My customer wanted to make sure I put his Google Analytics code into the new site so he could continue monitoring his website.  I didn't think there would be any issue with this and I inserted the Google Analytics code right before the end body tag.

My next step was to allow my user to edit in Contribute CS3.  I got a call later from my customer stating that his page was now looking funny and he was getting extra parenthesis at the bottom of the page.  I looked at the source and saw that Contribute had changed the following code.

type='text/javascript'%3E%3C/script%3E"));

to the literal

type='text/javascript'></script>"));

So now we end up getting  ")); at the bottom of the page.  That isn't good.  It turns out that Adobe Contribute CS3 enforces a level of XHTML compliance, which is more than the Google Analytics code complies with.  Hopefully in the near future Google will change it's code, but in the mean time if you just place the code in the head of the page, Contribute will not change the code.

The other solution is to remove the HTTP/HTTPS auto detection and just use the appropriate script tag for your site.  I don't like this solution because it requires more work, but if you are inclined to do it that method then below is the code for each.

For HTTP:
<script type="text/javascript" src="http://www.google-analytics.com/
ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXX-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

For HTTPS:
<script type="text/javascript" src="https://ssl.google-analytics.com/
ga.js"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-XXXX-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Well I hope that helps

~Michael

Monday, September 08, 2008 5:56:28 PM (Pacific Standard Time, UTC-08:00)

#       Comments [0] - Trackback

Code | Web Standards

Archive

<September 2008>
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

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