• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 494
  • Last Modified:

How to execute a different Javacript in mobile browsers

I have a FAQ section where the user clicks on Question links to show hidden Answer DIVs. When one answer is displayed, all the other answers are hidden.
The problem is that this Javascript is not rendering correctly in the Blackberry browser, even when the user has Javascript enabled. When a Blackberry user clicks on the Question link, the Answer DIV is not displayed.
I would like to modify the script so that if the browser is mobile (i.e. width=450 or less), all the Answer DIVs are visible and not hidden. How can I accomplish this?
<script  type="text/javascript">
<!--
function showAnswer(num) {
  var num_questions = 2;  //number of drop down menus on the left nav menu
  var element;
  var i;
  
  // Close all menus
  for (i=1; i <= num_questions; i++) {
    if (i != num && document.getElementById("answer" + i)) {  //close all answers except for question clicked
	  document.getElementById("answer" + i).style.display = "none";
	}
  }
  
  element = document.getElementById("question" + num);

  if (document.getElementById("answer" + num).style.display != "block") {
    document.getElementById("answer" + num).style.display = "block";
  }
  else {
    document.getElementById("answer" + num).style.display = "none";
  }
}
-->
</script>		

<div id="question1" class="faqQuestion"><a href="#" onclick="showAnswer('1');">Q. Question 1</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 1.</div>  
<div id="question1" class="faqQuestion"><a href="#" onclick="showAnswer('2');">Q. Question 2</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 2.</div>

Open in new window

0
mariita
Asked:
mariita
1 Solution
 
Wayne MichaelSenior Software DeveloperCommented:
0
 
fsze88Commented:
try to use navigator object´s properties from https://developer.mozilla.org/En/DOM/Window.navigator
0
 
Michel PlungjanIT ExpertCommented:
Like this - please note the other changes I did to the script and html

<script  type="text/javascript">
<!--
var num_questions = 2;  //number of drop down menus on the left nav menu
var isSmall = false;
function showAnswer(num) {
  var i, ans;
  if (isSmall) return false;
  // Close all menus
  for (i=1; i <= num_questions; i++) {
    if (i == num) continue;
    ans = document.getElementById("answer" + i); 
    if (ans) {  //close all answers except for question clicked
      ans.style.display = "none";
    }
  }
  ans = document.getElementById("answer" + num);
  ans.style.display = (ans.style.display == "block") ? "none":"block";
  return false; // cancel the link itself
}
window.onload=function() {
  isSmall=document.body.clientWidth<=450;
  if (isSmall) {
    for (var i=1; i <= num_questions; i++) {
      ans = document.getElementById("answer" + i); 
      ans.style.display = "block";
    }
  }
}
// -->
</script>               

<div id="question1" class="faqQuestion"><a href="#" onclick="return showAnswer('1');">Q. Question 1</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 1.</div>  
<div id="question1" class="faqQuestion"><a href="#" onclick="return showAnswer('2');">Q. Question 2</a></div>
<div id="answer1" class="faqAnswer hidden">A. Answer 2.</div>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now