I have a jQuery onclick menu that works great in IE9+, Chrome and Firefox. However in IE8 it opens extremely slowly. It takes approximately 10 seconds for the menu to show, and none of the animations play, the menu just appears.
The menu uses the latest version of jQuery (v1.10.2) and uses slide and animate only to open and close the different parts of the menu. I have tried googling various combinations of slow jQuery, slow loading menus and slow animations for IE8 and jQuery that I can, and I cannot even find anything remotely like the issue I'm having.
You can see the problem by going to my website here. Visit it with IE8 and you will notice the really slow speeds when you click on Test Category 1 or 2.
Has anyone come across this kind of issue before? Does anyone know what causes it and the solution to get it working fine?
Edit
I have noticed that it's not just affecting the menu, but also the carousel. If you look at the animations they are not sliding either, however in IE9 + they do slide. I'm not sure if the two are linked but it seems odd that it's both jQuery effects that are being affected.
Edit 2
After some more testing I have noticed that if the bottom of the menu falls over the Tabs below the carousel then the bit over the tabs shows straight away, if you however over the tabs. Same happens when you close the menu. Hover over the tabs and the bit of the menu drawn there goes away.
I then watched and noticed that the menu shows and disappears when the carousel changes. It does seem to be a redraw issue, however the code I've been trying to make it paint upon completion doesn't seem to be working. This is the code I got from another answer here (slightly modified to work with jQuery elements thanks to an answer below).
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
//var elementOnShow = document.getElementById(id);
var elementOnShow = $(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
I think it might be a case of either finding the correct function to redraw, or running that function on the correct element. I currently run that on the clicked element, which may not be the correct one. I have tried running that function on various elements, including the main UL, the element clicked, the element, opened and the element opened's parent. No luck with any of them.
JSFiddle: As requested here is a JSFiddle of the issue, however for me that won't even work in IE10. It works in Chrome fine.
EDIT 3:
I have stripped away everything except the bare essentials and put it in a test file. You can veiw it on my website here. I am getting no errors in IE console, nor in any other console. It is still giving the same issue, where the menu isn't drawn. However because there is no carousel behind it to force the redraw it never shows on this test site.
All the redraw scripts I've tried so far have failed. How can I get this working?
I don't know if this is related or not, but I noticed that there's an error that occurs each time you click on those menus.
Uncaught TypeError: Cannot read property 'offsetTop' of null
It occurs in the "FlushThis" function (from jquery.fluid-menu.js) which is apparently some kind of hack to support IE. If you look at the code, it attempts to read the "offsetTop" property of an element and then simply throws away the result. Perhaps this is a trick on IE to make it run some native code that will maybe repaint/relayout the page once the menu has been opened? It looks like a jqueryified element ($this) is being passed to that function instead of the ID of the element, which I presume is causing the look up to fail. You may want to try to get that code executing properly and see if it resolves your problem.
Too many script issues to look into the real problem.
SCRIPT1028: Expected identifier, string or number
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu'
main.js, line 3 character 2
The script issues arise when the menu is clicked.
Chrome, and Mozilla tolerate errors to the maximum without letting user know that there is a script error. But IE is not so kind hearted. IE 8 & - are natively slow in running scripts many animation effects wont work in them since the properties like opacity are ignored by it, unless you have fall back options.
Maybe the slideshow overlays the menu while animation is playing.
I could just set my ie10 to ie8 mode and saw the the layers are not in best order for display.
Did you try to set the z-index on the menu?
Perhaps you try hide the the carousel temporary and check if the menu opens well then.
Is there a specific reason you're using "document.getElementById" rather than a JQuery selector here? It's not finding document.getElementById(id) and it's throwing an error on this line: tmp = elementOnShow.parentNode.offsetTop + 'px';:
function FlushThis(id){
var msie = 'Microsoft Internet Explorer';
var tmp = 0;
var elementOnShow = document.getElementById(id);
if(navigator.appName == msie) {
tmp = elementOnShow.parentNode.offsetTop + 'px';
} else {
tmp = elementOnShow.offsetTop;
}
}
Maybe change var elementOnShow = document.getElementById(id); to var elementOnShow = $("#" + id);?
Also, why are you adding 'px' to the end for IE? Try commenting that out so it just says tmp = elementOnShow.offsetTop and see if that makes a difference.
The error is probably just disabling most of the rest of the Javascript on that page.
One other thing I've found: sometimes "slideUp" and "slideDown" and other "built-in" animation methods seem to be buggy or crunchy in IE (like, they animate most of the way, then they stop for a second near the end of the animation, and suddenly blink to the end).
I always use the JQuery animate() function for everything. It's a bit more of a pain to write, but you can specify outerHeight/outerWidth values that take padding into account and things like that. Try replacing your functions with animate() and see if that helps!
Related
Now this really has me stumped. I'm not going to use a codepen because I simply can't recreate it until I identify the problem. Currently, I'm using Google Chrome. The problem doesn't exist in Modzilla Firefox, Microsoft Edge, Internet Explorer, or Opera.
It's an issue with usually a simple fix. The page scrolls horizontally off the page canvas. I believe it may have something to do with the fact that my laptop I'm viewing the page on has a touchscreen, but most likely not.
I've tried a number of hacks to fix it, including:
1) Tried to put set the max-width of the browser to the innerWidth with javascript.
2) Tried to add overflow:hidden to the CSS of the outer container of my off-canvas menu.
3) I even used the Chrome Dev Tools to delete each element at the time to try and identify the problem. Until EVERY visible element was gone, the problem remained.
4) Set overflow-x:hidden on html and body
5) Also tried to add the following javascript try and to debug:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
6) Tried all of these at the same time.
Therefore, I'm completely stumped.
Here's the link to the site: The Problem
I'm developing a website for a client, and although all jQuery/Javascript code works fine in Chrome (e.g. floating navbar, and smooth scroll when you click a navbar item), none of it seems to work in Safari?
I've looked at other questions on StackOverflow, and the only advice I've found is to use a HTML validator, because Safari can be iffy like that.
Although I'm in the process of doing that now, I have a feeling it's something deeper, because most of the HTML issues revolve around obsolete center tags.
At the moment, the site is up at: http://www.grahamcafe.net23.net/Padre/index.html
If I breakpoint at http://stats.hosting24.com/count.php I do not get the error. It document.writes a new jQuery
Try this in script.js
var myWrite = document.write;
document.write = function(str) {
;// ignore document.write
}
to stop your hoster from wrecking your page with their horrible script. You get what you pay for I believe.
It assumes Safari allows replacing document.write with an anonymous function
This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.
We have an automatic slider on this website, http://www.realcapfinancial.com and it has been working on all browsers. IE9 doesnt seem to work. It comes up with and error, no object line 298... character 2 etc. I forget what it says but I can't check it again since I'm at work using a mac.
Any help is perfect, thank you
The element with id calcclick is only added after the Resources tab is click. However, this element is already adressed (on line 298) on page load.
I'm using an image cross-fading method via jQuery on a website. For confidentiality reasons, I can't post the site's entire code, but here's the Javascript for the cross-fader (based on this reference):
<script type="text/javascript">
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#nav li')
.removeClass('highlight').find('a').append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(250, 1);
}, function () {
$span.stop().fadeTo(250, 0);
});
});
});
</script>
It works swimmingly on all browsers -- including the IE7 install on my test PC. However, on other PCs with IE7, the effect sometimes fails. The images will load, but hovering over them produces no effect. This means the JS isn't outright failing -- in that case, the rollovers would still work, just with no fading. Instead, it seems that IE7 is removing the "highlight" class, but then stopping.
The truly bizarre part? The failure is 100% random. If I refresh the window, sometimes the effect will work fine. How can this be?
UPDATE: I've determined that the problem lies somewhere with the AJAX scripting that's powering the website. Removing all AJAX and replacing it with static content eliminates the error. My theory is that when the page loads, sometimes the AJAX content is completed before the image load. This makes IE7 freak out and give up on the crossfade effect. If I'm correct that this is the problem, the question is: how can I fix it?
UPDATE 2: Going further down the rabbit hole, using Fiddler, I notice one consistent thing for each successful load of the effect in IE7: the loading of the main image that I'm using for the hover is aborted, then loaded again. This does not happen when the effect is unsuccessful. To put it another way, forcing the browser to preload the images using a simple jQuery preloader function breaks the cross effect in IE7 every single time, instead of its current sporadically-working state.
This is just too bizarre for me to even comprehend, but any ideas are certainly welcome.
Is your CSS included before you call the ready function? From the docs:
Note: Please make sure that all stylesheets are included before your scripts (especially those that call the ready function). Doing so will make sure that all element properties are correctly defined before jQuery code begins executing. Failure to do this will cause sporadic problems, especially on WebKit-based browsers such as Safari.
I understand IE is not WebKit based, but it's worth checking.