I have a paper-fab on my index page and it is displaying right until I tap on it. I say tap because this behavior only occours in mobile environment (in the chrome mobile view or on my Nexus 5).
This is the active button (on tap):
Note that the background is light gray. This square around the button is what I want to remove. The button is perfectly round. But this thing appears when tapped.
I tested other applications, like Topeka, and the active button (on tap) displays right:
But aparently there's nothing in special between my paper-fab and Topeka's one.
Here's the element declaration and the CSS:
<paper-fab icon="add" id="add-button"></paper-fab>
paper-fab#add-button {
position: relative;
background-color: #3F51B5;
display: block;
margin-bottom: 15px;
}
Is there something wrong?
Thank's in advance.
Your silver bullet is:
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
I suggest also that you attended to specify shim-shadowdom parameter for your style declaration:
<style shim-shadowdom>
BTW, you might want to compare your code against official paper-fab docs rathen than topeka.
Hope it helps.
Related
I just want to remove that blue underline from my donate button, its a Custom link i created after going to Appearance -> Menus -> Custom Link. The problem is this Custom link (donate button) is inheriting the same css from the navigation menu items, which i want to change. I have tried applying additional css,
.horizontal-navigation-bar nav ul li a:after {
margin-bottom: -1px;
}
but no success, any help shall be appreciated.
P.S. : - (I am working for the client, he has not given public access to the website, so sharing of url will be of no use), yes i am using UltraPress theme (https://justfreethemes.com/demo/?theme=UltraPress)
thanks
It seems it's just a matter of not targeting the right element, but since we can't see the code it's kind of hard to correct that.
Based on the template, this element, ul.navbar-nav>li.menu-item>a:after, controls the menu's underlines and the below css, when removed, removes the underline. So it should be something similar to this.
content: '';
display: block;
position: absolute;
bottom: -3px;
height: 2px;
Ideally, just inspect in your dev tools to find the exact element and style.
I have a number of divs covering a different portions of a menu on a background image on a webpage.
Within the div I hav an a href to link to another page a play a click sound
I've used a CSS trick to fill the div so that the cursor changes right across the div. See the code below
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<div id="apWelcome">
</div>
The CSS for apWelcome and to fill out the area is listed below:
#apWelcome {
cursor: pointer;
position: absolute;
left: 104px;
top: 216px;
width: 49px;
height: 66px;
}
a.fill-div {
cursor: pointer;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
The problem is that in FF24 the click behaviour is fine but nor sound, Chrome - half-works (sound plays)- visually the page jumps down, IE does not display cursor or has no functionality.
Anyone know a workaround for this for all three browswers or a completely different method. Thank you.
read this article about sounds in html (cross browser).
the different browsers allows differnent types of sounds files.
also, you dont have to use your div as placeHolder for the a tag, you can directly call your function from the div's onclick (with cursor:poiner; you wont notice any difference)
See this Fiddle, a complete solution: http://jsfiddle.net/avrahamcool/ybxBq/
I've rebuilt the entire layout from scratch.
you can download it from here (I will keep the link alive for a week)
I dont know if it was necessary, but.. it was easier for me.
I'm using an img in BackgroundContainer and not CSS background, that way: if someone prints the page, he still sees the background.
I'm using fixed height&width for the 'Site', but all of its content is in %. so it should scale beautifully if the size of the site change.
for testing in IE, you have to run the HTML from a server (and not from the local file) - so the browser wont stop the script
I've deleted almost all your scripts, so put them back (one by one, each time make sure the page is still working in all browsers)
NOTICE that I've change some of your classes & files name, so check your scripts and CSS's accordingly (also, I rearranged the Image folder).
tested on IE10, FF, Chrome
notice the url(dummy) as background-image for the clickable elements.
good luck.
I have a jQuery dialog on two different pages. For some reason the radio buttons look different (one page is pure HTML/Javascript and the other is created by some internal framework created by the customer I'm working for).
I'm trying to figure out what to look for in the css that causes the difference in radio button presentation.
The two scenarios look like this:
Wrong:
Right:
Can anyone help with some clues as to what to look for?
Maybe I should add that both pictures are from IE8.
Styling (EDIT: borders, colors, background of) a radio button itself is not possible in css. But you can hack a bit around with hidden radio buttons and overlaid images like described here
http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
http://www.andreapinchi.it/how-to-style-radio-buttons-with-pure-css/
Essentially you hide your radio button and put a span right at its place that, when clicked, changes its styling:
html
<label><input type="radio"><span class="overlay"></span> radio button</label>
css
input[type=radio] {
opacity: 0;
z-index: 9999;
}
/* default radio button style: unchecked */
.overlay {
display: inline-block;
position: relative;
left: -1em; /* or whatever length you need here */
height: 1em;
width: 1em;
background-color: red;
}
/* changed style when checked */
input[type=radio]:checked + .overlay {
background-color: green;
}
Try it in this jsFiddle
Inspect both elements with Web Developer Tool. Press F12 in IE8 then click on the cursor icon top left (or press Ctrl+B). Click on the radio button to inspect it.
It is recommended use Google Chrome's WDT, 'cause it can tell you more (eg. related CSS file) plus easier and faster to use. You can right click on the radio button and click 'Inspect Element' to see more (DOM, CSS).
I found the culprit:
<meta name="MSThemeCompatible" content="no">
This bit is in one page and not the other. So either I have to remove it in one page or add it to the other to make them look alike.
Styling of radio buttons is very limited, especially in older browsers. I wrote a tutorial about how to customize checkboxes and radios with CSS only, as well as create on/off switches via styling the label and using it's :before and :after pseudoclasses. It has an IE8 fallback. Maybe this helps :) Read it here: http://blog.felixhagspiel.de/index.php/posts/custom-inputs
I am adapting a website in order to make it feel native on the iPad.
This website has navigation that shows a drop-down with the sub-navigation on hover.
This works like a charm on the iPad. When you touch it the subnav, it opens and closes again when you click/touch somewhere else.
Now i have the requirement to make it close again when the navigation point is touched again.
I was thinking, i could just set the pointer-events:none on hover & active for the iPad, but this makes the sub-navigation flicker and it does not work...
i have also tried to cover the navigation point with element set with the before selector and setting its pointer events to none, but this does not work...
Any idea, how i could solve this problem using CSS only. (I can not modify the HTML nor the JS)
PS: you can reproduce this on www.macprime.ch for example... (click the main navigation on the top, and try to close the dropdown again)
edit ok i tried almost everything that was possible with CSS only. I don't think its possible. If anyone can tell me why, he/she will get the bounty reward.
You could have a second transparent element that appears above the one you tapped. That way, when the user taps again, they will be selecting the other element and the first will lose its hover status:
<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>
<style>
.blocker, .menuItem {
/* use the same position, width, height, etc */
}
.menuItem {
/* make it look pretty */
z-index: 100;
}
.blocker {
z-index: 99;
}
.menuItem:hover {
z-index: 98;
}
</style>
Of course, this will have a negative effect on the desktop, so you will want to do something like:
<style>
.blocker { display: none; }
.touchevents .blocker { display: block; }
</style>
<script>
if('ontouchstart' in document)
document.body.className += ' touchevents';
</script>
UPDATE Added onclick events to make them clickable.
You can see a working demo here: http://fiddle.jshell.net/vfkqS/6/
Unfortunately, I could not find a solution that does not require HTML or JavaScript changes, but I was able to keep them to a minimum.
You would need to make two non-CSS changes total:
Add a JavaScript mechanism for identifying if touch events are supported. See two line example above.
Add one div per menu which is clickable (onclick="void()") and has a unique identifier that can link it to the menu.
You may be able to do those two things with CSS but I'm not sure. Tablet detection would be a little sketchy in CSS and I don't think you can make something that sophisticated with a :before or :after pseudo-selector.
This is an interesting question and similar to one I've had come up recently. How do you marry a standard navigation dropdown that displays on hover with a touch event interface. Using the hover event as a trigger works really well on a desktop. In a world without hover events (tablets and smart phones), not so much.
In my case I landed on the idea of defining the behaviors: click/touch event would do the triggering, hover event would do subtle indications. For more details on this line of thinking see: http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/
For the issue you're trying to overcome I'm wondering if using #media queries in your CSS is a better solution...
#media (max-width: 979px) {
/*
New CSS declarations to show the sub navigation lists
in a more compact way that fits nicely on the iPad.
Something like...
*/
section.nav-overlay {
display: block;
height: 60px;
visibility: visible;
width: 979px; /* Or the max container width */
}
section.nav-overlay ul li {
float: left;
}
/*
Etc. etc. with the additional exceptions.
You get the idea.
*/
}
By doing this you would create more of a native interface on the iPad. However, if going this route is off the table, something like what Brian has above is better. Just wanted to give you an alternative.
Set pointer-events: none on the active state:
nav#mainnavi > ul > li > a:active {
pointer-events: none
}
I'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:
div.Info
{
display: inline;
position: relative;
text-decoration: none;
}
div.Info span.InfoDetail
{
display: none;
}
div.Info:hover span.InfoDetail
{
padding: 3px;
display: block;
position: absolute;
top: 1em; left: 1em;
border: 3px inset Gray;
background-color: White; color: #000;
text-align: left;
white-space: nowrap;
z-index: 25;
}
to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-
on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
on MicroB on my N900, tapping the text and image both bring up the popup, fine
on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing
What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy
Cheers
MH
The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.
This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).
The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.
Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?