Bold Text and Opacity Issue

Quite often I use opacity to control how certain items look. For example, I want inactive items to be appear lighter to reflect the fact that they are inactive or not as important. To do this, I use <div style="filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;">blah blah blah</div>.

One of the things I've experienced is that bolded text does not always display correctly. To get around this, you can set the background-color to white and this will get around the display oddities. So, after changing my code to the following, the opaqued text looks great.

<div style="filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50; background-color: white;">blah blah blah</div>

Special thanks to a blog titled The Strange Zen of JavaScript for pointing me at this fix. I would highly recommend taking a look as he has quite a bit of good info on there.

Cross Browser Gradient from SlayerOffice

I recently ran into an interesting issue with the cross browser gradient background script from SlayerOffice, in conjunction with qForms and FireFox. I noticed that none of my forms were submitting in FireFox, and it almost appeared as if the form fields weren't there.

#1 - Issue with the gradient script:

On line 34 of gradient.js, for(i=0;i<objArray.length;i++) needs to look like for(var i=0;i<objArray.length;i++) because the variable i is also being used in getGradientObjects().

Oddly enough, this was only causing a problem in FireFox 2.0, and not IE 7. I've sent the updated code to Steve at SlayerOffice so you should probably be able to get the updated code straight from http://slayeroffice.com/code/gradient/, but feel free to contact me if that's not the case.

#2 - Issue with qForms not loading:

Secondly, qForms was simply not working whatsoever. If someone else hadn't reported this problem, I would have reinstalled FireFox, that's how odd it seemed. On each page, I simply called qFormsInit() at the bottom of the page to kick off initializing qForms. This was occurring before the gradient background was applied, and therefore all of the form references in qForms were being blown away.

Instead, whenever code needs to be called upon page load, the following function seems flawless and works like a charm.

window.addEventListener?window.addEventListener("load",qFormsInit,false):window.attachEvent("onload",qFormsInit);

Check out the gradient script from SlayerOffice, it's fairly handy.

If you haven't heard of qForms, I would highly recommend checking out what Dan Switzer has developed, it's one of the best and most used JavaScript API's on the web.

Lightbox JS

I happened upon cfPicasa on RIAForge and was pretty impressed with Lightbox JS. Lightbox JS is used to overlay images on the screen, but in a very smooth and intelligent way. I normally used subModal to accomplish the same effect, but this is much more visually appealing, and apparently would be easier to implement as well.

http://www.huddletogether.com/projects/lightbox2/

Modal windows using subModal

Modal windows, modeless windows, and popup windows all have a number of caveats that are somewhat annoying. Some time ago, I discovered subModal, which using an iframe, a div, and a nice mixture of CSS to create a great modal window overlay that is a joy to work with.

One of the biggest limitations with modal windows is that you can not interact with the 'opener', subModal allows you to do that. On the other hand, one of the biggest limitations of normal popup windows is that they tend to get lost, which won't happen using subModal.

I highly recommend that you check it out.

• http://sublog.subimage.com/articles/2006/01/01/subModal
• http://gabrito.com/post/enhancements-to-submodal

If you run into any problems with it, let me know as I've made a few tweaks to make it a bit more browser friendly.