Better Understanding of Using CSS for Page Layouts

After hours and hours of exhaustion and frustration, I've finally arrived at what I can accept as a decent implementation of a webpage with a gradient border.



The page header and page footer will stay in-position with the page, and the footer will always appear at the bottom of the screen no matter how it is resized or how much content is on the page.

The final implementation has code that looks like the following in the HTML:

<!-- Create the backdrop. -->

<div class="Backdrop">
 <div class="BackdropLeft">
 </div>
 <div class="BackdropRight">
 </div>
</div>

<!-- Create the page (containing content). -->

<div class="Page">
 <div class="PageHeader">
  PageHeader
 </div>
 <div class="PageBody">
  PageBody
 </div>
 <div class="PageFooter">
  PageFooter
 </div>
</div>

Then, CSS in the background was used to do the trick to position everything correctly.

body {
 background-color:#987431;
} /* body */
body>div {
 width:800px;
} /* body>div */
div.Backdrop {
 position:fixed;
 
 left:0;
 margin-left:auto;
 margin-right:auto;
 right:0;
 
 top:0;
 margin-top:0;
 height:100%;
 margin-bottom:0;
 
 background-color:white;
} /* div.Backdrop */
div.Backdrop>div {
 position:fixed;
 
 width:100%;
 
 height:100%;
} /* div.Backdrop>div */
div.BackdropLeft {
 background-position:0;
 background-image:url("gradient-rl-nu_black-nu_gold.jpg");
 background-repeat:repeat-y;
} /* div.BackdropLeft */
div.BackdropRight {
 background-position:760px;
 background-image:url("gradient-lr-nu_black-nu_gold.jpg");
 background-repeat:repeat-y;
} /* div.BackdropRight */
div.Page {
 position:absolute;
 
 left:0;
 margin-left:auto;
 margin-right:auto;
 right:0;
 
 top:0;
 margin-top:0;
 margin-bottom:0;
 
 min-height:100%;
} /* div.Page */
div.Page>div {
 left:0;
 margin-left:auto;
 width:720px;
 margin-right:auto;
 right:0;
} /* div.Page>div */
div.PageHeader {
 position:absolute;
 
 top:0;
 margin-top:0;
 height:100px;
 
 background-color:red;
} /* div.PageHeader */
div.PageBody {
 background-color:white;
 
 padding-top:100px;
 padding-bottom:100px;
} /* div.PageBody */
div.PageFooter {
 position:absolute;
 
 height:100px;
 margin-bottom:0;
 bottom:0px;
 
 background-color:blue;
} /* div.PageFooter */

I feel like I have a much better idea of how to layout webpages now. Just learning all of the available tools (properties) is a huge challenge, which included almost 100 pages of reading on the W3C website for the CSS 2.1 specification. Whew!

apex:actionSupport Does Not Work in Form with Required apex:input Components

After spending over two hours troubleshooting what seemed like a ridiculous problem, I discovered that the apex:actionSupport component does not work if any other apex:input* components have the required attribute set to true.

Unbelievable, the kind of stuff that's missing from the Visualforce documentation...

Tips on Getting Started with Ajax in Salesforce

It appears that there are a few things to keep in mind in order to reduce frustration and wasted time when implementing AJAX behavior with Salesforce.

• The reRender attribute only works with apex:output* standard components.


• The apex:outputPanel standard component produces a DIV tag, which means that it cannot be used to encapsulate table rows or table cells. However, the component can be used within a table cell.

I don't know why, but it took me a few hours to figure this out while I was trying to achieve Ajax behavior with as few Apex components as possible.

How to Exclude Address Lists from Outlook Autocomplete

Problem:

I received a rather unhappy email from a student today regarding an email on which that student was incorrectly copied. It turns out that this student's name is the same as the contact in my Outlook address book that I was trying to reach.

Further testing revealed that when I composed a new email, my Outlook address book was never even consulted for autocomplete, since Outlook would automatically select the student's address without my confirmation. Pressing Ctrl+Enter like I usually do to quickly send out emails would cause the student's email address to be automatically selected with no indication to me that the selection was actually incorrect.

So... what to do to prevent myself from getting into trouble later...

Solution:

Fortunately, I came across a Microsoft article that gave me a hint after I searched for "microsoft create a filtered global address list" on Google.

"HOW TO: Create a New Global Address List with a Custom Search by Using an LDAP Filter"
Microsoft Support
http://support.microsoft.com/kb/823151

The article gave me hope, and I looked more into my address book settings where I found the answer.

So, without further ado, the steps to reconfigure the autocomplete settings are:

1. Open the Address Book.


2. Click Tools > Options.


3. Add, remove and reorder the lists used by the check names and autocomplete features.

FCKeditor Works with MediaWiki Now

For the longest time, our MediaWiki installation was abandoned because I could not figure out why FCKeditor would not work. The behavior was erratic at best, being that the issues were different depending on which browser I was using.

In Snow Leopard with Safari 4.0.5, the editor appeared to work, allowing me to create a new page and use the WYSIWYG editor as I pleased... until I tried to edit a page. When editing a page, by default the wikitext editor appears with the correct contents of the page. But as soon I switch to FCKeditor, all of the text disappears, leaving me with a blank slate. Then, when I switch back to the wikitext editor, all I see are six alarming characters: $nbsp;. Everything in the page was effectively erased.

In Snow Leopard with Firefox 3.6.3, FCKeditor would not load at all. Whenever I tried to switch to the rich text editor, I would get a totally mysterious error in the Error Console.

Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIXMLHttpRequest.statusText]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: http://www.northeastern.edu/cpspedia/wiki/skins/common/ajax.js?207 :: anonymous :: line 124" data: no]

In Windows with IE8, FCKeditor would also failed to load with the same visual symptoms as experienced with Firefox in Snow Leopard. To Microsoft's credit, IE8 did produce a more useful error message than I had previously encountered.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Sat, 12 Jun 2010 23:17:16 UTC


Message: Access is denied.

Line: 107
Char: 3
Code: 0
URI: http://www.northeastern.edu/cpspedia/wiki/skins/common/ajax.js?207

Months ago, I had searched high and low over the web and found nothing useful to help me solve this problem.

With renewed determination this time around, since there was a larger user buy-in and more at stake to have a successful deployment of MediaWiki, I tried to tackle the problem again. Hitting the same walls as I did previously, I was almost ready to give up and file a bug with CKEditor and cross my heart hoping to die that CKEditor would troubleshoot the issue with me. I even found a tip in the "FCKeditor integration guide" that sounded exactly like the solution for me, but it seemed suboptimal and more importantly did not work.

After spending almost three hours this time around on the same problem, I took one last shot by diving into wiki/skins/common/ajax.js. There, going to line 107, I found a lone function call with three parameters, one of which was called uri. When I used alert() to examine the three parameters, I almost jumped from my seat as I realized what the problem was.

The URI being passed to the function had an internal base server name and not the external server name that I was using to access the wiki in my browsers!

Digging through some MediaWiki documentation, I found a reference to $wgServer and found out that this variable was not set in LocalSettings.php. Once I set this variable with the correct server name, all was well.

Correction: All is well.

Goodness... what a trip.

Copy and Paste from Mac OS X Clipboard in VI

I really like using VI, but one of the frustrations for me was not knowing how to copy to and paste from the system clipboard. Thankfully, a search on Google took me to an article that gave a very good pointer on how to workaround the issue.

"Mac OS X clipboard sharing"
http://vim.wikia.com/wiki/Mac_OS_X_clipboard_sharing

Basically, the technique involved using VI's ability to execute shell commands within the context of the text editor. So, the copy/paste functions can be emulated by using the native pbcopy and pbpaste commands in Mac OS X.

• To copy, type :[range]!pbcopy


• To paste, type :r !pbpaste

Terminal Setting to Facilitate VI in Mac OS X SSH Session

I was constantly annoyed by the fact that when I connected via SSH to a remote Unix server and tried to run VI or VIM, I would encounter the following message:

ex: 0602-108 xterm-color is not a recognized terminal type.
[Press return to continue]

After I acknowledge the error, VI would be essentially unusable.

Luckily for me, I was able to find a post from back in 2004 about the same issue on earlier versions of Mac.

"Setting terminal to be recognized for SSH."
http://forums.macosxhints.com/showthread.php?t=19246

While the suggestion they had for creating the ~/.ssh/environment file did not work for me, setting TERM=vt100 before I ran ssh in Terminal did allow me to use VI properly in the SSH session.