Fbloggs Geekdom

I own an Asus eee 900HA, running XP. I was expecting to find a hotkey sequence on the keyboard for turning on or off the built in webcam. There isn’t one. However, Asus provides a utility in the system tray (bottom right hand corner of desktop.)

You can download the User Guide from Asus, and it does contain this information.

Just right-click on the icon and you’ll see options to turn on or off the webcam, and options to turn on or off the wireless connection.

Tags: ASUS, camera, eee, netbook, webcam

I changed it to ‘Silver is the New Black’ because I like the flexible width, and the fact that my code samples show up well (at least, when viewing the blog at 1400 x 1050 on my Dell Latitude D610 15″ laptop.

However – I still don’t see my excerpts. Does anyone know of a theme hosted on WordPress.com that shows excerpts of posts?

How to restrict access to specific content in a Drupal site so only authenticated users (those who have logged in) can view and access it. (Short answer – install the ‘content-access’ plugin.)…

Tags: Content Management, Drupal, Drupal modules, Site protection, Web Development

Firebug – debug your applications. An absolute must. Best features:

• Debugger – step through, over, etc.
• Console log for monitoring AJAX interactions -shows parms sent, data returned, round-trip time.

Web Developer – fantastic CSS diagnostic support. Best features:

• View generated source – important if your script modifies the original DOM of your page
• Display Element Information – shows all the properties of an element in a convenient popup. To use, press Ctrl+Shift+F or select menu Information/Display Element Information
• Edit CSS – lets you edit the CSS selectors in real-time, and shows you the results – almost as you type

MeasureIt. Lets you find the height and width of any element or area of the page, in pixels. Helps diagnose CSS issues, for example, when you use combinations of margin, width, padding and border attributes.

Codeburner from Sitepoint, one of my favorite online journals (www.sitepoint.com). Integrates with Firebug to provide comprehensive cross-reference information on HTML and CSS. Best feature:

• Browser compatibility tables

Tags: CSS, FireFox, JavaScript, jQuery, Web Development

Summary: Quirks of checkbox markup in HTML – differences between IE and FireFox…

Tags: Browser differences, HTML, JavaScript, Web Development

Tables do not conform to the normal CSS box model as W3C explains .

A consequence of this is that you cannot use the margin property for cells or rows. Citing the above page: “Internal table elements generate rectangular boxes with content and borders. Cells have padding as well. Internal table elements do not have margins. (my emphasis). So, something like this:

tr.spaceme { margin-top:15px; }

does nothing.

I wanted to have a table with a ‘heading’ row followed by details, another heading row, more details, etc. So the solution is to style an empty row using the padding and/or border properties. Suppose we want to have 15 pixels of white space between the top of the next heading row. Here’s some example markup:


CSS:

<style>
tr.gap {padding: 15px; }
</style>

HTML:

<table>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Acme</td></tr>
<tr><td>Order: foo1</td><td> Item: bar1 </td></tr>
<tr><td>Order: foo2</td><td> Item: bar2 </td></tr>
<tr class="gap"><td colspan="2">&nbsp;</td></tr>
<tr><td>Customer: 1</td><td>Name: Bolts Inc.</td></tr>
<tr><td>Order: foo3</td><td> Item: bar3 </td></tr>
<tr><td>Order: foo4</td><td> Item: bar4 </td></tr>
</table>


I don’t really like this, because it requires an unnecessary table row for each heading. My example requires a colspan, too, as I suspect in most cases tables like these will have more than one column for the headings and/or details. Anyway, I’m posting this to remind myself of this quirk in the CSS box model, as I’m bound to forget it next time I have to render tables like this.

Tags: CSS, HTML, Web Development

This post explains how to set a group of checkboxes to checked or unchecked using jQuery 1.3, by clicking an “All” or “None” button.

First, let’s select our group of checkboxes. I’ve seen some fairly complicated jQuery selectors for finding checkboxes on a page, but it seems to me the easiest thing to do is just assign a common class to each one in a group, even if you don’t define the class in your stylesheets. Like this:

<input type="checkbox" class="selsts" name="selsts" value="E"> Emailed
<input type="checkbox" class="selsts" name="selsts" value="W"> Work in Progress
<input type="checkbox" class="selsts" name="selsts" value="P"> Pending client call
<input type="checkbox" class="selsts" name="selsts" value="R">R-Returned call

the jQuery selector for this is: $(".selsts") .

We could also select all the elements based on their common name, which I think goes like this: $(['name=selsts']) .
But I prefer classes, because you can easily change their names without affecting server-side code that may be dependent on form field names.

Let’s say we have two buttons on our page, using the following markup:

Select: <input type="button" id="allsts" value="All">, <input type="button" id="nosts" value="None">

To make all our checkboxes checked:

$("#allsts").click(function() {
$(".selsts").attr('checked', true);
});


To uncheck all the checkboxes:

$("#nosts").click(function() {
$(".selsts").attr('checked', false);
});


That’s it.

To determine if a checkbox is checked or not, we can loop through the array like this:

$('.selsts' ).each( function() {
var isitchecked = this.checked;
});

Or, individually:

if ($('#somecheckbox').checked == true) { blah blah ... }


Tags: JavaScript, jQuery

Using ui-datepicker-trigger CSS selector to style the trigger image on a jQuery datepicker object.

Tags: CSS, JavaScript, jQuery

This post applies to jQuery UI 1.6rc6 (the preview for jQuery 1.3+), but it probably also works with earlier versions.

If you use themeroller, or simply download the jQuery UI standard code package from the jQuery UI web site, the default font size is set to 1.1em, which, generally speaking, is way too large for most people’s tastes.  I’ve seen a  less than helpful suggestion on how to adjust this, on the examples pages:

<body style="font-size: 62.5%;">

This is pretty bogus, because text inside input boxes doesn’t rescale (at least, not in FireFox,) and it obviously applies to the entire page, when in fact you may want it to just apply to the UI widgets only. You can adjust the scale very easily, though, for all widgets, by  editing the  ui.theme.css file (in the ‘theme’ directory). Just change the font-size property for the .ui-widget selector. The default is 1.1em. I changed mine to 11px.  Like this:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana,
 Arial, sans-serif; font-size: 11px; }

There’s a second line, with more specific selectors:  .ui-widget input, select, textarea and button respectively. You will probably want to change that line too.

Tags: CSS, JavaScript, jQuery

I’ve just started working extensively with PHP and MySQL.  Here’s a simple tip that took me a while to figure out (despite copious examples on PHP.net, I couldn’t find this one:

My MySQL table has a  Timestamp (Z) field, used to assign the current date and time to it when a record is added. Using mySQL in PHP, I can assign the value to it like this:

$result=mysql_query(“INSERT INTO qNotices (nPostDateTime) VALUES(NOW()”);

or I can assign the value with a PHP assignment statement, using this:

  $nPostDateTime= date(‘YmdHis’);  // Same as NOW() MySQL function.
 $result=mysql_query(“INSERT INTO qNotices (nPostDateTime) VALUES($nPostDateTime”);

Note that you do not need any dashes or semi-colons in the format string here, even though the field looks like this :  2007-04-19 10:23:32 when you view the data with a SELECT statement.