0

I have followed the answer to this question in order to detect whether a device is iOS, and then modify the CSS if true: Detect if device is iOS

I have this code in the head of my document (a Wordpress header.php template):

<script type="text/javascript">
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS){
    $(".noParallax").css("display","block");
    $(".myParallax").css("display","none");
    }
</script>

The CSS in my style.css sheet is as follows:

.noParallax {
display:none;
}

.myParallax {
background-attachment:fixed;
display:block;
}

The idea is that div.noParalax is displayed when the browser detects ios, but hidden when it's not an iOS device, then div.myParallax displays instead.

However, it doesn't seem to be working. Do I need to link to any special libraries in order for it to work? Or is my code completely wrong (I am not familiar really with javascript or how it works.)

Alternative Test

Frustratingly, I also tried this to no avail:

<script type="text/javascript">
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
    $(".noParallax").css("display","block");
    $(".myParallax").css("display","none");
} else {
    $(".noParallax").css("display","none");
    $(".myParallax").css("display","block");
}
</script>

Which doesn't work either. No CSS styles are applied to the relevant divs. However, the similar script below DOES work:

<script type="text/javascript">
if( /iPhone|iPad|iPod/i.test(navigator.userAgent) ) {
 alert("This is iOS!");
} else if( /Android|BlackBerry/i.test(navigator.userAgent) ) {
 alert("This is Android or Blackberry!");
} else {
 alert("This is something else!");
}
</script>

So what is it that's wrong with the first version of this code that specifically modifies CSS. Is my syntax wrong?

Thank you in advance for any help anyone can offer.

user2998925
  • 63
  • 1
  • 9

2 Answers2

0
window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};
Salman Sayyed
  • 21
  • 1
  • While this code may provide a solution to OP's problem, it is highly recommended that you provide additional context regarding why and/or how this code answers the question. Code only answers typically become useless in the long-run because future viewers experiencing similar problems cannot understand the reasoning behind the solution. – E. Zeytinci Jan 15 '20 at 06:35
  • Thanks you Salman for taking a look at my issue and for providing a solution. I am confused as to what your code does and how to implement it. Does it check whether it's a mobile device of almost every type under the sun other than Apple iOS? How do i incorporate the CSS changes when using your script, and do I need to change my default CSS in any way too? – user2998925 Jan 15 '20 at 19:08
0

I finally managed to achieve my goal of affecting the CSS display property of class elements depending on whether a user is viewing in an iOS device (ultimately to switch out parallax elements with alternative content) with this slightly modified code that includes the missing $(function(){ line of code and corresponding closing parenthesis:

<script type="text/javascript">
// show alternative content to iOS users (no parallax)
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (iOS){
    $(function() {
    $(".noParallax").css("display","block");
    $(".myParallax").css("display","none");
    });
}
</script>

I'd be grateful if anyone can let me know if this is a poor practice for any reason in relation to my ultimate goal of serving different content (no parallax effect) to iOS users.

user2998925
  • 63
  • 1
  • 9