1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

animations don't work in any browser

Discussion in 'Programming' started by craigt, Feb 11, 2020.

0
  1. #1
    Hey,
    I'm working on an application written in dHTML (HTML, CSS, JavaScript, and Perl/CGI) running under Apache and mod_perl on a Windows 10 basic PC. The OS and all browsers are up to date.

    I have a CSS file loading animation. It runs as expected in an .HTML file in all browsers I test in (Chrome, Edge, FF, IE, and Opera). It won't run at all in a Perl/CGI file. It places and looks right, but won't animate. I've stripped the CGI module down to an HTML skeleton, the CSS, and the DIVs the animation is shown in, and still no animation. The HTML code is below.

    <!DOCTYPE html>
<HTML lang='en'>

<HEAD>

<STYLE>

.progress {
  width: 500px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #eee;
  position: relative;
}

.progress>.progress-value {
  position: relative;
  height: 100%;
  left: 0;
  top: 0;
}

.progress>.progress-value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: progress-value 3s ease-in-out forwards;
  -webkit-animation: progress-value 3s ease-in-out forwards;
  background: #666;
}

.progress>.progress-value.red::before {
  background: #f44;
}

.progress>.progress-value.green::before {
  background: #3f4;
}

.progress>.progress-value.blue::before {
  background: #54f;
}

@keyframes progress-value {
  from {
  width: 0%;
  }
  to {
  width: 100%;
  }
}

@-webkit-keyframes progress-value {
  from {
  width: 0%;
  }
  to {
  width: 100%;
  }
}

</STYLE>

</HEAD>



<BODY STYLE='TEXT-ALIGN:center;'>

<div class="progress">
  <div class="progress-value" style="width: 65%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value red" style="width: 95%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value green" style="width: 41%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value blue" style="width: 14%"></div>
</div>

</BODY>

</HTML>
    Code (markup):

    Is there anything in Apache or mod_perl that would prevent the animation. I'm doing this as a client on my server. Or does anything else come to mind on this. Any help is appreciated.

    craigtu
     
    Last edited by a moderator: Feb 11, 2020
    craigt, Feb 11, 2020 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #2
    I haven't used perl to output html before but the first thing you need to check is if a basic "hello world" in perl works, it maybe that your webhost just doesn't have perl capabilities.
     
    sarahk, Feb 11, 2020 IP
  3. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #3
    This animation is a small addition to 2 modules in a application configuration of about 165 modules. I've just finished a round of enhancements and retesting and Perl is working well. The Perl/CGI module I stripped down to eliminate the possibility of interaction with any of the code in the module runs as intended except for the added animation.
     
    craigt, Feb 12, 2020 IP
  4. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #4
    Do you see anything useful in the console of developer tools?

    The fact that the html is generated by perl should make zero difference once it gets to the browser.
     
    sarahk, Feb 12, 2020 IP
  5. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #5
    I loaded the HTML module with only the file loading indicator in the iframe in the CGI module and the animation worked. But loading the animation into a div positioned on top of the iframe or any where else in the CGI and the animation does not work.
     
    craigt, Feb 12, 2020 IP
  6. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #6
    I think we need to go right back to basics here.

    The perl and cgi stuff are red herrings.

    You just want to get a progress bar on your page, right?

    all you have to do is have the stylesheet stuff in your css, and put the div with progress on the page.

    I don't know how you're calculating the progress and adding to it but here's my take on your code

    
<!DOCTYPE html>
<HTML lang='en'>

<HEAD>

<STYLE>

.progress {
  width: 500px;
  height: 30px;
  border-radius: 15px;
  overflow: hidden;
  background: #eee;
  position: relative;
}

.progress>.progress-value {
  position: relative;
  height: 100%;
  left: 0;
  top: 0;
}

.progress>.progress-value::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: progress-value 3s ease-in-out forwards;
  -webkit-animation: progress-value 3s ease-in-out forwards;
  background: #666;
}

.progress>.progress-value.red::before {
  background: #f44;
}

.progress>.progress-value.green::before {
  background: #3f4;
}

.progress>.progress-value.blue::before {
  background: #54f;
}

@keyframes progress-value {
  from {
  width: 0%;
  }
  to {
  width: 100%;
  }
}

@-webkit-keyframes progress-value {
  from {
  width: 0%;
  }
  to {
  width: 100%;
  }
}

</STYLE>

<script>
function addProgress(){
    var holder = document.getElementById("holder");
   
    var increase = Math.round(Math.random() * 10);
   
    if (holder.getElementsByTagName('div').length > 0) { 
        var width = parseInt(holder.getElementsByTagName('div')[0].style.width);
        holder.getElementsByTagName('div')[0].style.width = "" + (width + increase) + "%";
    }
    else {
        holder.classList.add("progress");
        var div = document.createElement("div");
        div.className = "progress-value red";
        div.style.width = "" + increase + "%";
        holder.appendChild(div);
    }
}
</script>
</HEAD>

<BODY STYLE='TEXT-ALIGN:center;'>

<div class="progress">
  <div class="progress-value" style="width: 65%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value red" style="width: 95%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value green" style="width: 41%"></div>
</div>

<div style="height: 15px"></div>

<div class="progress">
  <div class="progress-value blue" style="width: 14%"></div>
</div>

<hr>
<h2>Sarah's stuff</h2>
<button onclick="addProgress()">Add to the Progress Bar</button>

<div id='holder'>
</div>

</BODY>
</HTML>
    Code (markup):
     
    sarahk, Feb 12, 2020 IP
  7. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #7
    Hey sarahk,

    I put your code into an html skeleton and took my stuff out. So all the CGI module had in it was the Perl invocation, a couple of use statements, the new cgi statement, your css, the javascript, your h2 header, the button, and the div. I had to push the button once to get the indicator to appear and push it again and again to make the indicator move.

    Please copy the code at the top of this post into a .html file and run it to see how the indicator should work.

    Thanks for trying to help me on this. Also, I'm having trouble finding the forum rules and tags I should use in the post.

    craigt
     
    Last edited: Feb 12, 2020
    craigt, Feb 12, 2020 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #8
    The forum uses pretty standard bbcode - use this to make your code pretty upload_2020-2-13_13-5-33.png

    Now, I started with your code at the top and that was still running. The animation on mine worked when it's created but not after that, just a matter of tweaking the javascript.

    Can you send me a link to the page on your server?
     
    sarahk, Feb 12, 2020 IP
  9. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #9
    http://steepusa.no-ip.info/scx/rankanalysis.cgi?stf=SKY:Kentucky;cho=30;quan=2

    Take the Kentucky Counties link on the banner at the top of the page.
     
    craigt, Feb 13, 2020 IP
  10. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #10
    How much control do you have over the techniques used on the site?
    There are much better ways of doing modal popups.

    And in this case, you only need the progress bar because your image isn't optimised and there's absolutely no reason why it couldn't be preloaded and a tiny file. You're basically spending a stack of time trying to fix the wrong problem.
     
    sarahk, Feb 13, 2020 IP
  11. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #11
    sarahk, I guess I don't know what you mean. I thought a CSS3 indicator would be the right method. I do know JavaScript pretty well. I have complete control over site techniques. The image loading in the iframe is loading off a server in the geography dept. at the U. of KY. That image is the front end to a geographic application about the whole state of Kentucky. It takes a while to traverse the internet and load. I don't think I'm understanding what you mean. Sorry to be so slow.
     
    craigt, Feb 13, 2020 IP
  12. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #12
    I'd look at caching the results of the request every X hours/days/weeks and serving up your own copy. You really shouldn't need a progress bar for that info.
     
    sarahk, Feb 13, 2020 IP
  13. craigt

    craigt Active Member

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    86
    #13
    Thanks for your help sarahk. And I want to apologize. I had grabbed a module and started trying to get it to work before I cleaned it up.
     
    craigt, Feb 14, 2020 IP