Problem with WikiViewer project

http://codepen.io/Zeronsul/pen/mEkZgW

  1. Input srting.
  2. Click button.
  3. You will get output list of invisible data (opacity 0)
  4. After a short delay you will see last element of list to go visible.
  5. This is being done by
    a) setting opacity 0 for all list elements at first
    b) creating a function opacity in a loop (line 18) which changes opacity fo target element to 1
  6. However currently opacity function affects only last element of li.
    Ive done number of testing, changing scope of things and going from Z to 0-9, when there are plain numbers i can get desired output no probs. However getting output from each loop somehow fails.
  7. How do i fix this code into appearing every element of list in a manner last one currently does?

Hey this link may help: https://coderwall.com/p/_ppzrw/be-careful-with-settimeout-in-loops. In your code it would look something like this.

Thank you very much for your time, looks like you nailed the problem!

However what I was trying to do Is to set list elements to appear consecutively, not all at the same time. Looks like this delay is applied to all loop output which leads to “parallel” output.

That’s super easy: http://codepen.io/benjaminvanzwienen/full/QEXQOj/

I see, you dont set a predefined timeout value, but instead make its value to depend on the loop itself, increasing with each iteration. So that first iteration has 100 delay and 3 has 300 delay and this works like sort of ‘ladder’. Nice and elegant.

I went for your provided link and used a structure with setDelay()
So its sorta callback thing, right? We define our function with placeholder n variable and then summon it by putting in the loop setDelay() and our real-deal value in brackets. Yeah, its working.

for (z=0;z<listArray.length;z++)
{ setDelay(z); }

function setDelay(n) {

setTimeout(function opacity() {
x = listArray[n];
x.style.opacity=‘1’
}, 100*n);
}

That is what i devised. https://codepen.io/Zeronsul/pen/mEkZgW

However one part i still dont understand. In your code you enveloped your pre-timeout function in () and gave it a hugging (z), making somtheing like

(function (n) {} (z));

What is that? Im unfamiliar with this sort of syntax and my variant seems to work without it either. Can you please hold for another minute and explain?

Hey it is a self invoking anonymous function. So it is anonymous (no name) and self-invoking (runs directly). It does the samething as your code does (call a function with a parameter), with the only difference that you don’t need to have a function outside your for loop.

Aha, I see, so (function(value){} (‘value goes here’)) is another way to run function.

Ive put it here to test. http://codepen.io/Zeronsul/pen/BzgVOa?editors=1111

I see. You’ve been of great help man!

1 Like

You shouldn’t give the function a name though, because it isn’t accesible elsewhere.

Yeah, i know. Just helps to ‘parse’ stuff in my brain.

http://codepen.io/Zeronsul/full/mEkZgW/

While I seemingly finished user stories I hafta say Im starting to be really frustrated about how every time at the end my design turns into a mess.

I start with some simple data divs with placeholder buttons and paddings.
Then i attach to html hooks JS rules to set up desired behaviour of the page.
After that I move onto finishing divs, fill out CSS tab and here it becomes really challenging. Divs start to overflow, wrapper jumps all over the page if no position:absolute or messes up responsive content if it is. Height of divisions filled with different content dont match, elements appearing to be aligned at center on one screen jump offset on another etc etc.

I studied some other people projects with clean responsive rows I liked. A lot of them are using bootstrap column which I really dont want to use yet, as Im trying to get a knack of native JS coding.

I think Ill take a break from FCC before next challenge and read Coursera stuff on HTML and CSS which is currently open.