Login

02-07-2008, 09:47 PM

[eluser]Pascal Kriete[/eluser]
Today I was pursuing one of my favorite little hobbies - making useless javascript snippets - and I hit a little snag.

When I specify a doctype (tried 1.0 & 4.01 strict/transitional/frameset) and load scriptaculous using , Safari cuts off the background when the page is reloaded. Firefox shows it just fine. It's the quirkiness that really bugs me. It renders as it should the first time it loads, only when you refresh does it break. What's worse is that if I include() the scriptaculous file, it also works.

I'm no doctype expert, in fact I never really thought about it until today. I just always go with 1.0 transitional and that usually works. The W3C page is a real pain, they might know something about standards, but their page is in desperate need of an update. I did check that the code validates, and it does. If anyone has any insights...using Safari 3.0 on OS X Tiger.

Here's a sample useless script that exhibits this error:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;

    &lt;head&gt;

        &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;

        &lt;title&gt;Prototype Test&lt;/title&gt;

        &lt;style type="text/css" media="screen"&gt;

        &lt;!--

            body {

                background-color: #800;

                font-size: 5em;

                text-align: center;

            }

        --&gt;

        &lt;/style&gt;

        &lt;script src="./prototype.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;

        &lt;script src="./scriptaculous/effects.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;

        &lt;script type="text/javascript" charset="utf-8"&gt;

        &lt;!--

            welcome_message = function() {

                message = 'Welcome';

                var letter = 0;

                var length = message.length;

                new PeriodicalExecuter( function(pe) {

                    if(letter > length - 1) {

                        pe.stop();

                        new Effect.Fade('message', { delay: 2.0 });

                    }

                    else {

                        $('message').insert('<span id="newletter">'+message[letter]+'</span>');

                        $('newletter').hide();

                        var text = $('newletter')[removed];

                        new Effect.Grow('newletter', {

                                            duration: 0.2,

                                            afterFinish: function() { $('newletter').replace(text); }

                        });

                        letter++;

                    }

                }, 0.5);    // ends: pe    

            }

            document.observe('dom:loaded', welcome_message);

        //--&gt;

    &lt;/script&gt;

    &lt;/head&gt;

    &lt;body&gt;

        <div id="message"></div>

    &lt;/body&gt;

&lt;/html&gt;

Replace the one [removed] with innerHTML - getting this forum to display javascript properly is nearly impossible.