We Keep Coding

how to control speed in this javascript toggle

i want control speed in this function , please help me!
<script>
function toggle(target)
{
var artz = document.getElementsByClassName('showhidemenu');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
// hide all
for(var i=0;i<artz.length;i++)
{
artz[i].style.display = 'none';
}
// toggle current
targ.style.display = isVis?'none':'block';
return false;
}
</script>

If you just want a delay, try this:
function toggle(target, milliseconds)
{
setTimeout(function() {
var artz = document.getElementsByClassName('showhidemenu');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
// hide all
for(var i=0;i<artz.length;i++)
{
artz[i].style.display = 'none';
}
// toggle current
targ.style.display = isVis?'none':'block';
return false;
}, milliseconds);
}
You'll lose the return value, though.

Call your toggle function with an timeout as per your requirement
Use
window.setTimeout(toggle(),2000);
This will call your toggle function after a delay of 2000 ms.

cant show this function with animation ??
function toggle(target, milliseconds)
{
setTimeout(function() {
var artz = document.getElementsByClassName('showhidemenu');
var targ = document.getElementById(target);
var isVis = targ.style.display=='block';
// hide all
for(var i=0;i<artz.length;i++)
{
artz[i].style.display = 'none';
}
// toggle current
targ.style.display = isVis?'none':'block';
return false;
}, milliseconds);
}

Cocos2d-js sprite array touch event

var GameLayer = cc.Layer.extend({
ball:[],
number:[],
label:[],
numberofballs:8,
_order:0,
ctor:function () {
this._super();
this.init();
},
init:function(){
this._order=0;
cc.log(this._order);
this.setBall();
},
setCoordX:function(){
var coordX=Math.random()*1000%330+50;
cc.log(coordX);
return coordX;
},
setCoordY:function(){
var coordY = Math.random()*700%700+50;
cc.log(coordY);
return coordY;
},
onTouchBegan:function(touch, event){
var target = event.getCurrentTarget();
var PosInScreen = target.convertToNodeSpace(touch.getLocation());
var Size = target.getContentSize();
var rect = cc.rect(0, 0, Size.width, Size.height);
if(cc.rectContainsPoint(rect, PosInScreen)){
if(target.getTag()==this._order) {
target.removeFromParent();
this._order++;
}
}
return false;
},
setBall:function(){
for(var i=0;i<this.numberofballs;i++){
this.number.push(Math.round(Math.random()*100));
}
this.number.sort(function(left,right){
return left-right;
});
for(var i=0;i<this.numberofballs;i++){
var eventListener = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: this.onTouchBegan});
this.ball[i]=cc.Sprite.create(res.ball_png);
this.ball[i].x=this.setCoordX();
this.ball[i].y=this.setCoordY();
this.ball[i].setTag(i);
this.addChild(this.ball[i]);
var label=new cc.LabelTTF(this.number[i],"Ariel",25);
label.x=50;
label.y=55;
this.ball[i].addChild(label);
cc.eventManager.addListener(eventListener, this.ball[i]);
}
}
});
var GameScene = cc.Scene.extend({
onEnter:function () {
this._super();
var layer = new GameLayer();
this.addChild(layer);
}
});
This is my whole code.
First, in setBall function, I added
cc.eventManager.addListener(eventListener, this.ball[i]);
I want to make touch event with this.ball array directly.
Second,in onTouchBegan function, this._order is null.
I don't know why.
How can I fix it?

this._order is undefined because in onTouchBegan function this is instance of cc.EventListener class.
If You want to make this to be instance of GameLayer, You can bind it:
var eventListener = cc.EventListener.create({
event: cc.EventListener.TOUCH_ONE_BY_ONE,
swallowTouches: true,
onTouchBegan: this.onTouchBegan.bind(this)});

How to pause a .scrollTop() animation on mouseover? (jsfiddle included)

I am using the following jquery code to create a slow scrolling animation.
http://jsfiddle.net/fhj45f21/
Unfortunately I am having difficulties pausing the animation on mouse over. Could someone please have a look and give me a hint?
function Scroller(y){
this.times = 0;
this.moveInter = 0;
this.backInter = 0;
this.moveBack = function () {
var self = this;
clearInterval(this.moveInter);
this.backInter = setInterval(function () {
self.times -= 5;
y.scrollTop(self.times);
if (self.times == 0) {
return self.startMove();
}
}, 1);
}
this.move = function() {
var self = this;
this.moveInter = setInterval(function () {
self.times++;
y.scrollTop(self.times);
if (self.times == 1200) {
return self.moveBack();
}
}, 50);
}
this.startMove = function() {
this.times = 0;
var self = this;
if (this.backInter != null) {
clearInterval(this.backInter);
}
window.setTimeout(function () {
self.move();
}, 1000);
}
}
jQuery('.textBox').each(function () {
y = jQuery(this);
var scroller = new Scroller(y);
scroller.startMove();
});
Thanks a bunch!

Here you go: http://jsfiddle.net/nxk4vseq/
add an y.hover handler with functions for mousein and mouseout
var scrl=this;
y.hover(function(){
clearInterval(scrl.moveInter);
},function(){
scrl.move();
});

Clear interval from within a closure

I'm trying to clear an interval when the user hovers over an element and then start it up again when they hover off an element. I think this is a closure but I'm not sure, hopefully my code will make sense what I'm trying to do.
var rotatorInterval = function(elem){
var interval = setInterval(function(){
var active = elem.find('.dot.active');
if(active.is('.dot:last-of-type',elem)){
elem.find('.dot').first().click();
}else{
active.next().click();
}
},6000);
interval;
return interval;
};
if($('.rotator').length){
$('.rotator').each(function(){
var self = $(this);
rotatorInterval(self);
self.find('.slide, .dot').on('mouseenter',function(){
console.log('hovered');
clearInterval(interval);
});
});
}
I tried returning the interval from that closure but when I hovered it said interval (the name of the variable I returned) is not defined, so it's like it didn't return it or something.

You just have to actually return the interval reference somewhere
var rotatorInterval = function (elem) {
var interval = setInterval(function () {
var active = elem.find('.dot.active');
if (active.is('.dot:last-of-type', elem)) {
elem.find('.dot').first().click();
} else {
active.next().click();
}
}, 6000);
return interval;
};
if ($('.rotator').length) {
$('.rotator').each(function () {
var self = $(this);
var return_interval = rotatorInterval(self);
self.find('.slide, .dot').on('mouseenter', function () {
clearInterval(return_interval);
});
});
}

Passing function response (callback) as variable to another function

See below. I'm trying to pass function(response) as a variable to be used in a progress bar function. That's the idea anyways. How do I call back the data = response to the var i = data in this case?
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
var data = 0;
setInterval(function () {
$('#divToRefresh').load('usercounter.php', function (response) {
data = response;
});
}, 100);
window.onload = function () {
var Animator = new function () {
var parent = document.getElementById('container');
var element = document.getElementById('test');
var target = document.getElementById('message');
this.move = function () {
var i = data;
var width = 0;
var timer = window.setTimeout(function () {
i += 1;
element.style.width = width + i + 'px';
}, 10);
};
};
Animator.move();
};
});

Not sure how your animator works or how those elements interact, but I'm guessing your goal is to call move periodically to refresh it's current status? So put that in the interval, and then make the retrieval of the count part of the animation. Not sure if that'll work for your scenario.
$(document).ready(function () {
$.ajaxSetup({
cache: false
});
window.onload = function () {
var Animator = new function () {
var parent = document.getElementById('container');
var element = document.getElementById('test');
var target = document.getElementById('message');
this.move = function () {
$('#divToRefresh').load('usercounter.php', function (response) {
var i = response;
var width = 0;
var timer = window.setTimeout(function () {
i += 1;
element.style.width = width + i + 'px';
}, 10);
});
};
};
Animator.move();
setInterval(function () {
Animator.move();
}, 100);
};
});