I'm developing a website for mobile phones (mostly Blackberry).
I can't figure out how one develops like this. Some phones don;t support CSS. If I want a button with an up and a down state, how do I do it? I'd usually make an anchor, then put the image in the background, then I could control the background position with pseudo classes link and active.
<a id="btnSearch"></a>
#btnSearch{
height: 16px;
overflow: hidden;
background-image: url(img/btnSearch.png);
}
#btnSearch:link,
#btnSearch:visited,
#btnSearch:hover{
background-position:0 0;
}
#btnSearch:active{
background-position:0 -16px;
}
but I can't do this because some mobile devices will show nothing.
Well, if they don't support CSS, then you obviously can't get button effects such as those you describe. The best you can do is provide alternate text within the anchor:
<a id="btnSearch"><span>some text</span></a>
and hide that text in browsers that do support CSS:
#btnSearch > span {
display: none;
}
Related
I have a text on which when you hover (or when you click on it on mobile), a picture appear. I used this stackoverflow answer to make it work.
I'm now trying to make the picture change size automatically, so the picture fit both on mobile and computer.
a.hovertext1:after {
content: 'Text that appears before I hover.';
}
a.hovertext1:hover:after,
a.hovertext1:focus:after {
content: url(https://cdn.discordapp.com/attachments/1074330512925143102/1076897722075971675/5226579-le-drapeau-national-de-la-republique-federative-du-bresil-fond-d-ecran-du-drapeau-bresilien-avec-des-styles-de-degrade-d-ombre-gratuit-vectoriel.jpg);
display: block;
}
<a name="return1" id="return1"></a>
I know I need to add width:100%; somewhere in my code, but I have no idea where. I tried putting it in the a.hovertext1:focus:after{...} block, but it didn't do anything.
Hope someone can help me!
Is there any reason for which you want to use pseudo elements ? There is a different approach using simple display property on hover.
img {
display: none;
width: 100%;
}
a:hover + img {
display: block;
}
a:hover {
display: none;
}
Text that appears before I hover
<img class="img" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" />
Also I suggest to use buttons instead of links. Buttons are used for actions that affect the website’s front-end; links are used for navigation and actions that don’t affect the website.
I have a website which was created by someone else and I have been tasked with taking over. On this website there was a sandwich style menu and a search bar in the navigation.
I have since created a mega menu (WordPress Plugin). Now the older icons are redundant and useless therefore I have applied a display: none; rule to the CSS to remove them from the frontend.
This works correctly on Safari and Chrome on Mac however it seems as though Windows users on Firefox and Chrome as well as users of Firefox on Mac can still see the icons.
Can anyone help? The website is www.quanser.com. You will see the icons in the header to the right.
header.site-header .badge-links {
display: none !important;
}
I'm using Firefox on Windows and still can see the Search and Hamburger menu icon (my first time visiting your site), this means this has nothing to do with cache. Though usually working with Wordpress, you should clear the cache after changing some CSS.
So far, I've inspected the CSS and see that this CSS block is repeated 3 times, which the last block will look like:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
}
Try to find this block in your CSS, and add something like this:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
display: none;
}
You don't need to `!important` in your CSS in this case.
There is a pretty efficient way for solving this:
header.site-header .badge-links {
z-index:-100;
}
#media screen and (max-width: 992px) {
header.site-header .badge-links {
z-index:100;
}
#
}
http://codepen.io/anon/pen/KwKOaz
Changing only the background-color significantly changes the style on a button element, specifically the border style.
This happens on chrome, safari, and firefox on a Mac. Why does this happen? How can I safely change its background color?
Browser vendors apply custom styling to UI elements like buttons and input fields. Altering one of these overwritten attributes results in disabling all of the other vendor styles on that element as well. If you want to change one attribute, you have to alter the others as well, I'm afraid.
Unfortunately I can't tell you why they do this - probably there is might be some spec behind, but I cannot find any evidence for that.
When all the styles are untouched, the browser uses the host OS's given API to render the given control. This will make the control look native to the platform, but if you apply any style to that control/element, the browser cannot guarantee that the given style can be applied in the given platform, so it defaults back to a simplified, fully css solution.
Also note, that styling control elements, though works, not covered by stable standards yet.
For example, the NSButton (native control behind the button in OS X) doesn't have an option to set the background color, so the browser faces an impossible task. On Windows, you can change the background color, this is why people report not seeing your issue on Windows.
Sometimes CSS styles are inherited. However, you are applying styles to your body which is everything in HTML. Personally I don't apply anything to body other than maybe reset or normalize CSS. That said, you can use CSS selector operators and\or id/classes to minimize:
http://www.w3schools.com/cssref/css_selectors.asp
Example:
html
btw don't write html like this just easier to read
<body>
<div class="wrapper">
<button class="all-btns red">
Cancel
</button>
<button class="all-btns green">
Save
</button>
</div>
</body>
css
.div.wrapper {
width: 100%;
height: auto;
background: #efefef;
}
.all-btns {
border: solid 1px #000;
width: 50px;
line-height: 48px;
height 35px;
color: #fff;
}
.btn.red {
color: #fff;
background: red;
}
.btn.green {
background: green;
}
I've had a look around but can't quite find what i'm looking for.
I currently have a css animation on my page which is triggered by :hover. I would like this to change to 'click' or 'touch' when the page is resized past width 700px using media queries.
Here is what i have at the moment: http://jsfiddle.net/danieljoseph/3p6Kz/
As you can see, the :hover will not work on mobile devices but i still want to ensure it works the same way just by click, not hover.
I would rather use css if possible but happy with JQuery also.
I have a feeling this is very easy to do but i am just missing something very obvious! Any help would be appreciated.
Here is the css animation:
.info-slide {
position:absolute;
bottom:0;
float:left;
width:100%;
background:url(../images/blue-back.png);
height:60px;
cursor:pointer;
overflow:hidden;
text-align:center;
transition: height .4s ease-in-out;
-webkit-transition: height .4s ease-in-out;
-moz-transition: height .4s ease-in-out;
}
.info-slide:hover {
height:300px;
}
If you use :active selector in combination with :hover you can achieve this according to w3schools as long as the :active selector is called after the :hover selector.
.info-slide:hover, .info-slide:active{
height:300px;
}
You'd have to test the FIDDLE in a mobile environment. I can't at the moment.
correction - I just tested in a mobile, it works fine
You can add onclick="" to hovered element. Hover will work after that.
Edit: But you really shouldn't add anything style related to your markup, just posted it as an alternative.
document.addEventListener("touchstart", function() {}, true);
This snippet will enable hover effects for touchscreens
I got the same trouble, in mobile device with Microsoft's Edge browser. I can solve the problem with: aria-haspopup="true". It need to add to the div and the :hover, :active, :focus for the other mobile browsers.
Example html:
<div class="left_bar" aria-haspopup="true">
CSS:
.left_bar:hover, .left_bar:focus, .left_bar:active{
left: 0%;
}
On most devices, the other answers work. For me, to ensure it worked on every device (in react) I had to wrap it in an anchor tag <a> and add the following:
:hover, :focus, :active (in that order), as well as role="button" and tabIndex="0".
I am a CSS noob but I have noticed that hover will work for touch screens so long as it's a "hoverable" element: image, link, button. You can do it all with CSS using the following trick.
Change your div background to an actual image tag within the div or create a dummy link around the entire div, it will then register as a hover when you touch the image.
Doing this will mean that you need the rest of your page to also be "hoverable" so when you touch outside of the image it recognizes that info-slide:hover has ended. My trick is to make all of my other content dummy links.
It's not very elegant but it works.
A CSS only solution for those who are having trouble with mobile touchscreen button styling.
This will fix your hover-stick / active button problems.
body, html {
width: 600px;
}
p {
font-size: 20px;
}
button {
border: none;
width: 200px;
height: 60px;
border-radius: 30px;
background: #00aeff;
font-size: 20px;
}
button:active {
background: black;
color: white;
}
.delayed {
transition: all 0.2s;
transition-delay: 300ms;
}
.delayed:active {
transition: none;
}
<h1>Sticky styles for better touch screen buttons!</h1>
<button>Normal button</button>
<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>
<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures. With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely. This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>
<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>
Well I agree with above answers but still there can be an another way to do this and it is by using media queries.
Suppose this is what you want to do :
body.nontouch nav a:hover {
background: yellow;
}
then you can do this by media query as :
#media(hover: hover) and (pointer: fine) {
nav a:hover {
background: yellow;
}
}
And for more details you can visit this page.
I think this simple method can achieve this goal.
With CSS you can turn off pointer event to 'none' then use jQuery to switch classes.
.item{
pointer-events:none;
}
.item.clicked{
pointer-events:inherit;
}
.item:hover,.item:active{
/* Your Style On Hover Converted to Tap*/
background:#000;
}
Use jQuery to switch classed:
jQuery('.item').click(function(e){
e.preventDefault();
$(this).addClass('clicked')l
});
I have script that handles image rollovers with css. What I would like to know if this the proper way of doing a CSS rollover? I also wanted to know if this is good how do you handle other rollover images do you have to have a separate css for each image?
Here is an example: http://jsfiddle.net/GFec3/40/
CSS Code:
a.rollover {
display: block;
width: 27px;
height: 25px;
text-decoration: none;
background: url("http://www.gdisinc.com/barker/images/menubar/bnt_facebook.jpg");
}
a.rollover:hover {
background-position: -350px 0;
}
.displace {
position: absolute;
left: -5000px;
}
HTML
<span class="displace">TEST</span>
This works but just wanted to know is there a special way to handle more then one rollover image?
You don't have to use background images in css. Example:
<STYLE type="text/css">
.roll .on { display: none; }
.roll .off { display: block; }
.roll:hover .on { display: block; }
.roll:hover .off { display: none; }
</STYLE>
<DIV class="roll">
<IMG class="on" src="...">
<IMG class="off" src="...">
</DIV>
There's lots of ways of doing this. Which to choose is up to you.
Use CSS sprite, with this you will use only one background image, you just have to change background position for different image hover
CSS Sprites: Image Slicing’s Kiss of Death
The method you currently have is the most efficient. Among other things, it "preloads" the rollover image since it's the same one as the non-rollover just a different part of it. It also reduces the number of HTTP requests to the bare minimum (short of the data scheme) and in some cases actually improves filesize (best case is two images using similar colour palettes, one colour table needed instead of two).
Don't change it, it's perfect.
You do have to define a separate CSS for each rollover, however if the images are the same size you can reduce the damage by reusing the :hover definitions.