Thank you. I got it to work. I saved your script for this. I didn't realize it was something standard I could re-use. You are the best!! ... View more

Hi osgood, I have one more question. You helped me with this before but I can't figure how to take what you gave me and apply to this. I would like to get the animation to start on scroll when in view. You helped me do this on an SVG animation. I have updated the link below and gave the div some padding so you have to scroll to get to it. Animate Counting To Number Example ... View more

Thanks you osgood!! Works perfect! ... View more

Hey osgood!!! Thank you for your help. Yours works perfectly.  I just posted a fix myself as well. Yours is cleaner code though:) And... I like how you got this to stay when responsive. DATE TIME (MST) ACTIVITY / SESSION SPEAKER Mine gets lost. Is there a way I can incorporate that back into the current code I have like you did? http://offers.premierinc.com/table-delete_table-delete.html ... View more

Thanks for all your help everyone! I ended up using rowspans to get it to work. So in order to get the three events to drop under Monday I did something like this: <tr>                 <th scope="row" rowspan="3">Wednesday <br>March 6</th>                 <td>12:00 – 5:30 PM</td>                 <td width="35%">Optional Golf Round (By Registration)</td>             </tr>             <tr>                 <td>6:00 – 6:30 PM</td>                 <td>Welcome / Opening Remarks</td>                 <td width="35%">Michael J. Alkire, Chief Operating Officer, Premier</td>             </tr>             <tr>                 <td style="background-color:#ebecee">6:30 – 8:30 PM</td>                 <td style="background-color:#ebecee">Networking Reception / Dinner</td>                 <td width="35%" style="border-left: 0px;background-color:#ebecee"></td>                         </tr> Check it out here: http://offers.premierinc.com/table-delete_table-delete.html I would like to figure out how to keep this visible on mobile though... DATE TIME (MST) ACTIVITY / SESSION SPEAKER ... View more

Hi Ben! Thank you for your help and your example. I see what you are saying. I have tried to install his extension manager but am running into issues. I will revisit and see why in a few. The issue I am having is being able to have all the "monday items to fall under monday" if that makes sense. I looked on github for over an hour and found nothing with that option. I deleted my original code link but put it back up. I would think it's a matter of how I have the rows and columns grouped? http://offers.premierinc.com/table-delete_table-delete.html This one was photoshopped. ... View more

Hi! Thank you very much you figured out how to get them to stack!! One question though. How can I bump up the "TIME (MST)" to the line above and show the text "SPEAKER"? Seems like it's trying to compensate for the MONDAY and TUESDAY. You can see in the screenshot. Thank you thank you!! ... View more

Thanks osgood!!! Thank worked perfectly. Have a great day! ... View more

Nice! thank you so much! I will be sure to keep this for reuse. This is great. Say for instance if I wanted to use more than one anim farther down the page... Could I use the same class name with just the one script? This is awesome. ... View more

Hi again, Well long story short I ended up getting rid of a slider and the js that went with it to remove the conflict. So it's good now. I have taken your js code you gave me to animate another svg and am trying to get this to animate on scroll as well and am having no luck. I gave an id to the animation and used that same id in the script you provided. I added a "checkmark" id to <circle. How would you reuse your js? Instead of a div it's using this: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">   <circle id="checkmark" class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>   <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/> </svg> Here is my full code: <!DOCTYPE html> <html lang="en" > <head>   <meta charset="UTF-8">   <title>Animated Check Mark & Cross</title>       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> svg {   width: 100px;   display: block;   margin: 40px auto 0; } .path {   stroke-dasharray: 1000;   stroke-dashoffset: 0; } .path.circle {   -webkit-animation: dash 0.9s ease-in-out;   animation: dash 0.9s ease-in-out; } .path.line {   stroke-dashoffset: 1000;   -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;   animation: dash 0.9s 0.35s ease-in-out forwards; } .path.check {   stroke-dashoffset: -100;   -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;   animation: dash-check 0.9s 0.35s ease-in-out forwards; } @-webkit-keyframes dash {   0% {     stroke-dashoffset: 1000;   }   100% {     stroke-dashoffset: 0;   } } @keyframes dash {   0% {     stroke-dashoffset: 1000;   }   100% {     stroke-dashoffset: 0;   } } @-webkit-keyframes dash-check {   0% {     stroke-dashoffset: -100;   }   100% {     stroke-dashoffset: 900;   } } @keyframes dash-check {   0% {     stroke-dashoffset: -100;   }   100% {     stroke-dashoffset: 900;   } }</style>   </head> <body>   <!--[if lte IE 9]>   <style>     .path {stroke-dasharray: 0 !important;}   </style> <![endif]--> <div style="height:600px;width:100%;"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">   <circle id="checkmark" class="path circle" fill="none" stroke="#73AF55" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>   <polyline class="path check" fill="none" stroke="#73AF55" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/> </svg> <p style="text-align: center;margin: 20px 0 60px;font-size:2em;color: #73AF55;">YES!</p> <script> function isInView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height() - 200; var elemTop = $(elem).offset().top; return ((elemTop <= docViewBottom) && (elemTop >= docViewTop)); } $(window).scroll(function(){ if (isInView($('#checkmark'))) { $(window).off('scroll'); } }) </script> </body> </html> ... View more

OK. Ya... The finished pages on these things are a code train wreck. All generated by the builder. I tried a test page with a simple image and the animation and it works in the same builder. It seems that the js for the animation is conflicting with the layerslider js on that page. If you look below farther down on the page there is a slider thats not rendering (below the quote section). If you try any other page on the site the layerslider works that doesn't have the circle animation. How could I see what is conflicting or separate the two so they don't conflict? ... View more

osgood!!! Excellent!! That did the trick. Saving this to my code snippet library! The animation is being placed as a code block on a landing page built in iON. I think you have heard me speak of this before. Before I ask them why this is happening would you have an idea of why the animation would be duplicating down the page? Check it out... click the red box "Actionable Business Intelligence Capabilities" and you will see the animation. Physician Enterprise Collaborative | Premier I'm also noticing that the text slightly moves when scaled. It has absolute positioning... ... View more

Thanks again. Well I heard back from support and it's a js function that needs to be changed is the code below. Since I bought the plugin I am hoping to get use out of it and tried to fix the original again. It has some really cool out of the box examples you can tweak (if I can freaking figure out how to manage the js correctly). I'm trying what they are saying but must be doing something wrong. I did get the animation to drop below on mobile. I understand what you are saying though about not seeing it animate. If I can't get this working I have yours to fall back on. My revised so far: White Paper This is their response on my ticket and the code they are saying to place the functions in. If I understood you correctly, I believe the best approach to this would be to set the slider to fullwidth layout (disable fit to screen width option) and insert it to the parent element where you want it. This way it will always take up its parent element's width, so you can contain it. Please open the documentation from the plugin's package and navigate to the /documentation.html#slider-options part. You will find the layout settings you need there and also where to change/add them. <script type="text/javascript"> $(document).ready(function() { $('#slider').layerSlider({ sliderVersion: '6.2.2', type: 'fullsize', maxRatio: 1, skin: 'v6', sliderFadeInDuration: 450, showCircleTimer: false, skinsPath: '../../layerslider/skins/', height: 900 }); }); </script> The documentation is here and it tells you different js functions that can be used. LayerSlider documentation ... View more

You are great!!! I can work with this and wait for their response for future uses of their plugin. The reason why the images weren't loading is there was a space before the extension:) Your code is clean less all the gobblygook. One thing I need to look into is how to get the images to slide into view without them getting cut off where they enter from the right. The last version was full width. All in all this works and you ROCK again. I changed the stacking order so the animation jumps to the bottom on mobile. YOU TAUGHT ME THAT! Cheers! ... View more

Thank you. Your right this is controlled by js. It's a LayerSlider plugin from envato. I found I was able to create a ticket so fingers crossed. ... View more

That is actually css from the example (second link) I cloned it from. The extra } doesn't affect anything. ... View more

Thank you. ... View more

Nice!!!! Thanks osgood! As far as learning more .js, what would be a good "go to" site to learn more of these functions? Thanks again man!! ... View more

Thanks for your response. I will check out Animate. I've never used it but I'm a quick learner. ... View more

thank you ... View more

preferably an mp4 to be placed on a landing page. or gif whatever the best option would be. ... View more

Nice!! thanks that worked!!! You are appreciated. Kudos again... ... View more

Thanks. I moved it to the second tag as shown in screenshot and am getting same result. ... View more