Develop Reference

window.location,hash gives problem when clicking the browser back button in React JS

I am working on someone else written code.
We are loading content from the database depending on the scroll of the user. When the user scrolls the data keeps loading until all data is retrieved from the DB. The client wants to see the section number in which Data is being loaded.
To show the number in the URL, the previous developer has used window.location.hash() but because of this, we are not able to take the user to the previous page when they click on the back button. Instead, it keeps on jumping on the page for few times and then goes back.
I cannot understand what else do i need to do to fix it. Below is the code:
import React, { Component } from 'react';
import ComponentView from './view';
import axios from 'axios';
import { connect } from 'react-redux';
import { HashLink as Link } from 'react-router-hash-link';
import { createAction,ActionNames } from '../../redux/actions/index';
/**
* #name Product Grid Component
* #type Component
* #author Inderdeep Singh
*/
class Main extends Component {
/**
* Constructor
* #param props
*/
state = {
items: [],
isLoading: true,
cursor: 0
}
constructor(props){
super(props);
this.pageSize = 10;
this.state = {
data:[],
link:'',
loading:true,
items: [],
isLoading: false,
loadAll:false,
cursor: 0,
arrSize: 12,
productsLen:0,
section:0,
scrollUp:0,
url:'',
sectionSize:'',
sectionSizeLim:1
}
// if(props.query){
// this.getProducts();
// }
this.handleOnScroll = this.handleOnScroll.bind(this);
}
componentWillMount() {
// this.loadMore()
// console.log(this.props);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleOnScroll);
}
/**
* Component Did Mount
*/
componentDidMount(){
var url = window.location.href;
this.setState({url:url})
if(url.indexOf('#')>-1){
if(url.indexOf('kategori')>-1){
url = url.split('/');
var pageNum = url[6];
var catName = url[4];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= pageNum){
window.scrollTo(0, pageNum * 1930);
var fact ='/kategori/'+catName+'/#/page/'+timesRun;
window.location.hash = "/"+ss;
// history.pushState(null,null,fact);
}
else{
clearInterval(Scrolling)
}
},1000);
}
else if(url.indexOf('produkt')>-1){
url = url.split('/');
var pageNum = url[6];
var catName = url[4];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= pageNum){
window.scrollTo(0, pageNum * 1930);
var fact ='/produkt/'+catName+'/#/page/'+timesRun;
window.location.hash = "/"+ss;
// history.pushState(null,null,fact);
}
else{
clearInterval(Scrolling)
}
},1000);
}
else{
url = url.split('#');
url = url[1].split('/');
url = url[2];
var timesRun = 0;
var Scrolling = setInterval(function () {
timesRun += 1;
if(timesRun <= url){
window.scrollTo(0, url * 1930);
// history.pushState(null,null,'/#/page/'+timesRun);
window.location.hash = "/"+ss;
}
else{
clearInterval(Scrolling)
}
},1000);
}
}
const {emitter} = this.props;
emitter.addListener("REFRESH_PRODUCTS",(query)=>{
this.getProducts(1,query)
})
this.setState({data:this.props.data})
// this.loadMore()
window.addEventListener('scroll', this.handleOnScroll);
this.doQuery();
}
componentWillReceiveProps(newProps){
if(JSON.stringify(this.props.query)!=JSON.stringify(newProps.query)){
this.getProducts(1,newProps.query)
}
// console.log(this.state.arrSize);
}
// scrollIt=() => { window.scrollTo(0, 1000)}
doQuery = () => {
this.setState({ isLoading: true, error: undefined })
axios.post('/getProducts')
.then((res) => {
// console.log(parseInt(res.data.results.length/12))
this.setState({
// items: [...state.items, ...res.items],
// cursor: res.cursor,
// isLoading: false
// newData: this.state.newData.slice().concat(res.data)
// newData: this.state.olddata.concat(res.data.results)
productsLen:res.data.results.length,
sectionSize:parseInt(res.data.results.length/12)
});
})
}
handleOnScroll() {
var self = this;
function callURL(ss){
// var self = this;
var url = window.location.href;
setTimeout(
self.setState({
arrSize: self.state.arrSize + 12,
isLoading: true
}), 3000);
var url = window.location.href;
if(self.state.sectionSizeLim<=self.state.sectionSize){
self.setState({
sectionSizeLim: self.state.sectionSizeLim + 1,
})
}
if (self.state.arrSize <= self.props.product_list.length) {
var sect = self.state.section;
if (url.indexOf('#') > -1) {
url = url.split('#');
url = url[1].split('/');
url = url[2];
if (sect <= url) {
sect = sect + 1;
}
}
else {
sect = sect + 1;
}
self.setState({
isLoading: true,
section: sect
})
}
else {
self.setState({
isLoading: false,
loadAll: true
})
}
if(ss==0){
if (self.state.url.indexOf('kategori') > -1) {
var url = self.state.url.split('/');
var fact = '/kategori/' + url[4] ;
// history.pushState(null, null, fact);
window.location.hash = "/"+ss;
// window.location.hash = '';
// window.location.href.split('#')[0];
// window.history.pushState("object or string", "Title", fact,"/");
}
else if (self.state.url.indexOf('produkt') > -1) {
var url = self.state.url.split('/');
var fact = '/produkt/' + url[4] ;
// history.pushState(null, null, fact);
window.location.hash = "/"+ss;
// window.location.hash = '';
// window.location.href.split('#')[0];
// window.history.pushState("object or string", "Title", fact,"/");
}
else {
// history.pushState(null, null, '/');
var fact = '/' + ss ;
window.location.hash = "/"+ss;
// window.history.pushState("object or string", "Title", "/");
}
}
else{
if (self.state.url.indexOf('kategori') > -1) {
var url = self.state.url.split('/');
var fact = '/kategori/' + url[4] + '/page/' + ss;
// history.pushState(null, null, fact);
// window.location.hash = fact;
window.location.hash = "/"+ss;
}
else if (self.state.url.indexOf('produkt') > -1) {
var url = self.state.url.split('/');
var fact = '/produkt/' + url[4] + '/page/' + ss;
// history.pushState(null, null, fact);
// window.location.hash = fact;
window.location.hash = "/"+ss;
}
else {
// history.pushState(null, null, '/#/page/' + ss);
window.location.hash = "/"+ss;
}
}
}
var h = ($("html").scrollTop());
if(h == 0 ){
callURL(0);
}
else if(h >= 0 && h <= 1930){
callURL(0);
}
else if (h >= 1930 && h <= 3860) {
callURL(1)
}
else if (h >= 3860 && h <= 5790) {
callURL(2)
}
else if (h >= 5790 && h <= 7720) {
callURL(3)
}
else if (h >= 7720 && h <= 9650) {
callURL(4)
}
else if (h >= 9650 && h <= 11580) {
callURL(5)
}
else if (h >= 11580 && h <= 13510) {
callURL(6)
}
else if (h >= 13510 && h <= 15440) {
callURL(7)
}
else if (h >= 15440 && h <= 17370) {
callURL(8)
}
else if (h >= 17370 && h <= 19300) {
callURL(9)
}
else if (h >= 19300 && h <= 21230) {
callURL(10)
}
else if (h >= 21230 && h <= 23160) {
callURL(11)
}
else if (h >= 23160 && h <= 25090) {
callURL(12)
}
else if (h >= 25090 && h <= 27020) {
callURL(13)
}
else if (h >= 27020 && h <= 28950) {
callURL(14)
}
else if (h >= 28950 && h <= 30880) {
callURL(15)
}
else if (h >= 30880 && h <= 32810) {
callURL(16)
}
else if (h >= 32810 && h <= 34740) {
callURL(17)
}
else if (h >= 34740 && h <= 36670) {
callURL(18)
}
else if (h >= 36670 && h <= 38600) {
callURL(19)
}
else if (h >= 38600 && h <= 40530) {
callURL(20)
}
else if (h >= 40530 && h <= 42460) {
callURL(21)
}
else if (h >= 42460 && h <= 44390) {
callURL(22)
}
else if (h >= 44390 && h <= 46320) {
callURL(23)
}
else if (h >= 46320 && h <= 48250) {
callURL(24)
}
else if (h >= 48250 && h <= 50180) {
callURL(25)
}
else if (h >= 50180 && h <= 52110) {
callURL(26)
}
else if (h >= 52110 && h <= 54040) {
callURL(27)
}
else if (h >= 54040 && h <= 55970) {
callURL(28)
}
else if (h >= 55970 && h <= 57900) {
callURL(29)
}
else if (h >= 57900 && h <= 59830) {
callURL(30)
}
else if (h >= 59830 && h <= 61760) {
callURL(31)
}
else{
console.log(h);
}
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
var scrollHeights = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
scrollHeight = scrollHeight - 1000;
var clientHeight = document.documentElement.clientHeight || window.innerHeight;
var scrolledToBottom = Math.ceil(scrollTop + clientHeight) >= scrollHeight;
var scrollToTop = Math.ceil(scrollTop - clientHeight) >= scrollHeight;
}
/**
* Get products
* #param page
*/
getProducts(page,customQuery){
page = page || 1;
// console.log(page);
const {getProducts,query} = this.props;
let obj = {
...query,
...customQuery,
query : {
...(query || {}).query,
...(customQuery || {}).query
},
// limit : this.pageSize,
limit : 5000,
// skip : (page-1)*this.pageSize
skip : 0
};
obj.query = {
...obj.query,
state : 'published'
}
getProducts(obj).then(action=>{
// // if(page>1){
// document.getElementById('product-grid').scrollIntoView();
// // }
})
}
/**
* Render the view
* #returns {*}
*/
render() {
return (ComponentView.bind(this))();
}
}
/**
* Bind Actions
* #param dispatch
* #returns Object
*/
function bindAction(dispatch) {
return {
getProducts : (data)=>{
return dispatch(createAction(ActionNames.GET_PRODUCTS,data));
}
};
}
/**
* Map the shared state to properties
* #param state
* #returns Object
*/
const mapStateToProps = state => {
// console.log(state)
return {
data: state.products.results || [],
count : state.products.count,
hasMore : state.products.hasMore,
emitter : state.emitter
};
};
//Set display name to be used in React Dev Tools
Main.displayName = 'Product Grid';
export default connect(mapStateToProps,bindAction)(Main);
This is the site on which we are getting the problem. https://www.tagminepenge.dk/
Go on some page and scroll down then try to click on the back button of the browser. You will understand the issue.
Thank you in advance.

This happens because every time you call window.location a new url is pushed in the browser history stack. To solve it use history.replace provided by the react router it will replace the current url in the history stack so when you go back want make the same problem.
history
import React, {Component} from 'react';
export default class Logout extends Component {
constructor(props) {
super(props);
}
Logout = () => {
this.props.history.replace('/');
}
render() {
return (
<div>
<h1>Your Links</h1>
<button onClick={this.Logout}>Logout</button>
</div>
);
}
}

questions about how to make a star wars kind of game [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am making a star wars game with HTML, CSS and JS. It should look a little bit like this game: https://www.gog.com/game/star_wars_xwing_vs_tie_fighter
Now I want to make it like a kind of game in which you have to shoot at enemy ships. for these ships I want to use this image: http://vignette4.wikia.nocookie.net/starwars/images/0/0a/TIE_Advanced_x1_starfighter.png/revision/latest?cb=20150310124250
Now her this is my questions:
How can I make it look like the ship in this image is getting closer to you? So that it appears in the distance really small and gets closer to you and becomes bigger, so that it looks like it is flying towards you?
I tried to use z-index but that did not work.
Also pls don't mind the code for I have been working on it for a long time and it finally works the way I want it to, but if it is a hinder in any further progress feel free to tell me what I need to add/change/remove or whatsoever.
Also I have been looking around on the internet how I could possibly make something like a star wars game but for example on this site the obly thing I could find related to star wars was how to make the crawling introduction but that is not what I am looking for:)
Number.prototype.clamp = function(min, max) {
'use strict';
return Math.max(min, Math.min(this, max));
};
var url = document.location.href;
var n = parseInt((url.indexOf('n=') != -1) ? url.substring(url.indexOf('n=') + 2, ((url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') != -1) ? url.indexOf('n=') + 2 + (url.substring(url.indexOf('n=') + 2, url.length)).indexOf('&') : url.length) : 512 * 4);
var star = new Array(n);
var hyperspace = 0;
var lol = {}
lol.id = 'starfield';
lol.pr = {
w: 1,
h: 1
};
lol.zr = 256;
lol.timer = 0;
lol.spd = 1;
lol.rid = false;
lol.cvs = false;
lol.ctx = false;
lol.util = {
isboolean: function(v) {
if (typeof v === 'boolean') {
return true;
}
return false;
},
isstring: function(v) {
if (typeof v === 'string') {
return true;
}
return false;
},
isobject: function(v) {
if (typeof v === 'object') {
return true;
}
return false;
},
isfunction: function(v) {
if (typeof v === 'function') {
return true;
}
return false;
},
isempty: function(obj) {
if (window.Object.getOwnPropertyNames(obj).length === 0) {
return true;
}
return false;
},
isffx: function() {
return (/firefox/i).test(window.navigator.userAgent);
},
copy: function(v) {
return v.slice(0);
},
clone: function(v) {
return Object.create({
x: v.x,
y: v.y,
z: v.z
});
},
sign: function(v) {
v = parseFloat(Number(v).toFixed(1));
if (v === 0) {
return ' ';
}
if (v < 0) {
return '';
}
if (v > 0) {
return '+';
}
},
random: function(n) {
var i = 0,
type, start, len, rnd = '';
while (i < n) {
type = Math.round(Math.random() * 2);
if (type === 0) {
start = 48;
len = 10;
} else {
start = (Math.round(Math.random() * 2) % 2 === 0) ? 65 : 97;
len = 26;
}
rnd += String.fromCharCode(start + Math.floor(Math.random() * len));
i += 1;
}
return rnd;
},
interpolate: function(from, to, n, i) {
return from + (to - from) / n * i;
},
time: function() {
return (new Date()).getTime();
}
};
lol.i = function(id) {
return window.document.getElementById(String(id));
};
lol.el = function(el) {
return window.document.createElement(String(el));
};
lol.tn = function(txt) {
return window.document.createTextNode(String(txt));
};
function $r(parent, child) {
(document.getElementById(parent)).removeChild(document.getElementById(child));
}
function $t(name) {
return document.getElementsByTagName(name);
}
function $c(code) {
return String.fromCharCode(code);
}
function $h(value) {
return ('0' + Math.max(0, Math.min(255, Math.round(value))).toString(16)).slice(-2);
}
function _i(id, value) {
$t('div')[id].innerHTML += value;
}
function _h(value) {
return !hires ? value : Math.round(value / 2);
}
function get_screen_size() {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
return Array(w, h);
};
lol.init = function() {
window.addEventListener('resize', lol.resize, false);
window.addEventListener('mousemove', lol.mouse.move, false);
var e = lol.util.isffx() ? 'DOMMouseScroll' : 'mousewheel';
window.addEventListener(e, lol.mouse.wheel, false);
window.addEventListener('keypress', lol.key, false);
lol.viewport();
lol.resize();
for (var i = 0; i < n; i++) {
star[i] = new Array(5);
star[i][0] = Math.random() * lol.w * 3 - lol.x * 3;
star[i][1] = Math.random() * lol.h * 3 - lol.y * 3;
star[i][2] = Math.round(Math.random() * lol.z);
star[i][3] = lol.x;
star[i][4] = lol.y;
}
lol.anim.start();
};
lol.viewport = function() {
var el = lol.el('div');
el.id = lol.id;
el.style.position = 'absolute';
window.document.body.appendChild(el);
lol.cvs = lol.el('canvas');
lol.cvs.id = lol.id + '-viewport';
lol.cvs.style.position = 'absolute';
el.appendChild(lol.cvs);
lol.ctx = lol.cvs.getContext('2d');
};
lol.resize = function() {
var w = window.innerWidth,
h = window.innerHeight,
el = lol.i(lol.id);
lol.w = (w + lol.pr.w - w % lol.pr.w) / lol.pr.w;
lol.w += lol.w % 2;
lol.h = (h + lol.pr.h - h % lol.pr.h) / lol.pr.h;
lol.h += lol.h % 2;
lol.x = Math.round(w / 2);
lol.y = Math.round(h / 2);
lol.z = (w + h) / 2;
lol.r = 1 / lol.z;
el.width = lol.w * lol.pr.w;
el.height = lol.h * lol.pr.h;
lol.cvs.width = lol.w * lol.pr.w;
lol.cvs.height = lol.h * lol.pr.h;
lol.cvs.style.backgroundColor = '#000';
lol.ctx.scale(lol.pr.w, lol.pr.h);
lol.mouse.o = {
x: lol.x,
y: lol.y
};
};
lol.anim = {
update: function() {
var c;
lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
if (hyperspace === 1) {
lol.spd = lol.spd * 1.015;
lol.zr = lol.zr * 0.99;
c = Math.round(lol.spd * 4);
lol.ctx.fillStyle = 'rgba(' + c + ',' + c + ',' + c + ',0.5)';
if (lol.spd > 64) {
lol.ctx.fillStyle = 'rgba(0,0,0,0.5)';
lol.spd = 16;
lol.zr = 256;
hyperspace = 2;
}
}
if (hyperspace === 2) {
if (lol.spd > 1) {
lol.spd *= 0.99;
} else {
lol.spd = 1;
hyperspace = 0;
}
}
lol.ctx.fillRect(0, 0, lol.w, lol.h);
for (var i = 0; i < n; i++) {
var test = true,
x2 = star[i][3],
y2 = star[i][4];
star[i][0] += lol.mouse.p.x * 0.1;
if (star[i][0] > lol.x * 3) {
star[i][0] -= lol.w * 3;
test = false;
}
if (star[i][0] < -lol.x * 3) {
star[i][0] += lol.w * 3;
test = false;
}
star[i][1] += lol.mouse.p.y * 0.1;
if (star[i][1] > lol.y * 3) {
star[i][1] -= lol.h * 3;
test = false;
}
if (star[i][1] < -lol.y * 3) {
star[i][1] += lol.h * 3;
test = false;
}
star[i][2] -= lol.spd;
if (star[i][2] > lol.z) {
star[i][2] -= lol.z;
test = false;
}
if (star[i][2] < 0) {
star[i][2] += lol.z;
test = false;
}
star[i][3] = lol.x + (star[i][0] / star[i][2]) * lol.zr;
star[i][4] = lol.y + (star[i][1] / star[i][2]) * lol.zr;
if (test) {
c = 1 - lol.r * star[i][2];
lol.ctx.fillStyle = 'rgba(255,255,255,' + c + ')';
lol.ctx.strokeStyle = 'rgba(255,255,255,' + (c / 4) + ')';
lol.ctx.lineWidth = (1 - lol.r * star[i][2]) * 1.5;
lol.ctx.beginPath();
lol.ctx.moveTo(x2, y2);
lol.ctx.lineTo(star[i][3], star[i][4]);
lol.ctx.rect(star[i][3] - 0.75, star[i][4] - 0.75, 1.5, 1.5);
lol.ctx.closePath();
lol.ctx.stroke();
lol.ctx.fill();
}
}
lol.rid = window.requestAnimationFrame(lol.anim.update);
},
start: function() {
lol.anim.update();
},
stop: function() {
window.cancelAnimationFrame(lol.rid);
lol.rid = false;
},
pause: function() {
lol.anim[lol.rid ? 'stop' : 'start']();
}
};
lol.mouse = {
p: {
x: 0,
y: 0
},
o: {
x: 0,
y: 0
},
click: false,
move: function(e) {
e = e || window.event;
lol.mouse.p.x = ((e.pageX - lol.mouse.o.x) / window.innerWidth) * 256;
lol.mouse.p.y = ((e.pageY - lol.mouse.o.y) / window.innerHeight) * 256;
e.preventDefault();
},
wheel: function(e) {
e = e || window.event;
var delta = e.wheelDelta / 120;
lol.spd -= delta * 0.1;
e.preventDefault();
}
};
lol.key = function(e) {
e = e || window.event;
console.log(e.keyCode);
switch (e.keyCode) {
case 13:
lol.anim.pause();
break;
case 32:
hyperspace = 1;
break;
}
};
lol.init();
body {
margin: 0px;
padding: 0px;
overflow: hidden;
z-index: -1
}
#footer {
text-align: center;
background-color: black;
color: white;
}
#div {
background-color: black;
text-align: center;
}
<footer id="footer">Galaxy Defender
<br>Mohan Bloxs</br>
</footer>

window.onload is not firing in IE

Here is my code:
var scrollOnLoad = function scrollOnLoad(selector, offset) {
window.onload = function() {
if ($(window).height() <= 800) {
var attempts = 100;
var interval = setInterval(function() {
var h = $(selector).height();
console.log("attempt #" + attempts + ", h=" + h);
if (h > 0 || !attempts--) {
$("body,html").animate({scrollTop : h + offset}, '1000');
clearInterval(interval);
}
}, 50)
}
}
}
and here is how its caling:
scrollOnLoad(".content-wrapper", 50);
I've noticed that window.onload event is not firing in IE (console is not logging anything) - any ideas why? Thanks in advance!

You can use document.readyState property:
function scrollOnLoad(selector, offset) {
if(document.readyState === 'complete')
x();
else
document.addEventListener('readystatechange', function(){
if(document.readyState === 'complete')
x();
});
function x(){
if ($(window).height() <= 800) {
var attempts = 100;
var interval = setInterval(function() {
var h = $(selector).height();
console.log("attempt #" + attempts + ", h=" + h);
if (h > 0 || !attempts--) {
$("body,html").animate({scrollTop : h + offset}, '1000');
clearInterval(interval);
}
}, 50)
}
}
}

As mentioned in comments your function scrollOnLoad is getting executed after the window has loaded.
Now in better scenarios these events should be added in global scope.
So it should be like
window.onload = function() {
if(someConditionIsSatisfied){
if ($(window).height() <= 800) {
var attempts = 100;
var interval = setInterval(function() {
var h = $(selector).height();
console.log("attempt #" + attempts + ", h=" + h);
if (h > 0 || !attempts--) {
$("body,html").animate({scrollTop : h + offset}, '1000');
clearInterval(interval);
}
}, 50)
}
}
}

Javascript code not working in Visual Studio Express 2013 Preview for Windows

So, This is my first Windows 8 app and I'm working on it using html/css and JS
I've developped it on a browser at first (I know, not a good habit) and I wanted to try it out on the Windows 8.1 app
Everything seemed to have slight glitches that I easily fixed, yet the javascript code didn't work at all, even though it worked perfectly on the browser.
Short story: the app enables you to make a countdown from 1h down, or 10mn down (for some purpose), it has two bottuns for each countdown: a start and a stop button.
I have no idea why, the cosole shows the following error: HTML1701
Here's the code:
(function () {
"use strict";
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: This application has been newly launched. Initialize
// your application here.
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: This application is about to be suspended. Save any state
// that needs to persist across suspensions here. You might use the
// WinJS.Application.sessionState object, which is automatically
// saved and restored across suspension. If you need to complete an
// asynchronous operation before your application is suspended, call
// args.setPromise().
$(document).ready(function () {
var h, m, s, h1, m1, s1, output, output1, inter, inter1;
//Preparing all the functions
//facts' animation function
function facts() {
function solve() {
setTimeout(function () {
$("#fun1").animate({ opacity: "0", }, 500, function () {
$("#fun2").animate({ opacity: "1" }, 500);
});
}, 10500);
setTimeout(function () {
$("#fun2").animate({ opacity: "0", }, 500, function () {
$("#fun3").animate({ opacity: "1" }, 500);
});
}, 21500);
setTimeout(function () {
$("#fun3").animate({ opacity: "0", }, 500, function () {
$("#fun4").animate({ opacity: "1" }, 500);
});
}, 31500);
setTimeout(function () {
$("#fun4").animate({ opacity: "0", }, 500, function () {
$("#fun1").animate({ opacity: "1" }, 500);
});
}, 41500);
}
solve();
setInterval(function () { solve(); }, 41520);
//Work Counting functions
}
function startWork() {
h = 1;
m = 0;
s = 0;
document.getElementById("WTM").innerHTML = "01:00:00"
inter = setInterval(function () { countWork() }, 1000);
}
function countWork() {
if (s == 0 && m == 0 && h == 0) {
$("#StartW").animate({ opacity: 1, }, 500);
clearInterval(inter);
}
else if (s == 0 && m == 0 && h != 0) {
h = h - 1;
m = 59;
s = 59;
}
else if (s == 0 && m != 0) {
m = m - 1;
s = 59;
}
else if (s != 0)
{ s = s - 1; }
if (typeof (s) != "string" && s < 10)
{ s = "0" + s; }
if (typeof (m) != "string" && m < 10)
{ m = "0" + m; }
if (typeof (h) != "string" && h < 10)
{ h = "0" + h; }
output = h + ":" + m + ":" + s;
document.getElementById("WTM").innerHTML = output;
}
//Rest Counting functions
function startRest() {
h1 = 0;
m1 = 10;
s1 = 0;
document.getElementById("RTM").innerHTML = "00:10:00";
inter1 = setInterval(function () { countRest() }, 1000);
}
function countRest() {
if (s1 == 0 && m1 == 0 && h1 == 0) {
$("#StartR").animate({ opacity: 1, }, 500);
clearInterval(inter1);
}
else if (s1 == 0 && m1 == 0 && h1 != 0) {
h1 = h1 - 1;
m1 = 59;
s1 = 59;
}
else if (s1 == 0 && m1 != 0) {
m1 = m1 - 1;
s1 = 59;
}
else if (s1 != 0)
{ s1 = s1 - 1; }
if (typeof (s1) != "string" && s1 < 10)
{ s1 = "0" + s1; }
if (typeof (m1) != "string" && m1 < 10)
{ m1 = "0" + m1; }
if (typeof (h1) != "string" && h1 < 10)
{ h1 = "0" + h1; }
output1 = h1 + ":" + m1 + ":" + s1;
document.getElementById("RTM").innerHTML = output1;
}
//Calling the needed functions
$("#StopW").click(function () {
clearInterval(inter);
document.getElementById("WTM").innerHTML = "00:00:00";
$("#StartW").animate({ opacity: 1, }, 500);
});
$("#StartW").click(function () {
startWork();
$("#StartW").animate({ opacity: 0, }, 2000);
});
$("#StopR").click(function () {
clearInterval(inter1);
document.getElementById("RTM").innerHTML = "00:00:00";
$("#StartR").animate({ opacity: 1, }, 500);
});
$("#StartR").click(function () {
startRest();
$("#StartR").animate({ opacity: 0, }, 2000);
});
facts();
});
};
app.start();
})();

It appears you're using jQuery. Make sure you're using jQuery 2.0 and serving it locally from your app package.
The specific error you're seeing is likely the result of using innerHTML to set the countdown timers. Because apps run with elevated privileges (potential access to user files, etc), your code must not do things that may introduce vulnerabilities. innerHTML can be used to dynamically load scripts and thus it's use is discouraged.
In your application it looks like you could easily use innerText instead. If you must use innerHTML, try using toStaticHTML() or wrapping it in MSApp.execUnsafeLocalFunction(). You can read more about developing secure apps.

don't use the VS2013 Previews any longer. The RTM is already out. Get the final Version here:
http://www.microsoft.com/visualstudio/eng/downloads#d-2013-express

adding autoplay to jquery.roundabout

I have a site I am working on that uses the roundabout from fredhq.com and I would like to make it so it auto plays, I have had a look on their website and can not work out where I need to add the relevant auto play code!
Here is the jquery.roundabout.js code:
// creates a default shape to be used for pathing
jQuery.extend({
roundabout_shape: {
def: 'lazySusan',
lazySusan: function(r, a, t) {
return {
x: Math.sin(r + a),
y: (Math.sin(r + 3*Math.PI/2 + a) / 8) * t,
z: (Math.cos(r + a) + 1) / 2,
scale: (Math.sin(r + Math.PI/2 + a) / 2) + 0.5
};
}
}
});
jQuery.fn.roundabout = function() {
var options = (typeof arguments[0] != 'object') ? {} : arguments[0];
// set options and fill in defaults
options = {
bearing: (typeof options.bearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.bearing % 360.0),
tilt: (typeof options.tilt == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.tilt),
minZ: (typeof options.minZ == 'undefined') ? 100 : parseInt(options.minZ, 10),
maxZ: (typeof options.maxZ == 'undefined') ? 400 : parseInt(options.maxZ, 10),
minOpacity: (typeof options.minOpacity == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minOpacity),
maxOpacity: (typeof options.maxOpacity == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxOpacity),
minScale: (typeof options.minScale == 'undefined') ? 0.40 : jQuery.roundabout_toFloat(options.minScale),
maxScale: (typeof options.maxScale == 'undefined') ? 1.00 : jQuery.roundabout_toFloat(options.maxScale),
duration: (typeof options.duration == 'undefined') ? 600 : parseInt(options.duration, 10),
btnNext: options.btnNext || null,
btnPrev: options.btnPrev || null,
easing: options.easing || 'swing',
clickToFocus: (options.clickToFocus !== false),
focusBearing: (typeof options.focusBearing == 'undefined') ? 0.0 : jQuery.roundabout_toFloat(options.focusBearing % 360.0),
shape: options.shape || 'lazySusan',
debug: options.debug || false,
childSelector: options.childSelector || 'li',
startingChild: (typeof options.startingChild == 'undefined') ? null : parseInt(options.startingChild, 10),
reflect: (typeof options.reflect == 'undefined' || options.reflect === false) ? false : true
};
// assign things
this.each(function(i) {
var ref = jQuery(this);
var period = jQuery.roundabout_toFloat(360.0 / ref.children(options.childSelector).length);
var startingBearing = (options.startingChild === null) ? options.bearing : options.startingChild * period;
// set starting styles
ref
.addClass('roundabout-holder')
.css('padding', 0)
.css('position', 'relative')
.css('z-index', options.minZ);
// set starting options
ref.data('roundabout', {
'bearing': startingBearing,
'tilt': options.tilt,
'minZ': options.minZ,
'maxZ': options.maxZ,
'minOpacity': options.minOpacity,
'maxOpacity': options.maxOpacity,
'minScale': options.minScale,
'maxScale': options.maxScale,
'duration': options.duration,
'easing': options.easing,
'clickToFocus': options.clickToFocus,
'focusBearing': options.focusBearing,
'animating': 0,
'childInFocus': -1,
'shape': options.shape,
'period': period,
'debug': options.debug,
'childSelector': options.childSelector,
'reflect': options.reflect
});
// bind click events
if (options.clickToFocus === true) {
ref.children(options.childSelector).each(function(i) {
jQuery(this).click(function(e) {
var degrees = (options.reflect === true) ? 360.0 - (period * i) : period * i;
degrees = jQuery.roundabout_toFloat(degrees);
if (!jQuery.roundabout_isInFocus(ref, degrees)) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateAngleToFocus(degrees);
}
return false;
}
});
});
}
// bind next buttons
if (options.btnNext) {
jQuery(options.btnNext).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToNextChild();
}
return false;
});
}
// bind previous buttons
if (options.btnPrev) {
jQuery(options.btnPrev).bind('click.roundabout', function(e) {
e.preventDefault();
if (ref.data('roundabout').animating === 0) {
ref.roundabout_animateToPreviousChild();
}
return false;
});
}
});
// start children
this.roundabout_startChildren();
// callback once ready
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_startChildren = function() {
this.each(function(i) {
var ref = jQuery(this);
var data = ref.data('roundabout');
var children = ref.children(data.childSelector);
children.each(function(i) {
var degrees = (data.reflect === true) ? 360.0 - (data.period * i) : data.period * i;
// apply classes and css first
jQuery(this)
.addClass('roundabout-moveable-item')
.css('position', 'absolute');
// then measure
jQuery(this).data('roundabout', {
'startWidth': jQuery(this).width(),
'startHeight': jQuery(this).height(),
'startFontSize': parseInt(jQuery(this).css('font-size'), 10),
'degrees': degrees
});
});
ref.roundabout_updateChildPositions();
});
return this;
};
jQuery.fn.roundabout_setTilt = function(newTilt) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = newTilt;
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_setBearing = function(newBearing) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_toFloat(newBearing % 360, 2);
jQuery(this).roundabout_updateChildPositions();
});
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustBearing = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').bearing = jQuery.roundabout_getBearing(jQuery(this)) + delta;
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_adjustTilt = function(delta) {
delta = jQuery.roundabout_toFloat(delta);
if (delta !== 0) {
this.each(function(i) {
jQuery(this).data('roundabout').tilt = jQuery.roundabout_toFloat(jQuery(this).roundabout_get('tilt') + delta);
jQuery(this).roundabout_updateChildPositions();
});
}
if (typeof arguments[1] === 'function') {
var callback = arguments[1], ref = this;
setTimeout(function() { callback(ref); }, 0);
}
return this;
};
jQuery.fn.roundabout_animateToBearing = function(bearing) {
bearing = jQuery.roundabout_toFloat(bearing);
var currentTime = new Date();
var duration = (typeof arguments[1] == 'undefined') ? null : arguments[1];
var easingType = (typeof arguments[2] == 'undefined') ? null : arguments[2];
var passedData = (typeof arguments[3] !== 'object') ? null : arguments[3];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout'), timer, easingFn, newBearing;
var thisDuration = (duration === null) ? data.duration : duration;
var thisEasingType = (easingType !== null) ? easingType : data.easing || 'swing';
if (passedData === null) {
passedData = {
timerStart: currentTime,
start: jQuery.roundabout_getBearing(ref),
totalTime: thisDuration
};
}
timer = currentTime - passedData.timerStart;
if (timer < thisDuration) {
data.animating = 1;
if (typeof jQuery.easing.def == 'string') {
easingFn = jQuery.easing[thisEasingType] || jQuery.easing[jQuery.easing.def];
newBearing = easingFn(null, timer, passedData.start, bearing - passedData.start, passedData.totalTime);
} else {
newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing - passedData.start, passedData.totalTime);
}
ref.roundabout_setBearing(newBearing, function() { ref.roundabout_animateToBearing(bearing, thisDuration, thisEasingType, passedData); });
} else {
bearing = (bearing < 0) ? bearing + 360 : bearing % 360;
data.animating = 0;
ref.roundabout_setBearing(bearing);
}
});
return this;
};
jQuery.fn.roundabout_animateToDelta = function(delta) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
delta = jQuery.roundabout_getBearing(jQuery(this)) + jQuery.roundabout_toFloat(delta);
jQuery(this).roundabout_animateToBearing(delta, duration, easing);
});
return this;
};
jQuery.fn.roundabout_animateToChild = function(childPos) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
if (data.childInFocus !== childPos && data.animating === 0) {
var child = jQuery(ref.children(data.childSelector)[childPos]);
ref.roundabout_animateAngleToFocus(child.data('roundabout').degrees, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_animateToNearbyChild = function(passedArgs, which) {
var duration = passedArgs[0], easing = passedArgs[1];
this.each(function(i) {
var data = jQuery(this).data('roundabout');
var bearing = jQuery.roundabout_toFloat(360.0 - jQuery.roundabout_getBearing(jQuery(this)));
var period = data.period, j = 0, range;
var reflect = data.reflect;
var length = jQuery(this).children(data.childSelector).length;
bearing = (reflect === true) ? bearing % 360.0 : bearing;
if (data.animating === 0) {
// if we're not reflecting and we're moving to next or
// we are reflecting and we're moving previous
if ((reflect === false && which === 'next') || (reflect === true && which !== 'next')) {
bearing = (bearing === 0) ? 360 : bearing;
// counterclockwise
while (true && j < length) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing <= range.upper && bearing > range.lower) {
jQuery(this).roundabout_animateToDelta(bearing - range.lower, duration, easing);
break;
}
j++;
}
} else {
// clockwise
while (true) {
range = { lower: jQuery.roundabout_toFloat(period * j), upper: jQuery.roundabout_toFloat(period * (j + 1)) };
range.upper = (j == length - 1) ? 360.0 : range.upper; // adjust for javascript being bad at floats
if (bearing >= range.lower && bearing < range.upper) {
jQuery(this).roundabout_animateToDelta(bearing - range.upper, duration, easing);
break;
}
j++;
}
}
}
});
return this;
};
jQuery.fn.roundabout_animateToNextChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'next');
};
jQuery.fn.roundabout_animateToPreviousChild = function() {
return this.roundabout_animateToNearbyChild(arguments, 'previous');
};
// moves a given angle to the focus by the shortest means possible
jQuery.fn.roundabout_animateAngleToFocus = function(target) {
var duration = arguments[1], easing = arguments[2];
this.each(function(i) {
var delta = jQuery.roundabout_getBearing(jQuery(this)) - target;
delta = (Math.abs(360.0 - delta) < Math.abs(0.0 - delta)) ? 360.0 - delta : 0.0 - delta;
delta = (delta > 180) ? -(360.0 - delta) : delta;
if (delta !== 0) {
jQuery(this).roundabout_animateToDelta(delta, duration, easing);
}
});
return this;
};
jQuery.fn.roundabout_updateChildPositions = function() {
this.each(function(i) {
var ref = jQuery(this), data = ref.data('roundabout');
var inFocus = -1;
var info = {
bearing: jQuery.roundabout_getBearing(ref),
tilt: data.tilt,
stage: { width: Math.floor(ref.width() * 0.9), height: Math.floor(ref.height() * 0.9) },
animating: data.animating,
inFocus: data.childInFocus,
focusBearingRad: jQuery.roundabout_degToRad(data.focusBearing),
shape: jQuery.roundabout_shape[data.shape] || jQuery.roundabout_shape[jQuery.roundabout_shape.def]
};
info.midStage = { width: info.stage.width / 2, height: info.stage.height / 2 };
info.nudge = { width: info.midStage.width + info.stage.width * 0.05, height: info.midStage.height + info.stage.height * 0.05 };
info.zValues = { min: data.minZ, max: data.maxZ, diff: data.maxZ - data.minZ };
info.opacity = { min: data.minOpacity, max: data.maxOpacity, diff: data.maxOpacity - data.minOpacity };
info.scale = { min: data.minScale, max: data.maxScale, diff: data.maxScale - data.minScale };
// update child positions
ref.children(data.childSelector).each(function(i) {
if (jQuery.roundabout_updateChildPosition(jQuery(this), ref, info, i) && info.animating === 0) {
inFocus = i;
jQuery(this).addClass('roundabout-in-focus');
} else {
jQuery(this).removeClass('roundabout-in-focus');
}
});
// update status of who is in focus
if (inFocus !== info.inFocus) {
jQuery.roundabout_triggerEvent(ref, info.inFocus, 'blur');
if (inFocus !== -1) {
jQuery.roundabout_triggerEvent(ref, inFocus, 'focus');
}
data.childInFocus = inFocus;
}
});
return this;
};
//----------------
jQuery.roundabout_getBearing = function(el) {
return jQuery.roundabout_toFloat(el.data('roundabout').bearing) % 360;
};
jQuery.roundabout_degToRad = function(degrees) {
return (degrees % 360.0) * Math.PI / 180.0;
};
jQuery.roundabout_isInFocus = function(el, target) {
return (jQuery.roundabout_getBearing(el) % 360 === (target % 360));
};
jQuery.roundabout_triggerEvent = function(el, child, eventType) {
return (child < 0) ? this : jQuery(el.children(el.data('roundabout').childSelector)[child]).trigger(eventType);
};
jQuery.roundabout_toFloat = function(number) {
number = Math.round(parseFloat(number) * 1000) / 1000;
return parseFloat(number.toFixed(2));
};
jQuery.roundabout_updateChildPosition = function(child, container, info, childPos) {
var ref = jQuery(child), data = ref.data('roundabout'), out = [];
var rad = jQuery.roundabout_degToRad((360.0 - ref.data('roundabout').degrees) + info.bearing);
// adjust radians to be between 0 and Math.PI * 2
while (rad < 0) {
rad = rad + Math.PI * 2;
}
while (rad > Math.PI * 2) {
rad = rad - Math.PI * 2;
}
var factors = info.shape(rad, info.focusBearingRad, info.tilt); // obj with x, y, z, and scale values
// correct
factors.scale = (factors.scale > 1) ? 1 : factors.scale;
factors.adjustedScale = (info.scale.min + (info.scale.diff * factors.scale)).toFixed(4);
factors.width = (factors.adjustedScale * data.startWidth).toFixed(4);
factors.height = (factors.adjustedScale * data.startHeight).toFixed(4);
// alter item
ref
.css('left', ((factors.x * info.midStage.width + info.nudge.width) - factors.width / 2.0).toFixed(1) + 'px')
.css('top', ((factors.y * info.midStage.height + info.nudge.height) - factors.height / 2.0).toFixed(1) + 'px')
.css('width', factors.width + 'px')
.css('height', factors.height + 'px')
.css('opacity', (info.opacity.min + (info.opacity.diff * factors.scale)).toFixed(2))
.css('z-index', Math.round(info.zValues.min + (info.zValues.diff * factors.z)))
.css('font-size', (factors.adjustedScale * data.startFontSize).toFixed(2) + 'px')
.attr('current-scale', factors.adjustedScale);
if (container.data('roundabout').debug === true) {
out.push('<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ' + ref.css('width') + '; background-color: #ffc;">');
out.push('<strong style="font-size: 12px; white-space: nowrap;">Child ' + childPos + '</strong><br />');
out.push('<strong>left:</strong> ' + ref.css('left') + '<br /><strong>top:</strong> ' + ref.css('top') + '<br />');
out.push('<strong>width:</strong> ' + ref.css('width') + '<br /><strong>opacity:</strong> ' + ref.css('opacity') + '<br />');
out.push('<strong>z-index:</strong> ' + ref.css('z-index') + '<br /><strong>font-size:</strong> ' + ref.css('font-size') + '<br />');
out.push('<strong>scale:</strong> ' + ref.attr('current-scale'));
out.push('</div>');
ref.html(out.join(''));
}
return jQuery.roundabout_isInFocus(container, ref.data('roundabout').degrees);
};
Many thanks in advance for any help and advice.
Phil

The source you posted doesn't seem to be the latest version of Roundabout.
I just tried with the latest version, and it works perfectly:
$(document).ready(function() {
$('ul').roundabout({
autoplay: true,
autoplayDuration: 1000,
autoplayPauseOnHover: true
});
});
See http://jsfiddle.net/SfAuF/ for an example.
Download the latest version from GitHub.