While the lightbox example page works fine for me in IE7, I seem to have broken it in my implementation.
I've written a Lightbox plugin for Mango Blog and everything works fine in Firefox. However, in IE7 the "close" button doesn't work. If I'm fast enough to get my cursor into the position that the close button will be placed before it slides into place, the IE status bar shows the "#" link, but clicking or moving the cursor makes the status bar go blank -- and of course nothing happens.
Not that it was that necessary, but I made a quick screencast of the behavior in IE7. Note the cursor not switching to a hand on the close button.
Any ideas how to fix this?
Perhaps you should try to use the actual 2.0.4 version of Lightbox as a base, there seem to be several changes in the DOM code, although nothing like the bug you described is mentioned in the changelog.
Related
This is my website.
I'm currently working on multi-choice filters, or rather on resetting them. There is no problem on PC.
Click the X button and it clears the filter
But the same simple thing doesn't work like this on mobile devices. I don't understand why.
You need to click an area below the X button, well below, to dismiss the filter.
This is how you need to click to make it work
Also, I just realized that when clicking like this there is an error in the console.
Error in the console after successful dismissing
I'm testing the mobile behavior in Opera (PC version, last update) using the Inspector with mobile simulation; the device is irrelevant. You can try it too.
The same behavior occurs on an actual android, both in Chrome and Opera.
Side notes!
If you activate the dropdown search in any multichoice field, while it's visible, the close buttons work perfectly well and precisely on mobiles. (Although the behavior of this dropdown panel is weird too. It does not always drops down when focusing on a field, as it does on PC.)
When I tried to locate the close button using the console and Jquery and then applied .click(), it worked. So I guess the problem doesn't lie in JS.
If you want to test it on a phone choose the Desktop site. On the mobile view, though, another peculiar thing occurs-the blue X button to the right of the field doesn't work.
PS. I've been wracking my brains for 3 hours to solve this mystery, yet no result. Please help!
The culprit was the "chosen" plugin. Don't use this crappy plugin. They simply don't support mobile devices and have tons of bugs.
I switched to Select2 and everything is great.
SAFARI ONLY
I have encountered weird bug on desktop Safari.
I wanted to display modal after reaching some point when scrolling website. Unfortunately when we do that on safari modal is not clickable (z-index issue?). I've been using react + react-modal, but I think that this issue is not related to any of those.
Source code + demo: https://codesandbox.io/s/p5x9331y8x
I've noticed that when we wrap triggering function in setTimeout() we will be able to see that modal stops working only when it appear while scroll event. https://codesandbox.io/s/3q7rmpj1mq
Ofc setTimeout() is not a solution here...
I've found issues related to this but any of them is not matching my problem exactly:
https://github.com/reactjs/react-modal/issues/369
https://css-tricks.com/forums/topic/safari-for-ios-z-index-ordering-bug-while-scrolling-a-page-with-a-fixed-element/
Also when there is no overflow: hidden on body it works properly but thats not a solution here either (obviously we want to prevent background from scrolling).
Note: Regarding demo, modal appears after reaching last section of page (this problem is recreated). It's good to open page in full screen for testing.
Any help would be really appreciated.
Issue was solved by changing from overflow: hidden to overflow-y: hidden...
I have a realy confusing problem with IE 11.
I use AngularJS to fill an element and display the element afterwards.
It works perfectly in FireFox and Google Chrome. In IE11 it wouldn't show until I click somewhere. It doesn't matter where I click. It could be somewhere on the page itself or my windows taskbar or on my second monitor.
I don't get any javascript errors on the console. After the random click IE shows at first only blank HTML. The styling is applied a moment later.
EDIT:
My Porblem is super strange. I've never seen something like this bug. My Code is running perfectly. All elements are thier with right values at the right place. All CSS rules should be applied. The pagination shows only after a completly random click somewhere but this only happens in IE11. Every other browser works like a charm.
Have any body saw this before?
I've asked two ather web devellopers in my company and we did code reviews but can't find any bugs in the code.
We think it's an IE11 bug. But there seems to be no one that can confirm this.
Try using $scope.apply and surround your scope change statements with $scope.apply.
$scope.$on("showPaging", function(){
$scope.apply(function() {
$scope.showPaging = true;
}
});
The use of $scope.apply is not encouraged though.
I have this landing page, for some reason I can't see the check box, submit button and a div that are in the code. Everything works in chrome and Firefox. I understand that IE dosen't always get media queries so I made this landing page that calls a diferent css file when it detects IE, but it made no difference.
I have a few questions:
1. What is causing this?
2. How can I fix it? Is there a file, like modernizer, that I can load to modify code for IE.
3. I am also using this js addon on the second link with a separate css file, in order to see place holders in IE. This also doesn't work, if someone could tell me why, that would be great
I see the checkbox just fine in IE. why don't you show an image of what you are seeing. Also, clear your browser cache.
To help debug, you should press F12, then click on console. make sure there are no errors. Then click Network. Make sure all css/javascript is loaded with no errors. finally, in the dom explorer, click the arrow, and click on the page and see if the elements are there.
as i see it this is the solution to my question
at the top of the css file i had this row:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
once i removed it i got the mossing elemnts.
tnx for helping
Dav
I'm working on a project at the moment where I've come up against a rather frustrating problem in Internet Explorer. I have a series of pop ups on a particular page that are opened with JavaScript when help links are clicked. The JavaScript for them is:
function openHelpPopUp(url) {
newwindow=window.open(url,'name','width=620,height=440');
if (window.focus) {newwindow.focus()}
return false;
}
The HTML used is:
Help
Now, the pop up works perfectly in every browser except Internet Explorer. The main priority at the moment is making it work in IE7.
What happens is that, it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible. Once you click away from the highlighted area to deselect it, it stays visible. Any area that wasn't highlighted stays invisible. When you refresh the pop up though, it sometimes becomes visible without any highlighting, it sometimes doesn't.
Also peculiar is that some text within an unordered list is visible, but when I use the same list encompass the rest of the text, it stays invisible bar the bit that was already visible.
Have you come across this or anything like it before? Have you got any tips or suggestions? I'm running out of things to try so any feedback or help on this is greatly appreciated!
By adding a z-index of 100 to every P tag for IE, I seem to have gotten it visible now. Weird. I haven't used any z-index's elsewhere and the structure of the HTML should put the P's on the top anyway.
Sounds like a browser bug.
What happens if you open the URL directly? Perhaps it's not popup related?
it pops up fine, but the text is not visible. If you click and drag the cursor over it and highlight it though, it becomes visible
Sounds like it might be an IE7 variant Peekaboo bug, an IE rendering problem which is nothing to do with being opened in a pop-up. You'd have to show us the page that's being popped up to be sure though.
Whilst we're here:
if (window.focus) {newwindow.focus()}
Probably should be ‘if (newwindow.focus)’ assuming the aim is to avoid focusing a blocked ‘window.open()=null’.