onClick (in drop menu) calling javascript function doesn't work on Phone browser

Question

In my webpage, I have a normal menu, and now I'm working on customizing it by adding drop menu to easily navigate when using smart phones. onClick did work on PC browser but didn't work on Phone. OnClick calls a javascript function to show a piece of div which is hidden in HTML.

The following code includes drop menu (the one does work on PC but not on Smart Phone) and normal menu (which works on both PC or Phone)

I tried to replace onClick with OnSelect but with no success.

The main component of the code ( https://dl.dropboxusercontent.com/u/4301151/test.html ):

    <style>
    .hidden { display: none; }
    </style>

    <script type="text/javascript">
        function toggleVisibility(newSection) {
        $(".hidden").not("#" + newSection).hide();
        $("#" + newSection).show();
        }

       function changeFunc($i) {
        alert($i);
       }
    </script>
</head>

<body>

    <select onchange="changeFunc(onClick);">
     <option onclick="toggleVisibility('page1');">option1</option>
     <option onclick="toggleVisibility('page2');">option2</option>
    </select>

    <a href="#" onclick="toggleVisibility('page1');">PAGE1</a>
    <a href="#" onclick="toggleVisibility('page2');">PAGE2</a>

    <div id= "page1" class="hidden">
    this is page 1
    </div>

    <div id= "page2" class="hidden">
    this is page 2
    </div>

</body>
</html>

Answer 1

This should be all you need. When the select is changed, it calls "toggleVisibility" and tells it which page to show. Assuming that your javascript indeed works, then this will work.

<select onchange="toggleVisibility(this.value);">
    <option selected="selected">Please choose a page</option>
    <option value="page1">option1</option>
    <option value="page2">option2</option>
</select>

<a href="#" onclick="toggleVisibility('page1');">PAGE1</a>
<a href="#" onclick="toggleVisibility('page2');">PAGE2</a>

<div id= "page1" class="hidden">
    this is page 1
</div>

<div id= "page2" class="hidden">
    this is page 2
</div>

<style>
.hidden { display: none; }
</style>

<script type="text/javascript">
    function toggleVisibility(newSection) {
        $(".hidden").not("#" + newSection).hide();
        $("#" + newSection).show();
    }

    function changeFunc($i) {
        alert($i);
    }
</script>

It is worthwhile to note that some some browsers simply do not allow javascript.

onClick (in drop menu) calling javascript function doesn't work on Phone browser

Question

1 answers

solution1
0 ACCPTED 2014-03-23 19:30:24

onClick (in drop menu) calling javascript function doesn't work on Phone browser

Question

1 answers

solution1 0 ACCPTED 2014-03-23 19:30:24

solution1
0 ACCPTED 2014-03-23 19:30:24