I've modified code from this tutorial which animates a sliding div so that it works as a toggling menu. I was hoping it would degrade into normal hide-show in IE9. Which it is. But only one time. If I click the first button, it will toggle its div on and off. It works for all four like that. But after that first toggle, IE fails to show the divs again. I can verify that the ng-click is working through logging the index of the clicked button. For some reason though, it appears that the display property isn't being set to block. Is there a known issue where ngAnimate causes IE9 to break without an error, or have I missed something obvious?
JSBIN
In angularjs site you will find this:
Although most modern browsers have good support for CSS transitions
and CSS animations, IE9 and earlier do not. If you want animations
that are backwards-compatible with older browsers, consider using
JavaScript-based animations, which are described in detail below.
practical: if you remove this line : transition: all 0.8s; you will see that all the browsers behave the same way.
Solutions:
Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations as you can see here, but is support conditional comments, so you could put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.
<!--[if lte IE 9]>
<script src="animation-legacy-support.js"></script>
<![endif]-->
Or you can use the modernizr library like this:
if(!Modernizr.csstransitions) { // if not supported.
//ADD YOUR javascirpt-based CODE HERE
}
or you can just make all the animation with jquery, use jquery 2.x for ie9+ or jquery 1.x for ie6+ as you can see here.
Note: An example with angular and jquery animation can be found in Animating ngClass with JavaScript chapter in angularjs site, in the bottom.
As far as I know css transitions are not supported in IE9 and earlier. So if you want to support these browsers you might use jQuery animations instead.
Hope this would be helpful.
Related
Internet Explorer Last version show a very ugly alert about addEventListener, I was reading some fixes here but in my case I believe the solution is to delete the part of the javascript code giving me problems BUT I am a zero to the left with Javascript.
Here is the code and I am sure this code has 2 or more funtions. The first one is for my drop down menu using also JQuery. But it seems like the last part where addEventListener is maybe is not necessary to make my drop down menu works. I got this drop down menu from a website I buyed pre-made with lots of funtions
LMenu=$(".menu>ul>li");LMenu.find("ul").siblings().addClass("hasUl").append('<span class="hasDrop iconoflecha icono-flecha"></span>');LMenuLink=LMenu.find("a").not(".submenu a");LMenuLinkAll=LMenu.find("a");LMenuSubLink=LMenu.find(".submenu a").not(".submenu li");LMenuCurrent=LMenu.find("a.current");if(LMenuLink.hasClass("hasUl")){$(this).closest("li").addClass("hasSub")}LMenuLink.click(function(a){$this=$(this);if($this.hasClass("hasUl")){a.preventDefault();if($this.hasClass("drop")){$(this).siblings("ul.submenu").slideUp(250).siblings().toggleClass("drop")}else{$(this).siblings("ul.submenu").slideDown(250).siblings().toggleClass("drop")}}});LMenuSubLink.click(function(a){$this=$(this);if($this.hasClass("hasUl")){a.preventDefault();if($this.hasClass("drop")){$(this).siblings("ul.submenu").slideUp(250).siblings().toggleClass("drop")}else{$(this).siblings("ul.submenu").slideDown(250).siblings().toggleClass("drop")}}});if(!("boxShadow" in document.body.style)){document.body.setAttribute("class","noBoxShadow")}document.body.addEventListener("click",function(b){var a=b.target;if(a.tagName==="INPUT"&&a.getAttribute("class").indexOf("liga")===-1){a.select()}});(function(){var e=document.getElementById("fontSize"),d=document.getElementById("testDrive"),c=document.getElementById("testText");function b(){d.innerHTML=c.value||String.fromCharCode(160);if(window.icomoonLiga){window.icomoonLiga(d)}}function a(){d.style.fontSize=e.value+"px"}e.addEventListener("change",a,false);c.addEventListener("input",b,false);c.addEventListener("change",b,false);a()}());
I have a Fiddle with the javascript code it will be easier to read the code.
https://jsfiddle.net/epo5es5n/1/
EDIT: I really don't know where javascript code starts and ends. I just need it to make the Lmenu works its a dropdown UL LI menu only
IE browsers up to IE8 do not support addEventListener (I'm assuming you meant the latest version you have when you said Internet Explorer Last version). attachEvent is the IE equivalent (well, not exactly equivalent).
If your target browser is only IE8, you can just replace the addEventListeners with attachEvent calls, but a better option (seeing that you already seem to have jQuery) have be to change these to jQuery .bind (or .on if you have a later version of jQuery)
I have a list in my footer with few links, and when I click on my last listed element i.e "See more links" It replaces my list to new members using jQuery slideToggle().
But with this I see my footer bottom go a bit down and up again.
Thanks to user George and this issue was solved, using jQuery, by setting the height of #col on page load, here is my code:
$('#col').height(function(_,v){ return v; });
But with this solution, I'm getting a another issue that I am not able to understand
I have 5 versions of my design using media queries, above I have an image of my mobile version. As you can see my link "See more links" is almost completely hidden.
Also on Internet Explorer I have this issue almost in all media queries of my project...
Do you see why this can be happening?
I have here my full example: http://jsfiddle.net/jcak/4ma6es6h/8/
If you set min-height instead of height, your div will never be too small and won't collapse below the min-height.
But this still doesn't solve why your height is too small.
You might want to look into your box size. Look at the schema here on what is count as height and what is not:
http://api.jquery.com/innerheight/ and http://api.jquery.com/outerHeight/
maybe you have padding/margin/border that is not accounted for.
Use min-heightto avoid the hidden issue.
In older IE, IE < 9, media queries are not supported, you can use Respond.js, it will add media queries to IE 6-8, it's recommended by twitter bootstrap.
If you have further problems with IE, check you js using linting for es3, check jshint and use some polyfills, like es5-shim if you need something from es5.
I don't think this is to do with media queries, since you're having the same issue without them. The function 'function(_,v){ return v; }' is returning the height without margins or padding, which might be cutting off the link at the bottom. Perhaps try this instead:
var $col = $('.col4');
$col.height($col.outerHeight(true));
EDIT: I've just noticed your comment above, where you say that refreshing sometimes makes it work. This issue may be caused by the page not being fully rendered when your code is executed, so the wrong height is being called.
Also, you're using the same ID ('col') for multiple elements. IE will HATE this and will probably throw silent errors. IDs should be completely unique!
Older versions of IE could cause this problem to occur, maybe you could try and restrict them or add a notice that it's not working properly because "you're using an older version of Internet Explorer" or so.
Works fine in Mozilla Firefox, Chrome and newest Internet Explorer.
here's a landing page I've coded up:
http://rsa-partner.com/
It all looks fine in every browser bar IE8. In IE8, the advanced CSS selector 'nth child' is not recognised.
I downloaded and linked selectivizr.js (http://selectivizr.com/), which should have sorted it in ie, but alas, the background images that show on all my nth child selectors are not showing. The code is
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<![endif]-->
Is there something I'm missing? I swear I've used conditional IE specific comments before and got nothing back. Any suggestions would be much appreciated.
Of course I could simply remove my nth child selectors and replace with specific classes but I'd like to avoid that if possible!
If your content is loaded in dynamically (like if you are using a CMS system), then it gets loaded after Selectivizr is run, and therefore it won't work.
From selectivzr.com:
The emulation is not dynamic. Once the styles are applied they are fixed so changes to the DOM won't be reflected.
I recommend using Modernizr instead. You can check for css-lastchild and customize the styles if the browser doesn't support it (together with the rest of the CSS3 selectors, like nth-child, etc.). I share your pain though!
I'm writing some code that involves CSS tabs, but IE doesn't support the :target css3 attribute. I have a work around by checking the hash value in an interval (ew), but I want to only have that code run when :target is not supported. I would do the regular IE check, except early versions of Firefox do not support it, nor does early Safari or Opera. Does anyone know how to test for :target support?
You can test for CSS support by adding a rule like #someid:target { visibility:hidden; color:#abcdef; } and then setting the target to #someid, reading if the color is #abcdef, and then reseting the hash.
This will, however, generate entries in the browser history: 1 for when you navigate to the id, and 1 for when you reset it to whatever it was before. It may also create a flicker in your tabs, so that may not be ideal - but I don't know what you can get away with.
Ideally, tabs should ideally read and write the hash for bookmarkability. But I don't think that :target is the ideal solution to creating tabs. I know it looks appealing to begin with (did to me). Given the poor support of the selector, how badly it scales with nested or multiple tabs, and how volatile it becomes with other markup (someone adds a #skip-to link on the page), it is less headache to implement with good old clicks.
I have a written a jquery plug-in which pops-up a div section on hover over an element, and I need to deal with the "select z-index" bug in IE6 (http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx). So, if running in IE6, my code needs to hide some select boxes on the page, when the pop-up div is visible.
My question is: In trying to follow best practices, I would like to avoid detecting the actual browser version and instead do a 'feature-test", to determine whether I am in an affected browser. (http://ejohn.org/blog/future-proofing-javascript-libraries). Is there any way to do this? Or should I just treat this as a special case, detect the browser and handle IE6?
I use this snippet all the time. It's cool because it checks only for IE6. But be aware that if you using any code compression tools that removes HTML comments this won't work.
<!-- THESE LINES ARE NOT NORMAL HTML COMMENTS! They are instructions that only IE6 can understand. -->
<!--[if IE 6]>
<script type="text/javascript">
// redirect to the Default error page passing a custom error code.
window.location = '/your/redirect/page';
</script>
Cheers.
Use the bgiframe plugin to fix the bug without having to hide the select boxes on the page.