We Keep Coding

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();
})

Hide scrollbars of a iframe with javascript (Firefox, Opera and IE)

I have a website that needs to work without javascript.
In this website I show a iframe which contains the main content of the page. Because of a no javascript requirement, I have to show the iframe initially with scrolling. I want the scrollbars when there is no javascript.
If javascript is available, I resize the Iframe. I have to because the content of the page changes. Is it possible to remove the scrollbars when the frame is resized? Chrome and Safari hide the iframe scrollbars when its contents fit, so no issues there.
Is this possible in:
Firefox 13
IE 9
Opera 12
I've tried to do the following in javascript:
var iframe = document.getElementById('planneriframe');
iframe.setAttribute('style', 'style="overflow: hidden;"');
iframe.setAttribute('verticalscrolling', 'no"');
iframe.setAttribute('scrolling', 'no"');
it does add/change all the attributes, but the scrollbar is not hidden.
Solutions taking another approach or working javascript are welcome.
UPDATE
A better link to the site: http://planner.gvb.reizenapp.nl/advice
This contains no javascript for resizing the iframe tough, buts that not really relevant I think.

IE Chrome Frame Full Screen

I have a working implementation of full screen working for Safari, Firefox, and Google Chrome. From what I have read it should work for ie with google chrome frame but when I click the full screen button I created nothing happens. Any ideas? Is it not yet supported?
$('#enable_fullscreen').click ->
calculate_presentation_font_size(height)
if docElm.requestFullscreen
docElm.requestFullscreen()
else if docElm.mozRequestFullScreen
docElm.mozRequestFullScreen()
else if docElm.webkitRequestFullScreen
docElm.webkitRequestFullScreen()
Putting an alert in the "webkitRequestFullScreen" if statement shows that it does go to this condition in chrome frame but docElem.webkitrequestFullScreen() is undefined.

I've build it and made it work from this examples.
https://developer.mozilla.org/en-US/docs/DOM/Using_full-screen_mode
The only things I can see missing from your code for the webkit condition is the parameter "Element.ALLOW_KEYBOARD_INPUT" to the webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT)
Unfortunately the main problem of chrome frame is the communication with the IE window that literally behave like a difficult child ;-)
For IE you can open a popup window in fullscreen mode by directly calling document.location.href for the source it will open the current page your are on
window.open(document.location.href, 'myAppfullscreen', 'fullscreen=1');

How does IE work with contentless anchor tags?

I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/

Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them

Javascript: Automatically maximize browser window and switch to full screen mode?

I am working on a Flash app that is 900x700 pixels. When viewed in misc. browsers at 1024x768, the browser chrome causes robs too much of the vertical space and the app appears in a window with a vertical scrollbar. Unacceptable.
The flash app will be launched via a link emailed to the viewers.
I'd like to avoid resizing the flash app and am wondering if there's a way to do the following via javascript, with no clicks involved:
maximize the current browser window
remove current window address bar and tabs / switch browser to full screen view (equivalent to pressing F11).
An alternative would be to resize the flash app vertically to match the browser canvas height to avoid scrolling. This may cause the app to become unreadable, so not the best approach in my case.
Thank you!
UPDATE: Seems that browser resizing and autoswitch to full screen won't work and neither will the flash app auto resize. What is the best approach then? And, some users may have browsers with toolbars or open a small browser window.
The only idea I have is to use javascript and display a message to users with small browser windows to pres F11 manually. The audience is executes and some may not even know what an F11 means...

There is no way to maximize the browser window to full screen with JavaScript. While this is unfortunate for your genuine requirement, it is considered a security restriction.
Sources:
Stack Overflow - To view the silverlight app in fullscreen mode(F11)
SitePoint Forums - Trigger F11 using javascript
Webmaster World - F11 Fullscreen using Javascript

The window size can be altered by using:
window.moveTo(0, 0);
window.resizeTo(screen.availWidth, screen.availHeight);

To answer the question in the comment you made to your own post. Yes. You can have a button whose click handler does this
stage.displayState = StageDisplayState.FULL_SCREEN;

You can use JavaScript to open a new window (using window.open) and control the window that is opened (no address bar, etc). You can also control the size of the window (you can't maximize it, but you can get the users screen size, and set the window that same size).

Chrome 15, Firefox 10, and Safari 5.1 now provide APIs to programmatically trigger fullscreen mode. Fullscreen mode triggered this way provide events to detect fullscreen changes and CSS pseudo-classes for styling fullscreen elements. These APIs may present you with a more acceptable solution for those browsers.
See this hacks.mozilla.org blog post for details.