Toggle Hide/Show JS

[andreleal]

Ok, I used a small JS so that the training assistants can apply quickly a toggle Hide/Show an image without going to create advanced actions, etc. Very simple:

function showHide(parameter, parameter2, parameter3){

if(parameter.style.visibility == 'hidden'){

     parameter.className=parameter2;

     parameter.style.visibility='visible';

}

else

{

     parameter.className=parameter3;

     parameter.style.visibility='hidden';

}

And from CP they type in the JS button, showHide(nameImage, blurIn, blurOut);

All working everything it´s fine, but the fact is what if I have 3 or more buttons I would like to hide all the elements that are visible from the first button and then show the elements of the second button, usin Jquery then I´m using the selector:

$('canvas[id*="Image"],canvas[id*=Text_Caption_]').each(function(i, el){

  if(this.className == 'blurIn'){

  this.style.visibility='hidden'

  this.className='blurOut'

  }else{}

  })

And do not work, I dont want to use a interval to hide all the objects I would like to try another method and I´m smashing my head on the table, already try a few options without success any CPJS expert can help me out?

[Lilybiri]

Do you really think it would not be easier with shared actions? You group all the objects, and the shared action will probably need only one parameter, the image. I have that shared action in the library I use all the time in all my projects.

[andreleal]

Thanks Lilybiri‌ but we are looking for a solution like that because it´s our workflow here, to make the things easier for future modification of dynamic animations, again thanks!

[TLCMediaDesign]

I'm a little confused on the second part where you are using jQuery. I don't fully understand what you are trying to accomplish.

[andreleal]

I´m sorry I´ve noticed now that I search for the class name and not the parameter, well if the elements of the selector have the class "blurIn" = parameter2 then apply in each one of the elements the "blurOut" = parameter3 class and hide. Like a for loop but with a .each:

var graphicElements = $('canvas[id*="Image"],canvas[id*=Text_Caption_]')

for(a = 0; a < graphicElements.length; a++){

if(graphicElements.className == parameter2){

     graphicElements.className=parameter3;

     graphicElements.style.visibility='hidden';

}

else{

}

}

Thanks for the interest!

[RodWard]

"...it´s our workflow here, to make the things easier for future modification of dynamic animations..."

Forgive me for being doubtful but in my experience adding custom JavaScript code to a Captivate project seldom makes things easier for the next person that inherits the job of editing your project.

If you do this, I hope your workflow ALSO includes fully documenting all of your code and WHY you chose to do things the way you did.  I used to work in a software company and I found that programmers RARELY if ever did this.  Maintaining their stuff was a nightmare,

[andreleal]

Yes, we have a course with with all the standard animations they can use (like a showcase), so the object is hidden in this case and got blured too thru CSS.

Let me explain something if the content that I posted make you doubtful. The fact is as I told on the first line of this post, we work with training assistants, they are not designers, animators, instructional designers, so using this workflow make them create to much faster than going and creating advanced actions, they just call the effect and the parameters they want, very straightforward, showHide(elementName, introEffect, outEffect), the CSS and the functions of the script are maintained by me, where in the future if I would like to change a parameter like, the amount of blur, I change one time in the script and all the 120 courses that we have keep the same effects, color, fonts, intro videos, interface design, between all them.

Well I think that I´ve talk with the big ones of CP universe, if you guys don't have the answer so I´m going go use the setInterval inside the for loop or the each, going to develop and post the result here, thanks.