I'm using jQuery mobile, and am using a home button in the header. When clicked, the home button has a blue highlight. I want to get rid of this, but can't seem to track down the CSS rule/-webkit CSS rule to do this.
Screenshot:
Can anyone help?
In jQuery Mobile the class added to buttons just pressed is: ui-btn-active. Here is a link to the documentation that talks about this class (although it doesn't say much): http://jquerymobile.com/demos/1.0b2/docs/toolbars/docs-navbar.html
Not sure if this is what you needed but I figured it might help. I'd recommend using FireBug or some such DOM Inspection tool to view the button in real-time.
You sure that's not just the default hi-light that links get when focused?
Try
#buttonID:focus{
border: none;
outline: 0;
}
An idea to help you track the problem as you don't share the link (you can easily just share the first page), is to use Safari, Chrome or even Firefox and make them act as an iPhone so you can use their Inspector / Firebug to track the problem
Firefox has a Agent User Switcher that you can easily make use in order to the browser be intrepertate as an iPhone
Chrome has it as well just add the User Agent string in the Extension options to create a new option
Safari 5 is the easiest one as this is already built in:
Open Safari and go to the Preferences, move to Advanced. At the bottom of the tab there is a check box for Show Develop menu in menu bar.
Go to the Develop menu and move to User Agent and select any iOS device.
Related
I have tried the solution provided [here][1]
[1]: https://webapps.stackexchange.com/questions/119105/how-can-i-toggle-or-shrink-the-whatsapp-web-sidebar which doesn't seem to work now. Could be due to the changes over the years.
Is there way to hide or close the sidebar that shows the contacts and conversations? Just surprised that WhatsApp doesn't offer this option directly.
If you want to disable/hide the sidebar, open Inspect tools and search id="side" and select its parent div and on elements.style write the following css:
display : none
If you want to unhide the sidebar just remove css or deselect it.
Do you know if it is possible to create a custom sidebar like the one for "show sidebar"?
I know you can create a popup view, but it hovers above the web page - I am looking for a native kind of view like the "sidebar".
Safari does not support any native sidebar at the moment, neither does Chrome (from which Safari copied). Only Firefox and Opera do: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Sidebars
I recently found that one of the custom apps I can add to my Rally homepage is a custom HTML app.
This will be really useful to me, since I can use some HTML (Bootstrap) headers to separate apps on my page and make it more organized.
I got the custom HTML to show properly (and I currently have a header/divider) however, it is showing the grey title bar just like any other app would.
Is it possible to hide this when using the HTML app, so just the HTML output shows?
(If anyone is familiar with apps in Sharepoint, it's called a "Chrome" and you can hide the chrome/title so just the content shows.
I don't think there's any built-in chrome to the apps themselves... Can you show a screenshot? Are you following the general formula to embedding apps presented in this guide?
https://help.rallydev.com/apps/2.1/doc/#!/guide/embedding_apps
I think the easiest way to show this is with a picture:
http://oi61.tinypic.com/r2s4f9.jpg
In Web Inspector, I'm trying to change display:block but it's 'locked'. Further, I can't figure out where this is coming from in my source code
It shows as locked because you are not able to edit it directly using DevTools. You have to override the styles in the user agent stylesheet.
Open the Safari Web Inspector and check the Logs, and beware of any browser extensions or content blockers (iOS) you are using which can modify or inject content into a webpage.
The culprit in my case turned out to be a Content Blocker (iOS ad-blocker) which was blocking elements on the page by forcing a User Stylesheet to display:none on certain CSS elements. Because of this, Safari showed it as "locked" like in your screenshot with no way to edit/modify it. A warning appeared in the Web Inspector 'Logs' tab telling me that the content blocker prevented a frame from loading a resource.
Disabling the content blocker removed the forced stylesheet, and fixed the problem in my case.
In IE, Firefox, Chrome and most Windows-based interfaces that I've used, the Tab key can be used to navigate from one form field or hyperlink to the next (e.g. "actionable" items) (note: I have not tested on other Operating Systems)
However Safari and Opera skip all hyperlinks in a web page when tabbing. IMHO its a usability bug but I digress.
Is there a workaround/hack to make Safari and/or Opera navigate through these links?
I've noticed that Opera will accept the tabindex attribute if set e.g. tabindex="0" thus maintaining the links "index" within the flow of the DOM on the page... but Safari does not want to accept this.
For those interested, this bit of jQuery will make all the hyperlinks tabbable.
//Make links 'tab-able' in Opera
$(document).ready(function(){
if($.browser.opera){
$('a[href]').attr('tabindex', 0);
}
});
...and although this seems to work for Opera... is there a better workaround?
In Safari, it's not a bug, it's an optional feature. On the Mac, tab selects objects other than links, Option+Tab select all objects. You can swap the behavior of these shortcuts in Preferences->Advanced. Then tab will behave like in other browsers.
On Windows, Option+Tab is not available. By default tab selects objects other than links , but there is an option in Preferences->Advanced that makes tab select all objects. Then tab will behave like in other browsers.
You should probably not try to interfere with this, as you would interfere with the user's preferences.
Actually this is a bug, according to the spec (see below) anchors (<a> elements) are supposed to accept the tabindex property, and a tabindex of 0 should make it focusable in the order the elements appear in the document.
http://www.w3.org/TR/html401/interact/forms.html#adef-tabindex
Opera traditionally thought this was a feature, not a bug (we had and have other key shortcuts for navigating links, when you know those you might find it useful to have distinct navigation for links and form elements - tried shift+arrow spatial navigation yet?). To some people it still is a feature. True anecdote: once upon a time an internal build made links tab'able by accident and this caused so many bug reports and complaints it was promptly reversed. (As far as I remember, also because the tabbing was buggy in other ways).
We know, however, that tabbing to links is something most users expect and that we should implement a pref for this like Safari has. In the meantime, you can add something like your JS fix above to a user javascript to have tab navigation to links on all websites out there.