Saturday, November 22, 2008

FireFox scollbar ... always there?

Tired of seeing the site jump back and forth from "non-scrolling" pages to scrolling pages? Throw this in your CSS:

html {
overflow: -moz-scrollbars-vertical;
}

Now there is always a vertical scroll bar (even "grayed out") present and the site stays in position. No more kitters. No more wondering if the CSS code is correct or did something change...

Done!

Friday, November 21, 2008

IE6 margin fix

CSS and IE6 Margin Fix on float!

When floating a < div > in Internet Explorer 6 and any kind of a margin ... it doubles the amount ... of course it does. That is exactly what IE6 should do. Especially since FireFox, and all the others actually set the margin to the number specified.

This guy posted the fix... it's pretty simple. Just add "display:inline" to the CSS attribute.

http://www.positioniseverything.net/explorer/doubled-margin.html

Matt Crigger
http://www.phirebranding.com

Thursday, November 20, 2008

Escape Character in MSSQL

I had a frustrating time trying to escape single quotes in MSSQL.  I had enclosed my content in single quotes so that double quotes would be okay, but then I had to deal with if a user put a single quote in the field.  In standard MySQL you could just use the backslash (\) but MSSQL requires a single quote (') in order to escape a character!

Here is a little function I made in PHP to look for single quotes and doubling them so that they would be escaped (thus allowing the content to be inserted into MSSQL).

//********************************
// fix quotes for mssql
//********************************
function mssql_quote_fix($text)
{
$text = str_replace("'", "''", $text);
return $text;
}

Just call this function on the text you're trying to insert.

I'll give a little credit to this article for helping me: Escape Character In Microsoft SQL Server 2000

Wednesday, November 19, 2008

cURL Alternative to PHP Include (with SESSIONs)

This is followup to my previous post about cURL Alernative to PHP Include.  Basically, the method I posted before didn't copy over the current $_SESSION in PHP to the page that you were calling.  This mean, that page didn't know the session (i.e. if someone was logged in).

The following code over comes this problem and passes along PHP's $_SESSION information to the called page.  This has been tested for pages on the same server, I'm not sure how it will work if calling a page from another server.

<!-- save $_SESSION to use in call -->
session_start();
$strCookie = 'PHPSESSID=' . $_COOKIE['PHPSESSID'] . '; path=/';
session_write_close();

<!-- Begin cURL call-->
$curl_handle = curl_init('enter_external_url_here');
curl_setopt( $curl_handle, CURLOPT_COOKIE, $strCookie );
curl_exec($curl_handle);
curl_close($curl_handle);

Tuesday, November 18, 2008

cURL Alternative to PHP Include

cURL is usually installed with PHP on a server.  I ran into a problem where I needed to be able to include external URLs into a website.  The server I was using didn't allow for urls in the include field (allow_url_include was off).  So, I used this bit of code to do the same thing:

$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,'enter_external_url_here');
curl_exec($curl_handle);
curl_close($curl_handle);

Make sure to replace enter_external_url_here with the actual URL.  Quotes are required around the URL.

Friday, November 14, 2008

Simple Javascript Object Check

Alright this is something fairly simple but it is useful when you want to have javascript check if an object exists before trying to manipulate it.  As we should know, javascript will die if you try to do an action on an object that doesn't exist.  This is part of the simplicity and low-weight of javascript that makes it great for the web.

So before you try to do anything to an object that might not exist on a particular page, put in the following line of code:

if (document.getElementById('the_id_of_the_object') != undefined)
{
     //code goes here
}

Again, something super simple but may save you some problems in you're building a larger site with pages that might not have the same objects but share the same scripts.

Thursday, November 13, 2008

When Tables are Okay

The trend in web development/design is to work with CSS to create layouts.  In the past we used tables to structure websites, this was mainly because of their easy, the lack of development of CSS, and the lack of CSS standard compliance in web browsers.  There are times when tables are applicable even though there is a certain stigma to using them nowadays.

I found the following article very useful in helping to figure out when tables are a good choice and should be used.  If you're interested, take a read: Tables for Tabular Data - What is Tabular Data?

Tuesday, November 11, 2008

EM Conversions for Base Font of 12px

In order to make things really easy, I made this little table to help with conversions from pixels to EMs.  I'm used to using pixels and I'm sure most everyone is, so here is something simple.

The following table applies to a browser that is set to 'medium' font-size (the standard).  Since most websites use a standard 12px font for text, I set the body font to this value so that the EMs are pegged at 12px (i.e. 1em = 12px).

Base (from browser): 16px;
Body (CSS): 75% (12px);

Befor getting to the conversions, take a look at the above values.  You'll need to set your BODY tag to font-size: 75%.  75% of 16px is 12px, this is what we want to work with or else the table below will not work.

Conversions
Column 1: Desired in px | Column 2: Outcome in em
 0px =  .000 em
 1px =  .083 em
 2px =  .166 em
 3px =  .250 em
 4px =  .333 em
 5px =  .416 em
 6px =  .500 em
 7px =  .583 em
 8px =  .666 em
 9px =  .750 em
10px =  .833 em
11px =  .916 em
12px = 1.000 em
13px = 1.083 em
14px = 1.166 em
15px = 1.250 em
16px = 1.333 em
17px = 1.416 em
18px = 1.500 em
19px = 1.583 em
20px = 1.666 em
21px = 1.750 em
22px = 1.833 em
23px = 1.916 em
24px = 2.000 em

Again, the formula is: desired-font/parent-font = font-in-em (i.e. 10/12 = .833em)

Hope this helps!

Sizing Text with EMs

EMs can be tricky to deal with.  To sum them up, however, they basically allow for resizing of text in Internet Explorer.  If you set the text to a pixel value, IE doesn't allow for resizing of that text.  It seems obvious why (to preserve your intended designs) but other browsers don't have this rule.
Here are some basic rules:
  • The default font-size at 'medium' on regular browsers is 16px
  • EMs are dependant on their parent element's size
With that said, here is an example of working with EMs:
  • Default browser size: 16px
  • Intended font-size: 12px
  • Value in EMs: 12/16 = .75em
Remember when calculating EMs that the EM inherits its denominator (in the equation) from the parent font size.  The calculation is also based on pixel values.

For further reading on EMs check out the following sites:



Thursday, November 6, 2008

CSS Cheat Sheet

Another great cheat sheet to help when you can't remember syntax.  This one is for CSS!  The guys at addedbytes make these and they're really useful!  Great stuff.

Mod_rewrite cheat sheet

A great cheat sheet for mod_rewrite syntax.

MOD_REWRITE Cheat Sheet (V2)

Simple form confirmation

If you want a simple form confirmation, here you go:

<form onsubmit="return confirm('Are you sure you want to send this?');">

Just make sure the onsubmit is in your form tag and it will have a popup dialog confirming the submission of the form.  Very simple.