Select Input and Jquery Scripts in Webkit Browsers

Question

I'm having some trouble using jquery on a select input in webkit browsers.

I've got a standard HTML select input populated with data retrieved from a database in php, like this:

<select id="select_menu">  
foreach($all_sections as $key => $value) {
            $menu_element = $options['menu_element_'.$key.''];
            $menu_text = $options['menu_text_'.$key.''];
                if ($menu_element == "1") {
                    echo '<option class="select_menu_link" value="#'.$key.'">'.$menu_text.'</option>';  
                }   
        }
</select>

Now, i wrote a simple script that fetches the value of each option and uses it to scroll to that specific element (using the jquery ScrollTo library).

<script>
    $('.select_menu_link').click(function(){
        var target_name = $(this).attr("value");
        target_offset_top = $(target_name).offset().top;
        target_position = target_offset_top - 100;  
        $('html,body').scrollTo( {top: target_position, left:'0'}, 450 );
    });
</script>

This code works perfectly on Firefox and IE: when the user clicks over an option of the select input, the website scrolls to that point. However, it has no results on Chrome and Opera. Do you have any idea why? Any input (no pun intended) would be really appreciated!

regular jQuery not good enough? `$('html,body').animate({scrollTop:target_position,scrollLeft:0},450)`? — PlantTheIdea, Jan 01 '14 at 20:04
Webkit Browsers do not recognize the click event for option elements — Danijel, Jan 01 '14 at 20:07
Listen to a `change` event on `` elements, see http://stackoverflow.com/a/10209116/3150057 — Henry Blyth, Jan 01 '14 at 20:15

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Taken from this post, it appears that Webkit browsers have a bug modifying the body for scrollTop / scrollLeft. Best advice is to put everything into a wrapper and use that instead:

<html>
    <body>
        <div id="WrapAll">

        <!-- your HTML stuffs -->

        </div>
    </body>
</html>

Then use the scrollTo function on that:

$('.select_menu_link').click(function(){
    var target_name = $(this).attr("value");
    target_offset_top = $(target_name).offset().top;
    target_position = target_offset_top - 100;  
    $('#WrapAll').scrollTo( {top: target_position, left:'0'}, 450 );
});

Or we could clean it up to be all pretty and efficient, not require the ScrollTo plugin, and conform to standards (setting on change of select rather than click of option):

$('#select_menu').on('change',function(){
    var target_name = this.value;

    $('#WrapAll').animate({
        scrollTop:($(target_name).offset().top - 100),
        scrollLeft:0
    },450);
});

Thanks! the problem was indeed the fact that webkit browsers do not recognize the option click event. Detecting the change event on the select input works fine. Yes, my code is pretty terrible, i know :x Still unexperienced with java, hopefully i'll improve with time. — , Jan 02 '14 at 22:57
@arktoga - no worries man! All part of the learning process, we've all been there, I was just providing the information about how to do it in a "best practice" way so that you could see the difference. I'm just glad it helped! — PlantTheIdea, Jan 03 '14 at 10:23

Select Input and Jquery Scripts in Webkit Browsers

1 Answers1