Thank you so much new script gives me a great start to see how the functionality works. In the script can you explain how to change playing the slideshow once as opposed to playing continuously, or button play to end and stop and button go to start and stop to show difference in code please.Been changing button true false seems to work a bit better Big hack but if you remove active link below it plays only once. now buttons need tweaking after slideshow has finished. if only firing slideshow once add activelink=0 to play button and remove at function goToNextItem()ā¦else, see notes below
<script>
// just querying the DOM...like a boss!
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
//if changed this stops slideshow instead of restarting at clicked link after stop button is pressed
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
var position = link.getAttribute("data-pos");
var translateValue = "translate3d(0px," + position + ", 0px)";
wrapper.style["transform"] = translateValue;
link.classList.add("active");
}
//
// The code for sliding the content automatically
//
var timeoutID;
function startTimer() {
// wait 2 seconds before calling goInactive this changes speed of slideshow
timeoutID = window.setInterval(goToNextItem, 40);
//setTimeout(goToNextItem, 2000);
}
//startTimer(); add this to run automatically
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
//take out to make all links active
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
}
else {
//activeLink = 0; insertfor looping playback
}
var newLink = links[activeLink];
changePosition(newLink);
}
let startButton = document.querySelector("#startButton");
let pauseButton = document.querySelector("#pauseButton");
let playButton = document.querySelector("#playButton");
let replayButton = document.querySelector("#replayButton");
startButton.disabled = true;
playButton.disabled = false;
pauseButton.disabled = true;
startButton.addEventListener("click", () => {
window.location.reload();
pauseButton.disabled = false;
playButton.disabled = false;
});
pauseButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startButton.disabled = false;
pauseButton.disabled = true;
playButton.disabled = false;
});
playButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startTimer();
activeLink = 0;//can set what frame to start with
startButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
});
replayButton.addEventListener("click", () => {
activeLink = 0;
window.clearInterval(timeoutID);
removeActiveLinks();
changePosition(document.querySelector("#Nw1"));
startTimer();
pauseButton.disabled = false;
playButton.disabled = false;
});
</script>
kirupa getting my svg content down to 3kb per frame from 62kb on my animation as was getting fouc on start up slide really want it to work with larger images, should be able to handle it on older machines and mobiles but lagging not loading content before firing. put an inline svg on first frame and that seemed to help, so not sure if content or retrofitted script that slowing things down. please help when you have time nick - londonkillsme.com
just using an svg editor to ungroup and delete repeated unessescary code. but my model should work with larger files as proved by reducing file sizes and finding no difference, there is glitch on first onload it takes 2or3 secs for body onload without first svg frame being inline code. When first frame is a external backgroun the same as all of them. Its a hack to solve this by making it inline. dont know why this is happening. will keep working. thanks K
one of my most important questions is how to use svg backgrounds as a data sorce without them being inline. Convert them to 64 to compact them but no anchors?, You can open external links on a svg file straight, yes. you make an svg a background, yes with no links. you make it inline yes you get layerable links. so i guess it is part of the dom. but why are external svg or image backgrounds not part of the dom when svgs are clickable over html layers. so powerful but missing that background accesibilty to make 3dā¦scapes like css should be like svg. Also why are fixed positions not allowable to clickable backgrounds, like creating a dashboard, with svg should be background clickable, but this is removed from normal play. I guess this is to keep things safe and accesible. While on another note html body shows up code in cool old school green on black, if you play ordering your layout, unlike svg, ever seen that, great background for your code campā¦ and on thanks K will keep looking and learningā¦N
hit a stumbling block special K need your helpā¦ tried to post code here not working
please k need help to resolve how to click event inside of splash screen in your js for svg driving me nutsā¦londonkillsme.com
start in your js is a page reload not a start at element or frame 1, please helpā¦Nick
var links = document.querySelectorAll(".itemLinks");
var wrapper = document.querySelector("#wrapper");
// the activeLink provides a pointer to the currently displayed item
var activeLink = 0;
// setup the event listeners
for (var i = 0; i < links.length; i++) {
var link = links[i];
link.addEventListener('click', setClickedItem, false);
// identify the item for the activeLink
link.itemID = i;
}
// set first item as active
links[activeLink].classList.add("active");
function setClickedItem(e) {
removeActiveLinks();
//if changed this stops slideshow instead of restarting at clicked link after stop button is pressed
var clickedLink = e.target;
activeLink = clickedLink.itemID;
changePosition(clickedLink);
}
function removeActiveLinks() {
for (var i = 0; i < links.length; i++) {
links[i].classList.remove("active");
}
}
// Handle changing the slider position as well as ensure
// the correct link is highlighted as being active
function changePosition(link) {
var position = link.getAttribute("data-pos");
var translateValue = "translate3d(0px," + position + ", 0px)";
wrapper.style["transform"] = translateValue;
link.classList.add("active");
}
//
// The code for sliding the content automatically
//
var timeoutID;
function startTimer() {
// wait 2 seconds before calling goInactive this changes speed of slideshow
timeoutID = window.setInterval(goToNextItem, 40);
//setTimeout(goToNextItem, 2000);
}
function stopTimer() {
// wait 2 seconds before calling goInactive this changes speed of slideshow
timeoutID = window.clearInterval(goToStartItem, 1);
//setTimeout(goToNextItem, 2000);
}
//startTimer(); add this to run automatically
function resetTimer() {
window.clearInterval(timeoutID);
startTimer();
}
function goToNextItem() {
removeActiveLinks();
if (activeLink < links.length - 1) {
activeLink++;
}
else {
//activeLink = 0; insertfor looping playback
}
var newLink = links[activeLink];
changePosition(newLink);
}
function goToStartItem() {
removeActiveLinks();
if (activeLink > links.length - 1) {
activeLink = 0;
startTimer();
}
else {
activeLink = 0;
}
var newLink = links[activeLink];
changePosition(newLink);
}
let startButton = document.querySelector(ā#startButtonā);
let pauseButton = document.querySelector(ā#pauseButtonā);
let playButton = document.querySelector(ā#playButtonā);
let start = document.querySelector(ā.startā);
let startb = document.querySelector(ā.startbā);
let replayButton = document.querySelector(ā#replayButtonā);
let index = document.querySelector(ā#contentContainerā)
startButton.disabled = true;
playButton.disabled = false;
//start.disabled = false;
pauseButton.disabled = true;
startButton.addEventListener("click", () => {
window.location.reload();
pauseButton.disabled = false;
playButton.disabled = false;
//start.disabled = false;
});
pauseButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startButton.disabled = false;
pauseButton.disabled = true;
playButton.disabled = false;
//start.disabled = true;
});
playButton.addEventListener("click", () => {
window.clearInterval(timeoutID);
startTimer();
startButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
index.classList.add('animationClass');//important takes backround to lower z index with out play click button shows bg on top
});
start.addEventListener("click", () => {
window.clearInterval(timeoutID);
startTimer();
activeLink = 0;//can set what frame to start with
startButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
index.classList.add('animationClass');//important takes backround to lower z index with out play click button shows bg on top
});
startb.addEventListener("click", () => {
window.clearInterval(timeoutID);
startTimer();
activeLink = 0;//can set what frame to start with
startButton.disabled = false;
pauseButton.disabled = false;
playButton.disabled = true;
index.classList.add('animationClass');//important takes backround to lower z index with out play click button shows bg on top
});
replayButton.addEventListener("click", () => {
activeLink = 0;
window.clearInterval(timeoutID);
removeActiveLinks();
changePosition(document.querySelector("#Nw1"));
startTimer();
pauseButton.disabled = false;
playButton.disabled = false;
index.classList.add('animationClass');//important takes backround to lower z index with out play click button shows bg on top
});
Hi Nick - sorry, Iām not able to understand what isnāt working. Can you please take a screenshot of where the functionality you are trying to add is located and what isnāt working?
this is the splash screen and this works fine on clicking enter removes visability on this element, changes z-index and shows you first frame.
there is a dom loader at the very start, which you cant see here
this is last animation frame. Notice that there is a close button in the jacket and a start button. Both the start button and the close button (not working) should take you back to the first frame and not the splash screen or the loader. The start button does this because it has a
The window.locationreload function was great and worked fine until i put in the splash screen because it reloads and refreshes the webpage in its entirety when I just want it to go to the first frame
replayButton.addEventListener("click", () => {
activeLink = 0;
window.clearInterval(timeoutID);
removeActiveLinks();
changePosition(document.querySelector("#Nw1"));
startTimer();
pauseButton.disabled = false;
playButton.disabled = false;
index.classList.add('animationClass');//important takes backround to lower z index with out play click button shows bg on top
});
the replay button takes you to the first frame but by copying some of the functions I still cannot get the new button close to stop at the first frame.
I tried writing a stop function to work onclick but my javascript is not good enough to call itemLink [0]??? or is it i[0]
I also tried to link the splash screen function remove visability etc to a close button with a window reload but that did not work either maybee because I do not understand the break loop cycle anyways I am stumped really tried to make it work
