0

i am using jquery ui-layout to create 4 panes: north, west, main, east. Inside the west pane i placed an accordeon-sidebar within a treeview. The treeview is very large so a scrollbar appear next to the west-pane. All fine!

Now i scroll down, click on a link inside the treeview and the page loads. But the scrollbar starts again at the top.

I like to maintain the position of the scrollbar so the clicked element inside the treeview is in view.

I am not realy shure if this is a jquery problem, i need to set a cookie or if i have to set a kind of anchor link.

This is my page structure, i have shortend the list:

    <div class="ui-layout-west">
    <div class="accordionsidebar"><div id="accordion-west">
    <h3><a href="#">Treelist</a></h3>
    <div class="folder-section">
    <ul class="link-list">
    <ul class="browser filetree">
    <li><span class="folder new"><a href="?a=1">One</a></span></li>
    <li><span class="folder new"><a href="?a=2">Two</a></span></li>
    ....
    <ul>
    <li><a href="?a=11">OneOne</a></li>
    <li><a href="?a=22">TwoTwo</a></li>
    ....
    </ul>
    ....
    </ul>
                
    <li><a href="?a=new">NEW</a></li>
    </ul>
    </div></div></div></div>

This is my code to create the filetree:

function initTreeview(){
    jQuery('ul.browser').treeview({
        animated:'fast',
        control:'#sidetreecontrol',
        collapsed: true,
        persist: "cookie"
    });
}

And here i create the ui-layout and the accordeon

$(document).ready(function () {
    mainLayout = $('body').layout({ 
        name: "main",
        applyDefaultStyles: true,
        
        north__minSize: 59,
        north__maxSize: 89,
        north__closable:false,
        north__resizable:false,
        north__spacing_open:1,
        

        west__closable:true,
        west__resizable:true,
        west__spacing_open:3, 
        west__spacing_closed:5,
                
        east__minSize:0,
        east__maxSize:0,
        east__size:0,
        east__closable:true,
        east__resizable:true,
        east__spacing_open:3, 
        east__spacing_closed:0,
        east__initClosed:true, 
        east__togglerAlign_open: "top",
        east__togglerLength_open:0,
        
        south__size:45,
        south__closable:false,
        south__resizable:false,
        
        stateManagement__enabled:true,
        stateManagement__stateKeys: "west.size,west.isClosed"
    });
    //$("#accordion-west").accordion({fillSpace: false, collapsible: true, heightStyle: "fill"}); //clearStyle: true, autoHeight: false
    $("#accordion-west").accordion({
        fillSpace: false, 
        collapsible: true, 
        heightStyle: "fill",
        
        clearStyle: true,
        autoHeight: false,
        create: function(event, ui) {
            //get index in cookie on accordion create event
            if($.cookie('saved_index') != null){
               act =  parseInt($.cookie('saved_index'));
            }
        },
        activate: function(event, ui) {
            //set cookie for current index on change event
            var active = jQuery("#accordion-west").accordion('option', 'active');
            $.cookie('saved_index', null);
            $.cookie('saved_index', active);
        },
        active:parseInt($.cookie('saved_index'))
            
    }); //clearStyle: true, autoHeight: false

I need to know how can i maintain the position of the scrollbar in the west-pane if i click inside the west pane on a link.

Thanks

user6625547
  • 121
  • 11
  • You need to create a fiddle link to your current code so that we can check and understand your problem. – Alive to die - Anant Oct 28 '22 at 09:41
  • I cannot because i need to click a link to demonstrate. If i click on the link "OneOne" the page reloads and the scrollbar of the west-pane is on top but i like to position it where the Link "OneOne" is. Its not easy to explain for me. I need to save the position of the scrollbar of the west-pane in a cookie maybe. – user6625547 Oct 28 '22 at 15:42

0 Answers0