I have some jquery mouseover effects on my website that I need to disable for touch screens, however, how do I know what width of screen to disable the JQuery? At the moment I have it at less than 800px. This works on an ipad portrait but then when I turn it landscape the JQuery is activated again. I have read that Ipad landscape width is 1024px but this could also be the size of a small none touch screen. Is there a way I can specify effects for certain devices instead of screen widths ?
To achieve this you should look at working the other way and instead of disabling mouse over events for touch devices ADD the events for non-touch devices.
Add Modernizr to the project your working on (you've probably already got it in there). Once added you can include a test for "touch" by adding it as a class to the HTML element
<html class="touch">
If the device has touch capabilities then everything will remain as is, however if the device does not have touch then moderizr will covert that from touch to to no-touch
<html class="no-touch">
You can then bind your mouse events off the html element having the class of .no-touch
I've put an example of this in the code pen - http://rwd.is/VyRl37
This assumes that you're still loading the jQuery library for all devices and deciding whether to load the mouse over functions based on touch devices. If you're looking at conditionally loading jQuery itself then you should look at enquire.js to load in jQuery at a specified width.
If you want to keep jQuery for other functions on smaller devices but want to improve performance you could look at using using Zepto.js as a lightweight alternative.
Finally Response.js will also allow you to call functions at particular breakpoints but you still run into the issue of not knowing if it's touch enabled or not.
When I create a windowless Silverlight app and run it on Firefox, wrong mouse positions are reported. There is a vertical offset between the actual mouse position and what the application responds to.
I also tagged this question with Flash because my research shows that this problem also occurs with Flash (see links below).
To reproduce:
Step 1: Create a new Silverlight application.
Step 2: Inside the grid of MainApp.xaml add the following:
<HyperlinkButton NavigateUri="http://google.com" VerticalAlignment="Center" HorizontalAlignment="Center">GOOGLE</HyperlinkButton>
Step 3: In SilverApplicationXTestPage.aspx (in the web project) add the following parameter to the Silverlight object:
<param name="windowless" value="true" />
Now run the silverlight application. When you hover the link it doesn't get underlined. Now slowly move the mouse up until at a certain offset above the link it will get highlighted.
This problem doesn't happen if you do one of the following:
Switch Firefox into full screen mode (it seems that the top bar is the cause for the offset, so when it's not visible there is no offset).
Do not use Silverlight in a windowless mode.
Use any other browser.
I'm using Silverlight 4 on Firefox 8.0 on Windows 7.
This seems like an old problem that affects not just Silverlight, but also Flash.
In my research I came across the following suggested workarounds, non of which worked for me:
Do not use overflow in css.
Use css to set html margin of 1px.
Do not use iframe (but the reproduction steps above do not use an iframe anyway).
As I mentioned none of the above workarounds seem to work.
Here are some references to mentions of this problem or similar:
http://forums.silverlight.net/t/161640.aspx/1/10
https://bugzilla.mozilla.org/show_bug.cgi?id=362193
http://forums.silverlight.net/t/94583.aspx/2/10#
https://bugzilla.mozilla.org/show_bug.cgi?id=536429
Does anyone know how to overcome this? Any workaround? I'm desperate!
I found this: http://support.mozilla.org/en-US/questions/795168.
"Enabling the plugin-container.exe in about:config (dom.ipc.plugins.enabled) fixes the mouse issue but then Silverlight plugin pop-ups (webcam/microphone permission for example) freeze the browser."
I didn't see the problem with the popup (a copy permissions) after changing the config.
Making it full-screen also helped before I made this config change.
This requires the user to change their browser setting, which is not ideal.
This is similar to this question: Silverlight- bad mouse position when embedded in html page when Firefox has zoom
It's well documented (e.g. here) that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
How can I disable all font anti-aliasing (ClearType or otherwise) in IE9?
More details:
Our company builds a web application which uses a lot of small fonts. With the release of IE9, some of our users have complained that IE9's default anti-aliasing makes our small fonts fuzzy or blurry. So we need to help our users who've installed IE9 and who want to turn off anti-aliasing.
Also, personally, I have trouble reading small, anti-aliased fonts, so I'd like a solution for my own use, even for sites I don't control.
In IE8 I could uncheck the "Always use ClearType for HTML" and then disable ClearType in the OS and IE8 would show all fonts aliased. But in IE9, this option is missing.
After some research about the problem, here's what I've learned: the core issue is that IE relies on DirectWrite for text rendering and does not support any of the newer rendering options which would draw text without anti-aliasing and respect the user's OS-wide default choices.
Making things worse, if you disable ClearType in the OS, in some cases IE will fall back to DirectWrite's default non-cleartype anti-aliasing which is even fuzzier than ClearType.
After a few days of searching, I found an MSDN Forums thread which pointed me to a solution here: http://www.softwareninjas.ca/dwrite-dll-wrapper
Follow the instructions on that page and you'll remove anti-aliasing from IE9 (at least the 32-bit version of IE which is the default IE, even on 64-bit Windows 7). I've tested it so far on a Win7 x64 laptop and it worked flawlessly.
Big thanks to Olivier Dagenais who built this. Here's a technical summary of how his solution works.
It's a two-step process. First, you need to disable ClearType in IE via a registry key. This is the same setting which was available in previous versions of IE, but it was removed from the IE UI because it stopped working in IE9.
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"UseClearType"="no"
Second, now that ClearType is disabled, Windows will fall back to a non-cleartype anti-aliasing solution. Now that fallback anti-alising also needs to be disabled. Quoting from the thread above:
What is left is the font smoothing
(aka sub-pixel rendering), and that is
the "blurring effect" you still see
after turning cleartype off.
In case you were wondering, there is a
way to turn that off too.
The method i used to turn off the
sub-pixel wonder is to build a simple
wrapper for dwrite.dll which
intercepts and forwards calls to the
real dwrite.dll, disabling font
smoothing in the process.
You can download it from: http://www.softwareninjas.ca/dwrite-dll-wrapper
You can find the code at
https://softwareninjas.kilnhg.com/Repo/Open-Source/Group/DWrite-dll-Wrapper
This was a pretty cool hack. Probably somewhat brittle across windows and DirectX releases, but will do the trick for now until Microsoft gets their act together to fix the underlying "can't disable anti-aliasing" problem in IE itself.
It also works for apps which use the IE WebBrowser control (aka MSHTML), so you can control anti-aliasing on an app-by-app basis. It also works for the HTML Help viewer.
Note that the text quality in IE9 standards mode isn't ideal. Specifically, small fonts sometimes have letters sometimes run together without the usual one-pixel space between them. If you render the same page in compatibility mode (or your site uses a non-strict DTD or other non-standards-enforcing DTD), then it looks fine. So there's an additional step for some sites if they want the best aliased text rendering: just view a site in compatibility mode by pressing the compatibility button in IE's toolbar.
To answer your question directly:
ClearType font rendering is used in all IE9 document modes; sub-pixel
positioning is used only in IE9’s
default standards mode. IE9’s
compatibility modes—Quirks, 7, and
8—use whole-pixel text metrics.
So try switching your doctype to use Quirks mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
The other thing to consider is to try avoid point based font sizes.
Important information regarding fonts, blurriness and rendering in IE9
IE 9 does not use sub-pixel antialiasing under certain conditions
MSDN sources:
Sub-pixel Fonts in IE9 - blogs.msdn.com/b/ie/archive/2010/11/03/sub-pixel-fonts-in-ie9.aspx
IE9's blurry font text - www.hanselman.com/blog/TheUltimateGuideOfFiveThingsForNewIE9UsersWhoFearChange.aspx
Defining Document Compatibility
Documents Mode
The info here solves two problems:
1. Getting rid of cleartype and font smoothing in IE9
2. Getting rid of cleartype and font smoothing when IE10 is installed or installs itself automatically
I had done a registery hack to turn off cleartype in IE9:
[HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main]
"UseClearType"="no"
and used a little piece of freeware to get rid of font smoothing in IE9:
https://softwareninjas.kilnhg.com/Repo/Open-Source/Group/DWrite-dll-Wrapper
Then IE10 automatically installed itself and the blurry type was back. I tried uninstalling IE 10, which wasn't through the add/remove programs interface but rather through the installed updates interface--removing the IE10 update. That ostensibly took me back to IE9, but the blurry type remained in spite of the fact that "no" was still the answer for cleartype in the registry and the two .dll files were still in my IE program folder.
So, I decided to uninstall IE9 and reinstall it. That also involved going through the installed updates interface and removing the IE9 update.
I rebooted and expected to have to reinstall the program, but my IE icon was still there. When I clicked it, IE9 opened with nice, sharp type.
This only seems to be a problem now with firefox 3.6
When you click anywhere on the page which is one big embedded silverlight object the little broken outline appears, the same as when you say click on a link. This is causing the page to go one pixel over horizontally and vertically which is causing scroll bars to appear.
Any idea?
Try setting outline-width:0 for your object tag either in your CSS file or directly inline on the object tag for the plugin:
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" style="outline-width:0">
Seems to be the side effect of some kind of focus ring usability bug that was fixed for 3.6, which is causing this with Silverlight, Flash, Java Applets, etc.
http://www.blog.lessrain.com/firefox-36-draws-one-pixel-border/
We have a Silverlight control embedded in an html page. When I zoom the html page in FireFox 3.5 (ctrl - +) and then try to click on something in the Silverlight control the mouse input is not taken at the correct place.
I have to click above the control to get it. This behavior can be seen here:
http://silverlight.codeplex.com/
Any idea how to fix this?
There are numerous reports of the issue and some possible fixes.
See these links:
http://forums.silverlight.net/p/227806/614938.aspx
"I decided to try uninstalling and reinstalling firefox and that did the trick."
https://support.mozilla.org/en-US/questions/795168
"Enabling the plugin-container.exe in about:config (dom.ipc.plugins.enabled) fixes the mouse issue but then Silverlight plugin pop-ups (webcam/microphone permission for example) freeze the browser."
Windowless Silverlight (and Flash?) app on Firefox: wrong mouse positions reported
"This problem doesn't happen if you do one of the following:
Switch Firefox into full screen mode (it seems that the top bar is the cause for the offset, so when it's not visible there is no offset).
Do not use Silverlight in a windowless mode.
Use any other browser.
...
In my research I came across the following suggested workarounds...:
Do not use overflow in css.
Use css to set html margin of 1px.
Do not use iframe"