I have trouble with this page for example: http://www.last.cz/exotika.html. If you open it in FF or chrome, you start at the top of page. But when you try in IE8, it loads scrolled past the header. Compatibility mode does not help. I think the filter details that get filled by onload function cause it. Does anyone who ran into the same problem know how to fix it? A css hack would work I guess.
Thanks for suggestions. Mike
This will be executed onload(placed in core.js):
$('#item0').focus()
That's what happens, the element #item0 gets the focus and the page scrolls down to fully show the element(it will scroll until the bottom-border of the first "hotel-box"--thats what #item0 actually is-- occurs inside the viewport).
Other browsers may ignore the instruction because the element is a <div/> and can not be focused.
Related
I have a position:fixed Header which I want to center horizontally. So I wrote a function which is executed at the windwo.resize- and document.ready-event to change margin-left of the header. But thats not the point because everything works fine.
Sometimes after my MacBook is closed (hibernating) or I've switched to another Chrome-tab or another OSX-workspace my header isn't centered anymore. It seems like OSX is furtively resizing the window so the CSS Code changes, but it never changes back without resizing the browser window manually. But the problem occurs not every time...
Thats why I want to execute some code after my window is focused again to prevent from this ugly behavior.
Another idea: Does it maybe have to do with the difference between the document.resize- and window.resize-event? What should I use?
I have iframe on my page. In firefox, when I tab into the iframe the control goes to html tag in the iframe. (I could see this with document.activeElement.contentWindow.document.activeElement on console.) The next tab gets me to the first control in the iframe.
In IE and chrome it works fine.
Can you please help me, what I am doing wrong?
Thanks
You're doing nothing wrong. Firefox is focusing the root element so that a user who's just using the keyboard can scroll the iframe if he wants to. If the focus went directly to the first text input, for example, the user wouldn't be able to scroll the frame.
And indeed, that's what happens in Chrome. If the subframe happens to not have any text controls in it, the user can scroll it fine after tabbing to it. If it has text controls, the user is screwed if he wants to scroll.
For what it's worth, I just reported this as https://bugs.webkit.org/show_bug.cgi?id=79558 because it seems like a clear accessibility bug...
I have a facebook app run inside an iframe. The problem is that if I have a smaller browser window, I scroll to the bottom to the app's page list and select a new page, it will open in the iframe also in the bottom.
I tried to add a #top to the links, linking to a name="#top" element inside the new page, but this doesn't work on Firefox (verified) and supposedly IE(not verified yet).
For Firefox, I understood it's a known issue and there are some workarounds to make a "scroll to top" link work, BUT I haven't found any solutions on how to open a new link inside the iframe and make it scroll.
I added a onload="location.href='#'" to the body element of the iframe and still no success.
Whatever I try, it seems to be ignored by Firefox.
Did any of you encountered this problem before? If so, can you spare some advices, please?
Thanks
You could try a "ugly" workaround using http://api.jquery.com/scrollTop/
As a Facebook-developers, I am curious. How do you resize the app-iFrame during runtime? I have a few ajax-based apps, and after every ajax-call I resize the window, eliminating this problem.
Might worth taking a look into.
Feels weird to answer my own question, but hopefully this will help others.
In the end, what did the trick for me was Facebook's scrollTo function: http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I still don't know if it works on IE, since I haven't tested it yet, but on Firefox everything is ok now
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!
In our product, we're using the most recent development version of jQuery Mobile in our ASP.NET website. Each and every time we do an ASP.NET postback, the browser window goes to the back of the screen.
Example:
Maximize any window. Example: Visual
Studio, Word, Windows Explorer.
Maximize IE9 over it. IE9 is the only
thing you see on the screen.
Click on a button in our solution that does
a postback.
IE9 is no longer visible.
Whatever was behind it now has focus
(and fills the screen, as it is
maximized)
Only workarounds I know:
Don't include the jQuery mobile scripts.
Ensure IE9 is the only maximized window in Windows.
I don't know what jQuery Mobile is doing in the background and am assuming this is a bug in IE9 that will eventually be fixed. However, if you had any tips on how to prevent it from happening in the meantime, that would be great.
Edit: Seems it isn't on every postback. It is on every postback that performs a Response.Redirect. I should add that all my postback are actually utilizing ASP.NET AJAX, not full postbacks.
I know this is an old post, but for people coming here from Google:
I ran into this same issue today. It seems this lose focus behavior is what IE does when you trigger the blur event on the window object. This was the code that caused this issue for me:
$(document.activeElement).blur();
activeElement will default to the body element when there are no other elements in focus, and the blur event then bubbles up to the window. To fix this I simply did a check like:
if (document.activeElement != $('body')[0]) {
$(document.activeElement).blur();
}
I had similar problem with IE10 and jQuery 1.7.2.
I found these lines in my code:
$(document.activeElement).blur();
and
$(':focus').blur();
So, adding simple .not('body') resolves the problem:
$(document.activeElement).not('body').blur();
$(':focus').not('body').blur();
This same issue seems to occur with jQuery Mobile 1.4.2.
When using IE 10, with a single tab open and another window on the same monitor, if you open a popup it will send the browser to the background.
To fix this you have to edit the _handleDocumentFocusIn function. You need to change the line(10391) that reads:
target.blur();
to
if (targetElement.nodeName.toLowerCase() !== "body")
{
target.blur();
}
I made a pull request so hopefully this will be included in the next version.
Just posting this link to anybody who is experiencing more of this continued mess. I am seeing the problem on IE 9 and IE 10 on a window.location = 'BLAH', from within the Angular location resource.
This doesn't seem to solve the problem for me, but it may help others:
http://support.microsoft.com/kb/2600156/en-us