I am trying to create an array that holds all pending error messages that shows up on the DOM (Using jquery for that) and then loop through the array to see if there is any error messages to call, and if so remove them after executing them.
My problem is that I can't figure out how to push a function into an array and then execute it. This is what I have so far:
var dialogQueue = []
dialogQueue.push(errorCall("test", "test", "test", "test"));
for (var queueNum = 1, 1 < dialogQueue.length, 1++) {
alert(dialogQueue[1])
}
And if it helps, my code for showing the error messages:
function dialogShow() {
$(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
$(".body-wrapper").addClass("errorFilter");
$(".dialog-anim").animate({
opacity: 1,
marginTop: "-=20px"
})
setTimeout(function () {
$(".errorFilter").addClass("blur");
}, 100);
}
function dialogHide() {
$(".dialog-con").css("background", "rgba(0,0,0,.0")
$(".body-wrapper").removeClass("blur");
$(".dialog-anim").animate({
opacity: 0,
marginTop: "-=25px"
}, 300)
setTimeout(function () {
$(".dialog-con").css("display", "none");
$(".body-wrapper").removeClass("errorFilter");
// Code for removing the function from the array after pushing OK on the dialog
}, 1000);
}
function errorCall(title, sub, text, code) {
$(".dialog .title").text(title);
$(".dialog .subtitle").text(sub);
$(".dialog .text").html(text);
$(".dialog .error-code").html(code);
dialogShow();
}
I'll give you a fiddle with the full errorCall() function in action:
function dialogShow() {
$(".dialog-con").css("display", "block").css("background", "rgba(0,0,0,.8)")
$(".body-wrapper").addClass("errorFilter");
$(".dialog-anim").animate({
opacity: 1,
marginTop: "-=20px"
})
setTimeout(function () {
$(".errorFilter").addClass("blur");
}, 100);
}
function dialogHide() {
$(".dialog-con").css("background", "rgba(0,0,0,.0")
$(".body-wrapper").removeClass("blur");
$(".dialog-anim").animate({
opacity: 0,
marginTop: "-=25px"
}, 300)
setTimeout(function () {
$(".dialog-con").css("display", "none");
$(".body-wrapper").removeClass("errorFilter");
}, 1000);
}
function errorCall(title, sub, text, code) {
$(".dialog .title").text(title);
$(".dialog .subtitle").text(sub);
$(".dialog .text").html(text);
$(".dialog .error-code").html(code);
dialogShow();
}
errorCall("Hello stackoverflow!","This is how my error message dialog looks!","Blah blah blah blah","Code code code");
.dialog-con {
height: 100%;
display: none;
position: fixed;
width: 100%;
background-color: rgba(0, 0, 0, .0);
z-index: 50;
transition: ease 300ms;
}
.dialog-anim {
width: 100%;
height: 100%;
display: none;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 0;
margin-top: -20px;
}
.dialog {
margin: auto;
padding: 12px 27px;
background: white;
border-radius: 3px;
width: 520px;
transform: translateY(30px)
}
.dialog .title-con {
margin-bottom: 25px;
}
.dialog .title {
font-size: 35px;
padding-bottom: 7px;
}
.dialog .error-code {
margin-top: 15px;
color: rgba(0, 0, 0, .6);
font-family: "Courier New", Courier, monospace
}
.dialog .subtitle {
font-size: 17px;
color: rgba(0, 0, 0, 0.4);
}
.dialog .text {}
.dialog .button-con {
margin-top: 25px;
}
.dialog button {
margin: auto;
float: right;
color: white;
border: none;
padding: 9px 37px;
background: #10b5ff;
text-transform: uppercase;
font-weight: bold;
border-radius: 3px;
}
.dialog button:hover {
background: black;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dialog-con">
<div class="dialog-anim">
<div class="dialog">
<div class="title-con">
<div class="title">Error Message Title</div>
<div class="subtitle"></div>
</div>
<div class="text-con">
<div class="text">Error Message</div>
<div class="error-code"></div>
</div>
<div class="button-con" onclick="dialogHide()">
<button>Ok</button>
</div>
</div>
</div>
</div>
(The ok button displacement is a result of the tiny viewport, ignore it.)
So the reason I want to do this is that in the event that something triggers multiple errors, they get pushed to the array and shown one after one (Pressing OK shows the next one etc).
You need to create a function wrapper to store them in the array. As it stands you're invoking errorCall as you push it to the array. Try this code instead:
var dialogQueue = []
dialogQueue.push(
function () {
errorCall("test", "test", "test", "test")
}
);
for (var queueNum = 0, 1 < dialogQueue.length, queueNum++) {
alert( dialogQueue[queueNum]() );
}
You also wanted to remove after execution, so could do it like this instead:
while(dialogQueue.length > 0) {
alert( dialogueQueue[0]() );
dialogueQueue.shift();
}
Here's a simplified example:
var funcArr = [];
funcArr.push( console.log("Cat") );
// This immediately calls console.log, logging "cat". After console.log is
// evaluated we push its return value `undefined`
// Instead, we wrap the console.log in an anonymous function. This gives us
// a function which will execute what we desire when it is called.
funcArr.push( function() { console.log("cat"); } );
// there is nothing to invoke now, because we are creating a new function.
// now if we:
console.log( funcArr );
// we get: [function anonymous()]
// So if we say:
funcArr[0];
// this will evaluate to:
function() {
console.log("cat");
};
// Therefore invoking funcArr[0] calls an anonymous function, which runs
// the function we actually wanted to run.
funArr[0]();
An alternative to ChadF's approach would be to instantiate a function and call a method on it when you want to show the message.
// Your base function
function error(a, b, c, d) {
this.show = function() {
alert(a + " " + b + " " + c + " " + d);
};
}
var dialogQueue = [];
// Creating an instance of "error"
dialogQueue.push(new error("test", "test2", "test3", "test4"));
dialogQueue.push(new error("testing again", "test2", "test3", "test4"));
alert("Data finished pushing");
for (var i = 0; i < dialogQueue.length; i++) {
// Calling the "show" method from "error"
dialogQueue[i].show();
}
you can push the args onto the array, and use that to execute the function. you can use apply to call a given function with a set of arguments.
like this:
dialogQueue=[];
//fill the queue with arguments
dialogQueue.push([1,2,3,4]);
dialogQueue.push(["test","test","test","test"]);
dialogQueue.push(["bla","bla","bla","bla"]);
//fire off everything in the queue
var len=dialogQueue.length;
for (i=0;i<len;i++) {
//pop off the args, and use apply to call them
var args=dialogQueue.pop();
errorCall.apply(this, args);
}
Related
According to this question and mdn.doc articles, I'm giving a Callback function inside of aprototype for managing the next code line after it's done.
But even if I create the Callback, the browser keeps ignoring it and running the next code line no matter the Callback is completed or not.
This is the code:
'use strict';
(function() {
function Box($el, $frame) {
// Reassign the Values
this.$el = $el;
this.$frame = $frame;
// Event Register Zone
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
}
Box.prototype = {
start: function(e) {
console.log('touchstart has been detected');
},
move: function(e) {
console.log('touchmove has been detected');
},
end: function(e) {
console.log('touchend has been detected');
this.getanAction(this.moveTop);
},
getanAction: function(callback) {
let bound = callback.bind(this);
bound();
this.$frame[1].classList.add('leftMover');
// Expectation: move the purple box first, and move the orange box next
},
moveTop: function() {
this.$frame[0].classList.add('topMover');
}
}
/***************************************************************/
// Declare & Assign the Original Values
let _elem = document.getElementById('box');
let _frame = _elem.querySelectorAll('.contents');
const proBox = new Box(_elem, _frame);
}());
* {
margin: 0;
padding: 0;
}
#box {
width: auto;
height: 800px;
border: 4px dotted black;
}
.contents {
position: absolute;
width: 200px;
height: 200px;
float: left;
top: 0;
left: 0;
transition: 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.purple { background-color: purple; }
.orange { background-color: orange; }
.topMover { top: 600px; }
.leftMover { left: 600px; }
<div id="box">
<div class="contents purple">
</div>
<div class="contents orange">
</div>
</div>
My expectation is the .orange box moves after the .purple box moves done.
Did I miss or do something wrong from the code?
The problem is they are being called one after the other with no delay as JavaScript won't wait for the CSS transition to finish before moving to the next line.
I've fixed waiting for the first transition has finished before calling the bound callback. This way the purple box will move, wait for the transition to finish, then the orange box will move.
'use strict';
(function() {
function Box($el, $frame) {
// Reassign the Values
this.$el = $el;
this.$frame = $frame;
// Event Register Zone
this.$el.addEventListener('touchstart', (e) => this.start(e));
this.$el.addEventListener('touchmove', (e) => this.move(e));
// Added mouse up so it works on desktop
this.$el.addEventListener('mouseup', (e) => this.end(e));
this.$el.addEventListener('touchend', (e) => this.end(e));
}
Box.prototype = {
start: function(e) {
console.log('touchstart has been detected');
},
move: function(e) {
console.log('touchmove has been detected');
},
end: function(e) {
console.log('touchend has been detected');
this.getanAction(this.moveTop);
},
getanAction: function(callback) {
let bound = callback.bind(this);
// Listen for css transition end
this.$frame[0].addEventListener('transitionend', function() {
// Call callback to move orange box
bound()
});
// Move the purple box now
this.$frame[0].classList.add('topMover1')
},
moveTop: function() {
this.$frame[1].classList.add('topMover2');
}
}
/***************************************************************/
// Declare & Assign the Original Values
let _elem = document.getElementById('box');
let _frame = _elem.querySelectorAll('.contents');
const proBox = new Box(_elem, _frame);
}());
* {
margin: 0;
padding: 0;
}
#box {
width: auto;
height: 800px;
border: 4px dotted black;
}
.contents {
position: absolute;
width: 200px;
height: 200px;
float: left;
top: 0;
left: 0;
transition: 800ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.purple { background-color: purple; }
.orange { background-color: orange; }
.topMover1 { top: 600px; }
.topMover2 { left: 600px; }
<div id="box">
<div class="contents purple">
</div>
<div class="contents orange">
</div>
</div>
I have a javascript function, using jQuery, which manipulates a <div id="message"> to print error and status messages.
It looks like this:
function messageShow(msg, type) {
$('#message').addClass("message red");
$('#message').html(msg);
$("#message").slideDown(200, 0).fadeTo(200, 1);
setTimeout(function() {
$("#message").fadeTo(500, 0).slideUp(500, 0);
}, 5000);
//alert('asdasd');
}
The content of the div is only seen if I uncomment the alert(); line.
There is no redirect after this, so the page is not changed before the content is loaded.
I tried:
$('#message').html(msg, function() { ... });
Just to be sure, but that doesn't work either.
The div:
<div id="message"></div>
The css:
.message {
border-radius: 5px;
width: 100%;
height: 20px;
padding: 10px;
vertical-align: middle;
line-height: 20px;
}
.red {
background: #daa;
color: #855;
}
I do recomend you to use jquery delay function instead.
Try this:
function messageShow(msg, type) {
$('#message').addClass("message red");
$('#message').html(msg);
$("#message").slideDown(200, 0).fadeTo(200, 1).delay( 500 ).fadeTo(500, 0).slideUp(500, 0);
}
I have animation that works like this:
var words_array = [];
words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
words_array[1] = ['WEB', 'WORLD'];
var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
];
$('#caption').html(words[0]);
var i = 0;
setInterval(function() {
$('#caption').animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
$('#caption').html(words[i = (i + 1) % words.length]);
}
}).delay(300).animate({
width: 'toggle'
}, 400);
}, 5000);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
vertical-align: top;
white-space: nowrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>
Every 5 seconds you get the toggle change of the words array. What I'd like to create, but I'm failing, is to have the toggle, then change few words in the .words span that are located in the words_array, and then after I've changed all the words, the toggle will happen, to the second sentence in the words array, and now I'll change the .words with the associated words_array and so on (if I have more sentences/words).
So the animation goes like this:
First 'slide': We are FUN
CREATIVE <- only this changes
INNOVATIVE
Slide toggle to second 'slide': We like the WEB
WORLD
And I could add as much words/slides as I want.
Doing one (just changing the words) or the other (sliding the sentence) is rather easy, but combining them is where I am stuck :\
EDIT:
I using the solution provided I tweaked the code a bit:
var words_array = [];
words_array[0] = ['FUN', 'CREATIVE', 'INNOVATIVE'];
words_array[1] = ['WEB', 'WORLD'];
var words = ['We are <span class="words" style="background:#F33B65; font-weight:bold; padding: 0 10px;">FUN</span>',
'We like the <span class="words" style="background:#8be32d; font-weight:bold; padding: 0 10px;">WEB</span>'
];
var $caption = $('#caption'),
i = 1,
w = 0,
$replace = $caption.find('.words');
function switchSentence() {
$caption.animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
i = (i + 1) % words.length;
w = 0;
$caption.html(words[i]);
$replace = $caption.find('.words');
}
}).delay(300).animate({
width: 'toggle'
}, 400).delay(300);
}
switchSentence();
function switchWord() {
if (w >= words_array[i].length - 1) {
switchSentence();
w = 0;
} else {
w += 1;
}
if (words_array[i]) {
$replace.animate({
width: 'toggle'
}, {
duration: 400,
done: function() {
$replace.text(words_array[i][w]);
}
}).delay(300).animate({
width: 'toggle'
}, 400);
}
}
switchWord();
setInterval(switchWord, 2500);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
white-space: nowrap;
display: inline-block;
vertical-align: top;
}
.words {
display: inline-block;
vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="caption"></div>
Added another animation in the words toggle. Thanks somethinghere for all the help!!
How about adding another timeout that will simply loop through the current available words? When you switch the arrays, simple reset the loop and let it check the correct amount of words. Notice in the snippet how the function switchSentence and switchWords are entirely unrelated. The switchWords function makes use of the currently selected sentence, and the swicthSentence function does the changing of the sentence, as the name suggests. This way you don't really have to know how to align them properly, they will do their job regardless. Have a look at the snippet:
var words_array = [
['FUN', 'CREATIVE', 'INNOVATIVE'],
['WEB', 'WORLD']
];
var words = [
'We are <span class="words fun">FUN</span>',
'We like the <span class="words like">WEB</span>'
];
var caption = $('#caption'),
i = 1,
w = 0,
replace = caption.find('span');
function switchSentence() {
caption.animate({width: 'toggle'},{
duration: 400,
done: function() {
i = (i + 1) % words.length;
w = 0;
caption.html(words[i]);
replace = caption.find('span');
}
}).delay(300).animate({width: 'toggle'}, 400);
}
switchSentence();
setInterval(switchSentence, 5000);
function switchWord(){
if(w >= words_array[i].length - 1) w = 0;
else w += 1;
if(words_array[i]) replace.text(words_array[i][w])
}
switchWord();
setInterval(switchWord, 500);
body {
background: #333;
}
#caption {
height: 200px;
font-size: 80px;
line-height: 100px;
color: #fff;
overflow: hidden;
vertical-align: top;
white-space: nowrap;
}
.fun, .like { font-weight: bold; }
.fun { background: #F33B65; }
.like { background: #8be32d; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="caption"></div>
I also decided to clean up your code a bit to make it more legible and useable. I moved the two switching functions into separate functions and passed them to the interval listeners separately. This is so I could immediately kickstart them by calling them once myself. I also streamlined your array, and moved the style declaration into your CSS instead of inline styles (which makes both your JS and CSS look a lot cleaner).
I've made a simple jQuery script which stores values "voted1", "voted2", "voted3" in localStorage. The problem is that on click it stores all values at the same time, and I need it per click as it should be later called (e.g. if "value3" exists begin jQuery logic...)
I can't figure this out, after weeks of testing..
HTML:
[gallery link="none" size="medium" ids="102,13,27,25,23,15" orderby="rand"]
<div class="exists" style="display: none;">Thank you for voting!</div>
CSS:
.gallery-item a {
background-color: black;
border: 1px solid orange;
border-radius: 6px;
color: orange;
display: inline-table;
font-size: 14px;
font-weight: bold;
max-width: 100%;
width: 32%;
}
.exists {
background-color: black;
border-radius: 18px;
box-shadow: 1px 3px 20px -3px grey inset;
display: block;
height: 32%;
left: 24%;
margin-left: 10%;
margin-right: 10%;
margin-top: 10%;
max-width: 100%;
padding-left: 12%;
padding-top: 6%;
position: fixed;
top: 23%;
width: 36%;
z-index: 999999;
color: olivedrab;
font-weight: bold;
cursor: context-menu;
}
.voted {
background-color: green !important;
}
jQuery:
$(document).ready(function() {
var voteLink = $('.gallery-item a');
var votedYes = $('.exists');
voteLink.one('click', function() {
// localStorage.setItem('voted1', 'yes1');
$(this).text('Thank you!');
$(this).addClass('voted');
})
voteLink.one('click', function() {
// localStorage.setItem('voted2', 'yes2');
$(this).text('Thank you!');
$(this).addClass('voted');
})
voteLink.one('click', function() {
localStorage.setItem('voted3', 'yes3');
$(this).text('Thank you!');
$(this).addClass('voted');
if($('.voted').length === 3){
voteLink.fadeOut('slow');
$('.exists').fadeIn(1800);
}
if (localStorage.getItem("voted3")) {
voteLink.remove();
votedYes.fadeIn(1800);
}
});
As I said, on first click it places all values in localStorage and I need this separated.
Thanks guys.
$(document).ready(function() {
var voteLink = $(".gallery-item a");
var votedYes = $(".exists");
if (localStorage.getItem("count") === null) {
localStorage.setItem("count", 1)
}
if (!(localStorage.getItem("voted3") === "yes3")) {
var i = Number(localStorage.getItem("count")),
fn = function(e) {
if (i < 3) {
localStorage.setItem("voted" + i, "yes" + i);
$(this).text("Thank you! for vote " + i)
.addClass("voted" + i);
localStorage.setItem("count", 1 + i);
i = Number(localStorage.getItem("count"));
} else {
localStorage.setItem("voted" + i, "yes" + i);
$(this).text("Thank you! for vote " + i)
.addClass("voted" + i)
.fadeOut("slow");
if (localStorage.getItem("voted3") === "yes3") {
voteLink.remove();
votedYes.fadeIn(1800);
}
}
};
voteLink.on("click", fn);
} else {
// if `localStorage` has property `"voted3"` and value equals `"yes3"`,
// do stuff
}
})
Caveat: This answer may be completely off, since your question comes without all the details of your use case. However ...
The following code assumes that ...
up to 3 votes shall be recorded in localStorage
in order to cast the vote n+1, vote n must have been recorded before.
Either register the handlers contingent on the content in localStorage:
if (
localStorage.getItem("voted1")
&& !localStorage.getItem("voted2")
) {
voteLink.one('click', function() {
localStorage.setItem('voted2', 'yes2');
//...
});
}
... or test the localStorage contents inside your event handler:
fn_vote2 = function() {
if (
localStorage.getItem("voted1")
&& !localStorage.getItem("voted2")
) {
localStorage.setItem('voted2', 'yes2');
//...
voteLink.off('click', fn_vote2);
}
};
voteLink.on('click', fn_vote2);
The generalization for vote1, vote3 should come easy. Note that the latter solution implies that you register the handler not just for a single event. Instead you deregister it upon success.
The advantage of the method is the option for cascaded voting without reloading the page.
Btw, since localStorage persists over sessions, it is advisable not to use generic keys like vote<n>.
The following code displays as intended in FireFox, but isn't displaying at all in Internet Explorer (v8).
// getLimits init
Frog.API.get('users.getInfo',
{
'params': {'id': UWA.Environment.user.id, 'details':'groups' },
'onSuccess': AssignPoints.getLimit,
'onError': function(err) { alert(err); }
});
...
// work out the user's limit, and how many points they've spent this week
// use LEAP library if necessary
AssignPoints.getLimit = function(data) {
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
/************** IT'S THIS LINE ONWARDS WHERE THE ALERTS SEEM TO BREAK IN IE */
if (AssignPoints.Limit == 0) {
AssignPoints.Specialist = true;
}
UWA.Data.getJson(AssignPoints.URL + "?cmd=getLimitsAndTotals&Giver_ID=" + AssignPoints.CurrentUser, AssignPoints.getPointsSpent);
}
AssignPoints.getPointsSpent = function(data) {
AssignPoints.SpentWeekly = data.SpentWeekly;
AssignPoints.SpentTotal = data.SpentTotal;
AssignPoints.displayLimitAndTotals();
}
// display data from getLimitAndTotals
AssignPoints.displayLimitAndTotals = function() {
var LimitsAndTotalsHTML = '<h2>Points Allocation</h2>';
if (AssignPoints.Specialist == false) {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>' + AssignPoints.Limit + '</strong></li>';
} else {
LimitsAndTotalsHTML += '<ul><li>Weekly Limit: <strong>Unlimited</strong></li>';
}
LimitsAndTotalsHTML += '<li>Spent this week: <strong style="color:#990000;">' + AssignPoints.SpentWeekly + '</strong></li>' +
'<li>Spent total: <strong>' + AssignPoints.SpentTotal + '</strong></li></ul>';
$('div#limits').html(LimitsAndTotalsHTML);
}
EDIT: CSS & HTML
I don't think it's a CSS/HTML issue, as I have the previous version of this script (which I decided to rewrite because it was hideous code and some odd mash-up of procedural and just pure bodging) which displays correctly in IE using exactly the same HTML&CSS.
#total_container
{ overflow: hidden; width: 870px; }
#groups
{ width: 250px; float: left; padding: 10px; }
#right_container
{ width: 580px; float: left; padding: 10px; }
span.check
{ font-size: 10px; color: #666; }
span.err
{ color: red; font-weight: 700; }
#limits, #search_div
{ width: 270px; float:left; padding: 0 10px; }
#groups li, #groups ul
{ list-style-type: none; background: none; margin: 0; padding: 0; }
#groups li a
{ background-color: #999; color: #eee; display: block; margin: 5px 0; border: #666; padding: 8px 2px 8px 10px; width: 243px; }
#groups li a:hover
{ background-color: #990000; }
The HTML is just <div id="limits"></div> and the JS updates it.
// EDIT
SECOND EDIT: ALERTS
I've tried putting random alerts into the code. In IE, in the for (var i in data[0].groups) loop, the alerts work. If I place an alert at any point after that for loop, the alert doesn't appear at all, regardless of whether I use a variable name or a random string such as "test".
In FF, the alerts work regardless of placement within either function.
** // SECOND EDIT **
FireFox, working as intended
Internet Explorer, b0rked
Does anyone know what might be breaking IE?
Thanks in advance.
OK! I've found the problem.
IE didn't like this segment of code:
for (var i in data[0].groups) {
if (data[0].groups[i].name.indexOf("LEAP") != -1) {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
When I've changed that to this format:
for (var i = 0; i < data[0].groups.length; i++) {
if (data[0].groups[i].name.substr(0,4) == "LEAP") {
AssignPoints.Limit = data[0].groups[i].name.substr(5,3);
}
}
It works as intended in FF and IE.