Explore the community Forums Lectora Lectora Questions & Answers SVG shapes in Lectora 17

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #353319 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
    67 pts
    @mnotermans5114

    Ok, so quite some elements now in Lectora 17 are SVG. Thats good. But now i want to make use of the fact its SVG and change the color of an element on runtime ( just to name an option ). When checking the html when published i can find an id for the DIV its in, target that…do whatever i want to it…but having some trouble so far accessing the SVG inside it to do something to that…

    If anyone can up with some tips, that would be nice…

    Regards,

    Math

    #353321 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
    67 pts
    @mnotermans5114

    In the search for this a small step further. Apparently there is a difference in how SVG is treated compared to normal HTML elements. You have a SVGDom opposite to the normal Dom for specific SVG content. Further you cannot use JQuery as is on the SVGDom because that isnot supported in JQuery. So now to find a solution to target the default SVGs created in Lectora and change them….

    #353345 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    144 pts
    @Klaatu

    For shape40 try – $(‘#shape40 svg path’).css(‘fill’,’#ff0000′).

     

     

    This post has received 1 vote up.
    • This reply was modified 2 months, 1 week ago by Profile photo of Darrel Somoza Darrel Somoza.
    Attachments:
    1. manipulateSVG.zip
    #353357 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    144 pts
    @Klaatu

    I don’t know why the right quote around ‘fill’ looks like it’s a double, in the editor it is not.

    #353361 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
    67 pts
    @mnotermans5114

    Nice Darrel, but it only works in Chrome 😉

     

    Correction: in preview and published normally it works in all browsers.

    When published ‘Seamless’ it only works in Chrome..probably due to a targeting issue….

    #353377 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
    67 pts
    @mnotermans5114

    The difference between Chrome and IE,Edge and Firefox in ‘Seamless Publishing’ mode is, that Chrome creates the pages like this:
    <div id=”pageDIV” class=”pageDIV” style=”visibility: inherit;”>

    Chrome gives the page an id of ‘pageDIV’

    whereas for IE,Edge and Firefox the page is created like this:
    <div class=”pageDIV” id=”page2″ style=”overflow: hidden; visibility: inherit;”>

    The id is here ‘page2’ and i do think here it goes wrong with a lot of scripts in combo with seamless.

    Allthough i cannot find any spot in your script where the pageDIV is called, so do think this is weird.

    In my own scripts i do use it often, replaced that now by using GetCurrentPageID() or getCurrentPageDIV()
    These Lectora functions work properly crossbrowser.

    But again, i donot see where to replace this in your setup 😉

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

    Leave seamless off.

     

    #353413 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
    67 pts
    @mnotermans5114

    🙂 Offcourse thats the easy way..and for this one it sure works…but do want to use seamless in projects, so need to somehow figure out whats aching scripting when using seamless. Most of my scripts i can get to work by adding parent to document and window related code..and by using getParentDIV() for getting to the ‘pageDIV’… so i do wonder why your sample aint working in the other browsers… might have to do with jQuery somehow… although i use jQuery in my setups too…and can get it to work…well some puzzling to do 🙂

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

    No puzzling, just use getDisplayDocument(;-)

    This post has received 1 vote up.
    Attachments:
    1. manipulateSVG2.zip
    #353461 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
    67 pts
    @mnotermans5114

    Do like the 😉 in the function() Tim…

    And indeed this makes it work perfectly with IE, Firefox and Edge.
    Great. Thx Tim…

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

You must be logged in to reply to this topic.