Showing posts with label DHTML. Show all posts
Showing posts with label DHTML. Show all posts

Tuesday, December 19, 2006

More on Flash Activation

Continuing with my last post, SWFObject is another script that can be used to automatically activate a flash movie. I prefer this as it's a bit more flexible when dealing with menus that can hover above flash movies.

http://blog.deconcept.com/swfobject/

Activating Flex Apps and Flash Movies

It amazes me how many flex and flash apps that I run into that don't account for the ActiveX Activation Issue in IE. To prevent making a user click on the flash movie to activate it, and then interact with it, you can include a simple JavaScript file to automatically activate all flash movies upon load.

Learn more and download the necessary files from http://www.sitepoint.com/article/activex-activation-issue-ie. Then go ahead and add the following line to your application:

<script type="text/javascript" src="objectSwap.js"> </script>

Tuesday, November 21, 2006

Script Debugger for IE on Vista

Since upgrading to Vista I have really missed the script debugger, it comes in extremely handy when working through your JS issues on IE. If you've never used it, you are missing out. It's quite a bit more powerful than the standard syntax checker that comes with Firefox, but I assume there are is a similar plug-in for Firefox.

To start, go download it here. You need to save it locally, perform the install, then update your IE settings under tools --> internet options --> advanced --> uncheck 'disable script debugging...'. Once that's done, you might want to play it safe and restart your pc. At least that's what I had to do.

I want to stress the fact that you need to save it locally, and then install it, as 'running' it from the microsoft site does not kick off the install properly.

Monday, November 20, 2006

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.

Saturday, November 18, 2006

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.

Friday, November 17, 2006

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/

Thursday, October 26, 2006

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.

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.