Can Lectora Objects be placed in a Custom Div?

paul-minni
paul-minni Community Member Posts: 18
Using Lectora v11.3, I want to create a container DIV to hold Lectora objects (textboxes, images) while using javascript tools to animate them. I want to keep the browser scroll bars from appearing when objects are off-screen to the right and bottom, hence the container.



I've tried a custom DIV but don't see how to get Lectora to include the objects into it. In other words, Custom DIV as parent, Lectora objects as child.



Also tried a custom CSS Class for limiting the area of the Lectora objects, but it's not working as expected. I can limit the relative or absolute height of text boxes but not the width, top or left. As for images, I haven't been able to control at all.



Does any one have other ideas on how to implement object overflow in Lectora generated pages?

Comments

  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    You can create a custom div in a HTML Extension and use jQuery to "append" the objects you want to have inside that div.



    Tim
  • paul-minni
    paul-minni Community Member Posts: 18
    Thanks Tim. Seemed like a possibility. I created a container DIV, added new HTML elements to it and was able to animate them via GSAP, but I haven't been able to figure out how to reference any of the existing Lectora objects on my page. They seem to be outside the scope the of the External HTML Object. Any idea how to link things up?
  • timk
    timk Community Member Posts: 1,176 ☆ Superstar ☆
    Each Lectora object is in a separate DIV. Each object has a "HTML name" that is used as the id of that DIV. Find attached a screenshot of the required elements to append a textfield to a DIV in a HTML Extension. It contains a lot of arrows but I think you'll get the point...



    [ATTACH=CONFIG]604[/ATTACH]



    Tim
  • paul-minni
    paul-minni Community Member Posts: 18
    Awesome help Tim! I can see two things I was getting wrong. My jQ syntax(eventhough I was getting no debug errors) and I put my HTML and 'script in the same extension instead of separately like you've shown. I give this a try Monday when I'm back to working on this project. Thanks.
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    You can also add CSS classes to Lectora objects (covered here: http://lectora.com/blog/using-jquery-lectora-customize-e-learning-courses-part-2/). You can add the same class to many objects and then target all of them with one line of script.



    E.g. add class "moveables" to all targeted textboxes, then do this:

    $('#myDiv').append($('.moveables'));



    Also, instead of manipulating all of that, you can set the < body > or the #pageDiv elements to overflow:hidden;
  • paul-minni
    paul-minni Community Member Posts: 18
    Thanks Guys for your help and examples. I've been able to achieve a workflow that will do for this project. I'll have to do a little rethinking before starting new ones. Since this was only my third Lectora title, it shouldn't be too hard to change my authoring habits.



    @SSNEG: 'looking forward to reading part four of the jQuery blog.
  • ummakumma
    ummakumma Community Member Posts: 97
    Hi



    I´m trying to put a background image behind Lectora content. I have made a custom div and managed to append a picture to it. But now I am trying to fiqure out how to place it centered behind Lectora page. Any help would be superb!



    Here is a picture attached what I´m trying to do. The red area represent the custom div with image.



    [ATTACH=CONFIG]608[/ATTACH]
  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Use CSS, not custom div.

    You should add an Ext HTML object, set it to Meta tags, type the following:



    < style >

    body {

    background-image : url('images/bg-stretched.png');

    background-repeat : no-repeat;

    background-position : center top;

    }

    < / style >



    Add the image to the title level, set it to hidden, so that it's always stored in the images folder.
  • ummakumma
    ummakumma Community Member Posts: 97
    @ssneg 62450 wrote:
    Use CSS, not custom div.

    You should add an Ext HTML object, set it to Meta tags, type the following:



    < style >

    body {

    background-image : url('images/bg-stretched.png');

    background-repeat : no-repeat;

    background-position : center top;

    }

    < / style >



    Add the image to the title level, set it to hidden, so that it's always stored in the images folder.


    Thanks! This worked... except there was a couple of extra spaces in tags. Now it works. :p





    body {

    background-image : url('images/bg-stretched.png');

    background-repeat : no-repeat;

    background-position : center top;

    }

  • ssneg
    ssneg Community Member Posts: 1,466 ☆ Roadie ☆
    Yeah, I hoped you'd notice and fix those. Well done! :)

    Some forums eat up HTML markup unless you spoil it with extra spaces.
Sign In or Register to comment.

So You Wanna Be An eLearning ROCKSTAR?

We're all fans of eLearning here! Want to become an eLearning ROCKSTAR? Just click on one of the buttons below to start your rocking journey!