We Keep Coding

How do I make all of a certain type of automatically generated sprites (that are on screen - or exist) move to a defined point on Phaser?

Very new to Phaser so I think I might be fundamentally misunderstanding something.
My game is supposed to be a clone of 'Jetpack Joyride' where the player jumps to avoid obstacles and collect coins etc.
I am currently trying to create a powerup which makes all of the coins on screen zoom towards the player (and therefore collect all of the coins).
I have used the this.physics.moveToObject function but it always gives me the error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'velocity')'.
My thinking is that this function can't pull multiple objects at once - or it isn't able to 'locate' all instances of 'coins'(perhaps because of the way I have set up the random generation of them).
This could also be something to do with a basic syntax error on my end.
One issue I have noticed is, I need to actually destroy the sprites as they go off the screen - but not sure this is related to the above.
Anyway, any help is appreciated!
const gameState = {
score: 0,
endGame: 0,
timer: 0,
text1: '',
text2: '',
music:'',
coinscore: 0,
coincollect:'',
speed: -400,
coins: '',
};
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' })
}
create() {
//Background
this.createParalaxBackgrounds();
//Add Timer
gameState.timer = this.time.addEvent({
delay: 999999,
paused: false
});
//Add Player
var playerAnimation = this.anims.create({
key: 'run',
frames: [{
key: 'player',
frame: "sprite6"
}, {
key: 'player',
frame: "sprite16"
}],
frameRate: 5,
repeat: -1
});
this.anims.create(playerAnimation);
this.player = this.physics.add.sprite(320, 300, 'Player').setScale(3).setDepth(11).play('run');
this.player.setSize(15, 16, false);
//Add Music
//gameState.music = this.sound.add('BackgroundMusic', { loop: true});
gameState.coincollect = this.sound.add('coin_collect', {loop : false});
//Add World Physics
this.physics.world.setBounds(0, 0, 800, 600);
this.player.setCollideWorldBounds(true);
this.player.setImmovable(true);
//Add Covid Physics
const covid = this.physics.add.group({immovable: true,
allowGravity: false});
covid.setDepth(11);
gameState.coins = this.physics.add.group({immovable: true, allowGravity: false});
gameState.coins.setDepth(11);
const magnets = this.physics.add.group({immovable: true, allowGravity: false})
magnets.setDepth(11);
//Add Test Text
gameState.text1 = this.add.text(700, 10, `Score = ${gameState.score}`);
gameState.text1.setOrigin(0.5, 0.5).setDepth(11);
gameState.text2 = this.add.text(400, 50, `Coins Collected = ${gameState.coinscore}`, { fontSize: '15px', fill: '#000000' });
gameState.text2.setOrigin(0.5, 0.5).setDepth(11)
//Random Score Used for Coin Spawn Generation
const CoinNumb = 500;
//Random Score Used for Enemy Spawn Generation
const RandomCovidGenNumb = 2000;
//Random Scored used for Magnet
const MagnetSpawnNumb = 4000;
// Enemy Spawn
function CovidGen () {
const yCoord = Math.random() * 600;
covid.create(800, yCoord, 'Covid').setDepth(11);
covid.setVelocityX(gameState.speed);
}
// Power Up Spawn
function MagnetGen() {
const yCoord = Math.random() * 600;
magnets.create(800, yCoord, 'coin_magnet').setDepth(11);
magnets.setVelocityX(gameState.speed);
}
// Adding Enemy Spawn Loop
const CovidGenLoop = this.time.addEvent({
delay: RandomCovidGenNumb,
callback: CovidGen,
callbackScope: this,
loop: true,
});
// Adding Coin Spawn
function CoinGen () {
const yCoord = Math.random() * 600;
gameState.coins.create(800, yCoord, 'coin').setDepth(11).setScale(0.25);
gameState.coins.setVelocityX(gameState.speed);
}
// Adding Coin Spawn Loop
const CoinGenLoop = this.time.addEvent({
delay: CoinNumb,
callback: CoinGen,
callbackScope: this,
loop: true,
});
const MagnetGenLoop = this.time.addEvent({
delay: MagnetSpawnNumb,
callback: MagnetGen,
callbackScope: this,
loop: true,
});
// Add Keyboard Input
const SpaceBar = this.input.keyboard.addKey('SPACE');
//Setting Enemy Spawn Velocity
//covid.setVelocityX(-300);
//Adding Collider between enemy and player + scene restart
this.physics.add.collider(this.player, covid, () => {
gameState.score += gameState.coinscore;
this.add.text(400, 300, `Game Over! \n Total Distance Travelled = ${gameState.score - gameState.coinscore} \n Total Coins Collected = ${gameState.coinscore} \n Total Score = ${gameState.score}`, { fontSize: '15px', fill: '#000000' }).setOrigin(0.5, 0.5).setDepth(11);
CovidGenLoop.destroy();
CoinGenLoop.destroy();
this.physics.pause();
gameState.timer.paused = true;
gameState.endGame += 1;
this.anims.pauseAll();
this.input.on('pointerup', () => {
gameState.endGame -= 1;
this.scene.restart();
gameState.timer.remove();
gameState.coinscore = 0;
this.anims.resumeAll();
});
})
//Adding Collider between player and coin
this.physics.add.collider(this.player, gameState.coins, (player, coin) => {
coin.destroy();
gameState.coinscore += 1;
gameState.coincollect.play();
})
//Adding Collider between player and magnet power up
this.physics.add.collider(this.player, magnets, (player, magnet, coin) => {
magnet.destroy();
this.physics.moveToObject(gameState.coins, this.player, 200);
})
}

Well the error is caused, because you are passing a group and not a gameobject to the function (details can befound in the documentation).
You could loop over all children/conis in the group, a call the function moveToObjecton each of them.
here a short demo (based on your code):
class GameScene extends Phaser.Scene {
constructor() {
super({ key: 'GameScene' });
}
loadCoins(coins){
for(let i = 0; i < 5; i++){
let yCoord = Math.random() * 200;
let coin = this.add.rectangle(400, yCoord, 15, 15, 0xFFFF00);
coin = this.physics.add.existing(coin);
coins.add(coin);
}
coins.setVelocityX(-100);
}
create() {
this.running = true;
this.message = this.add.text(10, 10, 'Click to activate Magnet');
this.player = this.add.rectangle(200, 100, 20, 20, 0xffffff);
this.physics.add.existing(this.player);
//Add World Physics
this.physics.world.setBounds(0, 0, 400, 200);
this.player.body.setCollideWorldBounds(true);
this.player.body.setImmovable(true);
let coins = this.physics.add.group({immovable: true, allowGravity: false});
this.loadCoins(coins);
this.input.on('pointerdown', _ => {
if(this.running){
coins.children.each(coin => {
// pull only coins infronz of the player
if(coin.x >= this.player.x){
this.physics.moveToObject(coin, this.player, 1500);
}
});
this.message.text = 'Click to reset';
} else {
this.loadCoins(coins);
this.message.text = 'Click to activate Magnet';
}
this.running = !this.running;
});
this.physics.add.collider(this.player, coins,
(player, coin) => {
coin.destroy();
});
}
}
const config = {
type: Phaser.AUTO,
width: 400,
height: 200,
scene: [ GameScene ],
physics: {
default: 'arcade',
}
};
const game = new Phaser.Game(config);
<script src="https://cdn.jsdelivr.net/npm/phaser#3.55.2/dist/phaser.js"></script>
Update:
I updated the code, so that "coins", that are behind the player won't be fulled. This can be tweeked to:
only pull coins in a specific distance
only pull coins that are visible
and so on

Js file doesn't work when imported in Angular project

I've used an HTML template in my angular project. Everything seems fine until I realized that some js files doesn't work which affected the whole project. The most important part is even the main.js file didn't work. My lect said to ignore the js and recreate which part doesn't work but I'm tryna use this file because there are many things in there.
Here are the codes in the main.js file, is there something here that is not compatible with Angular?
This is my first time using StackOverflow so I'm sorry if there's anything wrong with the way I'm asking
(function () {
"use strict";
/**
* Easy selector helper function
*/
const select = (el, all = false) => {
el = el.trim()
if (all) {
return [...document.querySelectorAll(el)]
} else {
return document.querySelector(el)
}
}
/**
* Easy event listener function
*/
const on = (type, el, listener, all = false) => {
let selectEl = select(el, all)
if (selectEl) {
if (all) {
selectEl.forEach(e => e.addEventListener(type, listener))
} else {
selectEl.addEventListener(type, listener)
}
}
}
/**
* Easy on scroll event listener
*/
const onscroll = (el, listener) => {
el.addEventListener('scroll', listener)
}
/**
* Navbar links active state on scroll
*/
let navbarlinks = select('#navbar .scrollto', true)
const navbarlinksActive = () => {
let position = window.scrollY + 200
navbarlinks.forEach(navbarlink => {
if (!navbarlink.hash) return
let section = select(navbarlink.hash)
if (!section) return
if (position >= section.offsetTop && position <= (section.offsetTop + section.offsetHeight)) {
navbarlink.classList.add('active')
} else {
navbarlink.classList.remove('active')
}
})
}
window.addEventListener('load', navbarlinksActive)
onscroll(document, navbarlinksActive)
/**
* Scrolls to an element with header offset
*/
const scrollto = (el) => {
let header = select('#header')
let offset = header.offsetHeight
let elementPos = select(el).offsetTop
window.scrollTo({
top: elementPos - offset,
behavior: 'smooth'
})
}
/**
* Toggle .header-scrolled class to #header when page is scrolled
*/
let selectHeader = select('#header')
if (selectHeader) {
const headerScrolled = () => {
if (window.scrollY > 100) {
selectHeader.classList.add('header-scrolled')
} else {
selectHeader.classList.remove('header-scrolled')
}
}
window.addEventListener('load', headerScrolled)
onscroll(document, headerScrolled)
}
/**
* Back to top button
*/
let backtotop = select('.back-to-top')
if (backtotop) {
const toggleBacktotop = () => {
if (window.scrollY > 100) {
backtotop.classList.add('active')
} else {
backtotop.classList.remove('active')
}
}
window.addEventListener('load', toggleBacktotop)
onscroll(document, toggleBacktotop)
}
/**
* Mobile nav toggle
*/
on('click', '.mobile-nav-toggle', function(e) {
select('#navbar').classList.toggle('navbar-mobile')
this.classList.toggle('bi-list')
this.classList.toggle('bi-x')
})
/**
* Mobile nav dropdowns activate
*/
on('click', '.navbar .dropdown > a', function(e) {
if (select('#navbar').classList.contains('navbar-mobile')) {
e.preventDefault()
this.nextElementSibling.classList.toggle('dropdown-active')
}
}, true)
/**
* Scrool with ofset on links with a class name .scrollto
*/
on('click', '.scrollto', function(e) {
if (select(this.hash)) {
e.preventDefault()
let navbar = select('#navbar')
if (navbar.classList.contains('navbar-mobile')) {
navbar.classList.remove('navbar-mobile')
let navbarToggle = select('.mobile-nav-toggle')
navbarToggle.classList.toggle('bi-list')
navbarToggle.classList.toggle('bi-x')
}
scrollto(this.hash)
}
}, true)
/**
* Scroll with ofset on page load with hash links in the url
*/
window.addEventListener('load', () => {
if (window.location.hash) {
if (select(window.location.hash)) {
scrollto(window.location.hash)
}
}
});
/**
* Preloader
*/
let preloader = select('#preloader');
if (preloader) {
window.addEventListener('load', () => {
preloader.remove()
});
}
/**
* Clients Slider
*/
new Swiper('.clients-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
320: {
slidesPerView: 2,
spaceBetween: 40
},
480: {
slidesPerView: 3,
spaceBetween: 60
},
640: {
slidesPerView: 4,
spaceBetween: 80
},
992: {
slidesPerView: 6,
spaceBetween: 120
}
}
});
/**
* Porfolio isotope and filter
*/
window.addEventListener('load', () => {
let portfolioContainer = select('.portfolio-container');
if (portfolioContainer) {
let portfolioIsotope = new Isotope(portfolioContainer, {
itemSelector: '.portfolio-item'
});
let portfolioFilters = select('#portfolio-flters li', true);
on('click', '#portfolio-flters li', function(e) {
e.preventDefault();
portfolioFilters.forEach(function(el) {
el.classList.remove('filter-active');
});
this.classList.add('filter-active');
portfolioIsotope.arrange({
filter: this.getAttribute('data-filter')
});
portfolioIsotope.on('arrangeComplete', function() {
AOS.refresh()
});
}, true);
}
});
/**
* Initiate portfolio lightbox
*/
const portfolioLightbox = GLightbox({
selector: '.portfolio-lightbox'
});
/**
* Portfolio details slider
*/
new Swiper('.portfolio-details-slider', {
speed: 400,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Testimonials slider
*/
new Swiper('.testimonials-slider', {
speed: 600,
loop: true,
autoplay: {
delay: 5000,
disableOnInteraction: false
},
slidesPerView: 'auto',
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
}
});
/**
* Animation on scroll
*/
window.addEventListener('load', () => {
AOS.init({
duration: 1000,
easing: "ease-in-out",
once: true,
mirror: false
});
});
})()```

You need to export this code logic, and import it in the files that you need it in.
Let's put all your code in a file called a.js.
Your file becomes
export default a = (function () {
"use strict";
...
let's create a file called b.js on the same level as a.js
And later you import it in b.js as follows
import a from "./a"
Note
Once you import a.js into any file, all the logic inside it will be automatically executed (you can see the function execution at the end) because the function self executes.

Reveal more text on click for multiple "show more" buttons. Duplicate didn't work

This opens more text when I click a button. Now I need more of these on a web page. I duplicated the function and renamed in const lines the names to menubutton2 and dropdownmenu3 but the second button doesn't work
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton');
const dropdwonMenu = $w('#dropdownMenu');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}
import wixAnimations from 'wix-animations';
$w.onReady(function() {
activeMenu();
});
function activeMenu() {
const menuButton = $w('#menuButton2');
const dropdwonMenu = $w('#dropdownMenu2');
const dropdownBoxHeight = 0;
const dropdownAnimation =
wixAnimations.timeline().add(dropdwonMenu, {
y: 0,
duration: 100
});
wixAnimations.timeline().add(dropdwonMenu, {
y: -
dropdownBoxHeight
}).play();
menuButton.onClick(() => {
dropdwonMenu.collapsed ? openMenu() : closeMenu();
});
dropdownAnimation.onReverseComplete(() => {
dropdwonMenu.collapse();
});
function openMenu() {
dropdwonMenu.expand().then(() => {
dropdownAnimation.play();
})
}
function closeMenu() {
dropdownAnimation.reverse();
}
}

disabling a scrollmagic controller in an object literal es6

i am having an issue trying to reenable a scrollmagic controller if it has been disabled before.
i want to have the logo color change only triggered if its a narrow viewport (if the logo is in the colored area) and disabled if its wide..that works so far
but if i resize the window to narrow again it won't reenable the controller..i tried to destroy and reset the controller as well but somehow it won't reenable the controller...
codepen (gsap and scrollmagic used):
https://codepen.io/HendrikEng/pen/owyBYz?editors=0011
js:
const mobile = {
controller: new ScrollMagic.Controller(),
changeLogo: {
init: () => {
console.log("init tweens an scrollmagic");
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
},
enterInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveOuter: () => {
TweenMax.fromTo(
".c-logo__outer",
1,
{ fill: "#fff" },
{ fill: "#4dabfc" }
);
},
leaveInner: () => {
TweenMax.fromTo(
".c-logo__inner",
1,
{ fill: "#4dabfc" },
{ fill: "#fff" }
);
}
};
const trigger = document.querySelectorAll(".js-change-logo");
trigger.forEach(id => {
const scene = new ScrollMagic.Scene({
triggerElement: id,
reverse: true,
triggerHook: 0.065,
duration: id.clientHeight
})
.on("enter", () => {
tweens.enterOuter();
tweens.enterInner();
})
.on("leave", () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
destroyTweens: () => {
console.log("kill tweens");
TweenMax.killTweensOf(".c-logo__outer");
TweenMax.killTweensOf(".c-logo__inner");
TweenMax.set(".c-logo__outer", { clearProps: "all" });
TweenMax.set(".c-logo__inner", { clearProps: "all" });
}
}
};
$(window).on("resize", function() {
var win = $(this); //this = window
if (win.width() <= 450) {
// reanble controller if disabledbed before - doesnt work
mobile.controller.enabled(true);
mobile.changeLogo.init();
} else {
// disable scrollmagic controller
mobile.controller.enabled(false);
// destroy tweens
mobile.changeLogo.destroyTweens();
}
}).resize();

#hendrikeng I hope you don't mind, but I changed your code quite a lot. I've found myself needing to do this exact thing numerous times recently, so I based a lot of it on my own work.
I think the largest issue was that you were running a lot of functions on every resize which is not very performant and also makes it difficult to keep track of what's initialised and what's not. Mine relies on an init_flag so that it is only setup once.
There are then methods to update (duration on resize if needed) and destroy.
https://codepen.io/motionimaging/pen/848366af015cdf3a90de5fb395193502/?editors=0100
const mobile = {
init_flag: false,
init: () => {
$(window).on('resize', function(){
const width = $(window).width();
if( width <= 450 ){
if(! mobile.init_flag ){
mobile.setup();
} else {
mobile.update();
}
} else {
if( mobile.init_flag ){
mobile.destroy();
}
}
});
},
setup: () => {
mobile.init_flag = true;
mobile.triggers = document.querySelectorAll('.js-change-logo');
const tweens = {
enterOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
},
enterInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveOuter: () => {
TweenMax.fromTo(
'.c-logo__outer',
1,
{ fill: '#fff' },
{ fill: '#4dabfc' }
);
},
leaveInner: () => {
TweenMax.fromTo(
'.c-logo__inner',
1,
{ fill: '#4dabfc' },
{ fill: '#fff' }
);
}
};
mobile.controller = new ScrollMagic.Controller();
mobile.triggers.forEach(el => {
el.scene = new ScrollMagic.Scene({
triggerElement: el,
reverse: true,
triggerHook: 0.065,
duration: el.clientHeight
})
.on('enter', () => {
tweens.enterOuter();
tweens.enterInner();
})
.on('leave', () => {
tweens.leaveOuter();
tweens.leaveInner();
})
.addIndicators()
.addTo(mobile.controller);
});
},
update: () => {
if( mobile.init_flag ){
mobile.triggers.forEach(el => {
el.scene.duration(el.clientHeight);
});
}
},
destroy: function(){
mobile.controller.destroy(true);
mobile.init_flag = false;
$('.c-logo > *').attr('style', '');
},
};
mobile.init();

Images from Backstretch(backstretch.js) in onepage creeping in to other page's backstretch in Durandal.js

I have used Durandal.js for my SPA. I need to have slideshow of Images as background in certain pages, for which I am using jquery-backstretch. I am fetching images from my web back-end. Everything works fine while navigating between pages in normal speed. But, when I navigate from one of the pages which has backstretch to another one with backstretch very rapidly, Images from backstretch in first page also creeps in second page. When I debugged, only the correct Images were being passed to second page. And also the slideshow is not running in a proper interval. So it must be both the backstretches being invoked.
Please tell me how I can stop the previous backstretch from appearing again. Here are the relevant code snippets.
This is my first page's(with backstretch) viewmodel code.
var id = 0;
var backstetcharray;
function loadbackstretchb() {
backstetcharray = new Array();
$.each(that.products, function (i, item)
{
if(item.ProductBackImage != "")
{
backstetcharray.push("xxxxxxxxxx" + item.ProductBackImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var location;
function callback() {
window.location.href = "#individual/"+id;
// this.deactivate();
};
return {
products: ko.observableArray([]),
activate: function () {
currentpage = "products";
that = this;
return http.get('yyyyyyyyyyyyyyy').then(function (response) {
that.products = response;
loadbackstretchb();
});
},
attached: function () {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
//setTimeout($(".mainmenucont").effect("slide", null, 1000), 1000);
$(document).on("click", ".ind1", function (e) {
// alert("ind1");
id = e.target.id;
// $(".mainmenucont").effect("drop", null, 2000, callback(e.target.id));
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, callback);
});
}
}
});
This is my second page's(with backstretch) viewmodel code.(To where I am navigating)
var recs;
var open;
var i, count;
var backstetcharray;
function loadbackstretchc() {
backstetcharray = new Array();
$.each(recs, function (i, item) {
if (item.BackgroundImage != "") {
backstetcharray.push("xxxxxxxxxx" + item.BackgroundImage);
}
}
);
$.backstretch(backstetcharray, { duration: 5000, fade: 1500 });
}
var that;
define(['plugins/http', 'durandal/app', 'knockout'], function (http, app, ko) {
var system = require('durandal/system');
var location;
function menucallback() {
window.location.href = location;
// this.deactivate();
};
return {
activate: function (val) {
currentpage = "recipes";
open = val;
that = this;
var pdts;
recs;
var recipeJson = [];
http.get('yyyyyyyyyyyyyy').then(function (response) {
pdts = response;
http.get('yyyyyyyyyyyy').then(function (response1) {
recs = response1;
loadbackstretchc();
$.each(pdts, function (i, item) {
var json = [];
$.each(recs, function (j, jtem) {
if (item.DocumentTypeId == jtem.BelongstoProduct) {
json.push(jtem);
}
});
jsonitem = {}
jsonitem["product"] = item.ProductName;
jsonitem["link"] = "#" + item.UmbracoUrl;
jsonitem["target"] = item.UmbracoUrl;
jsonitem["recipes"] = json;
recipeJson.push(jsonitem);
});
// that.products = recipeJson;
count = recipeJson.length;
i = 0;
return that.products(recipeJson);
});
});
},
attached: function(view) {
$(document).ready(function () {
$('.contacticon').on({
'mouseenter': function () {
$(this).animate({ right: 0 }, { queue: false, duration: 400 });
},
'mouseleave': function () {
$(this).animate({ right: -156 }, { queue: false, duration: 400 });
}
});
});
$(document).ready(function () {
$(".mainmenucont").effect("slide", null, 1000);
});
$(document).on("click", ".recipeclick", function (e) {
console.log(e);
location = "#recipe/" + e.target.id;
$('.mainmenucont').hide('slide', { direction: 'left' }, 1000, menucallback);
});
$(document).on("click", ".locclick", function (e) {
if (e.handled != true) {
if (false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(300);
}
$(this).next().slideToggle(300);
e.handled = true;
}
});
},
products: ko.observableArray([]),
expand: function() {
++i;
if (i == count) {
$("#" + open).addClass("in");
}
}
};
});