2

I'm having trouble combining a few jQuery functions. Any help is appreciated. Each script works individually but when I try to combine them together only one works (the iOS hover) and I'm not sure why. I'm doing some workaround for issues only on iOS devices. I would like to include the second function in the first which I can't seem to do.

First function works fine as long as second function is commented out:

$(document).ready (function(){
  /**iOS phone number fix for text color**/
  $(".phone #phonenumber").remove();
  $(".phone").append("<div id='phonenumber2'><span class='callustext'>Call us :  (800) 000-0000</span></div>");
  /**iPad fixes for subnav styling at 768px**/
  if(screen.width == 768){
    $("#innerpage .mainnav ul li ul").css("background","transparent");
    $("#innerpage .mainnav ul li.mainnavlink a:hover").css("color","#91b39e");
    $("#innerpage .mainnav ul li.mainnavlinkactive a:hover").css("color","#91b39e");
    $("#innerpage .mainnav ul li.mainnavlink ul li a").css("border-bottom","none");
    $("#innerpage .mainnav ul li.mainnavlinkactive ul li a").css("border-bottom","none");
    $("#innerpage .mainnav ul li.mainnavlink ul li a:link").css("text-transform","none").css("color","#d7d7d7");
  }
});

Second function works fine when first is commented out:

/**iOS Hover fix**/ 
 $(document).ready(function() {
   if(navigator.platform == "iPad") {
     $("a").each(function() {
       var onClick; // this will be a function
       var firstClick = function() {
         onClick = secondClick;
         return false;
       };
       var secondClick = function() {
         onClick = firstClick;
         return true;
       };
       onClick = firstClick;
       $(this).click(function() {
         return onClick();
       });
     });
   }
});

Reference: iOS automatic hover fix?

Community
  • 1
  • 1
PDIuserr
  • 77
  • 1
  • 2
  • 8
  • Why are you using to document ready functions? You should only use one. – mcphersonjr May 01 '14 at 15:04
  • That's what I want to do but the code doesn't work. I have them separated to see which one is causing the error. Each one on its own works fine but when I include the iOS fix in with the first function, the iOS fix works but all the styling doesn't work. – PDIuserr May 01 '14 at 16:46
  • Can you replicate your problem in js fiddle? – mcphersonjr May 02 '14 at 12:46
  • I don't know if I can as I'm using a third party template and customizing it for a client. – PDIuserr May 05 '14 at 14:22

1 Answers1

1

$(document).ready is a function that gets called when the document is done loading. If you define a function twice, the second definition will overwrite the first. So you have to create a single one with everything in it - try

$(document).ready (function(){
  /**iOS phone number fix for text color**/
  $(".phone #phonenumber").remove();
  $(".phone").append("<div id='phonenumber2'><span class='callustext'>Call us :  (800) 000-0000</span></div>");
  /**iPad fixes for subnav styling at 768px**/
  if(screen.width == 768){
    $("#innerpage .mainnav ul li ul").css("background","transparent");
    $("#innerpage .mainnav ul li.mainnavlink a:hover").css("color","#91b39e");
    $("#innerpage .mainnav ul li.mainnavlinkactive a:hover").css("color","#91b39e");
    $("#innerpage .mainnav ul li.mainnavlink ul li a").css("border-bottom","none");
    $("#innerpage .mainnav ul li.mainnavlinkactive ul li a").css("border-bottom","none");
    $("#innerpage .mainnav ul li.mainnavlink ul li a:link").css("text-transform","none").css("color","#d7d7d7");
  }
  if(navigator.platform == "iPad") {
     $("a").each(function() {
       var onClick; // this will be a function
       var firstClick = function() {
         onClick = secondClick;
         return false;
       };
       var secondClick = function() {
         onClick = firstClick;
         return true;
       };
       onClick = firstClick;
       $(this).click(function() {
         return onClick();
       });
     });
   }
});
Nicolas78
  • 5,124
  • 1
  • 23
  • 41
  • I realize that but it didn't work. I have them separated to see which one there is a problem with if I comment the other one out. – PDIuserr May 01 '14 at 16:48
  • I tried your code (and had the same thing) but text color change and styling do not work. Only the iOS hover works. – PDIuserr May 01 '14 at 17:16