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();
})
Related
Hello I am trying to make a simulation of a ruler measuring a desk. The mousemove event works when I open the simulation alone but not when I open it in an iframe like here. The iframe works when opened with Chrome or Opera but not with Firefox. It also works with Edge after I press F12. Please help I am just a teacher not a developer and browser compatibility is far beyond my understanding.
Update: After the answer of murphy1312 I also noticed that my problem is also because the iframe is in a hidden tab that loads initially with display:none. Is there something I can do in the iframe document without changing anything in the parent page?
So I'm working on a big system using JQM and the problem I'm running into is that after I use a history.go(-1) to change page (with a cancel button) firefox breaks entirely. All pages on all open firefox windows and tabs no longer display correctly, and some of the UI buttons are even becoming more transparent. The page that I transition to has all coloration replaced with solid black. I don't know what to do to debug this because I don't know what's actually happening here. Could someone possibly explain what's happening to firefox?
Note: I have attempted to pick up an error message in the console, but when the firefox javascript console is open, the bug stops happening.
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.
I am currently working on a contenteditable iframe, which so far works perfectly under all browsers except for mobile Safari. I am using iOS 5.1.1. The issue is reproducible in any version of iOS that supports contentEditable up to the latest.
The issue is the following:
The content gets focused correctly when you tap on it, you can move the cursor and everything, however once you apply an action to it the following happens:
The focus is still in the iframe and you can see the cursor, however it does not respond to keydown as it previously did. Nothing happens, even if I move the cursor and still try to type anything inside.
Here is an example of what happens:
http://www.quirksmode.org/dom/execCommand/
If you focus the iframe anywhere inside the content and say you apply text-align right. The content is correctly aligned to the right, but if you try typing any additional characters, you can see that the ui locks, but no new characters appear inside where the cursor is. If you try to apply a different command it would still work though.
Does anyone have an idea of how I can workaround this?
you can simply use Iframes design mode instead of contenteditable attribute to make any HTML elements editable .
the javascript code to make elements in iframe editable is :
var iframe = document.getElementById ('the iframe Id ') ;
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.designMode = "on";
As I read no cross browser problems found in this method
for complete reference see here
Is upgrading your version of iOS an option? I just tested all the conditions you described using iOS 6.1 without a problem.
Since iOS5 was the first version of iOS Safari to support content editable, it's likely that the implementation contained bugs. It appears to have matured.
iOS 5.1.1 supports very minimal features of HTML5. It will work perfectly fine after you've updated it to iOS 7.
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