Please help me figure out why some HTML5 animation is not working in IE

Hi Tom and Marco

Will be going through the errors and validation issues this a.m.

And report back!

Thanks!

Rowby

Hi

Here's what I've done so far.

1)  I separated the animation from the navigation div.  See below:

[/<div class="row">
    <div class="desktop-4"><a href="/"><img src="https://cdn.shopify.com/s/files/1/0928/3584/files/invisible-dot.png" alt="{{ shop.name }}" style="border: 0;"/></a><div><nav>
      <ul id="rowby-vertical-menu"> 
        {% for link in linklists.main-menu.links %}
        {% include 'navigation' %}
        {% endfor %}
      </ul> 
    </nav></div>
	</div>
    <div id="wrapper">
 <div class="Logoimg"></div>
<div class="textImg"></div>
</div>

Select allOpen in new window

2)  I worked on the validation.  Down to just 2 errors, and 1 warning: Madision style validation

I'm not quite sure what to do with the <script type="text/javascript" charset="utf-8">↩     warning   Should I just remove  charset="utf-8?   Is it redundant anyway?)

3)  I think the Chrome Console is now okay, Marco.  There's one thing, but I am not sure what It means and I don't think it's "important".

It's still not working completely in IE.  But I do notice that in firefox and chrome and safari  the animation Is more smooth.  So all of this is good.

Once the charset is fixed, then there is only one error left and I am having problems "fixing" it.   When I delete the entire section in the php (as a test) other validation errors then occur.

So unless that 1  <ul id="main-nav" role="navigation"  class="row"> ↩     error really needs to be fixed, I'd prefer to leave it in for now.

Also, as a test for troubleshooting I put a couple of files on my testing site.  Just an index.html and a stylesheet,

Rowbytesting.com testing site

Clearly I'm missing some resources on the rowbytesting.com.  It's not animating.  

However because it's in a "clean" environment, perhaps that testing page will be useful???

Rowby

Remove the "charset" attribute from the <script> tag.

A <ul> does not have a "role" attribute so it does not validate.

The animation does not work on the test site because you do not have a jQuery library loaded.

Ok!  I got it to validate.Validated!

And IE is animating, but the circle does not start out large.

Not sure what can be interfering with that first step in IE.

Is there a way to have a specific IE version (the other version hidden by media queries  only for IE) that uses a more specific IE solution and is only shown on IE.  

Link to site

Rowby

I think if you fix your test site sample of the animation (by adding a jQuery library) you will see if it works in IE 11. I believe it will work and if it does, that will demonstrate that the problem has something to do with the Shopify page rather than the code and/or css for the animation.

Hi Tom,

Indeed it's working in ie, firefox, chrome at rowbytesting.com

Hmmmm....

I'll do some more testing.

Thanks

Rowby

Could it be that I have some javascript (not yours) in the head, that I could move to the body after your code?

I'm not sure what the best practices is for placing javascript in the head or before the </body>

Rowby

As I said in some other question, the best practice is to put css in the head, so browsers can know how to render the page; the javascript goes immediately before the </body> tag, so the code can take effect to the page elements, which have yet been rendered.

Hi

If I want to test the circle by itself, how should I change the below code:  (no textimg, and no stuckmenu.).

<script>

	$('.Logoimg').animate({
		backgroundSize: '22%'
	}, 3000, function () {
		$('.textImg').css('left', ($(window).width() - 969) + 'px').animate({
			left: '0'
		}, 2500, function(){
			$('nav.stuckMenu ul#rowby-vertical-menu').fadeIn(1000);
		});
    }); </script>

Select allOpen in new window

Thanks
Rowby

<script>
	$('.Logoimg').animate({
		backgroundSize: '22%'
	}, 3000);
    }); </script>
 

Select allOpen in new window

Hmmm  Thanks Marco,

I put this in the< /body>

<script>
	$('.Logoimg').animate({
		backgroundSize: '22%'
	}, 3000);
    }); </script>


{% include 'iwish' with 'iwishfooter' %} 
</body>
</html>

Select allOpen in new window

And it's not animating in firefox,chrome or IE.   Did I put it in correctly?
Link to page
Rowby

Hi  This animated, but unfortunately not in ie.

  <script>$(document).ready(function(){
   $('.Logoimg').animate({
       backgroundSize: '26%'
   }, 3000);
});</script>
  <script>
  
  $('.Logoimg').animate({
    backgroundSize: '26%'
  }, 3000);</script>

Select allOpen in new window

Hello

UPDATE  rereading the article I see it is very wordpress specific.  I'll look elsewhere on javascript debugging.)
I see this page about script debugging, and it says to add "define('SCRIPT_DEBUG', true);"  into the php (the example is for a wordpress site, but I guess I could put it at the top of my main php page.

If you are familiar with that debugging command, let me know and I'll try it.

link to wordpress article for debugging scripts

Rowby

It seems to be a Wordpress specific command: sorry, out of my territory :-)

Right  I put a question on another EE forum here and the expert said that a php "debugging" won't handle javascript conflicts or errors.

Rowby

Thanks Tom and Marco,

My client has decided to go with a different template which will not include (at least for now) the animation.

So I'm going to close the question and split the points.

Best!

Rowby

Thanks Tom and Marco,

Onward and upward!!! :)