SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Two JavaScript onloads

    How can I get these two scripts to load?

    <!-- start: WarpGear JavaScript Fader v1.0 -->
    <div id="fader" style="position:absolute; z-index: 2; top:35px; right:10px; width:350px; text-align:left;"></div>
    <SCRIPT LANGUAGE="JavaScript">
    <!-- Original: WarpGear Software (jsfader@warpgear.com) -->
    var texts = new Array(
    "<font size='+1' color='{COLOR}' face='Century'><strong><i>\"Give yourself as the Angels do,<br /> and wonderful things will come to you.\"<br />-Ramadan</i></strong></font>",
    "<font size='+1' color='{COLOR}' face='Century'><strong><i>\"If you seek an Angel with an open heart...<br />You shall always find one.\" <br />-Anonymous</i></strong></font>",
    "<font size='+1' color='{COLOR}' face='Century'><strong><i>\"It is impossible to see the Angel<br />unless you first have a notion of it.\"<br />-James Hillman</i></strong></font>",
    "<font size='+1' color='{COLOR}' face='Century'><strong><i>\"The Sweet Angels take us to peace,<br />never fear,quietly, lovingly, the Angels come.\"<br />-Marshall Stewart Bell</i></font>",
    "<font size='+1' color='{COLOR}' face='Century'><strong><i>\"In heaven an Angel is nobody in particular.\"<br />George Bernard Shaw</i></strong></font>");
    var bgcolor = "#FFFFFF";
    var fcolor = "#C0C0C0";
    var steps = 40;
    var show = 4000;
    var sleep = 200;
    var loop = true;
    var colors = new Array(steps);
    getFadeColors(bgcolor,fcolor,colors);
    var color = 0;
    var text = 0;
    var step = 1;
    function fade() {
    var text_out = texts[text].replace("{COLOR}", colors[color]);
    if (document.all) fader.innerHTML = text_out; // document.all = IE only
    if (document.layers) { document.fader.document.write(text_out); document.fader.document.close(); }
    color += step;
    if (color >= colors.length-1) {
    step = -1; // traverse colors array backward to fade out
    if (!loop && text >= texts.length-1) return;}
    if (color == 0) {
    step = 1; // traverse colors array forward to fade in again
    text += 1;
    if (text == texts.length) text = 0;}
    setTimeout("fade()", (color == colors.length-2 && step == -1) ? show : ((color == 1 && step == 1) ? sleep : 50));}
    function getFadeColors(ColorA, ColorB, Colors) {
    len = Colors.length;
    if (ColorA.charAt(0)=='#') ColorA = ColorA.substring(1);
    if (ColorB.charAt(0)=='#') ColorB = ColorB.substring(1);
    var r = HexToInt(ColorA.substring(0,2));
    var g = HexToInt(ColorA.substring(2,4));
    var b = HexToInt(ColorA.substring(4,6));
    var r2 = HexToInt(ColorB.substring(0,2));
    var g2 = HexToInt(ColorB.substring(2,4));
    var b2 = HexToInt(ColorB.substring(4,6));
    var rStep = Math.round((r2 - r) / len);
    var gStep = Math.round((g2 - g) / len);
    var bStep = Math.round((b2 - b) / len);
    for (I = 0; I < len-1; I++) {
    Colors[I] = "#" + IntToHex(r) + IntToHex(g) + IntToHex(b);r += rStep;
    g += gStep;
    b += bStep;}
    Colors[len-1] = ColorB;}
    function IntToHex(n) {
    var result = n.toString(16);
    if (result.length==1) result = "0"+result;return result;}
    function HexToInt(hex) {
    return parseInt(hex, 16);}
    </script>

    </head>
    <body onLoad="fade()">


    ****************************************************and...


    <script type="text/JavaScript" src="rounded_corners_lite.inc.js"></script>
    <style>

    .myBox
    {
    margin: 0 auto;
    border: 0px solid #ffffff;
    color: #ffffff;
    width: 800px;
    height: 550px;
    padding: 20px;
    text-align: left;
    /*border: 3px solid #ffffff;*/
    background-image: url(back_test.jpg);
    background-repeat: no-repeat;
    }

    html,body{
    height: 100%;
    text-align: center;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    background-image: url(grass.jpg);
    }

    </style>
    <script type="text/JavaScript">

    window.onload = function()
    {
    /*
    The new 'validTags' setting is optional and allows
    you to specify other HTML elements that curvyCorners
    can attempt to round.

    The value is comma separated list of html elements
    in lowercase.

    validTags: ["div", "form"]

    The above example would enable curvyCorners on FORM elements.
    */
    settings = {
    tl: { radius: 20 },
    tr: { radius: 20 },
    bl: { radius: 20 },
    br: { radius: 20 },
    antiAlias: true,
    autoPad: true,
    validTags: ["div"]
    }

    /*
    Usage:

    newCornersObj = new curvyCorners(settingsObj, classNameStr);
    newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
    */
    var myBoxObject = new curvyCorners(settings, "myBox");
    myBoxObject.applyCornersToAll();
    }

    </script>
    </head>

    <body>

    *************************************************

    I would really like to have an external page for the top script. The other one has an external js page. Could I put both pages into one and then have them "onload" together? I've been trying over and over but just can't figure it out. Because one thing this bottom js has a "window.onload=function()" And the other one has a <body onload="fade()">

    Thank you very much

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Place the scripts at the bottom of the body, just before the </body> and you won't be restricted to using the onload technique.

    Code html4strict:
    ...
    <body>
    ...
    <script src="js/scripts.js"></script>
    </body>
    </html>

    Code javascript:
    <!-- Original: WarpGear Software (jsfader@warpgear.com) -->
    var texts = new Array(
    ...
    function HexToInt(hex) {
    return parseInt(hex, 16);}
    fade();
     
    /*
    The new 'validTags' setting is optional and allows
    ...
    The above example would enable curvyCorners on FORM elements.
    */
    settings = {
    ...
    var myBoxObject = new curvyCorners(settings, "myBox");
    myBoxObject.applyCornersToAll();
    }
    Last edited by paul_wilkins; May 1, 2008 at 05:00.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    After some tinkering around I got it!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •