[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to execute a different Javacript in mobile browsers

Posted on 2009-12-18
3
Medium Priority
?
492 Views
Last Modified: 2012-05-08
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
Comment
Question by:mariita
3 Comments
 
LVL 11

Expert Comment

by:wrmichael
ID: 26084145
0
 
LVL 15

Expert Comment

by:fsze88
ID: 26086080
try to use navigator object´s properties from https://developer.mozilla.org/En/DOM/Window.navigator
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 1000 total points
ID: 26087296
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

865 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question