OnBeforeUnload, IE7, Assigning event handlers to null and the problems that arise

This IE7 issue almost totally screwed me at work. Image if a JS designed to keep users from leaving a page before placing their order suddenly started telling all users that they were leaving and their orders weren't being placed, even though they were. Ouch.. that'd probably have someone gunning for my job. But that almost happened. Here's how MSoft and sucky IE7 almost did it to me: I had a script like this.

    <script>
      window.onbeforeunload = confirmExit;
      function confirmExit()
      {
           return "Leaving this page will cause all unplaced orders to be discarded.  Are you sure you want to leave the page?";
      }
    </script>
    
    . . . . .

    <input type="image" src="/lgrequest.gif" onclick="javascript: window.onbeforeunload = null;     document.forms[0].submit();" />

Apparently IE7 doesn't like the part where I set onBeforeUnload = null; SO it just ignored that. The result would have been disaster but for a stroke to testing luck. Here's the simple yet crucial change that I made:

    <script>
    var goodExit = false;
      window.onbeforeunload = confirmExit;
      function confirmExit()
      {
          if (!goodExit)
               return "Leaving this page will cause all unplaced orders to be discarded.  Are you sure you want to leave the page?";
      }
    </script>

    . . . . . 

    <input type="image" src="<%=AppService.BASEDIR%>/images/lgrequest.gif" onclick="javascript: goodExit = true; window.onbeforeunload = null; document.forms[0].submit();" />

I know I have mentioned it before but IE7 sucks! I use it at work and I must admit the new tab interface works nicely, but all the crap they changed makes me say "IE7 SUCKS"

Disable Just-in-time debugging after installing IE developer toolbar

If you are now stuck with a window that opens asking if you'd like to debug the current page after every page load, you're I am, or was. I was pulling my hair out over that stupid box forever because I couldn't figure out how to shut the danged thing off. It turned itself on WITHOUT ASKING when I installed the IE7 developer toolbar. It didn't bother me too too much because I hate IE7 anyway :)

So I finally came upon the fix today. Below is the reference:

Life Hacker--Just in Time Debugging? | What is RSS Feedreader? | Feedreader - Totally Free RSS / ATOM Newsreader / Aggregator

Basically go (in IE, not the toolbar b/c that would make sense) to tools>internet options>advanced and uncheck the debug scripts boxes (there are two types). Then you're pop-up free. Yay! This is why I hate you, MS.

IE7 SUCKS

I was recently forced to download IE7. It sucks. IE7 sucks. Ok, now I've done my part. I truly don't like IE7 at all (the interface is really crappy and it messes with relative image paths) and apparently the world agrees. Check out this article: Microsoft Internet Explorer (IE) 7.0 Sucks! | Marketing Pilgrim. In it there is a study done about the number of people posting "IE7 Sucks" and how there's a massive disapproval of Gates' latest. That warms my heart ;)

In all seriousness though, I have beef with IE7. At first glance I couldn't even use it. I don't know why MSoft likes this interface, but I like to be able to use things. I can't use this. It isn't intuitive and I'm a developer! My guess is that it is designed this was to match the new office which supposedly has made leaps and bounds in usability by re-orging their menus and using pictures. That remains to be seen in my book, but if they have figured out an easy to use interface, they didn't share the whole story with the IE team because their version stinks.

Also, this anti-phishing stuff is for the birds. Since when is MSoft the authority on who is worthy of trust and not breaking the law? Ha ha right right you got me, since they started enforcing copyright laws on their own. Really though, I'm not comfortable with that.

Anyhow, when it comes to the browser wars, Ffox is still winning me over. Opera is good and I really like the interface. It is much neater and cleaner than the competition. I'm all about adhering to standards too. However until someone else will spell check the post I'm writing right now as I type it like Ffox does, they're my default browser ;)

OnBeforeUnload Event WORKS IN FIREFOX, TOO!!!

A page on the MSDN is erroneously spreading the notion that onBeforeUnload is supported only by IE.

onbeforeunload Event (BODY, FRAMESET, window)

That is totally false. FireFox has supported onBeforeUnload since version 1.7. The reason there is beef about this event is that it is not a part of either the W3C spec or the ECMA spec. However, it has taken on wide support because it provides necessary functionality. It is used mainly to keep a user from navigating away from a page where they have unsaved input (more for web apps than pages).

So by all means use onBeforeUnload if you need that kind of functionality as it is likely to be adopted into some standard due to it's far reaching use (even Google does it). Just be sure that you script something for onUnload for the Opera users.

XMLHttpRequest is not allowed to other domains in Firefox

XMLHttpRequest problem with Firefox and Netscape - Javascript / DHTML / Ajax

TheScripts is yet again my muse. This post is to a person who ran into exactly the same problem as I myself did my first time working with web services. The natural desire is to call a bunch of web services to mash up some resources you have available. This is all well and good until you try to get at resources not found underneath the same domain.

In order to prevent malicious web pages from telling your browser to call all manner of nasty XML resources when you load it up, the good folks at mozilla (and maybe IE now too - I'm not sure) won't let billie.com/home.html call a web service (or ajax or anything) hosted at susie.com/ws/stockticker.xml.

This keeps us secure but is WAAAAYYYY annoying if you happen to be a developer on billie.com who needs to get at that stock ticker. What you've got to do is build billie.com/ajax/tickerCaller.xml which just makes a call (on the server side of course) to susie's stock ticker and returns the XML.

It ain't pretty, but until some new fangled security comes out, that's what we're stuck with.

The Code from my last post with my new colorizer ;)

var lilPx = "200px"; //size of small select box
var bigPx = "600px"; //size of large select box
var prefix = 'bs';   //prefix used on all select box IDs

document.onmouseover = shrinkAll; //handles abandoned selections (no change)

function resize(id){
    //get the element in question
    var elem = document.getElementById(id);

    //dynamically init/assign the holder variable
    var holder = eval("hold"+id);

    //if select not being held open
    if (!holder){
        //go big->small or small -> big
        if(elem.style.width == bigPx)
            elem.style.width = lilPx;
        else    
            elem.style.width = bigPx;
    }else{
        elem.style.width = bigPx;
    }
}

function hold(id){
    //swap the hold value, dynamic of course
    eval("hold" + id + " = !hold" + id);

    //change size if necessary
    resize(id);
}

function shrink(id){
    //get element to shrink
    var elem = document.getElementById(id);

    //set width to small
    elem.style.width = lilPx;

    //unhold
    eval("hold" + id + " = false");
}

function shrinkAll(e){
    //be sure we have the real src, not a bubble or trickle!
    if (!e) var e = window.event;
    var target = (window.event) ? e.srcElement : e.target;
    
    //shrink em all except that one that was the source (possibly)
    var selects = document.getElementsByTagName('select');
    for(i=0; i<selects.length; i++){
        if(selects[i].id.substring(0,prefix.length) == prefix){
            
            //shrink if it wasn't the source (make sure the src isn't parent for <option> in mozilla)
            if(selects[i].id != target.id && selects[i].id != target.parentNode.id ){
                shrink(selects[i].id);
            }
        }
    }
}

---

Colorized by: CarlosAg.CodeColorizer AND

<html>
<head><script type="text/javascript" src="script.js"></script></head>
<body onload="" id="body">
<div id="outtie"></div>
<select style="width:200px;" id="bs1" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
<br />
<select style="width:200px;" id="bs2" onmouseover="resize(this.id);" onclick="hold(this.id);" onchange="resize(this.id);" onmouseout="resize(this.id);">
<option>00004546353 - MAKROLON TANK TRUCK</option>
<option>00004567435 - 500 BARRELS OF POLYOL 50 KG ea</option>
<option>00056463543 - POLYURETHANE BLEND</option>
<option>00005464354 - 50% ACID SOLUTION</option>
<option>00056875343 - 50 PALLETS OF RANDOM CHEMICALS</option>
</select>
</body>
</html>

---

Colorized by: CarlosAg.CodeColorizer

<SELECT> options are way too long

in Select Option entries are cut on the right side if they're too long - Javascript / DHTML / Ajax This is another post of mine on TheScripts. This one is pretty interesting because it is a solution of one of those age-old problems: what the crap are you supposed to do when you have a ton of content in a drop-down. It looks SUPER ugly if you just stretch it across the whole page. At first I scoured the web for a way to get the dang lines to wrap. A few sites I found erroneously pointed to some tard's posting on a forum that said just throw BRs in there. I looked all over the place in hope that there was a CSS solution but to no avail. Apparently the HTML select tag can't wrap ever no matter what. Boooooooo. Above is a screenie. The top select on each of the two sets is w/ no mouseover, the bottom is when you interact w/ the select. Finally, I wrote something of my own. It won't do wrapping, but it does fix the problem. I made the select box elastic. When not in use it is a small little thing with a preview of what the selected option says. When moused over or clicked it expands long enough to display all of the text, then shrinks back up when you're done with it. I didn't get really tricky and animate the motion or anything, though that would be neat. It is just functional at this point. The problem got really interesting when I had to deal with event bubble and trickle. That's such a pain. I got help from the usual sources - w3schools for reference, quirksmode, Dr. Dailey's page. I should post a demo but I'm not feeling up to it at the moment. If you want the src or a demo just comment or snag it from theScripts.

Most CMS packages are PHP based, why is this? - PHP

Most CMS packages are PHP based, why is this? - PHP To paraphrase myself (I've taken to posting a lot on theScripts) here's why SO many CMSs seem to be in PHP with a database backend (though the latter seems extremely common sense) The idea behind CMSs being database driven is because of the following premises: a)If you need a CMS you must have a lot of content to organize and b)Databases are the best way to organize a lot of information so logically it follows that you would use a database to organize all of the information. The reason PHP is so often used is probably because it is very readable, simple, and well suited for the task. CMSs are not super-technical in nature. I don't mean to put them down because they are good at what they do, but they're a simple tool. You don't need a lot of technical complexity to issue a few queries on the database to get content to the page. That being said, many choose PHP because it is simple, lightweight, and good at doing SQL queries and writing them to a page.