We are facing an issue in Jquery Multi Accordion Plugin implemented. Following is a brief description of the issue.
We have implemented Jquery Accordion control in our SP 2010 application which contains a checkboxlist. The checkboxlist items are being fetched from the database. On selecting a checkboxlist item we are executing a server side code which will fetch us some details from the database.
As you can see in the above figure, the accordion control has a scroll bar. Now the issue here is, each time If we select a checkboxlistitem, the position of the scroll bar is always set to the top of the list in their respective section.
For instance, if I select the item “(brown)” in the above accordion in the “Grade” section, the server side code is executed and the scroll bar will be moved to the top position. However, we need to retain the scroll bar position such that the user can see which item he has selected when the server side code is executed.
Any ideas or suggestions on how to implement the above would be of a great help to us.
REPLY :1
Store the scroll position before server post and restore it back.
Below is the sample scrolling.html. file
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<body>
<select size="3" id="getpos">
<optgroup label="Europe">
<option>United Kingdom</option>
<option>Luxembourg</option>
</optgroup>
<optgroup label="Asia">
<option>India</option>
<option>Dubai</option>
</optgroup>
<optgroup label="Test Europe">
<option>United Kingdom</option>
<option>Luxembourg</option>
</optgroup>
<optgroup label="Test Asia">
<option>India</option>
<option>Dubai</option>
</optgroup>
</select>
<button id="testbutton">Set Scroll position</button>
<select size="3" id="setpos">
<optgroup label="Europe">
<option>United Kingdom</option>
<option>Luxembourg</option>
</optgroup>
<optgroup label="Asia">
<option>India</option>
<option>Dubai</option>
</optgroup>
<optgroup label="Test Europe">
<option>United Kingdom</option>
<option>Luxembourg</option>
</optgroup>
<optgroup label="Test Asia">
<option>India</option>
<option>Dubai</option>
</optgroup>
</select>
<br/>
<br/>
Scroll Position:
<span id="scrollpos"/>
<script type="text/javascript">
$("#testbutton").click(function(){
$("#scrollpos").text($("#getpos").scrollTop());
$("#setpos").scrollTop($("#getpos").scrollTop());
});
</script>
</body>
</html>
And you have include the Jquery file jquery-1.7.min.js
Hope this helps.
Scroll the first list and click it will set the position in second list.
Note : Provide your comments by clicking beloe options! Thanks ! :)
0 comments:
கருத்துரையிடுக