Hey everyone! I’m trying to create a timeline for a website I’m building and it would be awesome for it to look somewhat like the timeline in the link (see below). I’ve tried using a slider, but the problem with that is that I can’t click on the date and have it navigate to that section (see attached screencast).
I also checked out the Lumifish timeline and that doesn’t work for me.
I was thinking if there is some code (onClick is my guess) I could attach to a specific date (text) that would make the slider slide to a specific slide? I don’t have very much experience with coding so not too sure.
Hey
If you click the 2012 for example and go to properties panel and add the onClick event to that year. Then you can use the sliders and use the changeSlidee function to switch which slide to show using code. See here for more information
Thank you for your reply. I was trying that but for some reason it wont work. Here is my code:
export function text79_onClick(event, $w) {
$w(“fullWidthSlider”).changeSlide(2);
}
with “fullWidthSlider” being the slider and “text79” being the text I’m clicking on. However, when I click the text, it does nothing and returns the error:
The function you have for your onClick button looks like this:
export function text79_onClick(event, $w) {
$w("fullWidthSlider").changeSlide(2);
}
I think you need to be using next() instead of changeSlide(2).
next( )
Moves to the next item.
Description
The next() function returns a Promise that is resolved when the next item is completely rendered. Calling next() when on the last item, moves to the first item.
Otherwise what you need to do is determine which slide is currently being rendered using currentIndex and slides to calculate the offset from the currentIndex for the next slide you need to go to,
So either your code should read:
export function text79_onClick(event, $w) {
$w("fullWidthSlider").next()
.then((nextSlide) => {
// Change the text setting for $w('#text79') ??
});
}
or you need to do some math
export function text79_onClick(event, $w) {
let lastSlideIndex = $w("fullWidthSlider").slides.length - 1;
let slideIndex = $w("fullWidthSlider").currentIndex;
// This button only needs us to load the next slide if there is one
// Or return back to the first slide If we have reached the end of the list
slideIndex = (slideIndex === lastSlideIndex ? 0 : slideIndex+1);
$w("fullWidthSlider").changeSlide(slideIndex)
.then((nextSlide) => {
// Change the text setting for$w('#text79') ??
});
}
The latter example can be adapted to step by two if you decide to enable $w(‘#text80’) as a button ;-).
Basically, I just started with a slider and on each page, added in the relevant dates. They each have the “slide in” animation attached to them to give the transition some smoothe-ness.
Just like that, the slider will work really well if you use the navigational arrows. But, to get the text to be clickable so that you can click on the date directly to view that date, you gotta use some coding. I’ll paste the first few lines of code that I have. There are quite a few more lines, but they are all the same (you’ll notice the pattern).
$w.onReady(function () {
});
export function text79_onClick(event, $w) {
$w("#fullWidthSlider").changeSlide(1);
}
export function text80_onClick(event) {
$w("#fullWidthSlider").changeSlide(2);
}
export function text86_onClick(event) {
$w("#fullWidthSlider").changeSlide(0);
}
export function text84_onClick(event) {
$w("#fullWidthSlider").changeSlide(2);
}
etc. etc.
You’ll notice that the
.changeSlide(2);
line has a zero (in place of the 2) in some cases. Keep in mind that the numbering of your slides starts at 0. So, to reference my example, the year 2000 is slide 0, the year 2002 is slide 1, etc.
Now, the reason why there are so many seemingly identical lines of code is because each slide (2000, 2006, etc.) needs to have its own text. So whenever you move to the next slide, you have to RE-CODE each text box so that when it is clicked, it jumps to the corresponding slide.
text84_onClick(event) {
in the above line, text84 is the specific text box. Just enable dev mode and then select the text you want to figure out the ID number and just above the outer blue line that indicates you’ve selected it, it’ll say its name. Also, enabling the “Properties Panel” under “Tools” at the top of your screen will show it too when selected.
@lukefrostzw When I type in the code and then preview it says " Loading the code for the History page. To debug this code, open t9gj3.js in Developer Tools"
And when i put the code would i click on the text then go to the onClick section and type the code for each text?