Making a traditional film animation using kirupa's slide show

44 
 function stopTimer() {
  // wait 2 seconds before calling goInactive this changes speed of slideshow
  timeoutID = window.clearInterval(goToStartItem, 1);
  //setTimeout(goToNextItem, 2000);
}

tried to add this function and call it

45

… by calling it from this button which is linked to the close button by id l on the svg element closed

46 
<div id="Nw46" class="content"><svg xmlns
<path class="l"fill="#FFFFFF" stroke="none" d="
M 40.75 -18.45.
<g id="closed" transform="matrix( 1, 0, 0, 1, 8,196) 
<path id="" class="l" data-pos = "0vh" fill="#000000" stroke="none" d="
M -14.7 -5.35
Q -15.05 -6.35 -16.4 -6.85 -17.8 -7.35 -18.6 -5.75 -19.45 -4.25 -17.7 4.25
L -17.65 5.75
47

so obviously my links are all a bit messed up because i have been mucking around with the code so much. but i still cant attatch to a item link or frame reference that works I think because the js loop is still active and as i understand it cant have 2 buttons with the same id and function linked in js without crafty code

48 
function goToStartItem() {  
   activeLink = [0];
}
49

so I have created a function go to start item that acts on an element svg button closed to take it to first frame and changes its fill colours by acting on id l of that svg

50 
      <script>
window.addEventListener("DOMContentLoaded", () => {
  const button = document.getElementById("closed");
  let lightsOn = false;

  button.addEventListener("click", () => {
    const labels = document.querySelectorAll(".l");
    labels[0].setAttribute("fill", lightsOn ? "white" : "#FFC05B");
    labels[1].setAttribute("fill", lightsOn ? "white" : "#F86285");
    
    lightsOn = !lightsOn;
    goToStartItem()

  });
});
</script>
51

blah dont understand your text editor it’s formatting is illusive or my code is bad, but you get the idea i hope - html
div id=“Nw46” class=“content”><svg xmlns=“SVG namespace” version=“1.1” xmlns:xlink=“http://www.w3.org/1999/ id=“closed” blah
path class=“l"fill=”#FFFFFF” stroke=“none” d=“” blah
<path class=“l” data-pos = “0vh” fill=“#000000” stroke=“none” d="/>blah end of svg

52

and this works like the replay button now i have to get it to stop on active link[0] initially i thought i could link by putting a data atribute on this button to add it to the array of images but that did not work either so will take that out

53

totally flumoxed think you need to explain what named functions do in your write up like what active link item id and all of it relate to links…i and how they act on each other… or at least a hint…please special k without reading and understanding the js bible all thousand pages dont know what to do please help

54

I think I understand what you are trying to say. The Close button appears here:

image
image1252×1462 22.8 KB

When the Close button is pressed, should the behavior be the same as what happens when you hit the Replay button?

Also, when pasting code, select your pasted code and click on the </> Code formatting button in the toolbar. That will make sure the code displays properly.

Regarding this:

I do think that taking time to learn JavaScript (or preferably via my beginners-friendly Learn JavaScript guide) would be more beneficial for you than trying to reverse engineer a fairly complicated tutorial.

Thanks,
Kirupa

55

Thanks Kirupa yes will get on that guide, yes its that close button, but the function is not replay, it is go to start of animation and stop there.

56

div id=“navLinks”>
ul>
li class=“itemLinks” data-pos=“0vh”>
li class=“itemLinks” data-pos=“-100vh”>
li class=“itemLinks” data-pos=“-200vh”>
li class=“itemLinks” data-pos=“-300vh”>
li class=“itemLinks” data-pos=“-400vh”>

57

the itemLink data-pos=“0” the first one that is active stop here when you click close button

60

will look at all your updates give me a couple of weeks will start posting my discoveries after learning thank you K

61

been looking into the bible and learning slowly looking at timers and loops in relation to your js for my animation what is itemId is it just a name or is it a js command, does it separate and give links a separate id. Likewise e.target - an event target? like a button click, where do i search to explain because js is so intrinsic it helps if it is explained case for case for newbies like me.

62

You may actually find the tutorials here to be informative and more beginner-friendly than the JS Bible: Learn JavaScript: Visual and Beginner-Friendly Tutorials

If you start at the top and go down, you’ll build-up your understanding of core JS concepts including the ones used by the slide show. I am almost certain that after a week, you’ll be familiar enough with JavaScript to be able to create your own slideshow :slight_smile:

63

thanks Kirupa sorry i meant that figuratively. I have been learning your javascript beginners guide.

1 Like
64

Oh haha! :laughing:

I have (a now older version of) the JS Bible, and it is a good book as a reference. Not for the faint of heart :innocent:

65

yep I thought eloquent javascript was good love the quotes and the writing dont understand why it a got bad reputation…?