I'm trying to use javascript for next and previous buttons that cycle through a list of professors in a database. The code I have works except for one bizarre glitch: when there are over 9 professors (for this example there will be 11 professors), clicking the "previou"s button on Prof2 displays Prof1, Prof10, & Prof11 simultaneously.
Similarly, clicking "next" on the last prof, like Prof11 in this example, displays Prof1, Prof10, & Prof11 simultaneously. Can you spot the error? Is there a simpler way to create these buttons? Thank you in advance.
$.vars = {
counter : 2,
limit : $getUnitFacultyPages.TotalItems,
};
function nextItem() {
$('li','#profs')
.fadeOut('slow')
.filter( function() { return this.id.match('profs' + $.vars.counter); })
.fadeIn('slow');
$.vars.counter == $.vars.limit? $.vars.counter = 1 : $.vars.counter++;
}
function prevItem() {
$.vars.counter -= 2;
if($.vars.counter == 1){
$.vars.counter = $.vars.limit;
} else if ($.vars.counter < 0){
$.vars.counter = $.vars.limit -1;
}
nextItem();
}
$("#profs-next").click(function () {
nextItem();
});
$("#profs-prev").click(function () {
prevItem();
});
One thing that stands out is use of match that would "match" the regular expression and would cause the behavior that you describe. This should be changed the equality.
return this.id.match('profs' + $.vars.counter);
should be
return this.id == 'profs' + $.vars.counter;
There could be other things as well.
Not sure whether or not this will solve your problem, but there are a couple things that look a little suspect to me at a glance:
Why do you decrement by 2?
You're checking if $.vars.counter == 1 or $.vars.counter < 0. What happens if $.vars.counter == 0?
Edit:
Also, your prev/next logic is a little strange (imo). Ignoring your display logic, I might change it to:
$.vars = {
idx: 0,
limit: 5,
};
function nextItem()
{
$.vars.idx = $.vars.idx >= $.vars.limit ? 0 : ++$.vars.idx;
}
function prevItem()
{
$.vars.idx = $.vars.idx <= 0 ? $.vars.limit : --$.vars.idx;
}
Related
I'm trying to make a simple program in javascript+html. If exp exceeds within a certain range/exceeds a certain number, the level displayed goes up by 1. I've tried to make it show onload, but the level doesn't change no matter what happens to the exp staying at the highest one I've written code for so far.
Javascript:
var exp6 = localStorage.exp6;
var pexp6 = parseInt(exp6);
function char6() {
res.innerHTML = res6;
var lsps = pexp6;
localStorage.setItem("lsp", lsps);
return PrUpdate();
}
var lsp = localStorage.lps;
function PrUpdate() {
if (lsp <= 999) {
lvl.innerHTML = 1;
}
else if (lsp >= 1000 && lsp <= 1999) {
lvl.innerHTML = 2;
}
else if (lsp >= 2000 && lsp <= 2999) {
lvl.innerHTML = 3;
}
else if (lsp >= 3000 && lsp <= 3999) {
lvl.innerHTML = 4;
}
else if (lsp >= 4000 && lsp <= 4999) {
lvl.innerHTML = 5;
}
}
I've also included the setChar() function in the window.onload of the page. I've tried including the function itself in it as well, but whether I add it at the end of the setChar() or in the window.onload the problem stays the same. All other functions work fine, it's just this part that doesn't. I'm also trying to make it generic to fit other 'accounts' I'm trying to make to save myself time. But I just can't make it work.
Edit:
I've figured out why it didn't work, and it was cause I had my localStorage.lsp in the wrong place.
I'm trying to figure out now how to make it so I don't have to refresh the page to get it to appear.
[ Solved my issue :), if unclear by my edit above]
The way you are trying to access values from localstorage is incorrect. This is not valid: localstorage.exp6.
Instead try this: localstorage.getItem('exp6')
See the documentation of Web Storage API for more information
I want to make a continous counter. I mean, I want to close the page and in the other day open it and continue the counter from where I left.
Like, my counter did count 14235 times in one day. In another day I want it to continue from where I left (14235).
Code I made :
var a = 0; //// a is the "counter"
function count() { ///// function to count
chrome.storage.local.get(['a'], function(value) { return a = value.a;});
a += 1;
chrome.storage.local.set({"a": a}, function(){})
console.log(a)
setTimeout(count, 5000)
}
count()
I get 2 values in console.log, one from 0 and one from 14235, while I want get only one. Help.
Your questions is not getting well seen so I decided help you.
You cannot make a equal the last value, at least I cannot do it.
But you can do a better thing. Call it.
function count() {
if(a === 0){ chrome.storage.local.get(['b'], function(value) { return a = value.b }); } else { chrome.storage.local.set({"b": a}, function(){}) }
/// here, if a = 0 it will get the previous value but if a != 0 it will save the value :D
console.log(a)
setTimeout(count, 100)
a += 1;
}
count()
Hope see you again !
I have 8 form inputs that are asking for either 8 half-day activity dates or, 4 fullday dates.
I collected all of the input values and put them into an array, and to test the collection process, wrote the following function that just says if ALL the inputs are empty, keep a button disabled and if ALL are full, enable the button.
function checkMeetings()
{
for(var i = 0; i < meetings.length; i++)
{
if(meetings[i] === "" || meetings[i] === null)
{
meetingsCanSubmit = false;
}
else
{
meetingsCanSubmit = true;
}
}
}
checkMeetings();
That test worked fine.
What I'd like to do is create a counter that counts the number of input boxes that have been filled in and when it gets to at >= 4 enable the button. (In reality it won't enable the button it's going to run a secondary function but for the purposes of this example I'm keeping it simple.)
Since the for loop is counting via the i++ anyways, I tried something to the effect of
if(meetings[i] <= 4) do the following, but that doesn't seem to be doing the trick. Should I be setting up a second counter within my if-statement?
You can use Array.prototype.filter(), check the .length of resulting array
var meetingsCanSubmit = meetings.filter(function(input) {
return input !== "" && input != null
}).length >= 4;
if (meetingsCanSubmit) {
// do stuff
}
I'm building a custom slider, with the possibility for the end user, to prioritize which slides should come first, I figured the best way to do this was making a data-priority on each of the main DOM elements, that to start with are set to Opacity: 0, the maximum of DOM elements in this case is 3.
However as you can see in the code, it will simply grab the DOM elements from the top and down, and ignore the data- value.
How do I put these in the correct order into the array?
var hideSlide = 0;
var showSlide = 1;
var amountOfSlides = 2;
var slideArray = [];
var dataPriority = 1;
$('.hero-detail-container').each(function(e) {
if ( $(this).data('active') == '1' && $(this).data('priority') == '1' ) {
slideArray.push($(this));
}
else if ( $(this).data('active') == '1' && $(this).data('priority') == '2' ) {
slideArray.push($(this));
}
if ( $(this).data('active') == '1' && $(this).data('priority') == '3' ) {
slideArray.push($(this));
}
// THE ISSUE IS HERE
// The code will push to slideArray in the order
// it sees the DOM elements from the top, even if
// the priority says the first element is number 2 fx.
});
slideArray[0].css({
"opacity": "1"
});
setInterval(function() {
console.log(slideArray);
slideArray[hideSlide].css({
"opacity": "0"
});
slideArray[showSlide].css({
"opacity": "1"
});
if ( showSlide >= amountOfSlides ) {
hideSlide = amountOfSlides;
showSlide = 0;
}
else if ( hideSlide == 2 && showSlide == 0 ) {
hideSlide = 0;
showSlide = 1;
}
else {
hideSlide++;
showSlide++;
}
}, slideTimer());
Couple of methods to do this.
1: Have multiple arrays you push data too and then combine them at the end.
2: Loop through the data-set multiple times to push in the order you want. Use JQuery to get the elements you want.
3: Sort the array after you've added the elements.
slideArray.sort(function(a,b){ return a.data('priority') - b.data('priority') });
Using the jquery cookie plugin I have a very simple function as so :
demoPopupInit: function() {
// alert($.cookie('modal-popup'));
if (! $.cookie('modal-popup')) {
$.cookie('modal-popup',1) ;
}
if ( $.cookie('modal-popup') <= 3 ) {
// return;
var modal_cookie = $.cookie('modal-popup') ;
modal_cookie = modal_cookie++;
$("#intro_index").modal({backdrop:true});
$.cookie('modal-popup', modal_cookie );
}
},
}
I am sure it is a very simple mistake, but my poor JS skills do not allow me to understand why the alert() in the begining always turn 1..
I also tried
if (! $.cookie('modal-popup') == NULL) {
$.cookie('modal-popup',1) ;
But of course ,the problem is not there , and no other error reported in console.
My aim is to turn the modal pop-up on only on 3 first visits .
Just change post increment to preincrement:
modal_cookie = modal_cookie++;
to
modal_cookie = ++modal_cookie;
Also cookie returns a string value, to be safe use parseInt to compare int value.
and avoid reading cookie multiple times, save it in a varible.
Short:
demoPopupInit: function() {
if (!$.cookie('modal-popup')) {
$.cookie('modal-popup',1) ;
}
var curval = parseInt($.cookie('modal-popup'));
if ( curval <= 3 ) {
// return;
$("#intro_index").modal({backdrop:true});
$.cookie('modal-popup', ++curval);
}
},
Try:
if($.cookie('modal-popup').length < 1){
$.cookie('modal-popup',1);
}
If the cookie doesn't exist, the length will be -1; if it does, it will be 1 or greater.