Cross-Browser list of available Hot-Keys - cross-browser

I'm working on a Asp.Net MVC3 application and am adapting it for keyboard accessibility compliance. I have the basic navigation working fine.
I'm going to be adding some shortcut keys. My problem is that I don't know which hot-keys I can safely use for all the major browsers. IE, FF & Chrome in my case. Is there a reference somewhere I can check?

Try this link I don't know if it's completely up to date but it appears to be a good reference for multiple browser keyboard shortcuts.

Related

Hiding MacOS Toolbar when in fullscreen

I was wondering if it is possible to hide the toolbar when in full screen using CSS. I've tried searching StackOverflow for some answer but sadly with no success.
Basically, go from this:
Too this:
No, you cannot affect the host application interface using CSS. There is a Javascript solution, however.
document.documentElement.webkitRequestFullScreen(); Be aware that you should also track keyboard actions like ESC, and provide a button for users to exit this experience as well.
Here's the documentation from Mozilla. Also according to the Can I Use database, Desktop Safari has only partial support and iOS Safari has NO support so how well this works will vary based on the browser.
I should point out that this isn't really the same as Kiosk mode. Kiosk mode can be used to block access from other applications/websites. This DOES NOT do that.

Sharepoint Ribbon buttons doesn't apper in chrome

I have used out of the box sharepoint MasterPage and the ribbon buttons doesn't appear sometimes in chrome. Sometimes they will be disabled with grey color.
But works fine with Firefox and IE.
Any Idea....
Thanks in advance
Chrome is now apparently supported by SharePoint, although I continue to have similar issues as you describe, the farms I work with are not patched to the latest CU though so if this is really important to you check the patch level and apply any outstanding commulative updates.
http://blogs.technet.com/b/tothesharepoint/archive/2012/04/04/updates-to-plan-browser-support.aspx
Also check this, apparently you need SP1 to support it:
http://blogs.technet.com/b/mickd/archive/2011/07/27/service-pack-1-sp1-for-microsoft-sharepoint-foundation-2010-and-microsoft-sharepoint-server-2010-white-paper.aspx
You can use chrome extension that i mentioned here. I use it for datasheet view or if I need to login as a different user.

How to force Chrome (or any other WebKit browser) not to use "default" tag names?

I was having issues because of Chrome automatically referencing DIV... It works that way in Safari (desktop and mobile), but not in Firefox.
See image:
See Fiddle (open in Chrome, then in Firefox):
http://jsfiddle.net/stefek99/Sqcff/
The question is - how to disable this feature? I would really like to develop in "strict" mode without any Google quirks, just to make sure my code is cross-browser compliant.
This is a known 'problem', however I have not been able to find a reliable method of disabling this. One might think that "use strict"; should probably disable it but that doesn't seem to be the case.
In any case, some more explanation on it; Do DOM tree elements with ids become global variables? As explained there it will probably be standardized in HTML5. It all started out as a non-standard IE feature, which ofcourse got mimicked in other browsers. Theres even a msdn blog post noting it as a 'problem' so it seems a bit silly the HTML5 working group is trying to standardize it now.
I would like to note to anybody to please not rely on this problem feature as it is very ambiguous and hard to debug for programmers who don't know of it.

How to solve the problems that html page works well in firefox and chrome, but wrong with IE?

I meet a problem that my page works well in firefox and chrome(almost the same look and feel) but very bad in IE. It's time consuming to adjust the differences. Is there any research has been done already to tell the differenceS, or any automation tool to examine the uncompatibilities?
BTW: which tool you guys are using when debugging in IE(like firebug for IE)?
Your best starting point is to always use some kind of "reset mechanism" like Eric Meyer's CSS Reset or framework like HTML5 Boilerplate, they help in reducing differences between browsers (not all, but most of it). If this is not possible (project is already in finishing phase, etc.) you can always ask questions here, check Position Is Everything for description of bugs, Quirks Mode, SitePoint reference and various other sites (Google is your friend :)). Hope this helps.
There is "debugging" tool for IE - IE Developer Toolbar - but it's usefulness can't compare to that of Firebug, Dragonfly and such. IE8+ does have better support for debugging, though… There are some articles that suggest using Visual Studio, but I haven't tried it. Mostly it's just trial and error with IE :).
ie7-js is a JavaScript file that automatically fixes many Internet Explorer bugs for all versions. Works like magic.
For fast and better results in IE you can use CSS Hacks for adjusting the HTML elements.
For IE we have IE Developer AddOn
you can download it here : http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535
Welcome to the tiresome world of IE.
IE8 has some version of developers tools, hit F12 on your keyboard and it will pop up. (not present in 6&7)
There are many documented bugs in IE, a simple Google Search would help you out better, but a lot cannot be accounted for until you have your site working in FF.
What most developers I know do is to make the site in FF, make small changes for Webkit browsers then go over to IE (not including 6) and debug.
In my experience there really is no way to tell what IE is going to mess up next, so you'll probably just have to deal with it as it happens.

Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome?
Essential features I would like:
Inspect HTML source (select elements, delete them, etc.)
check CSS values (the built-in solution is weird, somehow)
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
For more information, see https://developers.google.com/chrome-developer-tools/
Firebug Lite supports to inspect HTML elements, computed CSS style, and a lot more. Since it's pure JavaScript, it works in many different browsers. Just include the script in your source, or add the bookmarklet to your bookmark bar to include it on any page with a single click.
http://getfirebug.com/lite.html
Just adding some talking points as someone who uses Firebug / Chrome Inspector every day:
At the time of writing, there's only Google DOM inspector and no it doesn't have all the features of Firebug
Inspector is a 'lite' version of Firebug: The interface is not as good IMO, element inspection in both recent versions is now clunky, but Firebug is still better; I find myself trying to find the love for Chrome (since it's a better, faster browser experience), but for development work, it still just sucks for me.
Live preview / modification of DOM / CSS is still way better in Firebug; calculated CSS and box model view are better in Firebug;
Somehow it's just easier to read/use Firebug maybe because of the ease of navigating, manipulating/modifying the document in several key areas? Who knows. I'm used to the interface and I think Chrome Inspector is not as good although this is a subjective thing I admit.
The Cookies/Net tab are extremely useful to me in Firebug. Maybe Chrome Inspector has this now? Last time I checked it did not, because Chrome updates itself in the background without your intervention (gets your consent by default like all good overlords).
Last point: The day that Google Chrome gets a fully-featured Firebug is the day Firefox basically dies for developers because Firefox had 3 years to make Firefox's layout engine Gecko as fast as WebKit and they didn't. Sorry to put it so bluntly but it's the truth.
You see, now everyone wants to move away from Flash in lieu of jQuery motivated by mobile accessibility and interactivity (iPhone, iPad, Android) and JavaScript is 'suddenly' a big deal (that's sarcasm), so that ship has sailed, Firefox. And that makes me sad, as a Mozilla fanperson. Chrome is simply a better browser until Firefox upgrades their JavaScript engine.
F12
I love shortkeys
Try this, it's called Firebug Lite and apparently works with the beta version of Chrome.
You can also find it at:
https://chrome.google.com/extensions/
You can set this bookmarklet in your "Bookmarks Bar" in order to have Firebug lite always available in Chrome/Chromium browser (put this as the URL):
javascript:var firebug=document.createElement('script');firebug.setAttribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js');document.body.appendChild(firebug);(function(){if(window.firebug.version){firebug.init();}else{setTimeout(arguments.callee);}})();void(firebug);
Or try user scripts: http://dev.chromium.org/developers/design-documents/user-scripts
jQuerify is the perfect extension to embed jQuery into Chrome Console and is as simple as you can imagine. This extension also indicates if jQuery has been already embedded into a page.
This extension is used to embed jQuery into any page you want. It allows to use jQuery in the console shell (You can invoke Chrome console by Ctrl + Shift + j".).
To embed jQuery into the selected tab click on extension button.
The official Firebug Chrome extension or you can download and package the extension yourself.
https://getfirebug.com/releases/lite/chrome/
Well, it is possible to enable Greasemonkey scripts for Google Chrome so maybe there is a way to sort of install Firebug using this method? Firebug Lite would also work, but it's just not the same feeling as using the full featured one :(
willshouse.com/2009/05/29/install-greasemonkey-for-chrome-a-better-guide/
This doesn't answer your question but, in case you missed it, Chris Pederick's Web Developer is now available for Chrome: https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm.
Forget everything you all needs this browser independent inspector , dom updater
https://goggles.webmaker.org/en-US
just bookmark and go to any webpage and click that bookmark..
this is actually Mozilla project Goggles , amazing amazing amazing...
F12 (only on Linux and Windows)
OR
Ctrl ⇧ I
(⌥ ⌘ I if you're on Mac)
Please try Firebug Lite for Google Chrome
If you are using Chromium on Ubuntu using the nightly ppa, then you should have the chromium-browser-inspector