I am trying to adapt an HTML based app for Chromecast and everything is working fine, except that the ":focus" is not taken into account in the CSS.
I am using it to display differently some items (basically the equivalent of the "selected item").
The focus is handled properly (calling ".focus()" on some DOM node works fine), just the display is not done properly.
I suspect this could be intentional as there is no keyboard and such for Chromecast. I could always rewrite the whole CSS to add a "focused" class on the element, but rewriting the whole thing just for Chromecast as it is already working on a number of platforms seems a bad idea.
Is there a way to activate the support for ":focus" in the CSS ?
Is there a work around ?
Best Regards
JN
The idea behind the chromecast is not to have a UI in the way that you are describing; the "control/navigation" is on the second screen and the consumption of content (playback of media, for example) is on TV. As an example, consider the Google Play Music. User picks up her mobile device, navigates through albums and such on her device till she finds the desired content. During this interaction, the TV screen doesn't try to show the navigation that is happening on her device and that makes sense since she is not even looking at the TV; in fact, it would have been pretty difficult to look at TV (assuming it was mirroring her mobile display) and navigate on her mobile device; user doesn't want to move her eyes from one to the other while she is searching through her content. Finally when she finds what she casts that to TV and can listen to that on her TV. It is the same behavior with the TV and Movies app, Netflix and Hulu+ as well and it is strongly recommended you follow the same pattern.
Related
I have a personal website and I want to spice it up a bit while also learning some front-end.
An idea I had was that the cursor of my website would be a coffee instead of the default one, and anytime I click on any content, the coffee pours.
Any idea if this is possible and if so, what I need to do to implement it?
You can change the cursor using CSS - see https://www.w3schools.com/cssref/pr_class_cursor.asp and do something like
div {
cursor:url(myCoffeeJug.cur),auto;
}
You could then use Javascript to change the cursor shape (ie URL) when the user clicks in the div. You'd need to think how to change it back again after whatever operation the click triggers is complete.
Note that you can't do animations this way - but given that clicking on a div is likely to be quite a quick action, just switching to and back from a different icon might well be enough for what you want.
However this is perhaps not a great idea from the usability point of view. Web users are used to the basic types of cursor provided by browsers - overriding them may be cute, but it can also be confusing.
If your site is designed for 'ordinary' users looking for information or functionality (rather than for web designers, or as a showcase for your techniques), you're putting a small barrier in their way. Users who are not confident, or are new to all this, or non-neurotypical users may find it off-putting.
I am attempting to record an app demo on the simulator, and want to use the Quicktime screen capture feature. However, I would like to hide the mouse during the capture.
Is this possible?
Doesn't seem to be a built in feature, so I am assuming I need to use some sort of plugin or hack.
Any suggestions?
QuickTime itself does not seem to offer this functionality therefore you have to resort to some other means to hide the cursor. On OSX there are some tools that allow this.
Cursourcerer is the first that springs to mind. However, as this really hides the cursor, it might not be ideal as you yourself will not be able to see what you are doing.
However, if you do not need to use QuickTime per se, it seems there are commercial screen recording solutions allowing this sort of thing such as Screenflow. I am not affiliated but the price seems reasonable and there is a demonstration of desired behavior here.
You don't record your app in your computer, but directly on your iPad or iPhone, connected to your Mac with a lightning cable. Then in Quicktime you select the "New movie recording" option (instead of "New screen recording"), then you will be able to select your iPad/iPhone as the "camera" and start recording your app running in your iOS device without any mouse pointer.
https://obsproject.com/
OBS can record your app window, and it ignores the cursor on the window.
Useful even if you are not a youtuber.
Cursorcerer for 10.14+ ⇨
http://doomlaser.com/cursorcerer-hide-your-cursor-at-will/
MouseHider.app for 10.13 and earlier ⇨ https://apps.apple.com/us/app/mouse-hider/id894419721?mt=12
I use option+command+k (⌥+⌘+k) to show / hide. It works globally.
It's also useful to hide the mouse cursor when you do the control-scroll zoom trick to focus in on a video.
Is there a simple way to trigger a mobile OS's native pop-up/alert/etc. from some form of web code? I'm writing an ASP.NET mobile web page and I'd like to, for example, have the iPhone's UIAlertView appear.
EDIT: What I'm looking for is not the method with which to detect which mobile browser is accessing the site (I already know how to do that). If the code to trigger a pop-up that will look nice in an Android browser is different than the code to trigger a pop-up that will look nice in an iPhone browser, I can simply throw in a switch statement that redirects the user to the pop-up that corresponds with their browser. I'm trying to find the html/javascript/asp.net code which will create a mobile-friendly pop-up, either in general or for the various popular mobile web browsers specifically.
Don't know whether there is any pre-built functionality in .NET that can achieve this, but you can surely write one yourself.
You can write a method, that returns the code for your popup, based on the user OS (simple switch statement should do).
EDIT after taking a short nap:
I believe you should reconsider using popups. They are quite annoying even on desktop browsers and many people block them automatically. Probably every blog about accessibility will tell you, that you should keep mobile version of your website as simple as possible because of various compatibility issues that you can run into.
Instead, try to think about some interesting way to incorporate messages for users in a different and appealing way, that won't disturb anybody.
What I do is use a div popup (that floats ontop of the page) and eighter make a big close button or set at timeout to remove it.
jquery mobile is a good place to start.
I am developing website and it has to be viewed in tablet pc. Please suggest me what are things to be considered ? technology wise ?
also i need to know what are the tools i need to have to view in my intranet as well as.
A major issue: in many tablets there is no moving pointer - at least not in a fully usable form. That means that tooltips may not really work, and image maps must be really clear, since there is no highlighting until the user actually "clicks" on the link.
Well, actually that's not fully accurate - if the user drags the pointer, it should work like a regular mouse pointer. The problem is that most users avoid dragging and just tap where they want to click directly.
Best piece of advice I can offer: get an actual tablet PC and try browsing your site. Most major issues will be evident almost immediately. If you are able, get a regular tablet/pad user to beta-test your site without trying it out on a desktop PC - they would be able to see issues that you would miss due to your prior knowledge of the site.
The Tablet PC is a standard Windows machine, therefore it has the same browser support as any other Windows box. So there isn't any special technology required.
There are however some design considerations:
First, make sure your layout has plenty of empty space surrounding iterative elements. Crammed pages are tough to navigate with a stylus, and if it is one of the newer models that also support touch it is even more of an issue.
Second, most Tablet PCs are configured with the default font size set for 125%. You want to make sure that your web pages scale correctly and don't end up requiring horizontal scrolling to see the full width of the page.
A second point regarding scaling, Tablet PC supports both Landscape and Portrait modes. In other words, it can be 1024x768 OR 768x1024. You'll want to make sure that your user experience is acceptable in both modes.
One thing i can think of : there is no 'hover' on most tablets, and if it's there at all, likely nobody will see it.
Not all tablets support flash, but they do all support javascript, and Prototype.JS or jQuery will run on them in most cases
While Handheld option is available in CSS then why some people use different subdomain and make different site for mobile?
I second what Justin Niessner said. Also, the mobile version of a site is usually structured differently from the "main page". Other content may be displayed on the front page, an only a selection of menu items, or a whole different menu altogether. Videos have to be embedded differently, images as well, Javascript effects altered and so on. Using different style sheets mostly just won't cut it.
My guess is to make the distinction more apparent to the user.
That, and the Blackberry Browser (and possibly the iPhone) identifies itself as a mobile device (depending on settings)...but could theoretically be able to display the full page. Using CSS, you're also depending a lot on the mobile browser to do the correct thing with your page.
You'll provide a much more reliable interface if you let the user specify the experience, not the site.