scrollTop is not working. RSS

• • Reply
  

  minemy2003

  None

  0 Points

  11 Posts

  scrollTop is not working.

  Jun 13, 2012 01:48 PM|LINK

  I have a user control that open in modal pop up. Inside the user control i have a panel and Grid. I want to maintain the scroll position of grid after postback. i am trying to do this with javascript. Here is my code -

  
  <script type="text/javascript" language="javascript">
  var test;
  Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

  function beginRequest(sender, args) {
  var m = document.getElementById('OrderSelector1_pnlGridView');
  test = m.scrollTop;

  }
  function endRequest(sender, args) {
  var m = document.getElementById('OrderSelector1_pnlGridView');
  m.scrollTop = test;

  }
  </script>
  I am getting the value in var "test" but in the endRequest function when i am putting back the value in the m.scrollTop, it seems it is not working. It shows always 0.

• • Reply
  

  Deepak_Talel...

  Member

  458 Points

  87 Posts

  Re: scrollTop is not working.

  Jun 13, 2012 03:03 PM|LINK

  try remove the line

  var test;

  Because when add_beginRequest and add_endRequest is fired then the variable test is reset (by the line var test;) hence in endRequest  function it displays as 0.

  Let me know if this resolves your issue

  Deepak Talele
  Ph: 91-9158413830
  Email: deepak_talele@hotmail.com, deepak_talele@yahoo.com
• • Reply
  

  minemy2003

  None

  0 Points

  11 Posts

  Re: scrollTop is not working.

  Jun 13, 2012 03:05 PM|LINK

  Thanks for your reply. It is not resseting. I tested it but it seems like m.scrollTop is readonly.

• • Reply
  

  Deepak_Talel...

  Member

  458 Points

  87 Posts

  Re: scrollTop is not working.

  Jun 14, 2012 04:17 AM|LINK

  Instead of panel place the Grid in div (do not make this div as server control)

  Deepak Talele
  Ph: 91-9158413830
  Email: deepak_talele@hotmail.com, deepak_talele@yahoo.com
• • Reply
  

  raju dasa

  Star

  14412 Points

  2452 Posts

  Re: scrollTop is not working.

  Jun 14, 2012 06:09 AM|LINK

  Hi,

  
  
  try using with jquery:
  http://www.w3schools.com/jquery/css_scrolltop.asp
  
  Note: PageRequestManager works with Asp.net Ajax/UpdatePanel not with bare postback.
  so u should wrap ur required content in UpdatePanel.

  Happy Coding ! Mark as Answer if it helps.
  rajudasa.blogspot.com  ||  blog@opera
  • Marked as answer by Young Yang - MSFT on Jul 11, 2012 03:45 PM
• • Reply
  

  minemy2003

  None

  0 Points

  11 Posts

  Re: scrollTop is not working.

  Jun 14, 2012 06:20 PM|LINK

  Thanks for you reply. I put the grid in DIV. Still not working.
  I am having problem in this line-

  m.scrollTop = test; where test has value like - 3068.

• • Reply
  

  BU XI - MSFT

  All-Star

  22367 Points

  2704 Posts

  Microsoft

  Re: scrollTop is not working.

  Jun 15, 2012 04:20 AM|LINK

  Hello

  scrollTop eithere gets or sets a value. https://developer.mozilla.org/en/DOM/element.scrollTop

  If a DOM does not scroll, then scrollTop is always 0.

   

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com.
  Microsoft One Code Framework
• • Reply
  

  minemy2003

  None

  0 Points

  11 Posts

  Re: scrollTop is not working.

  Jun 18, 2012 03:18 PM|LINK

  I can get the value from scrollTop but cannot set it. It is always showing 0.

• • Reply
  

  BU XI - MSFT

  All-Star

  22367 Points

  2704 Posts

  Microsoft

  Re: scrollTop is not working.

  Jun 19, 2012 03:02 AM|LINK

  Hello

  To set the scrollTop property, you'll first have the scroll bar. Refer to this code snippet,

  <div id="s" style="width: 100px; height: 200px; border: 1px #333 solid; overflow: scroll;">
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
      <div style="background-color: #eee; height: 80px; margin: 2px;"></div>
  </div>
  <button onclick="document.getElementById('s').scrollTop = 100; alert(document.getElementById('s').scrollTop);">scrollTop</button>

  You can add/remove the overflow property of scroll, to see the scrollTop value.

  Please mark the replies as answers if they help or unmark if not.
  If you have any feedback about my replies, please contact msdnmg@microsoft.com.
  Microsoft One Code Framework
• • Reply
  

  Mahender Dev...

  Member

  12 Points

  1 Post

  Re: scrollTop is not working.

  Jun 22, 2012 11:17 AM|LINK

  Hi,
  
  plz use this javascript or html code:
  
  Javascript code:-
  $(function() {
  
  $(window).scroll(function(){
  if($(window).scrollTop() > 125)
  {
  $('#nav_up').fadeIn('slow');
  }
  else
  {
  $('#nav_up').fadeOut('slow');
  }
  });
  
  var $elem = $('#content');
  
  $(window).bind('scrollstart', function(){
  $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
  });
  $(window).bind('scrollstop', function(){
  $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
  });
  
  $('#nav_down').click(
  function (e) {
  $('html, body').animate({scrollTop: $elem.height()}, 800);
  }
  );
  $('#nav_up').click(
  function (e) {
  $('html, body').animate({scrollTop: '0px'}, 800);
  }
  );
  });
  
  Here html code:=
  
  
  <div id="nav_up" class="nav_up" style="display: block;"></div>
  
  Here css code:=
  
  .nav_up{
  padding:7px;
  background-color:white;
  border:1px solid #666666;
  position:fixed;
  background:transparent url(../Images/arrow_up_over.png) no-repeat top left;
  background-position:50% 50%;
  width:20px;
  height:20px;
  bottom:10px;
  opacity:0.7;
  /*right:30px;*/
  margin-left:1000px;
  display:inline;
  white-space:nowrap;
  cursor: pointer;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
  -khtml-border-top-left-radius:3px;
  -khtml-border-top-right-radius:3px;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }
  .nav_up:hover{
  padding:7px;
  background-color:white;
  border:1px solid #0099FF;
  position:fixed;
  background:transparent url(../Images/arrow_up_over.png) no-repeat top left;
  background-position:50% 50%;
  width:20px;
  height:20px;
  bottom:10px;
  opacity:0.7;
  /*right:30px;*/
  margin-left:1000px;
  display:inline;
  white-space:nowrap;
  cursor: pointer;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-top-left-radius:3px;
  -webkit-border-top-right-radius:3px;
  -khtml-border-top-left-radius:3px;
  -khtml-border-top-right-radius:3px;
  filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
  }

  http://www.hdmi.co.uk/switch.html

  http://www.hdmi.co.uk/cables.html

  http://www.hdmi.co.uk/hdmi-adapters.html

  http://www.hdmi.co.uk/switch.html

  • Marked as answer by Ming Xu - MSFT on Jun 30, 2012 01:32 PM