Using Json To Run A Slideshow?

[tinfanide]

var curPic = 0;var fadeTimer;var opacStep = 0.5;var curOpac = 10;var dirn = -1; function autoImage(){                    if(fadeTimer){clearInterval(fadeTimer);}            fadeTimer = setInterval(setOpacity,100);                                    function setOpacity() {                curOpac += opacStep * dirn;                            if (curOpac < 0){                    swapImage();                    curOpac = 0;                    dirn = 1;                    autoImage();                    return;                        }                               if (curOpac > 10){                    curOpac = 10;                    clearInterval(fadeTimer);                    dirn = -1;               	                    return;                        }                            if (document.getElementById("img").style.opacity=="string"){               	 document.getElementById("img").style.opacity = curOpac/10;                        }                else {                   document.getElementById("img").style.filter = 'alpha(opacity=' + curOpac*10 + ')';               	 document.getElementById("img").style.MozOpacity = curOpac/10;                        }                }                                                function swapImage(){                curPic = (++curPic > images.length-1) ? 0 : curPic;           	 document.getElementById("img").src = images[curPic];                    }                                    }window.onload = function(){    autoImage();    }

The above works.

var slideshow = {        images : ["http://www.blogsdna.com/wp-content/uploads/2011/03/Google-labs.png","http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png","http://www.techlifeweb.com/facebook_logo.jpg","http://scm-l3.technorati.com/10/05/10/12671/twitter-logo-5.jpg","http://www.thetechherald.com/media/images/201115/Adobe_2.jpg","http://www.easyquestion.net/learninginadigitalworld/wp-content/uploads/2009/06/ms-office-logo.jpg"],            curOpac: 10,    opacStep: 0.5,    dirn: -1,        setOpacity: function(){                this.curOpac += this.opacStep * this.dirn;                if (this.curOpac < 0) {            this.swap;            this.curOpac = 0;            this.dirn = 1;            slideshow;            return;            }                if (this.curOpac > 10) {            this.curOpac = 10;            this.dirn = -1;            return;            }        if (document.getElementById("img").style.opacity=="string"){                    document.getElementById("img").style.opacity = this.curOpac/10;                        }                else {                    document.getElementById("img").style.filter = 'alpha(opacity=' + this.curOpac*10 + ')';                    document.getElementById("img").style.MozOpacity = this.curOpac/10;                        }                },            curPic: 0,    swap: function(){        this.curPic = (++this.curPic > this.images.length) ? 0 : this.curPic ;        document.getElementById("img").src = this.images[this.curPic];         },    };window.onload = function(){        fadeTimer = setInterval(function(){slideshow.setOpacity()},5000);    }

And I want to use JSON to re-make the slideshow. But it does not work.FF Console reports:

[18:49:55.499] Use of getAttributeNodeNS() is deprecated. Use getAttributeNS() instead. @ http://lifelearning.xtreemhost.com/lab/js_slideshow/slideshow-auto-crossfade-xmlData.html

[thescientist]

what do you mean by using JSON to re-make the slideshow? JSON is change a data-interchange format, and a convention for object notation in JS. it doesn't do anything on it's own. Unless you are getting a JSON response from a service or script you've made defining a data structure for your slideshow, and you are having problems integrating that...? edit: You are trying to use an object like it's a function. what is your intention?

[justsomeguy]

I don't think that error is from that code. There are a couple other errors though. First, these lines don't do anything: this.swap;slideshow; Second, what are you trying to check here: if (document.getElementById("img").style.opacity=="string"){ Why would the opacity be set to the value "string"?

[tinfanide]

<script>var json = {        id: "div",    str: "Happy Friday!",        display: function(id){        this.setObject(id);        document.getElementById(id).innerHTML = this.str;                },            setObject: function(id){                document.getElementById(id).style.color = "red";        document.getElementById(id).style.position = "absolute";        document.getElementById(id).style.left = "0px";        document.getElementById(id).style.top = "100px";                },        animate: function(id){                document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";                setTimeout(function(){this.animate()},1);                }        }    window.onload = function(){    document.getElementById("input").onclick = function(){        json.display(json.id);        };    document.getElementById("move").onclick = function(){        json.animate(json.id);        }    }    </script>

I singled out the problem with setInterval and tried to test if I've been doing wrong with the syntax of using variables as a functionThe problem reported with regard to the use of setTimeout is

this.animate is not a function

So can anyone tell me how to use the animation within a variable function?

[Ingolme]

I don't understand why it's doing that. "this" should refer to the object that contains the function. In the worst case, instead of "this.animate()" use "json.animate()" You seem to have forgotten to pass "id" to the function: this.animate(id) Also, are you sure you want to run the function 1000 times per second?

[tinfanide]

I don't understand why it's doing that. "this" should refer to the object that contains the function. In the worst case, instead of "this.animate()" use "json.animate()" You seem to have forgotten to pass "id" to the function: this.animate(id) Also, are you sure you want to run the function 1000 times per second?

Yes, ya're right. I always put them all over the places. But the console never tells me how to fix it. Just told me it is not a function. Really depends on one's knowledge.

var move;var json = {id: "div",str: "Happy Friday!",display: function(id){  this.setObject(id);  document.getElementById(id).innerHTML = this.str;   },setObject: function(id){   document.getElementById(id).style.color = "red";  document.getElementById(id).style.position = "absolute";  document.getElementById(id).style.left = "0px";  document.getElementById(id).style.top = "100px";   },animate: function(id){  clearTimeout(move);  document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";   move = setTimeout(function(){json.animate(id)},1000);   }}window.onload = function(){document.getElementById("input").onclick = function(){  json.display(json.id);  };document.getElementById("move").onclick = function(){  json.animate(json.id);  }}

I've set clearTimeout and used a variable to store it.I wanna ask if in JSON I can put the var move; inside the json {} (don't know the jargon). If so, how? I cannot use var move inside.

[thescientist]

{} - is called an object and, yes you can, just like id and str. you just have to namespace it appropriately when referencing it, i.e. alert(json.move)

[tinfanide]

var json = {id: "div",str: "Happy Friday!",// variablemove: "",// variabledisplay: function(id){  this.setObject(id);  document.getElementById(id).innerHTML = this.str;  },setObject: function(id){  document.getElementById(id).style.color = "red";  document.getElementById(id).style.position = "absolute";  document.getElementById(id).style.left = "0px";  document.getElementById(id).style.top = "100px";  },animate: function(id){  clearTimeout(move);  document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";  move = setTimeout(function(){json.animate(id)},1000);  }}window.onload = function(){document.getElementById("input").onclick = function(){  json.display(json.id);  };document.getElementById("move").onclick = function(){  json.animate(json.id);  }}

Does it mean that? namespacing?

[thescientist]

well, before it was a global variable, so you could just access move anywhere.i.e.alert(move) once you move it within the context of an object, you just have to reference it appropriately, like in my example.alert(josn.move) it was just a head up to double check your references, like it appears you should be doing here

window.onload = function(){document.getElementById("input").onclick = function(){  json.display(json.id);  };document.getElementById("move").onclick = function(){  json.animate(json.id);  //json.animate(json.move)  }}

[tinfanide]

Sorry, I cannot get what ya meant.

var json = {id: "div",str: "Happy Friday!",// variablemove: "",// variabledisplay: function(id){  this.setObject(id);  document.getElementById(id).innerHTML = this.str;  },setObject: function(id){  document.getElementById(id).style.color = "red";  document.getElementById(id).style.position = "absolute";  document.getElementById(id).style.left = "0px";  document.getElementById(id).style.top = "100px";  },animate: function(id){  clearTimeout(move);  document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";  move = setTimeout(function(){json.animate(id)},1000);  }}alert(move);alert(json.move);window.onload = function(){document.getElementById("input").onclick = function(){  json.display(json.id);  };document.getElementById("move").onclick = function(){  json.animate(json.id);  }}

Just return undefined.And I cannot put it within the json object.And I wanna ask againhow can I define the variable move within the json object?

var json = {// how can I define it?// I cannot use var move;}

[Ingolme]

This code is working for me:

var json = {  move : "value"}alert(json.move);

For this method, you have to reference "move" as "json.move"

animate: function(id){  clearTimeout(json.move);  document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";  json.move = setTimeout(function(){json.animate(id)},1000);}

The clearTimeout isn't required since you're not trying to interrupt the timed event.

[tinfanide]

This code is working for me:

var json = {  move : "value"}alert(json.move);

For this method, you have to reference "move" as "json.move"

animate: function(id){  clearTimeout(json.move);  document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";  json.move = setTimeout(function(){json.animate(id)},1000);}

The clearTimeout isn't required since you're not trying to interrupt the timed event.

Yes, both work.

    animate: function(id){        clearTimeout(this.move);        document.getElementById(id).style.left = parseInt(document.getElementById(id).style.left) + 1 + "px";        // this.move = json.move;        // With this, no need to set the variable outside the json object (e.g. var move)        this.move = setTimeout(function(){json.animate(id)},100);                }        }

I just have to specific the scope of the variable. I can use this.move as well.