Once again I have written some Javascript using jQuery, and it works in every browser except Internet Explorer.
This time it's a sliding menu for the company website that stays at the top of the screen when you scroll down the page. In Internet Explorer the colored bar at the bottom of the menu appears to the right of where it's supposed to be, and when you scroll down the menu appears to the bottom right of where it's supposed to be. On top of that, the menu border is misaligned with the menu.
The affected page is at http://www.jacobsautomation.com/so_tooling.html, with the logic for the slide menu at http://www.jacobsautomation.com/so_slidemenu.js. Below are some pictures of the page, with Chrome left and Internet Explorer 8 right:
Still http://www.jacobsautomation.com/Problem_Still.jpg
Moving http://www.jacobsautomation.com/Problem_Moving.jpg
Does anyone have any idea how I can get this working in IE?
It may not be the complete answer, but it probably doesn't help that you're using a proprietary attribute background in your <tr?'s. You are probably looking for style="background: xxx". Ditto for height in your table tag. These are actually invalid for the DOCTYPE specified (XHTML 1.0)
Related
I'm stuck with this problem since last few days,
I have a website that's a Single Page Application , built with Angular.
There is a section in the website where I have implemented horizontal scrolling of the divs (carousel type view), that works well on other browser.
However horizontal scrolling fails on UC because it has a built-in feature for swipe over the screen.
Any Idea how can I disable it using JavaScript?
Note : If I go to Settings > Browser Settings > Disable swipe feature, the horizontal works fine.
Please check if the container has the following property set when the page loads (not set by JS on some touch/click event)
overflow: scroll;
I had the exact problem, I had overflow set to hidden and I was enabling the scroll by a "touch" event. That works well on other browsers but certainly not with UC.
I'm making a webapp and want to use all the screen and avoid scrolling if possible. There will be buttons that need to be clicked in many areas of the page.
The area at the bottom of mobile safari is not clickable when the tab bar is open and I rotate to portrait and back to landscape.
I have set the body height to the same as window.innerHeight instead of 100% so that I don't have to scroll to get to buttons at the bottom.
bodyEl.style.height = window.innerHeight + 'px';
It may be the case that this area is not usable for interactive content.
Here is a demo with code:
http://plnkr.co/edit/327sUQ?p=preview
You should be able to open a preview of it on iPhone 6 Plus by clicking on the fullscreen button 'Launch the preview in a separate window'.
Update:
It definitely looks like it was a bug in iOS8, it's working as expected in iOS8.4, 9.0 & 10.2 from my simulator.
I may have found an answer to your issue, but would love to hear if you can confirm. Setting the content of your page to have the following styles:
overflow-y: scroll (allows you to scroll below the viewport, but only if necessary per the length of the content; the default value is visible)
-webkit-overflow-scrolling: touch (to smooth any scroll behavior)
in addition to your height: 100% (which forces the content to fill the viewport)
appears to force the iOS menu (tabs and address bar on top as well as nav bar on the bottom) in Safari to always appear. That way, button clicks to the top and bottom of the page are no longer "dead zones" and will actually work instead of opening up the Safari menu.
I'm searching for a solution for a similar problem - this is not an answer, but an attempt of explanation.
First of all - currently, I cannot confirm this behavior - seems like it's fixed in iOS 8.4 (12H143). Didn't know exaclty in which version I saw it the last time.
Nethertheless, I try to explain what I've found out (until we decided to not bother anymore).
The not clickable area is not always a dead zone. If you scroll up before you click, chances are high you get it working. Thus I think the (empty) standard navigation bar is there (height and behavior of the elements are similar/the same), even if it's empty (all element moved to the address bar) in landscape mode.
Btw.:
There's another (similar) problem with the iPhone 6 plus (not fixed yet).
If you have a position: fixed element on the top of a webpage, in landscape mode and only if there are two or more tabs open (and the tab bar is visible), you can click through this element (even through buttons) - as if the whole thing isn't there.
I know this question is a bit old, but since the issue still exists I thought I should share my experience...
As of now there is NO fix for the issue, but there is a workaround. The solution jennz0r provided may work for some, but I didn't like the idea of the menu bar always showing. I saw a website that had the issue solved... well it seemed to work at least. I didn't find anything in their css or js.
So what was the fix? Since the "dead zone" is 44px in height they simply made their floating bar 88px height :D Users would instinctively tap on the top/center of the button and it will almost always work at first try!
Another workaround would be to simply make the button/bar float 44px from the bottom.
"If it's stupid, but it works... it ain't stupid..." ;)
We are baffled by a horizontal scroll that shows up when you scroll to the bottom of Firefox and on the iPad 2 (running Safari).
In Firefox on both Mac and PC, according to Firebug all elements are the correct size. yet there is this grey area if you scroll. The scroll bar does not reflect this extra space; you need to access it via a trackpad. On the iPad, the grey space shows up as part of the body. That is, the browser thinks the site is 200 or so pixels wider than it is. It works correctly on the desktop Safari.
I've gone through every child element and everything fits. Any help would be so appreciated.
!
Thank you!
Here you can see the grey space we don't want!
Not fully understanding your question either - the image confused more than it helped, but my first suggestion would be in your CSS, set overflow: hidden to your body or main container divs.
Please note: With my site host company, jQuery (very unfortunately) is NOT an option for me and I cannot link to external JS or CSS files. My popup div contains the CSS AND JS code in the "head" section of my webpages as a workaround.
My problem hopefully requires just a simple update/adjustment of my existing JS. The popup Div (for the Contact Form) on my site which was functioning 100% correct (except for position:fixed issues in IE I had gave up on for the moment) just a week ago. Well my hosting company just switched over to HTML5 (from "DTD 4.01 Transitional" I believe) and now my popup div is no longer functioning correctly in ANY browser (IE9, FF, Chrome, Safari), some worse than others.
The issues to fix are (please go to my website http://solitairethahalo.com to see it in action):
FIXED (all 4 browsers) "line-height" html tag I used to format the contact form instructions/info no longer works; as a result the "Form" div class is now larger than the div container height
75% FIXED (Firefox & IE) positioning is incorrect; popup appears at bottom of screen so that only a small portion of the popup's header is visible
50% FIXED (all 4 browsers) my existing popup never had the code for it, but I would like for the popup div to remain centered/fixed when the browser window is resized if possible
I can't paste my existing code properly, so I made it accessible thru my website: http://solitairethahalo.com/popupdiv.txt
Please provide (you can email me as necessary) a revised HTML5-compliant version of my existing code if possible.
Thanks!
UPDATES:
Line-height: After looking it up and getting an idea, I fixed the problem by simply changing to . Glad it was simple.
Popup positioning & resizing: The positioning error is fixed with a slight adjustment to my existing code. Using js code from a comment below allowed me to get the desired re-positioning of the popup upon window resizing. However, I've been unable to make the modal window function with that code. So for now, I've reverted to my own revised code that currently lacks the re-size re-position functionality, but I'm working on it still.
If you can't use any JS then its possible in only one way.
You can do one thing, Either for popup replace it with sliding panel.
Add your popup div inside "contact" div. And from CSS3 on mouseover of your "contact" div, use css3 transition and set its position left to show popup.
This will work in all browsers. Animation wont work in IE8 or lesser.
I've got a div that I want to position at the bottom of the mobile browser (Safari + Android) viewport. Currently my div is fixed at the bottom on all the top 5 browsers on Windows (IE, FF, Saf, Chrome, Opera), but that's "the browser window", not "the viewport".
On mobile devices (I've only tried on Samsung Galaxy Tab with Android 2.2 so far) the div appears at the bottom of the page, but if you pinch/punch to zoom in, the fixed div doesn't follow. It stays behind, outside of the viewport.
I'm specifically using the position:fixed and bottom:0 CSS properties to maintain the position, and as I said, it works fine on a non-touch browser.
Am I going to have to resort to keeping the div in the position I'd like it to be (at the bottom of the viewport) by hooking into the touchmove event and looking at (a) the zoom level, (b) the viewport position, and (c) the scroll position?
I'm using JavaScript to inject the div into the page rather than using inline CSS. The good thing is that I don't have to worry about quirks mode (as I'm only targeting Webkit browsers), so that's one positive thing.
I can't set doctype, use inline CSS or inline DIVs. Everything has to be added dynamically via JavaScript. Here's what I've done in my test so far:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";
Your position:fixed won't work on mobile webkit browsers. Take a look at the mobile webkit fixed position problem on http://www.position-absolute.com/. They have a few ways of keeping something at the bottom.
Check out iScroll:
http://cubiq.org/iscroll-4
It seems to be one of the better options out there - definitely worth looking into.
I have used the previous version of iScroll but unfortunately there were a few things that didn't work to standard so we had to scrap the idea. However, the guys at Cubiq have just released v4 of iScroll which promises to fix a lot of the things that were issues in the previous version.
Best of luck!Dan