How to better? Change txt via js function based on what timeline is running

Using JavaScript with Hype Function Library
1

I have a little function where I can change an innerHTML of a div based on what timeline is running.
This is working fine but it’s going problematic when the timeline stopped or is to short. Can you guys give me a better suggestion? The if condition should be true in that case the timeline is/and was running before. ChangeTXTbasedWhatTimelineIsRunning.hype.zip (22.0 KB)

Olof

2

try something like this in your code:


	/**
	* hypeDocument.isPlayingOrAtEndTimelineNamed 1.0
	* @param {String} name of timeline
	* @return {Boolean} true if playing or at end of timeline else false
	*/
	hypeDocument.isPlayingOrAtEndTimelineNamed = function (name) {
		var isPlaying = this.isPlayingTimelineNamed(name);
		var time = this.currentTimeInTimelineNamed(name);
		var duration = this.durationForTimelineNamed(name);
		return isPlaying || (time>0 && time==duration);
	}


	var timelinen0 = hypeDocument.isPlayingOrAtEndTimelineNamed('Main Timeline')
	var timelinen1 = hypeDocument.isPlayingOrAtEndTimelineNamed('Timeline1')
	var timelinen2 = hypeDocument.isPlayingOrAtEndTimelineNamed('Timeline2')


	var lightbox = (element.id)

	/* your introducing a hierarchy here hope your aware of that, also look into hypeDocument.setInnerHtmlByClass */
	if (lightbox == "ovl-1" && timelinen0) {
		hypeDocument.getElementById('txt').innerHTML = "MainTimeline Text";
	}
	
	if (lightbox == "ovl-1" && timelinen1) {
    	hypeDocument.getElementById('txt').innerHTML = "Timeline1 Text";
	}
	
	if (lightbox == "ovl-1" && timelinen2) {
		hypeDocument.getElementById('txt').innerHTML = "Timeline2 Text";
	}

Optional information on hypeDocument.setInnerHtmlByClass (better for scene and layout wide replacements)

2 Likes
3

Hi Max,

smart solution. Works perfectly, thanks.
setInnerHtmlByClass was not necessary for this project but I will have look later on this.

Olof