Explore the community Forums Lectora Lectora Questions & Answers Styling of ChangeContent Text

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #378290 Score: 0
    Profile photo of Elviszoparo
    Elviszoparo
    Member
    beginner
    intermediate
    picture perfect
    curious george
    @Elviszoparo

    Hello,

    I was wondering how to style text used in ChangeContext action. Meaning I want to bold some words in text but not the whole text by styling Text Block in which this text is displayed, but indiwidual words, for example.
    I want to bold some important definition in text.

    Anybody known solution for this case.

    #378309 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    You can use jQuery with a run JavaScript instead of change contents.

    See attached.

     

    Attachments:
    1. Change-Text.zip
    #378312 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    Additionally, if you want to have complete control over styling the text put it in a span with its own class and add a stylesheet.

    Darrel

    Attachments:
    1. Change-Text-2.zip
    #378412 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    111 pts
    @mnotermans5114

    Another option is..use ChangeContents to keep that part in Lectora, thus making it easy for others to change content…and then after the content has changed, run a Javascript/CSS to set the style of the textfield. That way the content changes and your textfield keeps the style intended. You wont see it, so quick that goes, big benefit is… lesser Javascript/Css savvy developers can change the contents.

    Ignore my comment. Not appropriate to the question. This only works for textfields with all the same style.

    #378437 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    42 pts
    @JasonADal

    @klaatu – Is there a benefit to using jquery over straight javascript? You helped me with a similar solution that’s worked marvelously in my courses that initially focused on adding bullets and hyperlinks in a Change Contents box.

    In that solution, we just used a RunJS to set the inner HTML combined with the CSS. I can reattach the other solution if that would be helpful. The only caveat with the innerHTML solution (and may be the same with this one) is that it has to be one contiguous statement. I tried breaking it up with carriage returns so I could more easily write bullet points, but that broke the hell out of it.

    #378444 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    111 pts
    @mnotermans5114

    Biggest plus of JQuery is easy selection of html-elements.

    #378449 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    272 pts
    @timk

    yes, in fact jQuery is straight while javascript is looping 😉

    #378457 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    42 pts
    @JasonADal

    One day, I’ll get there 🙂 One thing I noticed when I have used a jQuery solution is that the header scripting HTML element works at the chapter level, but not at the title or AU level. Is this standard behavior or am I missing something that would cause it to break?

    #378518 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    194 pts
    @Klaatu

    Jason, thank you for the kind words.

    You asked. Is there a benefit to using jquery over straight javascript?

    I hope you don’t mind but I’m going to append your question by adding “in Lectora” before answering it with my opinion, okay?

    In my opinion, Yes, there’s a benefit. The benefit when used with Lectora lies in a couple of area’s. The first, as Math alluded to, is ease of use. Because jQuery uses the same powerful selectors as CSS it is much easier to target lectoras elements. Especially the ones that it nests, such a text.  A simple line of text is placed in a span, in a paragraph that is in a div that also contains an anchor. Some of these selectors provide the ability to directly target an element that would otherwise require iterating through a loop (very cute, Tim).

    Additionally, jQuery provides methods that can accomplish difficult programmatic goals with one simple, easy to read and understand line that if written in pure JavaScript would take multiple lines of complicated, hard to read and comprehend code.

    Another benefit is in how jQuery automatically handles cross-browser incompatibility issues.

    Keep in mind that using jQuery does not increase the efficiency of the published output. On the contrary, because you are adding a library, it may require additional server requests which could decrease efficiency. However, published Lectora output does not follow standard web design best practices so there is no cause for concern about the difference adding the minimized jQuery library could make.

    Does this mean you should always use jQuery? No. If you are doing something really simple that does not require the use of powerful CSS selectors or the built in additional functionality jQuery provides, go with pure JavaScript. You know, you can totally mix the syntax of the two together as well.

    Something else to keep in mind is that its not a good idea to build a dependency on jQuery. jQuery is just a framework written in JavaScript. It is not the actual language. Only understanding how to use some cool jQuery functions, methods and plugins without understanding the JavaScript behind it is like being able to regurgitate sentences from a second language by rote. Not truly understanding what your saying will eventually land you in a situation that you can’t talk your way out of.

    Of course this is just my opinion which is only 3.14 away from being an onion. I know, bad, but I saw it posted somewhere else and it made me smile.

    By the way Jason, from some of the stuff I’ve seen you put together and the help you’ve provided in this forum, I think you’re doing awesome. There hasn’t been a day, nor will there ever be, that I haven’t had to turn to Stack Overflow or MDN. No matter how much I try to keep on top of this tech it stays one step ahead.

    Regarding the breaking issue you described. I usually put my my header scripting at the title level just after any CSS I add. It shouldn’t matter as long as the jQuery library is loaded before you use it. Try putting your custom scripts in a ready function to ensure jQuery is loaded before your scripts are attempted:

    $(document).ready(function() {  // You’re scripts });

    Perhaps you’re running into a seamless play issue? Anyone else? Math, Tim?

     

    • This reply was modified 1 year, 3 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: odd container added to end of my post that I removed
    #378523 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    272 pts
    @timk

    Not sure, what could cause this. Usually Title / Chapter level should only define to which pages the code is copied to but make no difference to the code. If the code refers to elements / variables that are only accessible in the chapter it may not work when outside.
    To test you could put it on title level and disinherit on all chapters / pages but the one, to see if it’s really caused by the position in the title.

    #378531 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    111 pts
    @mnotermans5114

    As both Darrel and Tim say, should work like that. Inheritance and elements not being ready/present yet might cause issues. But i guess you doublechecked that. Or indeed maybe ‘Seamless’…

    have you tried a simple console.log(“my script starts now”) to see if things are going as you think they are.

    I often use these to give myself clues at what point my code is..to ease up debugging.

     

    #378580 Score: 0
    Profile photo of Jason Dalrymple
    Jason Dalrymple
    Member
    beginner
    intermediate
    profile
    wise owl
    curious george
    contributor
    friend finder
    advanced
    picture perfect
    42 pts
    @JasonADal

    @klaatu – I appreciate your words and ongoing support as I crawl further and further down the developer rabbit hole 🙂

    @timk and @mnotermans5114 – I didn’t have a ton of time to play/troubleshoot before I had to send the course to production. I’ll take a look at the options and hopefully be able to narrow it down and perhaps better describe the “break” that happens. If I can get it working without having to do the inheritance piece, it may move me more to go with the jquery code, given what everyone has said about jquery v. javascript that applies to multiple objects.

    #378585 Score: 0
    Profile photo of Math Notermans
    Math Notermans
    Member
    contributor
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    LUC16 Attendee
    LUC16
    wise owl
    curious george
    111 pts
    @mnotermans5114

    to production ? Nice… i have to do the production too 😉

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.