Crossbrowser MessageBox Loading HTML,CSS & Javascript via Ajax, dragable...

[diltony]

1) CODE TITLE: MessageBox Supporting HTML, CSS, Icons, Ajax, Scripting

2) AUTHOR NAME: Tony Ogundipe

3) DESCRIPTION:Use this script to display customizable message boxes on your webpage. It allows use of different types of buttons and support rich HTML contents, CSS and Javascript contents. It also support ajax, and callback functions, posses a modal option. You can customize the style, message, buttons...

4) URL TO CODE: http://ds.mwebng.net/index.php?subset=js&page=msgbox

[Snookerman]

Nice, works great in most browsers, in IE6 the background turns black but who cares about IE6 anymore.

[jlizarraga]

Nice! Looks very easy to style.

[diltony]

Hey thanks guys, at least you have encouraged me to submit scripts, i made this script cos i hate the way the alert() changes from browser to browser, i wanted some consistency. The code for this one is light and can easily be manipulated, and once you have sorted out your styles, it becomes even more useful and especially since it supports rich html contents....thanks guys, yesterday was my first time visiting the forums....
I will appreciate any nice addition to the messagebox by any of you guys.

[jscheuer1]

Nice, works great in most browsers, in IE6 the background turns black but who cares about IE6 anymore.

You must be using a standalone version of IE 6 that doesn't support filters, most will not without registry and perhaps other tweaks. The background is fine in my standalone IE 6 which was installed by TredoSoft's MultupleIEs installer, which performs those tweaks automatically and so does support filters.

However, the script will fail in many browsers when used on a valid page.

[Snookerman]

I'm also using TredoSoft's standalone IE6 (http://tredosoft.com/Multiple_IE), but it's been a while since I downloaded it. I'll download DebugarBar's IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) and try it out in that one, maybe it'll work better.

[diltony]

So what is the best method of making the filters work crossplatform? the method i am using has deployed well on most browsers:Opera, IE6, FF, Chrome, NE,Safari.
Just slight differences, and i am tryin to keep images out of the show, that may slow down the client browser. Any suggestions are welcome.

[jscheuer1]

I'm also using TredoSoft's standalone IE6 (http://tredosoft.com/Multiple_IE), but it's been a while since I downloaded it. I'll download DebugarBar's IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) and try it out in that one, maybe it'll work better.

I believe it only performs said tweaks if you tell it too while it is installing. Or, if you upgraded to IE 8 or even reinstalled IE 7 since you last installed MutipleIEs, your settings may have reverted. You might try uninstalling and reinstalling MutipleIEs. However, if you are running IE 8 as your primary IE browser, I have no idea how well it will work. Refer to the TredoSoft web site for information, if available.

[jscheuer1]

So what is the best method of making the filters work crossplatform? the method i am using has deployed well on most browsers:Opera, IE6, FF, Chrome, NE,Safari.
Just slight differences, and i am tryin to keep images out of the show, that may slow down the client browser. Any suggestions are welcome.

There is no issue with filters working cross platform, they are either available or not in a given version of IE, and if so, as set in its individual configuration. If you mean fading cross browser, I think this is still a matter of debate, and wasn't what I was referring to when I mentioned that there would be problems on a valid page. However one handles the cross browser fading, there are a couple things to remember:


If the browser can't do it, it won't - that's what happened to Snookerman.
In IE 7 filters override ClearType(tm) - often with unsightly results. Because of this, it is best to reserve them for images and for elements that contain no text.


That said, I prefer testing the document.documentElement to see if it has as a style the property in question as a string. This works for all but IE which is complicated. For it I like to test if the document.documentElement can support filters, and if so, check how, as version 6 and up can do so more efficiently than 5.5 did, but the syntax is different. I also like to use IE proprietary conditional (HTML or script) comments to do this in an environment where only IE 5 and up is allowed, and to exclude immediately IE less than 5.5, as it thinks it can filter, but it cannot. And do a try catch thing to make sure we don't have a version of IE that can do filters but that has them turned off. Once and if I establish that this IE is filter capable and has them available, I test the method, and depending upon the filter, the filter itself by creating a visibility hidden absolutely positioned element for additional test(s).

This is a bit of overkill where IE is concerned depending upon how much backward compatibility and graceful degrading you want in your code visa vis IE, and how exposed that code is to the errors that can occur if these things aren't properly checked.

[djr33]

It seems like adding some extra buttons might be a helpful function, because alerts are (have always been) so limited. Adding a "cancel" or "skip" button, a "next", etc, would help. Then again, all you would have to do for any of that is add an optional (because we might only want the ok box) button that cancels it and then just make that title editable as well-- and maybe make the ok editable too, so you can say "login" for the username, etc.

so the new way to call it is:

msgbox.show("Message","title","OK"); //button says ok
msgbox.show("Message","title",0); //the main button is disabled-- this is a problem because the page is locked... maybe intentional, like "Please refresh"
msgbox.show("Message","title","Next","Cancel"); //Now two buttons are used, one to go on (the normal one), and a new one, that closes the window "cancel"
msgbox.show("Message","title",0,"Cancel"); //Now just cancel appears
//msgbox.show("Message","title","OK",0); //Note that this is the same as the first example

Now I realize that I'm not sure what your code DOES, in that you say "you must enter your username first", but the button on that seems like it should be a submit, next, etc., sort of button-- like "OK, redirecting now" and the button reads "redirect", and then doesn't just close the window but also submits an action. Perhaps there should be some more complex functionality there, like a Javascript argument fed into the command itself like msgbox.show(....,"window.close"), etc.

[diltony]

@djr33, thank you very much for your advice, i will look into all that everyone have said, i will review it shortly and repost it again.

[diltony]

As at now, i have updated the copy on my pc, adding some new features which i needed in the current project i am working now, the problem is, the documentation is getting rather extensive, i am not sure if i can document everything, that will depend on what questions are asked and what reviews are made.
I dont want to just pour out a textbook, that will confuse rather than help people.
Besides, i am not that good at writing, just trying really.