I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)
Related
I'm new at angularjs/bootstrap and I'm trying to create a SPA that uses bootstrap accordion lists. I'm trying to change the color of the whole entire accordion tab, however, it's only changes part of the accordion space. I looked online and this question (Add class to accordion heading using angualr ui bootstrap?) and it's Jsfiddle (http://jsfiddle.net/Zmhx5/3/) represent my problem perfectly, but does not explain the solution.
I tried using firebug to find out what's going on behind the scenes, and it says the whole entire accordion tab is "". I have a css class that overwrites that style, but for some reason, something is overriding it.
.panel-heading {
background-color: red;
}
This website has a tutorial on accordions and its css simply overwrote it (http://patternry.com/p=accordion/). I tried doing the same but it did not work, please help :/
The reason why your override doesn't work is because of CSS Specificity. Since the Bootstrap style is more specific than yours, it is the one that's being applied. You'll need to override as follows
.panel-default >.panel-heading {
background-color: red;
}
Here is the JSFiddle for reference.
You should use scss in this case.
<div class="custom">
<accordion>
...
</accordion>
</div>
In css you will need to define.
.custom {
.panel-heading: {
background-color: red !important;
}
}
Since I couldn't add a comment to #AdityaSethi in #BartJedrocha's answer I will put an answer here since I think that it is useful.
.panel-default >.panel-heading {
background-color: red;
}
worked for me where
.custom {
.panel-heading: {
background-color: red !important;
}
}
Did not. Perhaps it is the use of SCSS? I read somewhere that SCSS uses the extension .scss. I didn't have the patience to change my stylesheet extension or create a new one. Sooo I tried the 2nd answer.
My comment however is more toward the #AdityaSethi comment that noted the issue of that solution affecting the entire app since panel classes are widely used. Understandable. I figure though the easy solution to that is:
div.custom .panel-default>.panel-heading {
background-color: red;
}
And that did the trick for me..as far as still changing the styles. The rest of my bootstrap page must not have had other panels in use because nothing else was change before I added div.custom to the CSS. But I imagine that with what little logic occurs in CSS, no other panels outside of div.custom should be affected. :)
I asked something similar before, but I guess I wasn't really clear and that's maybe why my question was voted down twice. Let me see if I can make a point here.
I'm using Nivo Slider on a website I'm working on I'm and very glad with its behavior, especially because it resizes automatically when I'm using different viewport sizes. It works great on my monitor, it works great on my smartphone and it works great on my tablet. It resizes like magic!
I've read all the code and I couldn't find how Nivo Slider does it. No media queries or viewport metatags. I'm really interested in making my website resize the way Nivo Slider does.
Would love to hear from all of you who are familiar with Nivo Slider or who might give me a helping hand.
If necessary: http://dev7studios.com/plugins/nivo-slider
I like to use it like this, to get responsive without problems:
css
#nivoSlider, #nivoSlider img{width:100%;height:auto !important}
HTML:
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="nivoSlider" class="nivoSlider">
<img src="" />
</div>
</div>
Just figured it out: it uses width:100%. I didn't realize it could be that easy.
.nivoSlider {
position:relative;
width:100%;
height:auto;
overflow: hidden;
left:0;
margin-top:100px;
}
.nivo-main-image {
display: block !important;
position: relative !important;
width: 100% !important;
}
http://cardiffhosp.rapdevs.co.uk/ has been built around the WooTheme Canvas, which is a responsive design.
I've had to disable the viewport meta tag, because I don't want the layout to be responsive.
It now looks much better on mobile devices, but a white area is appearing to the right hand side. Mostly visible on iPhone/iPad, but zooming out on other devices shows the white space is there.
Adding the following code, solved my problem, but caused the navigation to stop working on iPhones and caused display issues on a Windows 7 phone...
html, body {
overflow-x:hidden;
}
Has anyone got a better solution for removing the white space?
You can try adding width:100% and see if that solves the issue the overflow is causing, IE:
html, body {
overflow-x:hidden;
width:100%;
/* You may also want to try adding:*/
margin: 0;
padding: 0;
}
If that still causes problems then you will need to find the element that is causing the issue.
Couple ways to do this. (Be sure to remove overflow-x:hidden; before starting.)
1) Open the inspector, start with the divs or elements that contains other elements. Set those divs to display:none. If the excess white space disappears then you can find the offending element and fix its CSS.
If that option is too time consuming or you have trouble doing it, you can try another option:
2) This site has some CSS which outlines all of the elements on your site. This can help you find what is causing the overflow. The CSS used on this site is:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
They also provide a javascript bookmark that helps with this as well.
I am using the YUI multi page calendar on my website. I would like to center this on my web page but I am unsure of how to do this due to the complex CSS I am not used to. I have tried adding margin-left & margin-right: auto but this is not working.
An example of this multi-page calendar can be found here: http://developer.yahoo.com/yui/examples/calendar/calgrp_clean.html
Would somebody be able to help me center this calendar?
Thanks in advance.
This is extremely simple. You just need to define a width for the main div so the margin can center it. You also need to put a div right before the main div closes to clear the months so the main div has a distinct height/width.
Add this style to the main Div:
<div id="cal1Container" class="yui-calcontainer multi" style="margin: 0 auto; width: 500px; float: none;">
And before this Div closes add this
<div style="clear: both;"></div>
Now it works! Floats are pretty confusing at first, but often that's something that needs to be done. Other than that it's basic CSS.
I have some button controls with CSS line-height: 18px. Some are input controls type="button", and others are anchors stylized to appear as buttons like the input controls. In FF3.6.12/IE8 they are displaying the same height, but in IE7, the anchors are shorter in height. How do I get them to display correctly in IE7?
I took your demo: http://jsfiddle.net/DnGvF/
and added just this CSS at the end: http://jsfiddle.net/gRF9g/
/* ie7 fixes */
.Footer input[type=button],
.Footer input[type=submit]
{
overflow: visible;
*height: 24px;
*line-height: 15px
}
Some explanation of what's going on there:
There's a known bug in IE7 that overflow: visible fixes, related to the width of the button. Try looking at my demo in IE7 with and without it.
I'm using the Star property hack to provide change the height and line-height for only IE7 and lower. You can tweak the numbers I picked if you need to.
That hack is invalid CSS, but there's no problem using it. It's never going to come back and bite you - it's a "safe hack". Nevertheless, if you require 100% valid CSS, there are alternatives.
It now looks consistent between IE7 and the later versions.
Yes, this is a little kludgy, but at least it's all together in the CSS in one place, with a clear comment.
Honestly, if IE7 is the only problem, I'd just go with a hack and bump up the line-height:
*+html .button { line-height:24px }
If you use something like Modernizr, you could do away with the hack and use:
.ie7 .button { line-height:24px }
Of course, the other alternative is to actually track down why IE7 is behaving the way it is, and rewrite your CSS accordingly, but without any posted code, I can't help you with that.
EDIT: Forgot about this method of targeting just IE7:
<!--[if IE7]><style type="text/css">.button{line-height:24px}</style><![endif]-->
Buttons in IEs have additional padding/borders/whatever - they do not style well as in other browsers.