javascript - Forcing mobile devices to activate :hover CSS properties on first touch and activate link on second touch -

-

: )

so, i'm trying solve hover effect issue. have tooltips on of links. code looks this:

<a href="https://wikipedia.org/wiki/space_shuttle_atlantis">   <h6 class="has-tip">space shuttle     <p class="tip">the space shuttle invented santa claus</p>   </h6> </a>

and css bit more involved: 

.tip {   display: block;   position: absolute;   bottom: 100%;   left: 0;   width: 100%;   pointer-events: none;   padding: 20px;   margin-bottom: 15px;   color: #fff;   opacity: 0;   background: rgba(255,255,255,.8);   color: coal;   font-family: 'ubuntu light';   font-size: 1em;   font-weight: normal;   text-align: left;   text-shadow: none;   border-radius: .2em;   transform: translatey(10px);   transition: .25s ease-out;   box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); }  .tip::before {   content: " ";   display: block;   position: absolute;   bottom: -20px;   left: 0;   height: 20px;   width: 100%; }  .tip::after { /* lil triangle */   content: " ";   position: absolute;   bottom: -10px;   left: 50%;   height: 0;   width: 0;   margin-left: -13px;   border-left: solid transparent 10px;   border-right: solid transparent 10px;   border-top: solid rgba(255,255,255,.8) 10px; }  .has-tip:hover .tip {   opacity 1;   pointer-events auto;   transform translatey(0px); }

now, on desktop works wonderfully. hover on tiny title , pretty looking tooltip, if click anywhere on title or tooltip (unless decide put yet link in paragraph works separately , nicely) activate link. yay : )

now on mobile, whole thing gets funky. touching activates link. if have slow internet, or ios, might glimpse tooltip next page loads.

i following behavior:

  1. user taps on tiny title (h6) has class (has-tip)
  2. if first tap, tooltip shows, , nothing else happens. 3)
  3. if tooltip showing when tap (as in subsequent tap) link activate , new page loads.

any ideas how might implement this? no jquery if possible.

one way save reference last clicked has-tip link , apply class forces tip show. when click on link , matches the last 1 clicked, let event pass.

edit: oh, forgot mention might need classlist shim old ie.

jsfiddle link.

html

<a href="http://jsfiddle.net/thepivottt/1tc52muq/1" class="has-tip">   jsfiddle<span class="tip">click fun recursion</span> </a><br /> <a href="http://google.com" class="has-tip">   google<span class="tip">click answers</span> </a>

 js

lasttip = null;  if(mobile) {     var withtip = document.queryselectorall(".has-tip");      for(var i=0; i<withtip.length; ++i) {         withtip[i].addeventlistener("click", function(e) {             if(lasttip != e.target) {                 e.preventdefault();                 if(lasttip) lasttip.classlist.remove("force-tip");                 lasttip = e.target;                 lasttip.classlist.add("force-tip");             }         });     } }

 css

.has-tip {     position: abolute; } .tip {     display: none;     position: relative;     left: 20px;     background: black;     color: white; }  .has-tip:hover .tip, .force-tip .tip {     display: inline-block; }

Comments

Post a Comment

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

-
i have problem namespace of spring security on xhtml page. don't understand why can't load uri, , have following issue: whitelabel error page application has no explicit mapping /error, seeing fallback. tue jul 21 16:58:12 utc 2015 there unexpected error (type=not found, status=404). please need help! possible uri has been changed? best regards you using incorrect namespace url. correct url http://www.springframework.org/schema/security the error page seeing spring source website since not recognize url. try visiting http://www.springsource.org/security/tags in browser update : spring security tags used in jsp page correct tag lib declaration is: <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
Read more

sql - MySQL query optimization using coalesce -

-
can explain me why second query faster first? (first 1 takes around 40 seconds, second 1 less 0.1) select releases.feature_code, releases.platform_id, version, release_date, general_available, uri, filesize, display_name, feature_name.full_name, if ((select exists(select 1 release_exceptions releases.feature_code = release_exceptions.feature_code , releases.platform_id = release_exceptions.platform_id , releases.version = release_exceptions.version) = 1), 1, 0) release_exceptions releases left outer join platform using(platform_id) left outer join feature_name using(feature_code) order version desc; ~~~ query 2 ------------------ ~~~ select feature_code, version, release_date, general_available, platform_id, uri, filesize, display_name, feature_name.full_name, coalesce(release_exceptions, 0) release_exceptions mus.releases left outer join ( select distinct feature_code, version, platform_id, 1 release_exceptions mus.release_exceptions ) release_exceptions using ...
Read more

unity3d - Unity local avoidance in user created world -

-
i'm using unity3d networked multiplayer online game have large complex 3d terrain scene forest, trees, cliff, hills, mountains, bounders, etc. players can build structures sort of minecraft, , put them anywhere in scene, or move them around anytime. aside human controlled players, there automated ai players , objects animals roaming around scene following path. the problem how make these automated ai players , animals, able navigate around static , dynamic player created structures, because path follow can blocked player created structures, or other players , other ai objects, cliffs etc. have find away around them or on track if tumble down off high cliff example. so made navmesh , used navagents, takes care of static, non moving objects, how make ai players navigate around each other , dynamic structures created players can number in hundreds? i thought of adding navmeshobstacle everything, result in being attached hundreds of objects since user created structures b...
Read more