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’.
Related
I have looked around for a solution to this problem and although I have come across other people asking the same question , it seems answers for this issue are limited.
The Problem
The issue is that I have a overlay (slide-out from the side) menu which has a search box on it. I need to disable all body scroll so that the user can easily scroll around on the overlay without the body moving all over the place.
Solutions I have tried
The solution I have tried is from the link below
How to disable body scrolling when modal is open IOS only
This solution works great , when the sidebar shows up body scroll stops and when the sidebar disappears body scroll works again.
Whats wrong with the solution I have already found
Well , on Ipad when you click on a search box and the keyboard shows up for some reason body scrolling issue once again appears. If I get rid of the keyboard the problem is once again sorted.
Why is there no code on this page
I work with confidential data and the code is company property therefore this is not something I can post on here. Now I can mock up an example code which shows the issue however it would literally be a side bar with a search box and I dont think that would be useful however I may be wrong in which case I'm sure I can mock something up.
Apologies if the lack of code on this page offends anyone.
On my website, I have a lot of code, many js vendors, etc.
On one specific page, I have king of a right sidebar that pops out for less than half a second, never enough for me to click on it and try to debug this weird thing (I'm thinking of putting a display none on its class).
I've tried to go through the dom and place dom breakpoints in my chrome browser but it's not doing nothing.
Does someone know how I could debug something like this ?
Thanks a lot !
Use "inspect element" to detect the sidebar and then navigate to the class or id which has the display:none; property. Then you can click it on or off in the developer toolbar...
I'm not normally in a need to ask basic or vague JavaScript questions on SO, so pardon me if there is little details here - I'm not sure how to get more.
In the online user manual I'm maintaining, I'm adding custom buttons on each page to get a direct link to the current page (otherwise grabbing the URL just brings you to the home screen), as well as a few extra features. These buttons are added using Javascript, or rather they are already hidden in the HTML, are updated after an AJAX call and then displayed.
It has taken me a lot of work to get these working, in Firefox, Chrome, IE6, 7, 8, 9, I'm sure you know how these things go.
Now comes IE10 with yet another really weird behavior that I want to bang my head on the wall for. If you visit http://help.objectiflune.com/en/knowledgebase/ you will see those buttons on the right inside the main frame. They're grey and blue, top of the page.
So this first "welcome" page is fine, it works great, no issue. However, if you navigate to any sub page using the TOC on the left (such as Error Codes -> PlanetPress Design -> PlanetPress Design Error PXXXX), the buttons all disappear.
I've also noticed that if you get the URL for the page itself (inside the frame, again) and you open it in another tab, it first does not show them, but then refreshing the page makes the buttons appear.
I've tried using the F12 developper console, but it requires refreshing the page to show the console so I can`t use it in those new tabs. As for using within the whole frame system, it doesn't seem to be showing me any errors, nothing weird.
Again I'm sorry if this is an "it's not working" with no further technical details, but... there are none I know how to give.
UPDATE: For the specific code, please turn to http://help.objectiflune.com/common/scripts/olCommon.js , and look at the function starting at line 207 (function buildMenu()). this is the function that retrieves the information and displays the appropriate menus, such as $("#guidebuttons").show();
In ObjectifLune.css, #buttoncontainer has display: none. Navigating through the F12 window, the display of that object is none:
I would guess that somewhere in your JS, you're setting the display to block, but there's something wrong with that code in IE.
I have I'm using the dsmoothmenu jquery plugin to generate a toolbar on the top of my page -- About a month ago, the page started loading (most of the time) with the first item of the menu bar exposed -- as if the user were hovering over the item. I've spent hours trying to figure out what's causing this and haven't made any progress.
I have another page which uses the same exact markup for the menu, and the same dsmoothmenu js/css, but which doesn't exhibit the aforementioned behavior. So I figure it's got somehting to do with perhaps a meta tag, or a style that's being overwritten. By investigating with the inspector, it seems as though the ul#other_cities element is being given display:block by something, which is overriding the default style of display:none, which should be active until the user hovers over the element.
Here's an an example of the problem: http://www.foodtrucksmap.com/la/
And a working example: http://www.foodtrucksmap.com/iphone.html
EDIT: So I've found that the problem will only manifest itself if the mouse is OUTSIDE of the window when the page finishes loaded. If you keep the mouse hovering over the page, the menu bar will not slide down. This along with the fact that it only seems to happen in chrome, leaves me really confused.
I can see your problem in Chrome when I right-click the link and then "Open link in new tab" or " ... new window" which opens the window in the background. This leaves me with this conclusion.
Google's Chrome, for some weird reason, positions a "virtual" pointer at position top:1, left:1 which triggers the script. As soon as we bring in the actual "physical" pointer this position takes over and the problem is gone.
As this seems to be a problem with Chrome we can prevent this only with a little trick. I'd say we give the main div#wrapper some breathing room to the left with a margin? Or maybe something to the top like the second example which works!!!
So far I've been able to find out that the onMouseOver event actually fires when the page is loaded.
Since I don't have direct access to the JS files search for the word 'trigger' in all the file (not the jquery ones) and try to find out if it might be calling that at any point.
I will do more research when I have time.
If Nicklas is correct and hover is for some reason firing onload, try wrapping the js of the hover function in your menu javascript with the following conditional:
if(event.target == this) { //Check if the hover event actually targets the object.
//Hover Code//
}
Hope this helps!
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.