We Keep Coding

Off page scrolling issue

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

div top position on hover remembered after magnific popup initialisation

I've been working with magnific popup which is a fantastic little script. I've had one issue lately though.
I've made an example on codepen to isolate the problem - http://codepen.io/patrickwc/pen/xiajJ
Basically, when you hover over the figure element, figcaption moves up via changing the top value. Then I've made a link absolutely positioned over the entire of that figcaption element, so that when you click or tap again the link magnific popup window is activated. This part works fine, but for some reason in some browsers, when you exit the magnific popup window (close or clicking outside makes no difference) the figcaption element gets "stuck". I'd like it to return to where it was before the hover event, as it does in most browsers. But for some reason in IE11 and Chrome Canary (latest stable Chrome is fine) seem to remember that the element was hovered, and the figcaption box gets stuck there, unless you hover again.
Usual behaviour you can see in most browsers.
IE11 and Chrome Canary (Version 39.0.2152.0 canary) after closing popout window:
Interestingly this does not happen on browserstack. I have Windows 8.1 and Chrome Canary 37, as well as IE11 and the behaviour is fine on browserstack, but not on my or others PCs.
I realise I should probably use transform to get hardware accelerated transforms, but I need IE8 support. I'm going to see if transforms make any difference now, but I'm guessing they won't. Maybe I'll have to use js instead of the hover event to move the figcaption element?

So I got some help from the developer of magnific popup and a friend of mine who's a javascript wizz. The .open-popup-link a tag was being focussed, once the popup had closed. I found out about jquery's blur event and the following code fixed the issue, which only happened in IE11 and Chrome Canary (v38 and 39).
jQuery('.open-popup-link').on('focus',function(){
jQuery(this).blur();
})

FF not setting size on window.open

I have a simple JS script including:
OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
FF 21.0 opens it to the full size of the browser window.
Chrome and Opera correctly open it to the specified width and height.
Is this a known bug in FF? Is there some way around it?

You need to remove the space between height and width in your third argument.
See strWindowFeatures # MDN
Update:
As Pointy says, this doesn't seem to be the case (and from some testing it certainly doesn't affect me in FF 24). However, quoting from Firefox's tab preferences and settings page:
If you have chosen to open pages in new tabs, Firefox will ignore this option and will open a new window from a link if the page author specified that the new window should have a specific size, because some pages can only be displayed correctly at a specific size.
So this must have been changed from FF 21 til now. How are you triggering the window.open? I know some browsers differentiate based on event source, meaning you get different results on triggering it in Javascript vs. from a user-initiated event.

Voila! Pointy had the answer.
I hadn't noticed that the window was opening in a new tab.
I unchecked the browser open-in-a-new-tab option, and now I get the properly-sized window.
Thank You!

Onclick Menu opening slowly

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!

Javascript window.open not focusing in Windows7

I'm using IE8 in Windows7. When in Javascript I do window.open(....), the new window starts blinking in the taskbar. I want the new window to be displayed to the user and not hide in the taskbar.
I've tried:
var myWindow = window.open(.....);
myWindow.focus();
But still it starts blinking in the taskbar. Anyone knows the trick to fix this?

If there were a way to do what you want to do, every popup ad in the world would use it and the web would be a worse place. so there isn't a way to do it. =)
You might have better luck if the window.open occurs in a click handler or something like it - there are complicated heuristics baked into the browser around allowing poups if they're deemed 'intentional'.

I actually got this working. Initially I was opening IE8 using the IE icon on the task bar menu. For some reason I then decided to open IE directly from C:/Program Files/Internet Explorer/ and it worked as expected.