Languages

Menu
Sites
Language
Browseintoview...? (List)
I have this piece of code for settings:    
 
      <div class="ui-page" id="settings-mode">
        <header class="ui-header">
            <h2 class="ui-title">Settings</h2>
        </header>
<div class="ui-content">
            <ul class="ui-listview">
                <li class="li-has-radio">
                    <label>
                        Test 1
                        <input type="radio" name="test-mode-radio" value="Test1"/>
                    </label>
                </li>
                <li class="li-has-radio">
                    <label>
                       Test 2
                        <input type="radio" name="test-mode-radio" value="Test2"/>
                    </label>
                </li>
                <li class="li-has-radio">
                    <label>
                        Test 3
                        <input type="radio" name="test-mode-radio" value="Test3"/>
                    </label>
                </li>
               <li class="li-has-radio">
                    <label>
                        Test 4
                        <input type="radio" name="test-mode-radio" value="Test4"/>
                    </label>
                </li>
            </ul>
        </div>
       </div>
 
When I browse to it (using  <a href="#settings-mode">​), how can I FOCUS to the current selected value (which I select using Javascript)?
I have this code to select the current value:
 
       function onPageBeforeShow() {
            pageHelper.resetScroll(page);
            page.querySelector('[value="' + currentValue + '"]').checked = true;
        }
 
But if it is "Test 4", it is not visible until I manually scroll down...

Thanks
 
List

Responses

1 Replies
Iqbal Hossain

hi~

You can write your own code to manually scroll down to the div that selected. You can use Jquery. 

e.g.

html

<div class="first"><button class="click1" type="button">Click Me!</button></div>
<div class="second">Hi<button class="click2" type="button">Click Me!</button></div>

js

$('.click1').live('click', function() {
    $('html,body').animate({
        scrollTop: $(".second").offset().top},
        'slow');
});

$('.click2').live('click', function() {
    $('html,body').animate({
        scrollTop: $(".first").offset().top},
        'slow');
});

css

.first {
    width: 100%;
    height: 1000px;
    background: #ccc;
}

.second {
    width: 100%;
    height: 1000px;
    background: #999;
}

See the demo in JSFiddle

http://jsfiddle.net/theiqbal7/5bf6d3eL/3/

-Thanks