We Keep Coding

Forge: Select a single part: cant switch between parts

I am trying to link part id's to PDF pages. At the moment I am test linking them by:
const page = results[0].selection[0] % 100;
Each part ID does now link to a page. However, it only works when I click on a part -> click off the part -> then click on another part. If you try to switch between parts it doesnt show the pdf.
I think there is something wrong with the pdf#page part. As I can switch between parts if I change the code and dont link to a page.
I noticed that the same issue happens on the demo: https://forge-digital-twin.autodesk.io/
Any ideas on how to solve this?
Many thank,
Poppy
Here is my code:
function initDocument(facility) {
// Only enable when exactly one part is selected
const $alert = $('#maintenance-docs div.alert');
$alert.show();
$('#maintenance-docs embed').hide()
$('#maintenance-docs > .show-based-on-selection').hide();
NOP_VIEWER.addEventListener(Autodesk.Viewing.AGGREGATE_SELECTION_CHANGED_EVENT, function(ev) {
const results = NOP_VIEWER.getAggregateSelection();
if (results.length === 1 && results[0].selection.length === 1) {
$alert.hide();
const page = results[0].selection[0] % 100;
console.log(page);
$('#maintenance-docs > .show-based-on-selection').show();
$('#maintenance-docs embed').attr('src', `/resources/Operation-manual-Sigg-Plant.pdf#page=${page}`).show();
//$('#maintenance-docs embed').show();
} else {
$alert.show();
$('#maintenance-docs > .show-based-on-selection').hide();
$('#maintenance-docs embed').attr('src', '');
//$('#maintenance-docs embed').hide();
}
});
}

Try with
Autodesk.Viewing.SELECTION_CHANGED_EVENT
Inside the event function keep same functionality.

Prepending Old Chat Messages to Chat Box

I'm trying to prepend old messages to a chatbox when the user scrolls to the top. I'm using eventListeners as the code illustrates, but I'm running into an error where only the last chatbox is working properly. It seems that bodies[index].scrollTop and bodies[index].scrollHeight always returns 0 with the exception of bodies[lastIndex]. Why might this be? (logging bodies[index] correctly returns the div element)
document.querySelectorAll('.popup-messages').forEach((item, index) =>
{
item.addEventListener('scroll', async function()
{
if (chatReady[index] == true && bodies[index].scrollTop == 0)
{
chatReady[index] = false;
var previousHeight = bodies[index].scrollHeight;
await getMessages(item.id.replace(":body", ""));
var heightDiff = bodies[index].scrollHeight - previousHeight;
bodies[index].scrollTop += heightDiff;
}
})
})
Edit: If there's a different way to make multiple eventListeners dynamically, please share it with me as it would help a lot.

This problem was solved by replacing bodies[index] with item. Perhaps there was a bug that occurs when more than one variable is associated with an element.

Is there a way to have jPlayer's timeupdate execute only once a second?

I am trying to create a pop out div (related-products) of items related to specific times in a video with jPlayer. Here is my code:
$("#jquery_jplayer_1").bind($.jPlayer.event.timeupdate, function(event) {
var requestProducts = xml.getElementsByTagName("product");
for(var i = 0; i < requestProducts.length; i++){
var mark = (requestProducts[i].getElementsByTagName("mark")[0].childNodes[0] == undefined) ? '' : requestProducts[i].getElementsByTagName("mark")[0].childNodes[0].nodeValue;
var item_name = (requestProducts[i].getElementsByTagName("item_name")[0].childNodes[0] == undefined) ? '' : requestProducts[i].getElementsByTagName("item_name")[0].childNodes[0].nodeValue;
var item_url = (requestProducts[i].getElementsByTagName("item_url")[0].childNodes[0] == undefined) ? '' : requestProducts[i].getElementsByTagName("item_url")[0].childNodes[0].nodeValue;
var item_thumb_url = (requestProducts[i].getElementsByTagName("item_thumb_url")[0].childNodes[0] == undefined) ? '' : requestProducts[i].getElementsByTagName("item_thumb_url")[0].childNodes[0].nodeValue;
var newItem = ("<li><a href='"+item_url+"' target='_blank'><img src='"+item_thumb_url+"'><br /><strong>"+item_name+"</strong></a></li>");
if ($.jPlayer.convertTime(event.jPlayer.status.currentTime) == mark){
if (i < 1){
$("#related-products").css('display','block');
$("#related-products").html("<h4>Related Products</h4><ul class='slider'></ul>");
}
$(".slider").append(newItem);
$("#related-products").scrollTop(208*i);
}
}
});
I am using the jPlayer event timeupdate along with convertTime to get the time in seconds to match a preset time (mark) for each item to be displayed. The problem I am having is that timeupdate returns 8 times per second, so the items are being added 8 times instead of just once. If I change the code to if ($.jPlayer.convertTime(event.jPlayer.status.currentTime) > timecode){ it will add each item only once, but then it will continually execute $("#related-products").scrollTop(208*i); so the scrolling of items in the div doesn't work properly. Is there a way to either get timeupdate to happen only once a second or to get $("#related-products").scrollTop(208*i); to only happen once? I am a bit of a noob at this, so any help would be greatly appreciated!

You can use a boolean to know if you already did your function call or not.

using a button to switch between two states

Essentially I want to use a button to bring a div to the front using the CSS z-index and then when pressing the button again I want it to revert back to its original state.
This is the code I have got so far and it will happily change it first time round but it wont revert it back.
function thumbnail(){
if (document.getElementById("div").style.zIndex= -3){
document.getElementById("div").style.zIndex= -2;
}
if (document.getElementById("div").style.zIndex= -2){
document.getElementById("div").style.zIndex= -3;
}
}

function thumbnail(){
var depth = document.getElementById("div").style.zIndex;
document.getElementById("div").style.zIndex = (depth == -3)? -2 : -3;
}

This slightly more efficient version avoids traversing the DOM more than once:
function thumbnail () {
var elStyle = document.getElementById ("div").style;
elStyle.zIndex = elStyle.zIndex == -3 ? -2 : -3;
}
Using div as an id may prove to be confusing when you return to this code later, use a name which identifies the function of the div.

Chrome doesn't always repeat events with JavaScript setInterval()

I want to display several images of the same size at the same position, one at a time, with a 5s interval between each change. To do so I've used jQuery.Timer, that uses setInterval() to call some show_next_image() function every 5s.
It actually does work with IE, Opera, Safara, Firefox and.. partly with Google Chrome. It's not working with Google Chrome if I open a new window and directly type my website URL: it'll show the second image and stop. And with any other situation (reload, from another link, not right after opening a new window) it'll badly work: one can see the back image before the front image is shown.
Thus I'm wondering whether I've done something wrong with my JavaScript source. What I do is I use a front and a back image. When I want to show the next image, the back img source is set to the new image, and the front image is faded out while the back one is faded in through jQuery. You can check it out at http://www.laurent-carbon.com/ (in French). The two img are identified with bg1 and bg2.
var images = ["/img/IMG_0435bg.jpg", "/img/IMG_0400bg.jpg", "/img/maisonnette 2.jpg", "/img/IMG_0383bg.jpg", "/img/IMG_0409bg.jpg", "/img/IMG_0384bg.jpg"];
var idx = 1;
var waitTime = 5000; // ms
$(document).ready(function() {
$("#bg2").hide();
$.timer(waitTime, load_next);
$.preLoadImages(images);
});
function load_next(timer) {
var toshow = images[idx];
idx++;
idx %= images.length;
back_image().attr('src', toshow);
swap_images();
}
function front_image() {
return (idx % 2 == 0) ? $("#bg1") : $("#bg2");
}
function back_image() {
return (idx % 2 == 0) ? $("#bg2") : $("#bg1");
}
function swap_images() {
back_image().fadeOut('slow');
front_image().fadeIn('slow');
}
Thanks,
Ceylo

Ok I've worked out a solution .... without the use of plugins.
Demo
http://jsfiddle.net/morrison/PvPXM/9/show
source
http://jsfiddle.net/morrison/PvPXM/9/
This approach is a lot cleaner and removes the problem I had while viewing your page in chrome: the animation getting out of sync and flashing.
The only thing you have to do in the HTML is wrap the two images in a <div id="fadeBox" style="position:relative"></div>
$(function() {
var images = [
"http://www.laurent-carbon.com/img/IMG_0435bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0400bg.jpg",
"http://www.laurent-carbon.com/img/maisonnette 2.jpg",
"http://www.laurent-carbon.com/img/IMG_0383bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0409bg.jpg",
"http://www.laurent-carbon.com/img/IMG_0384bg.jpg"
];
var idx = 1;
var max = images.length;
var easing = "swing";
var waitTime = 5000; // ms
var fadeTime = 2000; // ms
var fadeShow = function(fadeTime, fadeDelay) {
var $topImage = $("#fadeBox img:last");
$topImage.fadeTo(fadeDelay, 1, function() {
$topImage.fadeTo(fadeTime, 0, easing, function() {
$topImage
.fadeTo(0, 1)
.insertBefore("#fadeBox img:first")
.attr("src", images[++idx == max ? idx = 0 : idx]);
fadeShow(fadeTime, fadeDelay);
});
});
};
fadeShow(fadeTime, waitTime);
});
Hope this helps
PS thanks to Levi for cleaning the code up a bit.

Answer: http://jsfiddle.net/morrison/RxyZY/
Notes:
You are trying to reinvent the wheel. You are creating a simple slideshow. There are numerous plugins to do exactly this and much more. I used jQuery cycle in my example, which is extremely customizable.
You should wrap your stuff up in a function, creating an expression. In my example, the (function($){}(jQuery)) is what does the trick. It scopes your variables to the function, rather than the global namespace.