No way with dynamicaly added step

[ridom]

Hi everyone!

I discovered impress.js a few months ago. Thank you bartaz for this awesome tool that makes me crazy just thinking about everything is possible to do with!!

Nevertheless, I am in front of a problem: I have created dynamicaly many div reading an image folder and a json file where each div contains one image and data related. With random variables I have generated values to the attributes.
It works, all the images are displayed in the space and the generated code looks exactly the same than the "normal" one.

The issue is that only the div manually implemented in pure HTML are "stepable". I mean I can move just in the 3 steps formally created but not in the dynamic ones.

Would you have an idea about the way I should follow to make it works as well as a "normal" step?

Hope my explaination is well understandable.
Thanks!

[cereal]

Are you sure, that you first generate your code and then init impress ? And
are you sure, that your dynamic divs carry a class attribute with the step
class in it?

Regards, cereal
Am 28.04.2013 23:05 schrieb "ridom" notifications@github.com:

Hi everyone!

I discovered impress.js a few months ago. Thank you bartaz for this
awesome tool that makes me crazy just thinking about everything is possible
to do with!!

Nevertheless, I am in front of a problem: I have created dynamicaly many
div reading an image folder and a json file where each div contains one
image and data related. With random variables I have generated values to
the attributes.
It works, all the images are displayed in the space and the generated code
looks exactly the same than the "normal" one.

The issue is that only the div manually implemented in pure HTML are
"stepable". I mean I can move just in the 3 steps formally created but not
in the dynamic ones.

Would you have an idea about the way I should follow to make it works as
well as a "normal" step?

Hope my explaination is well understandable.
Thanks!

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/283
.

[ridom]

Hi cereal thanks for your answer.

Yes I keep the init at the bottom.
I have even tried to place the generated code between two div/step (just to be sure) but it doesn't work: same result.

I also tried to add future at the class step (<div class="step future" ... ) without success...

[bartaz]

@ridom Keeping init code "at the bottom" may not mean that it is really executed after the dynamic elements are created.

If the dynamic elements are correctly created inside the impress element, with step class and attributes and all of that before the init call, it should work properly.

There is no difference between dynamic and static elements for impress.js. What matters - it will only work for steps that are in document when init function is called.

If that is possible, please provide some example code on-line. It would be much easier to see and debug what is happening.

[ridom]

Hi bartaz

I advise you when it's on-line.
Thank you for your help!

[cereal]

@ridom I'd suggest, that you add an event handler, which gets triggered when your dynamic codegeneration is finished.The handler should trigger the initialization of impress.
(Maybe you know the document.ready() function of jQuery. This function is executed when the DOM-Tree is finished, I think this could fix your issue. http://api.jquery.com/ready/)

Why should you do this? You are manipulating the documents DOM-Tree. Imagine the following:

• Your presentation page is called
  -> Impress get's called to initialize itself
  -> Your code for the dynamically created divs runs

That means, that Impress doesn't know your steps, because your steps are inserted after impress is initialized...
But without the code I just can guess ..

I hope this was kind of helpful.

Regards,
cereal

[ridom]

@cereal
Nice, I try it, you can see the code here:
http://www.brazilian-way.com/impress/

[cereal]

@ridom
I wasn't able to try it for myself (because I am not allowed to download the images and I am atm busy with my final exams, so no time for further investigations), but I think waiting for the DOM-Tree should be enough :)

Regards,
cereal

[ridom]

@cereal
I just tried it but it doesn't work.
Someone has an idea?

Good luck for your exam!

[SimonWaldherr]

$.getJSON makes a AJAX call, the callback function gets started after the db-hue-med.txt file is loaded. impress().init(); is called after the index.html file is loaded.
move the impress().init(); to the end of the getJSON callback function to init impress after the content is added.

[ridom]

@cereal I tried with Chrome and I saw it doesn't display nothing while it's displayed with FF. Maybe that's the reason you weren't allowed.

@SimonWaldherr & @cereal

I probably did wrong but I have tried different combinations since this morning and nothing works.

Here, index.html, you can see the init() with the handler but it doesn't work at all.

http://www.brazilian-way.com/impress/index.html#/overview

                    (document).ready(function(){
                           impress().init();
                    });

---

Here, index2.html, I have included the init(); after the closing parenthesis of AJAX call. It display images but the problem is the same, no step on dynamic div.

http://www.brazilian-way.com/impress/index2.html#/overview

                    <script src="js/impress.js"></script>
                    <script>
                               $.getJSON('doc.txt', function(data) { 
                               ... ... ... ...
                               });  
                               impress().init();
                    </script>

I have also tried to place it right after the $(#div).append but it doesn't work too...

I don't know what to do. Could it come from the URL?

[mbrand]

Try to put it right after the $.each loop. It needs to be in the callback of your $.getJson call.

[ridom]

@mbrand
Hi mbrand,

I tried it too this morning...
The result is somewhere between the 2 first index: images not display but movement working:

http://www.brazilian-way.com/impress/index3.html#/overview

[campersau]

The problem is that the #container element is not there when you call $('#container').append() to insert the elements.
The #container element is created after calling .init() on the impress object.
Replacing $('#container').append(compter[i]); with $('#impress').append(compter[i]); will show the images.

[mbrand]

Oh yea, totally missed that he was appending it to the wrong element.
Anyways, the .init() still needs to be called after appending the slides. Which is at the end of the $.getJSON() callback.

[ridom]

Yes it works!

In fact yes I removed the container and I replaced it by impress. (I added the id #container because initially the divs were generated directly inside #impress and not inside #impress div. Because there wasn't id. I don't know why now it's work...).

But it wasn't enough and following the @SimonWaldherr's advice I was looking how to call the impress().init(); at the last moment. So as AJAX is call after everything I placed impress().init() in a js file that is called in an AJAX function at the bottom:

   <script>
    $.ajax({
       type: "GET",
       url: "initImpress.js",
       dataType: "script"
     })
   </script>

So glad! It's not finish but I now can see what I had in mind. Thanks everyone!

Have a look here:
http://www.brazilian-way.com/impress/index4.html#/tiny8

[dinodsaurus]

is there a way to append items after impres().init() ?

[bartaz]

@dinodsaurus short answer: no

All the positioning in 3D using transforms (based on data attributes in HTML) is done in init function.
There is no way around it at this point. It would require quite large changes internally in impress.js.

[dinodsaurus]

thank you for the quick answer !

[dinodsaurus]

I solved it with this little function

window.impressCustomStep = function ( selector ) { var customStep = $$( selector, root ); customStep.forEach( initStep ); steps = steps.concat(customStep); };

[bartaz]

A little bit hacky, but should work.

You can add such function somewhere around impress API as addStep so you would possibly be able to do:

impress().addStep( selector )

Exposing it as a global on window object is a bad programming practice.

[dinodsaurus]

it was just for testing purpose :)

[FagnerMartinsBrack]

A little late, but thanks everyone!

Yes it works!

As from what I can tell from the comments this issue was solved at the time. Also, the links are not available anymore. Closing then 👍