Adding a Class

[#1]

Hello. I'm looking for some JS help. I've seen a few other posts on this issue but decided to start a new thread to not cause confusion.

Here's my situation: I have tweaked the CPLibraryAll.css file to style my ordered list <li> tags with custom numbers. When learners select a RTL language, I need those styled numbers to reposition to the right. I have created a class for this. Where I am stuck right now is that I need to apply this class to those <li> elements. 

I tried executing JS on my first slide when a user selects and presses the RTL language (in this case Arabic) button. Here is the code used:

var element = document.getElementById("swap");
element.classList.add("rtllist");

"swap" is the id I gave my <li> and "rtllist" is the class I have setup. I have this code being executed on slide 1 and the first instance where my targeted list items are is on slide 5. Is this part of the issue?

I could be going about this the wrong way, so I'm open for suggestions and any help I can get. Much appreciated!

And for good measure, here is the CSS I have tweaked:

ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 15px;
}
ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
ol li::before {
  content: counter(my-awesome-counter);
  color: white;
  font-size: 1rem;
  font-family: Helvetica;
  font-weight: bold;
  position: absolute;
  --size: 28px;
  left: calc(-1 * var(--size) - -17px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #B52625;
  border-radius: 50%;
  text-align: center;
}

ol li.rtllist::before {
    left: calc(-1 * var(--size) - -300px);
}

[#2]

hey there,

So to be honest, its been a while since I programmed wtih Actionscript in Flash, which is similar to JS. I have programmed in Captivate too, but its more of drag and drop there without using JS of course.

But I think the code would need to be on the same slide, otherwise I don't think it will see the instance name of the object on slide 5, unless you execute at slide 5. 

and is this code right?  "-    -300px"?

left: calc(-1 * var(--size) - -300px);

best,

mark

[#3]

Hey Mark!

I think you are correct. I've been playing around with it a bit more in Chrome's console and I'm getting it to partially work when I run the function on that slide (only the first <li> is getting moved). A friend of mine said I may have to loop the function to add the class to all of the <li>. Either way, I'm getting closer than I was earlier. Thanks for the feedback and confirmation that the function needs to be run on the slide where the class needs to be added. I guess I'll need to do that on each slide that needs that to happen on.

[#4]

Great, glad I was able to help, and nice to hear that something is starting to happen over there!

You could also create a shared action in Captivate, so you can use it over and over on each slide and be able to update it in ONE spot. Not sure if that will help in this situation... but thought I would throw it out there.

best,

mark

[#5]

Love shared actions! But due to some other customizations, I won't be able to utilize them here.

And thanks! Still trying to solve the issue but glad to be a step closer.

[#6]

Hello,

I'm not sure who marked this response as correct, but this is not the solution to my initial question. When I have a little time (busy at the moment), I will come back and provide my solution here for others that share the same problem. Could a moderator please remove the answer above as correct? Thanks!

[#7]

Let me clarify, it's partially correct, but not completely.

[#8]

Done. I don't know who marked that answer as being correct.

[#9]

You state that this is not used until slide 5, so I guess the question is when the js you have listed is executed do the elements exist in the DOM at that time?  It sounds like not.  I have run into this before, so we have to listen for that element id to be on the DOM and then apply our class.  I am going to use jquery instead of vanilla.js, but if that is your problem this will fix it.

This function will run every second looking for the your element with id of 'swap' to exist, once it does exist it will add the class 'rtllist' and then stop checking- clearInterval()

let intvl = setInterval(){

let checkFor = $('#swap').length;
if (checkFor > -1){
 $('#swap').addClass('rtllist');
clearInterval(intvl);
}

},1000)

[#10]

Excellent solution! You're correct. The elements did not exist in the DOM at the point of execution. Also a noob mistake, was that I was using an id to target multiple <li> tags and only the first was being affected, so I ended up changing id to class. I'll explain how I got my solution to work here in a new post.

[#11]

First off, thank you to everyone who pitched in to help find a solution or just ask questions. There were a few things I was doing wrong. First, I wasn't executing the function on each slide that I needed. Like thisguy4xapi said, the elements weren't loaded into the DOM yet. And second, I was incorrectly using id (unique) when I should have been using class to target multiple <li> tags.

So, my solution is as follows (and by all means, there is probably another way I could have achieved this but this is the solution I came to). My CSS for styling the ordered (numbered) lists is:

ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 15px;
}

ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}

ol li::before {
  content: counter(my-awesome-counter);
  color: white;
  font-size: 1rem;
  font-family: Helvetica;
  font-weight: bold;
  position: absolute;
  --size: 28px;
  left: calc(-1 * var(--size) - -17px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  background: #B52625;
  border-radius: 50%;
  text-align: center;
}

ol li.rtllist::before {
  left: calc(-1 * var(--size) - -300px);
}

Secondly, in the CPM.js file, I added class="swap" to each <li> tag I wanted to target (I also removed the numbers and periods for the lists, i.e. 1., 2., 3., etc.). 

Then lastly, I added a conditional action in the on-enter action for the slides that contained the lists I wanted to swap. If my SelectedLanguage variable was X or Y, I executed a jquery line of $('.swap').addClass('rtllist'). This checked for classes of "swap", then added an additional class of "rtllist" to them, in turn styling them based on the CSS above.