Page 14 of 14 FirstFirst ... 4121314
Results 131 to 133 of 133

Thread: Jasoop Toolbox

  1. #131
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    When a function is called, the object of which it's a method is passed to it as the implicit this argument. A function never inherits this from its declaring context; if a function isn't called as a method (bar() instead of foo.bar()), then this === window.
    Code:
    this.response = xmlHttp.responseText;
    You were expecting that to mean the Ajax object's response property, but it means xmlHttp.response. To fix this, put this line somewhere outside the troublesome function - maybe in the same scope as xmlHttp itself - and refer to that.response.
    Code:
    var that = this;
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  2. #132
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Oh yeah. I forgot about that. Thanks!

    -magicyte

  3. #133
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default Another Version

    Alright, everybody. I've made a newer version of Jasoop. Check out the code and the changes I made. Note that I took the ajax class out because I wanted to improve, or TRY to improve, Effect().

    jasoop.js - 4.94 kb

    Code:
    var Effect = (function() {
      var durations = {
        "very fast": 500,
        "fast": 750,
        "normal": 1000,
        "slow": 1500,
        "very slow": 2000
      },
      styles = [],
      counter = 0,
      fader = setTimeout(function() {
        return false;
      },
      10);
      function Effect(el) {
        this.element = document.getElementById(el);
        this.style = this.element.style;
        this.visible = true;
        this.opacity = 100;
        this.queue = false;
        this.autodelete = false;
        this.loop = false;
        this.pause = true;
      }
      Effect.prototype = {
        move: function(x, y) {
          this.style.position = "absolute";
          this.style.left = x + "px";
          this.style.top = y + "px";
        },
        toggle: function() {
          if (this.style.display == "none") {
            this.style.display = "block";
            this.visible = true;
          } else {
            this.style.display = "none";
            this.visible = false;
          }
        },
        css: function(options) {
          var ss = (options.replace(/ /g, "")).split(";");
          var privates = {};
          for (var i = 0; i < ss.length; ++i) {
            var s = ss[i].split(":");
    	  while(1) {
    	    if(s[0].indexOf("-") != -1) {
    	      s[0] = s[0].replace(new RegExp(s[0].substr(s[0].indexOf("-"), 2), "g"), (s[0].substr(s[0].indexOf("-"), 2))[1].toUpperCase());
                }
    	    else {
    	      break;
    	    }
              }
            this.style[s[0]] = s[1];
          }
        },
        fadeIn: function(inc, dur) {
          this.fadeTo(100, inc, dur);
        },
        fadeOut: function(inc, dur) {
          this.fadeTo(0, inc, dur);
        },
        fadeTo: function(pt, inc, dur) {
          if (inc > 0) {
            if (this.opacity > pt) {
              clearTimeout(fader);
              this.opacity -= inc;
              fader = setTimeout((function(effect) {
                return function() {
                  if ((effect.opacity - inc) >= pt) effect.fadeTo(pt, inc, dur);
                  else effect.opacity = pt;
                };
              })(this), (typeof dur == "string") ? Math.floor(durations[dur] / (100 / Math.abs(inc))) : Math.floor(dur / (100 / Math.abs(inc))));
            } else {
              if (this.opacity < pt) {
                clearTimeout(fader);
                this.opacity += inc;
                fader = setTimeout((function(effect) {
                  return function() {
                    if ((effect.opacity + inc) <= pt) effect.fadeTo(pt, inc, dur);
                    else effect.opacity = pt;
                  };
                })(this), (typeof dur == "string") ? Math.floor(durations[dur] / (100 / Math.abs(inc))) : Math.floor(dur / (100 / Math.abs(inc))));
              }
            }
          }
          if (this.opacity < 0) this.opacity = 0;
          if (this.opacity > 100) this.opacity = 100;
          this.style.filter = "alpha(opacity = " + this.opacity + ")";
          this.style.KHTMLOpacity = this.opacity / 100;
          this.style.MozOpacity = this.opacity / 100;
          this.style.opacity = this.opacity / 100;
        },
        compute: function(options) {
          var ss = (options.replace(/ /g, "")).split(";");
          var privates = {};
          for (var i = 0; i < ss.length; ++i) {
            var s = ss[i].split(":");
            while(1) {
    		  if(s[0].indexOf("-") != -1) {
    		    s[0] = s[0].replace(new RegExp(s[0].substr(s[0].indexOf("-"), 2), "g"), (s[0].substr(s[0].indexOf("-"), 2))[1].toUpperCase());
    	      }
              else {
    		    break;
    		  }
            }
    		privates[s[0]] = [s[0], s[1]];
          }
          if (arguments[1] !== undefined) privates.callback = arguments[1];
          styles.push(privates);
        },
        start: function(dur) {
          if (!this.pause) {
            if (counter < styles.length) {
              for (var i in styles[counter]) {
                this.style[styles[counter][i][0]] = styles[counter][i][1];
              }
              if (styles[counter].callback !== undefined)(styles[counter].callback).apply(this);
              setTimeout((function(effect) {
                return function() {
                  effect.start(dur);
                };
              })(this), (typeof styles[counter].delay == "string") ? Math.floor(durations[dur] / styles.length) : Math.floor(dur / styles.length));
              counter++;
            } else {
              if (this.autodelete) this.reset();
              else counter = 0;
              if (!this.autodelete && this.loop) this.start(dur);
            }
          } else {
            this.pause = false;
          }
        },
        stop: function() {
          this.pause = true;
        },
        reset: function() {
          styles = [];
          counter = 0;
        },
        addEvent: function(ev, response) {
    	  if (this.element.addEventListener) this.element.addEventListener(ev, response, false);
          else if (this.element.attachEvent) {
            var res = function() {
              response.apply(this.element);
            };
            this.element.attachEvent("on" + ev, res);
          } else this.element["on" + ev] = response;
        },
        addEvents: function(evs, response) {
          for (var i = 0; i < evs.length; ++i) this.addEvent(evs[i], response);
        },
        constructor: Effect
      };
      return Effect;
    })();
    - NEW Added 'css' function to set styles easily

    - NEW Added 'fadeTo' function so that the user can easily fade to a specific opacity in a certain duration with a specific incrementation.

    - Seperated 'fade' function into two functions (fadeIn and fadeOut) and made it so that it fades smoothly and takes an overall duration, e.g. 1000 milliseconds as the duration and 100 as the opacity range. Opacity is thus changed every 10 milliseconds. They both use 'fadeTo' in order to execute.

    - Improved (or tried to ) 'compute' function so that you can also add in a function that will execute when compute should (note function is optional: Effect.compute(options [, func]);). Also, I took away the duration parameter so that you can give an overall duration in the 'start' function.

    - Improved 'start' function so that it takes overall duration. I also allowed it to execute the extra function in 'compute'

    Anyway, that's pretty much all that I did. I know it isn't much, but right now, I'm asking that you guys give me suggestions on what to fix or what I could do with Jasoop. Soon, I will be adding an 'ease' function, similar to the effects of 'tweening' height, width, position, whatever in jQuery and MooTools. I may also make a 'tween' function, similar to the 'tween/transition' function in MooTools, where the current styles are smoothly transitioned into the new styles. Again, please, feedback is the best thing a programmer can get. Any comments, suggestions, and questions are highly wanted. Thank you very much!

    (Also, the code is kinda jumbled, I guess. Let me know if there are better ways to accomplish what I am doing. Thanks again!)

    Edit: I'm also planning to use a new boolean 'queue' variable so that if the user wants to queue just about anything Effect provides, they can. Yet, they have the choice to queue or not.
    Last edited by magicyte; 03-01-2009 at 07:00 PM.

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
  •