We Keep Coding

JS random order showing divs delay issue

I got function within JS which is supposed to show random order divs on btn click.
However once the btn is clicked user got to wait for initial 10 seconds ( which is set by: setInterval(showQuotes, 10000) ) for divs to start showing in random order which is not ideal for me.
JS:
var todo = null;
var div_number;
var used_numbers;
function showrandomdivsevery10seconds() {
div_number = 1;
used_numbers = new Array();
if (todo == null) {
todo = setInterval(showQuotes, 10000);
$('#stop-showing-divs').css("display", "block");
}
}
function showQuotes() {
used_numbers.splice(0, used_numbers.length);
$('.container').hide();
for (var inc = 0; inc < div_number; inc++) {
var random = get_random_number();
$('.container:eq(' + random + ')').show();
}
$('.container').delay(9500).fadeOut(2000);
}
function get_random_number() {
var number = randomFromTo(0, 100);
if ($.inArray(number, used_numbers) != -1) {
return get_random_number();
} else {
used_numbers.push(number);
return number;
}
}
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}
Question: How to alter the code so upon the btn click divs will start showing right away without initial waiting for 10 seconds? (take in mind I want to keep any further delay of 10 seconds in between of each div being shown)
Thank you.

Call it when you begin the interval
todo = setInterval((showQuotes(),showQuotes), 10000);

How to add next and previous control in the record detail view?

If you will click on any of the record row you will see the details of the record.
I wanted to add next and previous button on the details of next/previous row without click on top row. So that user don't have to click again back to top row to view details. They can simply use next / previous control to see next and previous record details.
I was trying this but didn't help.
<div *ngIf="isView" class="view-details">
<button (click)="onPrev()">Prev</button>
<button (click)="onNext()">Next</button>
component.ts
current = 0;
prev = -1;
onPrev() {
this.prev = this.allUser.current--;
alert("Prev" + this.prev);
}
onNext() {
this.prev = this.allUser.current++;
alert("Next" + this.prev);
}
Please help me with the solution.
You can view the code here: https://stackblitz.com/edit/angular-ivy-1tsz1r?file=src%2Fapp%2Fapp.component.html

You can find example here in this StackBliz Link
Inside you table tr click I have added new method parameter like below..
<tr class="record-row" (click)="viewUser(user, i, filteredUsers)"
*ngFor="let user of filteredUsers;let i = index">
and Inside your component viewUser() method is...
viewUser(user: any, index, filterData) {
this.isView = true;
console.log(user, index, filterData);
this.userObj = user;
this.currentIndex = index;
this.allUserTableData = filterData;
}
In above i have added two new class-variable currentIndex and allUserTableData. based on this two data variable next and previous traversal is looks like below code...
now.. next traversal code is
nextRecord() {
let next = (this.currentIndex += 1);
if (next > this.allUserTableData.length - 1) {
this.currentIndex = 5;
return;
}
let nextRecord = this.allUserTableData[next];
this.userObj = nextRecord;
console.log(nextRecord, next);
}
previouse traversal code is
previousRecord() {
let next = (this.currentIndex -= 1);
if (next < 0) {
this.currentIndex = 0;
return;
}
let nextRecord = this.allUserTableData[next];
this.userObj = nextRecord;
console.log(nextRecord, next);
}

Number elements by class and get placement of specific div

I have a list like this:
<div class="list"></div>
<div class="list"></div>
<div class="list on"></div>
<div class="list"></div>
... etc
I get the total like this:
var count = $('.list').length; // 4 in this case
But I want to write a function that selects the next div with the down arrow, and I can't figure out how to get the next div, select it, and deselect the current div. This is what I have now, but it doesn't work:
var visible = $('.list:visible');
var on = $('.list.on:visible');
if (e.keyCode == 40) { // down key
if(on.length == 0) {
visible.first().addClass("on"); // this works
}
else if( // div placement // < count) {
var next = on.next(); // this part doesn't work
on.removeClass("on"); // :(
next.addClass("on"); // :(
}
else { // if its the last div
// do nothing
}
}

You can do:
if (e.keyCode == 40) { // down key
if(on.length == 0) {
visible.first().addClass("on");
}
else if(on.length && on.next("div.list").length > 0) {
var next = on.next("div.list");
on.removeClass("on");
next.addClass("on");
}
else { // if its the last div
// do nothing
}
}
A quick demo: http://jsfiddle.net/GL7tA/

You can work with .index() to see which item is currently "selected":
var $items = $('.list:visible'),
$selectedItem = $items.filter('.on'),
selectedIndex = $items.index($selectedItem);
if (selectedIndex == -1) {
$items.eq(0).addClass('on');
} else if (selectedIndex + 1 < $items.length) {
$selectedItem.next().andSelf().toggleClass('on');
}

You have a syntax error in the else if ( part, where you say it doesn't work.
It doesn't work because the else if is expecting a condition to evaluate but you are not even closing the parenthesis of that if condition, neither have you openned the brackets for its block.

How to update variable in javascript/jquery after click?

I am trying to write some code that only allows buttons with the .add class function on click if there are fewer than 3 immediate children divs within the #hold placeholder div. theDiv_append is a seperate function that adds a div block within #hold div placeholder. I am trying to update the countingdivs variable to then count and update the number of divs within #hold, but it's not working. Currently, the add button does not get disabled.
var countingdivs = '1';
if(countingdivs <= '2') {
$(document).on('click',".add",theDiv_append);
countingdivs = $("#hold > div").length;
};
Any help would be great. Thanks!

Move the condition to the click handler:
$(document).on('click', '.add', theDiv_append);
function theDiv_append() {
var $hold = $('#hold'),
len = $hold.children('div').length;
if (len <= 2) {
// ...
}
}

Try:
var countingdivs = 1;
if(countingdivs <= 2) {
$(document).on('click',".add", theDiv_append);
countingdivs = $("#hold > div").length;
} else {
$(document).off('click',".add", theDiv_append);
}
Maybe try assigning countingdivs with the current length of #hold > div
var countingdivs = $("#hold > div").length;

Show/Hide & Mouseover Javascript

I been researching on Show/Hide javascript and pushed it further with a mouseover effect to achieve what I want. I've set up a Fiddle for better accessibility. However, I now want to push it by having up to 4 different text areas ("Click here for more information"), and each text area would have more hover text as I tried to show in the HTML code itself. The javascript that I used and edited now has "ID"s corresponding to "0" and "1" which wouldnt work for my current HTML code as it has funky names like "uu3308-10" (made with Adobe Muse). Now, I'm wonder what variables would I have to change within the Javascript to make it function properly and is there a way to compile this code so it works with at least 11 other "Click here for more information" points?
Note: The current javascript makes showMoreText2 appear under both showMoreText areas (would like to make only one hover text appear at a time).
CLICK HERE FOR THE FIDDLE -- > http://jsfiddle.net/TPLOR/vy6nS/
Thanks, I hope this was helpful enough. =)

kinda hackish: (see http://jsfiddle.net/vy6nS/30/ )
window.onload = function() {
var elems1 = document.getElementsByClassName("expander");
for (i = 0; i < elems1.length; i++) {
elems2 = elems1[i].childNodes;
for (x = 0; x < elems2.length; x++) {
if (elems2[x].className == "toggle") elems2[x].onclick = function() {
showMore(0, this);
};
else if (elems2[x].className == "showMoreText") {
elems2[x].onmouseover = function() {
showChilds("block", this);
};
elems2[x].onmouseout = function() {
showChilds("none", this);
};
}
}
}
};
function get_nextsibling(n) {
x = n.nextSibling;
while (x.nodeType != 1) {
x = x.nextSibling;
}
return x;
}
function showChilds(disp, elem) {
get_nextsibling(elem).style.display = disp;
}
function showMore(disp, elem) {
var children = elem.parentNode.childNodes;
for (i = 0; i < children.length; i++) {
if (disp == 0 && children[i].className == "showMoreText") {
children[i].style.display = children[i].style.display == "none" ? "block" : "none";
}
}
}​