A few problems with my JQuery script

Question

I started learning JavaScript since about yesterday, and this (http://jsfiddle.net/TheDevil/qwyctd82/5/) is the JSFiddle link to my 'in-complete' html

HTML

<div id = "square" class = "square" onclick = "beginScript()"></div><br />
<p id = "begin" class = "fontStyle">click the square to begin!</p>
<div id = "squarePos">

    <div id = "sq1" class = "square" onclick = "fncSq1()"></div>        
    <div id = "sq2" class = "square" onclick = "fncSq2()"></div>        
    <div id = "sq3" class = "square" onclick = "fncSq3()"></div>        
    <div id = "sq4" class = "square" onclick = "fncSq4()"></div>

</div>

CSS

div.wrapper {
width: 800px;
height: 800px;
margin: 20px auto;
}

.fontStyle {
    font-family: "Lucida Console", Monospace;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    text-transform: capitalize; 
    vertical-align: middle;
}

p#begin {
    opacity: 0;
}

div.square {
    font-family: "Courier New", Monospace;
    display: flex;
    color: white;
    border: 5px solid #ffaa00;
    height: 190px;
    width: 190px;
    justify-content: center;
    align-items: center;
    background-color: #ffaa00;
    opacity: 0;
    margin: auto;
    cursor: pointer;
}
#squarePos {
    position: fixed;
}

.square:hover {
    background-color: #ffcc00;
    border-color: #ffcc00;
}
.square:active {
    background-color: #ff8800;
    border-color: #ff8800;
}

.removeLinkEffect:hover, .removeLinkEffect:active {
    background-color: #ffaa00;
    border-color: #ffaa00;
    cursor: default;
}

JavaScript

(function (d) {     //* the following script is taken from the source = http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
    d.fx.step[e] = function (g) {
        if (!g.colorInit) {
            g.start = c(g.elem, e);
            g.end = b(g.end);
            g.colorInit = true
        }
        g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
    }
});

function b(f) {
    var e;
    if (f && f.constructor == Array && f.length == 3) {
        return f
    }
    if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
        return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
    }
    if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
        return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
    }
    if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
        return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
    }
    if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
        return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
    }
    if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
        return a.transparent
    }
    return a[d.trim(f).toLowerCase()]
}
function c(g, e) {
    var f;
    do {
        f = d.css(g, e);
        if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
            break
        }
        e = "backgroundColor"
    } while (g = g.parentNode);
    return b(f)
}
var a = {
    aqua: [0, 255, 255],
    azure: [240, 255, 255],
    beige: [245, 245, 220],
    black: [0, 0, 0],
    blue: [0, 0, 255],
    brown: [165, 42, 42],
    cyan: [0, 255, 255],
    darkblue: [0, 0, 139],
    darkcyan: [0, 139, 139],
    darkgrey: [169, 169, 169],
    darkgreen: [0, 100, 0],
    darkkhaki: [189, 183, 107],
    darkmagenta: [139, 0, 139],
    darkolivegreen: [85, 107, 47],
    darkorange: [255, 140, 0],
    darkorchid: [153, 50, 204],
    darkred: [139, 0, 0],
    darksalmon: [233, 150, 122],
    darkviolet: [148, 0, 211],
    fuchsia: [255, 0, 255],
    gold: [255, 215, 0],
    green: [0, 128, 0],
    indigo: [75, 0, 130],
    khaki: [240, 230, 140],
    lightblue: [173, 216, 230],
    lightcyan: [224, 255, 255],
    lightgreen: [144, 238, 144],
    lightgrey: [211, 211, 211],
    lightpink: [255, 182, 193],
    lightyellow: [255, 255, 224],
    lime: [0, 255, 0],
    magenta: [255, 0, 255],
    maroon: [128, 0, 0],
    navy: [0, 0, 128],
    olive: [128, 128, 0],
    orange: [255, 165, 0],
    pink: [255, 192, 203],
    purple: [128, 0, 128],
    violet: [128, 0, 128],
    red: [255, 0, 0],
    silver: [192, 192, 192],
    white: [255, 255, 255],
    yellow: [255, 255, 0],
    transparent: [255, 255, 255]
}
})(jQuery); //* external script ends here

$("#square").animate({ "opacity" : "1" }); // v-- original screen
$("p#begin").animate({"opacity" : "1" });

var sqrs = [
    "#sq1",
    "#sq2",
    "#sq3",
    "#sq4"
]
var sqLength = sqrs.length;
var pageInt = 0;

for (i = 0; i < sqLength; i++) {
    $("#form"+[i+1]).hide();
    $(sqrs[i]).hide();
}

function beginScript() {        // function for initial 'square' div
    $("#square").addClass("removeLinkEffect");
    $("p#begin").fadeOut('slow', function() {       // removes 'click here to begin' text 
        $("#begin").remove();       // complete remove
        $(".square").animate({      // transforms initial square
            "height" : "40px"
        },
        1000,
        function() {
            $(".square").animate({
                "width" : "790px"
            },
            1000,
            function() {                                // v-- launches the View screens(divs)
                var loadText = "Loading, Please wait...";
                var pageText = "";

                $("#square").addClass("fontStyle").html(loadText);
                $("#square").animate({
                    "opacity" : "0"
                }, 1000,
                function () {
                    $("#square").remove();      // removes initial square
                });
                for (i = 0; i < sqLength; i++) {        // transforms View divs
                    $(sqrs[i]).show().animate({
                        "position" : "static",
                        "height" : "70px",
                        "marginTop" : "80px",
                        "opacity" : "1"
                    }, 1000);
                    pageText = "View " + [i+1];     // View #
                    $(sqrs[i]).addClass("fontStyle").addClass("addLinkEffect").html(pageText);
                }
            });
        });
    });
}

function fncSq1() {     // function for 'View 1'
    checkOpenDivs();
    $(sqrs[0]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[0]).html(
            "Text 1"
        ).animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form1").show();
    });
}
function fncSq2() {     // function for 'View 2'
    checkOpenDivs();
    $(sqrs[1]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[1]).html("Text 2").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form2").show();
    });
}
function fncSq3() {     // function for 'View 3'
    checkOpenDivs();
    $(sqrs[2]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[2]).html("Text 3").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form3").show();
    });
}
function fncSq4() {     // function for 'View 4'
    checkOpenDivs();
    $(sqrs[3]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
        $(sqrs[3]).html("Text 4").animate({     // launches 'View' window
            "height" : "290px",
            "width" : "790px",
            backgroundColor : "#ffffff",
            color : "black"
        });
        $("#form4").show();
    });
}

function checkOpenDivs() {      // checks for any other divs that have launched previously
    for (i = 0; i < sqLength; i++) {
        $(sqrs[i]).removeClass("removeLinkEffect").html("View " + [i+1]).animate({  // returns 'open' divs to original
            "position" : "static",
            "height" : "70px",
            "width" : "790px",
            "marginTop" : "80px",
            backgroundColor : "#ffaa00",
            color : "white"
        });
        $("#form"+[i+1]).hide();
    }
}

I wanted help with the following:

1) The Load times seems to be extremely Long around 20 seconds after I select one of the 'View' tabs

2) the page scroll doesn't seem to work

Any help will be appreciated!

score 0 · Answer 1 · answered Aug 27 '15 at 19:44

0

Your animations have a 1 second duration i see about 4 of them. So that's 4 seconds. $(".square").animate({ "height" : "40px" }, 1000,.... the "1000" represent the duration of your animation in milliseconds. Set it to a lower number.

answered Aug 27 '15 at 19:44

Jasper Giscombe

313
1
5

True, but my main problem starts as soon the program starts executing the "fncSq"#"' functions. The 4 seconds spent in animations are visible as they slow the animation to cover the time set to it. The 20 seconds i mentioned is the time it takes to load the script while nothing is happening. – Familiar Stranger Aug 27 '15 at 19:49

score 0 · Answer 2 · answered Aug 27 '15 at 19:47

0

Your square position is fixed, which is what is making it look as if your page isn't scrolling. You can remove the position style altogether and it should be fine.

#squarePos {
    position: fixed;
}

As for the load time, your animations are all running on 1 second timeouts. You can shorten the timeouts to speed up the time.

jsfiddle with changes

answered Aug 27 '15 at 19:47

robeau

31
1
2

Changing the position did fix the scrolling problem, thanks! Also, even after removing the 1 second timeouts it does seem to take around 15 seconds to animate the div in 'fncSq' functions – Familiar Stranger Aug 27 '15 at 19:56
Just to make sure - to 'remove' the timeouts, you actually have to set them to 0, as the default duration is 400ms. Are you still have such a long wait time after setting the durations to, say, 100 ms? – robeau Aug 27 '15 at 20:06
Indeed, reducing animation time does decrease the wait time to around 3 secs (after setting them to 100ms), but can you explain why does increasing animation time for the first div seem to alter the load time for the other divs? – Familiar Stranger Aug 28 '15 at 13:29

A few problems with my JQuery script

2 Answers2