#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0

    Make hover events work on ipad without jquery


    Is there a way to make hover events respond to touch on ipad with only javascript and not use jquery?

    I have a within an tag that only shows when you hover over the anchor tag. It works on everything except iPad/iPhone. I REALLY don't want to use jquery because I would have to go through and attach jquery to over 400 pages to simply make the span show on iDevices. I already have a Javascript file attached to all of these pages so if there is a fix I can put in that one file that would be best.

    This is the CSS for my span if it helps:

    Code:
    a span {
    display: none;
    position: absolute;
    width: 300px;
    padding: 10px; 
    margin: 10px;
    text-indent: 0;
    z-index: 1000;
    font-size: 90%;
    font-weight: normal;
    color: black; 
    background: #b4cada;
    text-align: justify;
    border: 1px solid #0a4b7c;
    border-radius: 10px;
    box-shadow: 2px 2px 2px #888888;
    }
    
    a:hover span, a:focus span, a:active span {
    display: block;
    }
    This is the actual link from my html:
    Code:
    <a class="key_terms">Void<span><script>define_void_contract();</script></span></a>
    Thank you all very much for reading and any help you can offer!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Just set-up a className with a hover style and one with a normal/non-hover style; then change className onmouseover/onmouseout.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by web_loone08
    Just set-up a className with a hover style and one with a normal/non-hover style; then change className onmouseover/onmouseout.
    Do you know a way I can do this without having to insert something like this between all 500+ of my a tags?
    Code:
    onmouseover="this.className='span:hover'" onmouseout="this.className='span'"
    I am hoping for a script that I am insert into my external js file that will find all span tags and change them to the hover state on mouseover (iDevice friendly).
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Originally Posted by divesplash
    Do you know a way I can do this without having to insert something like this between all 500+ of my a tags?
    Code:
    onmouseover="this.className='span:hover'" onmouseout="this.className='span'"
    I am hoping for a script that I am insert into my external js file that will find all span tags and change them to the hover state on mouseover (iDevice friendly).
    Yes, use jQuery; that would be the easiest way to go. You would then assign a .mouseover()/.mouseout() API, to your <a> tags; like so:
    Code:
    $("document").ready(function(){
    
     $(".key_terms").mouseover(function(){
       $(this).attr("class","hover");
     });
    
     $(".key_terms").mouseout(function(){
       $(this).attr("class","normal");
     });
    
    });
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0
    Originally Posted by divesplash
    Do you know a way I can do this without having to insert something like this between all 500+ of my a tags?
    Code:
    onmouseover="this.className='span:hover'" onmouseout="this.className='span'"
    I am hoping for a script that I am insert into my external js file that will find all span tags and change them to the hover state on mouseover (iDevice friendly).
    Does anyone know how I can do this WITHOUT jquery? I know it would be easier that way but I really need to find a solution without jquery. Thank you to anyone that can help!
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    Welcome to DevShed Forums, divesplash.

    You might find Hammer.js useful.

    Mozilla's Touch events documentation might also be helpful to you.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,044
    Rep Power
    119
    Not quit sure why you do not want or are unable to use jQuery, but here is the old fashion JavaScript, way to do this:
    Code:
    <script>
    
    function readyLinks() {
    var links = document.getElementsByTagName("a");
     for(i=0;i<links.length;i++) {
      if(links[i].className == "key_terms") {
       links[i].onmouseover = function(){
        this.getElementsByTagName("span")[0].className = "hover";
       }
       links[i].onmouseout = function(){
        this.getElementsByTagName("span")[0].className = "normal";
       }
      }
     }
    }
    
    window.onload = function(){
     readyLinks();
    }
    
    </script>
    
    
    
    <a class="key_terms" href="#"><span>Link 1</span></a>
    <br/>
    <a class="key_terms" href="#"><span>Link 2</span></a>
    <br/>
    <a class="key_terms" href="#"><span>Link 3</span></a>

IMN logo majestic logo threadwatch logo seochat tools logo