Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS3 and jQuery: hover and 'mouseout' colours for iPhone

Posted on 2012-09-11
6
Medium Priority
?
773 Views
Last Modified: 2012-10-04
As attached is self explanatory.

a.png is a screen grab of Chrome.
b.png is a screen grab of iPhone.

You can see CSS3 hover on Chrome. A cyan colour will darken on ease in effect when clicking the accordion and a darker colour will ease out to lighter cyan after one second. On 'mouseout' event a darker colour will appear when closing the accordion and ease out to lighter cyan colour.

It works to certain extend on iPhone, a cyan colour will darken on ease in effect when clicking the accordion and a darker colour stays that way when the accordion opens and closes. It still stay dark cyan when the accordion closed until I click another accordion.

How can I make a darker colour will ease out when it is 'mouseout' to lighter cyan colour for iPhone? There must be JS that can give a push to make it work on what you see on Chrome.

I use jQuery 1.7

The accordion styling is CSS3 and I  use all CSS3 for colouring effect so far.

This CSS3 code as below of what I'm taking about as above:
.toogle_wrap{background-color:#e4f6f8; border:1px #bfeaf0 solid; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.toogle_wrap:hover {background-color:#bfeaf0; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */

Open in new window


Here is a full CSS3 code on accordion:
.toogle_wrap{background-color:#e4f6f8; border:1px #bfeaf0 solid; -webkit-transition-property:color, background; -webkit-transition-duration: 1s, 1s; -webkit-transition-timing-function: linear, ease-in; -moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.toogle_wrap:hover {background-color:#bfeaf0; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */
.toogle_wrap:focus {background-color:#e4f6f8; border:1px #bfeaf0 solid;} /*  #bfeaf0; light cyan #48c4d2; cyan. background-color:#e0f0dc; Light Green border:1px #b8dcae solid;Darker Green. */

/*.toogle_wrap:a:focus:hover { background-color:#e4f6f8; } *//*  #48c4d2; */
.toogle_wrap_intro{background-color:#fff; border:1px #bfeaf0 solid;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:92%; padding:3% 4%; margin:5px 0 10px 0;} /* e4f6f8 10% cyan BG */  /* margin:5px 0 15px 0; 15 increases space between bars. */
.trigger{padding:0px;margin:0; background:url(../images/toggle_small.svg) no-repeat right; background-position:100% -20px; } /* background:url(../images/toggle.png) */
.trigger a{color: #636363;text-decoration: none;display: block; padding:2px 0 2px 0;font-size:16px;font-family:opensans;font-weight:normal; } /* 8a50c1 medium purple */
span.trig{color:#003f5e; font-size:16px;font-family:opensansbold;font-weight:bold;}  /* Change font size to 16 from 18px */
span.bold{color:#cb088c; font-size:12px;font-family:opensansbold;font-weight:bold;}  /* content text bold. Change from navy #003f5e; to magenta for impact and visibility. */
.active {background-position:100% 0px; }
.trigger a:hover, .trigger a:hover:focus{color:#000;}    /* background-color:#eb088c; color:#48c4d2; */
/*.trigger:hover { background-color:#a5cd4e; }
.trigger:hover a, .trigger:hover a:focus{ color:#48c4d2; } */
.toggle_container{overflow: hidden;padding:15px 0 0 0;clear: both;}

Open in new window

a.png
b.png
0
Comment
Question by:Redscrapbook
  • 4
  • 2
6 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38390296
iphone doesn't have mouse hovers, you can't hover over something on a touch device. it has touch events: touchstart, touchend, etc..

So you have to do this differently. You can still use CSS3 transitions, but you have to apply classes "ontouch", so to speak. you'll need javascript, or you can try to make it work with the :target pseudo class. (:target is minimally supported on other browsers).
0
 

Author Comment

by:Redscrapbook
ID: 38391722
Thank you for your reply. Can you point out a right JS for this please? Look Like it is lacking JS that may be the cause.

It worked on iPhone by clicking / touch the accordion 'open' with ease effect: light to dark cyan. But it stays dark instead of dark to light ease effect after opening.

Alternative solution: I'll be happy even if its stays dark when it is opened instead of dark to light ease effect after opening as you can see on Chrome. BUT, it has to return to light cyan when the accordion is closed. What I have it stayed dark cyan.

I've come across this: http://jsfiddle.net/gilly3/NPNFg/3/
or http://jsfiddle.net/gilly3/c9BvU/6/
But nearly there?


http://webdesignernotebook.com/css/the-css3-target-pseudo-class-and-css-animations/
and view the demo as below, of what I'm trying to aim for iPhone. With Yellow colour disappears after a second or so. That is what I'm trying to achieve with the original question.

http://webdesignernotebook.com/examples/target.html
0
 

Author Comment

by:Redscrapbook
ID: 38392168
CSS3 animations are terriffic but do use a lot of your processor’s power. There is no way to fine tune the animation with CSS3 the same way you can using a framework like jQuery. So, as long as CSS3 animations aren’t CPU friendly you better stick with jQuery.
http://www.richardet-design.com/wp/design/webdesign/css3-animation-vs-jquery-animation/
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38392348
that's not entirely true. 3d transforms use the native hardware acceleration which is much faster.
0
 

Author Comment

by:Redscrapbook
ID: 38392417
I've looked at the article again and it is written on 14 june 2011. Perhaps that was before jQuery became a big demand?

I see this:
http://stackoverflow.com/questions/2851663/how-do-i-simulate-a-hover-with-a-touch-in-touch-enabled-browsers

with possible solution but it needs work?
$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

Open in new window



or this most recent (7 months ago):
http://stackoverflow.com/questions/8970280/how-to-simulate-hover-effect-on-touch-devices

$('#arm').bind('touchstart', function() {
        $(this).removeAttr('style').css('bottom','244px');
        $(this).addClass('hover_effect');
});

$('#arm').bind('touchend', function() {
        $(this).removeClass('hover_effect');
});

Open in new window

0
 

Author Closing Comment

by:Redscrapbook
ID: 38462615
This is a better solution after a long search, trial and error. Thank you kozaiwaniec. I'll try to simplify the questions if I post another relevant questions.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
No other job is as rewarding and demanding as building an iPhone app is. It is not really in the hands of the developer for the success of an iPhone app. Many factors operate jointly for every iOS application's success in the market.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question