Remove svg tag from a shape object.

rbeutel4797
rbeutel4797 Community Member Posts: 13
I have created my own progress bar for media in my courses using a shape object that is resized using custom javascript.

function myProgress() {
var media = document.getElementById(Var_playingAV.getValue());
<span style="font-family: Lato;">var pBar = document.getElementById(“shape390712”);
var svgTag = pBar.getElementsByTagName(“svg”);
svgTag.remove();

</span> media.ontimeupdate = function(){
var media = document.getElementById(Var_playingAV.getValue());
var pBar = document.getElementById(“shape390712”);
var value = 0;
var currentPos = media.currentTime;
var maxduration = media.duration;
if (currentPos > 0) {value = Math.floor((100 / maxduration) * currentPos );}
pBar.style.width = value + “%”;
pBar.style.background = “#00ff00”;
}
};

So this works in all browsers but IE. I found the svg tag that is create within the shape object is causing the problem and if it is removed the progress bar works fine. With this knowledge I decided to just delete it. Unfortunately, I have not been able to accomplish this. Does anyone have a suggestion. Maybe there is a better fix than to delete the svg tag.

Comments

  • timk
    timk Community Member Posts: 1,205 ♦ Idol ♦
    All you have to do is to use the suitable methods, e.g. .remove() is a jQuery method but you haven't included jQuery so it can't work. To do it in plain javascript:
    var pBar = document.getElementById("shape390712");
    
    var svgTag = pBar.getElementsByTagName("svg")[0];
    (The method gets you a collection of all svg tags, so you have to tell js you want
    to use the first, even if there&#039;s only one or run a loop to do something with all of them.)
    
    pBar.removeChild(svgTag);

     
  • rbeutel4797
    rbeutel4797 Community Member Posts: 13
    I knew you were going to come through for me Tim.

    I thought Lectora was already using JQuery. I should have just defaulted to javascript when it wasn't working.
    Rookie mistake.
  • rbeutel4797
    rbeutel4797 Community Member Posts: 13
    Latest issue I have come across with this js:

    Only in IE, when I attached a new media source on the page to this script the progress bar does not restart. My belief is it gets stuck on the removeChild(svgTag) when it run with the new media. All other browsers work perfectly.

    I have attached a sample of what I am trying to accomplish
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916
    First of all, which version of IE you are testing on. IE8 eg. doesnot support SVG and fallsback to Png. Guess your testing on IE9+

    Browserdifferences is always a tough thing to handle. With SVG its even harder because you need to know the differences in browserhandling of the SVG elements.  Maybe in IE the order of elements is different or there is an extra tag before it. You have to check that out in IE.

    One thing i prefer when using SVG, maybe not relevant to this... but maybe usefull ...is GSAP Tweenmax library. Allthough aimed at tweening and animation, their SVG handling is perfect.

    Read this article about browserdifferences in handling SVG and how they tackle it. Might be usefull and inspiring.
    https://greensock.com/svg-transforms

    Kind regards,

    Math
  • rbeutel4797
    rbeutel4797 Community Member Posts: 13
    I appreciate your post. Thank you.

    I am testing in IE11.

    The script works fine in IE until I attach a different video to it and try to restart the progress bar. This works in other browsers but not in IE.

    Lectora automatically creates these SVG elements for some reason so I am forced to remove it to get the progress bar to function correctly.

    GSAP Tweenmax library is sweet but I'd rather not load another library if I can help it.